Rewrite dynamic media width

App.tsx

@@ -1,3 +1,4 @@
+import NetInfo from '@react-native-community/netinfo'
 import client from '@root/api/client'
 import { Index } from '@root/Index'
 import { persistor, store } from '@root/store'
@@ -6,7 +7,7 @@ import ThemeManager from '@utils/styles/ThemeManager'
 import * as SplashScreen from 'expo-splash-screen'
 import React, { useCallback, useEffect, useState } from 'react'
 import { enableScreens } from 'react-native-screens'
-import { QueryClient, QueryClientProvider } from 'react-query'
+import { onlineManager, QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react'
 import * as Sentry from 'sentry-expo'
@@ -19,6 +20,12 @@ if (__DEV__) {
   })
 }
 
+// onlineManager.setEventListener(setOnline => {
+//   return NetInfo.addEventListener(state => {
+//     setOnline(state.isConnected)
+//   })
+// })
+
 Sentry.init({
   dsn:
     'https://c9e29aa05f774aca8f36def98244ce04@o389581.ingest.sentry.io/5571975',
@@ -30,7 +37,15 @@ const queryClient = new QueryClient()
 
 enableScreens()
 
+NetInfo.fetch().then(state => {
+  console.log('Connection type', state.type)
+  console.log('Is connected?', state.isConnected)
+  console.log('Is internet', state.isInternetReachable)
+  console.log('Details', state.details)
+})
+
 const App: React.FC = () => {
+  useEffect(() => onlineManager.setOnline(false), [])
   const [appLoaded, setAppLoaded] = useState(false)
   const [startVerification, setStartVerification] = useState(false)
   const [localCorrupt, setLocalCorrupt] = useState(false)

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@expo/vector-icons": "^12.0.0",
     "@react-native-community/masked-view": "0.1.10",
+    "@react-native-community/netinfo": "^5.9.9",
     "@react-native-community/segmented-control": "2.2.1",
     "@react-native-community/slider": "3.0.3",
     "@react-navigation/bottom-tabs": "^5.11.2",

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(() => {
+  const onPressReply = useCallback(
-    navigation.navigate(getCurrentTab(navigation), {
+    () =>
-      screen: 'Screen-Shared-Compose',
+      navigation.navigate(getCurrentTab(navigation), {
-      params: {
+        screen: 'Screen-Shared-Compose',
-        type: 'reply',
+        params: {
-        incomingStatus: status,
+          type: 'reply',
-        visibilityLock: status.visibility === 'direct'
+          incomingStatus: status,
-      }
+          visibilityLock: status.visibility === 'direct'
-    })
+        }
-  }, [])
+      }),
-  const onPressReblog = useCallback(() => {
+    []
-    if (status.visibility !== 'private' && 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
+    <View style={styles.base}>
-      style={[
-        styles.base,
-        { width: contentWidth, height: (contentWidth / 16) * 9 }
-      ]}
-    >
       {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,
+          position: 'absolute',
-          alignSelf: 'flex-end',
+          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(() => {
+  const onPress = useCallback(() => navigateToImagesViewer(imageIndex), [])
-    if (imageVisible && !sensitiveShown) {
-      navigateToImagesViewer(imageIndex)
-    }
-  }, [imageVisible, sensitiveShown])
 
   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,
+          width: '100%',
-          height
+          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(() => {

yarn.lock

@@ -1702,6 +1702,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401"
   integrity sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==
 
+"@react-native-community/netinfo@^5.9.9":
+  version "5.9.9"
+  resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-5.9.9.tgz#5e022637f5e08bd74bf94a0c3315748acd4589f9"
+  integrity sha512-Gp0XV4BgabvzkL4Dp6JAsA2l9LcmgBAq3erCLdvRZmEFz7guCWTogQWVfFtl+IbU0uqfwfo9fm2+mQiwdudLCw==
+
 "@react-native-community/segmented-control@2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@react-native-community/segmented-control/-/segmented-control-2.2.1.tgz#5ca418d78c5f6051353c9586918458713b88a83c"
@@ -2175,7 +2180,7 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-test-renderer@*", "@types/react-test-renderer@^16.13.1":
+"@types/react-test-renderer@*", "@types/react-test-renderer@^17.0.0":
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.0.tgz#9be47b375eeb906fced37049e67284a438d56620"
   integrity sha512-nvw+F81OmyzpyIE1S0xWpLonLUZCMewslPuA8BtjSKc5XEbn8zEQBXS7KuOLHTNnSOEM2Pum50gHOoZ62tqTRg==