Rewrite dynamic media width

src/components/Header/Right.tsx

@@ -71,8 +71,9 @@ const HeaderRight: React.FC<Props> = ({
 
   return (
     <Pressable
-      {...(!disabled && !loading && { onPress })}
+      onPress={onPress}
       children={children}
+      disabled={disabled || loading}
       style={[
         styles.base,
         {

src/components/Timelines/Timeline/Default.tsx

@@ -54,7 +54,7 @@ const TimelineDefault: React.FC<Props> = ({
     []
   )
   return (
-    <Pressable style={styles.statusView} onPress={onPress} disabled={true}>
+    <Pressable style={styles.statusView} onPress={onPress}>
       {item.reblog ? (
         <TimelineActioned action='reblog' account={item.account} />
       ) : pinnedLength && index < pinnedLength ? (

src/components/Timelines/Timeline/Shared/Actions.tsx

@@ -125,26 +125,28 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
     }
   })
 
-  const onPressReply = useCallback(() => {
-    navigation.navigate(getCurrentTab(navigation), {
-      screen: 'Screen-Shared-Compose',
-      params: {
-        type: 'reply',
-        incomingStatus: status,
-        visibilityLock: status.visibility === 'direct'
-      }
-    })
-  }, [])
-  const onPressReblog = useCallback(() => {
-    if (status.visibility !== 'private' && status.visibility !== 'direct') {
+  const onPressReply = useCallback(
+    () =>
+      navigation.navigate(getCurrentTab(navigation), {
+        screen: 'Screen-Shared-Compose',
+        params: {
+          type: 'reply',
+          incomingStatus: status,
+          visibilityLock: status.visibility === 'direct'
+        }
+      }),
+    []
+  )
+  const onPressReblog = useCallback(
+    () =>
       mutate({
         id: status.id,
         type: 'reblog',
         stateKey: 'reblogged',
         prevState: status.reblogged
-      })
-    }
-  }, [status.reblogged])
+      }),
+    [status.reblogged]
+  )
   const onPressFavourite = useCallback(
     () =>
       mutate({
@@ -264,6 +266,9 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
           style={styles.action}
           onPress={onPressReblog}
           children={childrenReblog}
+          disabled={
+            status.visibility === 'private' || status.visibility === 'direct'
+          }
         />
 
         <Pressable

src/components/Timelines/Timeline/Shared/Attachment.tsx

@@ -95,12 +95,7 @@ const TimelineAttachment: React.FC<Props> = ({ status, contentWidth }) => {
   )
 
   return (
-    <View
-      style={[
-        styles.base,
-        { width: contentWidth, height: (contentWidth / 16) * 9 }
-      ]}
-    >
+    <View style={styles.base}>
       {attachments}
 
       {status.sensitive &&
@@ -150,8 +145,13 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     flexWrap: 'wrap',
+    justifyContent: 'center',
     alignContent: 'stretch'
   },
+  container: {
+    flexBasis: '50%',
+    aspectRatio: 16 / 9
+  },
   sensitiveBlur: {
     position: 'absolute',
     width: '100%',

src/components/Timelines/Timeline/Shared/Attachment/Audio.tsx

@@ -44,7 +44,7 @@ const AttachmentAudio: React.FC<Props> = ({ sensitiveShown, audio }) => {
   }, [audioPlayer])
 
   return (
-    <>
+    <View style={styles.base}>
       <View style={styles.overlay}>
         {sensitiveShown ? (
           audio.blurhash && (
@@ -67,8 +67,9 @@ const AttachmentAudio: React.FC<Props> = ({ sensitiveShown, audio }) => {
             )}
             <Button
               type='icon'
-              content={audioPlaying ? 'pause' : 'play'}
+              content={audioPlaying ? 'pause-circle' : 'play-circle'}
               size='L'
+              round
               overlay
               {...(audioPlaying
                 ? { onPress: pauseAudio }
@@ -79,8 +80,9 @@ const AttachmentAudio: React.FC<Props> = ({ sensitiveShown, audio }) => {
       </View>
       <View
         style={{
-          flex: 1,
-          alignSelf: 'flex-end',
+          position: 'absolute',
+          bottom: 0,
+          width: '100%',
           backgroundColor: theme.backgroundOverlay,
           paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
           paddingVertical: StyleConstants.Spacing.XS,
@@ -106,11 +108,17 @@ const AttachmentAudio: React.FC<Props> = ({ sensitiveShown, audio }) => {
           }}
         />
       </View>
-    </>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
+  base: {
+    flex: 1,
+    flexBasis: '50%',
+    aspectRatio: 16 / 9,
+    padding: StyleConstants.Spacing.XS / 2
+  },
   background: { position: 'absolute', width: '100%', height: '100%' },
   overlay: {
     position: 'absolute',

src/components/Timelines/Timeline/Shared/Attachment/Image.tsx

@@ -72,25 +72,23 @@ const AttachmentImage: React.FC<Props> = ({
       )
     }
   }, [imageVisible, sensitiveShown])
-  const onPress = useCallback(() => {
-    if (imageVisible && !sensitiveShown) {
-      navigateToImagesViewer(imageIndex)
-    }
-  }, [imageVisible, sensitiveShown])
+  const onPress = useCallback(() => navigateToImagesViewer(imageIndex), [])
 
   return (
     <Pressable
-      style={[styles.imageContainer]}
+      style={[styles.base]}
       children={children}
       onPress={onPress}
+      disabled={!imageVisible || sensitiveShown}
     />
   )
 }
 
 const styles = StyleSheet.create({
-  imageContainer: {
+  base: {
     flex: 1,
     flexBasis: '50%',
+    aspectRatio: 16 / 9,
     padding: StyleConstants.Spacing.XS / 2
   },
   image: {

src/components/Timelines/Timeline/Shared/Attachment/Video.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useRef, useState } from 'react'
-import { Pressable, StyleSheet } from 'react-native'
+import { Pressable, StyleSheet, View } from 'react-native'
 import { Video } from 'expo-av'
 import Button from '@components/Button'
 import { Surface } from 'gl-react-expo'
 import { Blurhash } from 'gl-react-blurhash'
+import { StyleConstants } from '@root/utils/styles/constants'
 
 export interface Props {
   sensitiveShown: boolean
@@ -41,16 +42,17 @@ const AttachmentVideo: React.FC<Props> = ({
   }, [videoLoaded, videoPosition])
 
   return (
-    <>
+    <View style={styles.base}>
       <Video
         ref={videoPlayer}
         style={{
-          width,
-          height
+          width: '100%',
+          height: '100%'
         }}
         resizeMode='cover'
         usePoster
         posterSource={{ uri: video.preview_url }}
+        posterStyle={{ flex: 1 }}
         useNativeControls={false}
       />
       <Pressable style={styles.overlay}>
@@ -66,18 +68,25 @@ const AttachmentVideo: React.FC<Props> = ({
         ) : (
           <Button
             type='icon'
-            content='play'
+            content='play-circle'
             size='L'
+            round
             overlay
             onPress={playOnPress}
           />
         )}
       </Pressable>
-    </>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
+  base: {
+    flex: 1,
+    flexBasis: '50%',
+    aspectRatio: 16 / 9,
+    padding: StyleConstants.Spacing.XS / 2
+  },
   overlay: {
     position: 'absolute',
     width: '100%',

src/components/Timelines/Timeline/Shared/Avatar.tsx

@@ -3,7 +3,6 @@ import { Pressable, StyleSheet } from 'react-native'
 import { Image } from 'react-native-expo-image-cache'
 import { StyleConstants } from '@utils/styles/constants'
 import { useNavigation } from '@react-navigation/native'
-import { useTheme } from '@root/utils/styles/ThemeManager'
 
 export interface Props {
   queryKey?: QueryKey.Timeline
@@ -11,7 +10,6 @@ export interface Props {
 }
 
 const TimelineAvatar: React.FC<Props> = ({ queryKey, account }) => {
-  const { mode } = useTheme()
   const navigation = useNavigation()
   // Need to fix go back root
   const onPress = useCallback(() => {