From 242c75079a9d1e50a61caeec5969736637184ef6 Mon Sep 17 00:00:00 2001
From: xmflsct <me@xmflsct.com>
Date: Sat, 11 Feb 2023 23:37:17 +0100
Subject: [PATCH] Use the new gap option

---
 ios/Podfile.lock                              |  12 +-
 .../Timeline/Shared/Attachment/Audio.tsx      |  44 ++--
 .../Timeline/Shared/Attachment/Image.tsx      |  35 ++--
 .../Shared/Attachment/Unsupported.tsx         |  12 +-
 .../Timeline/Shared/Attachment/Video.tsx      |  18 +-
 .../{Attachment.tsx => Attachment/index.tsx}  | 192 +++++++++---------
 6 files changed, 147 insertions(+), 166 deletions(-)
 rename src/components/Timeline/Shared/{Attachment.tsx => Attachment/index.tsx} (60%)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index d8170552..19c7394b 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -499,9 +499,9 @@ PODS:
     - React
   - RNSVG (13.8.0):
     - React-Core
-  - SDWebImage (5.15.0):
-    - SDWebImage/Core (= 5.15.0)
-  - SDWebImage/Core (5.15.0)
+  - SDWebImage (5.15.2):
+    - SDWebImage/Core (= 5.15.2)
+  - SDWebImage/Core (5.15.2)
   - SDWebImageAVIFCoder (0.9.5):
     - libavif (>= 0.9.1)
     - SDWebImage (~> 5.10)
@@ -769,7 +769,7 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: a7c83b31436843459a1961bfd74b96033dc77234
+  boost: 57d2868c099736d80fcd648bf211b4431e51a558
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   EXApplication: d8f53a7eee90a870a75656280e8d4b85726ea903
   EXAV: f1f69397ecdcf44cfacd4ff5d338cd1b96891e87
@@ -805,7 +805,7 @@ SPEC CHECKSUMS:
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
   MMKV: 7f34558bbb5a33b0eaefae2de4b6a20a2ffdad6f
   MMKVCore: ddf41b9d9262f058419f9ba7598719af56c02cd3
-  RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
+  RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: c154ebcfbf41d6fef86c52674fc1aa08837ff538
   RCTTypeSafety: 3063e5a1e5b1dc2cbeda5c8f8926c0ad1a6b0871
   React: 0a1a36e8e81cfaac244ed88b97f23ab56e5434f0
@@ -853,7 +853,7 @@ SPEC CHECKSUMS:
   RNSentry: 7e90aec2633d2fdad8aeb839c9915e4376fd27d1
   RNShareMenu: cb9dac548c8bf147d06f0bf07296ad51ea9f5fc3
   RNSVG: c1e76b81c76cdcd34b4e1188852892dc280eb902
-  SDWebImage: 9bec4c5cdd9579e1f57104735ee0c37df274d593
+  SDWebImage: 8ab87d4b3e5cc4927bd47f78db6ceb0b94442577
   SDWebImageAVIFCoder: d759e21cf4efb640cc97250566aa556ad8bb877c
   SDWebImageSVGCoder: 6fc109f9c2a82ab44510fff410b88b1a6c271ee8
   SDWebImageWebPCoder: 18503de6621dd2c420d680e33d46bf8e1d5169b0
diff --git a/src/components/Timeline/Shared/Attachment/Audio.tsx b/src/components/Timeline/Shared/Attachment/Audio.tsx
index ca78968d..3550ecc5 100644
--- a/src/components/Timeline/Shared/Attachment/Audio.tsx
+++ b/src/components/Timeline/Shared/Attachment/Audio.tsx
@@ -60,15 +60,23 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
   return (
     <View
       accessibilityLabel={audio.description}
-      style={[
-        styles.base,
-        {
-          backgroundColor: colors.disabled,
-          aspectRatio: aspectRatio({ total, index, ...audio.meta?.original })
-        }
-      ]}
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        backgroundColor: colors.disabled,
+        aspectRatio: aspectRatio({ total, index, ...audio.meta?.original })
+      }}
     >
-      <View style={styles.overlay}>
+      <View
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center'
+        }}
+      >
         {sensitiveShown ? (
           audio.blurhash ? (
             <GracefullyImage
@@ -88,7 +96,7 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
                   default: { uri: audio.preview_url },
                   remote: { uri: audio.preview_remote_url }
                 }}
-                style={styles.background}
+                style={{ position: 'absolute', width: '100%', height: '100%' }}
                 dim
               />
             ) : null}
@@ -139,22 +147,4 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
   )
 }
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexBasis: '50%',
-    padding: StyleConstants.Spacing.XS / 2,
-    flexDirection: 'row'
-  },
-  background: { position: 'absolute', width: '100%', height: '100%' },
-  overlay: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-})
-
 export default AttachmentAudio
diff --git a/src/components/Timeline/Shared/Attachment/Image.tsx b/src/components/Timeline/Shared/Attachment/Image.tsx
index 55cfdabb..5ee4ee33 100644
--- a/src/components/Timeline/Shared/Attachment/Image.tsx
+++ b/src/components/Timeline/Shared/Attachment/Image.tsx
@@ -1,5 +1,4 @@
 import GracefullyImage from '@components/GracefullyImage'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { View } from 'react-native'
@@ -24,27 +23,19 @@ const AttachmentImage = ({
   const { colors } = useTheme()
 
   return (
-    <View
-      style={{
-        flex: 1,
-        flexBasis: '50%',
-        padding: StyleConstants.Spacing.XS / 2
-      }}
-    >
-      <View style={{ flex: 1, backgroundColor: colors.shimmerDefault }}>
-        <GracefullyImage
-          accessibilityLabel={image.description}
-          hidden={sensitiveShown}
-          sources={{
-            default: { uri: image.preview_url },
-            remote: { uri: image.remote_url },
-            blurhash: image.blurhash
-          }}
-          onPress={() => navigateToImagesViewer(image.id)}
-          style={{ aspectRatio: aspectRatio({ total, index, ...image.meta?.original }) }}
-          dim
-        />
-      </View>
+    <View style={{ flex: 1, backgroundColor: colors.shimmerDefault, alignContent: 'center', justifyContent: 'center' }}>
+      <GracefullyImage
+        accessibilityLabel={image.description}
+        hidden={sensitiveShown}
+        sources={{
+          default: { uri: image.preview_url },
+          remote: { uri: image.remote_url },
+          blurhash: image.blurhash
+        }}
+        onPress={() => navigateToImagesViewer(image.id)}
+        style={{ aspectRatio: aspectRatio({ total, index, ...image.meta?.original }) }}
+        dim
+      />
       <AttachmentAltText sensitiveShown={sensitiveShown} text={image.description} />
     </View>
   )
diff --git a/src/components/Timeline/Shared/Attachment/Unsupported.tsx b/src/components/Timeline/Shared/Attachment/Unsupported.tsx
index 9ab3bb92..2c4003eb 100644
--- a/src/components/Timeline/Shared/Attachment/Unsupported.tsx
+++ b/src/components/Timeline/Shared/Attachment/Unsupported.tsx
@@ -25,21 +25,15 @@ const AttachmentUnsupported: React.FC<Props> = ({ total, index, sensitiveShown,
     <View
       style={{
         flex: 1,
-        flexBasis: '50%',
-        padding: StyleConstants.Spacing.XS / 2,
+        aspectRatio: aspectRatio({ total, index, ...attachment.meta?.original }),
         justifyContent: 'center',
-        alignItems: 'center',
-        aspectRatio: aspectRatio({ total, index, ...attachment.meta?.original })
+        alignItems: 'center'
       }}
     >
       {attachment.blurhash ? (
         <GracefullyImage
           sources={{ blurhash: attachment.blurhash }}
-          style={{
-            position: 'absolute',
-            width: '100%',
-            height: '100%'
-          }}
+          style={{ position: 'absolute', width: '100%', height: '100%' }}
         />
       ) : null}
       {!sensitiveShown ? (
diff --git a/src/components/Timeline/Shared/Attachment/Video.tsx b/src/components/Timeline/Shared/Attachment/Video.tsx
index 373cfca4..b019fae8 100644
--- a/src/components/Timeline/Shared/Attachment/Video.tsx
+++ b/src/components/Timeline/Shared/Attachment/Video.tsx
@@ -2,8 +2,9 @@ import Button from '@components/Button'
 import GracefullyImage from '@components/GracefullyImage'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { connectMedia } from '@utils/api/helpers/connect'
-import { useAccountStorage, useGlobalStorage } from '@utils/storage/actions'
+import { useGlobalStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
 import { Platform } from 'expo-modules-core'
 import * as ScreenOrientation from 'expo-screen-orientation'
@@ -27,13 +28,9 @@ const AttachmentVideo: React.FC<Props> = ({
   video,
   gifv = false
 }) => {
+  const { colors } = useTheme()
   const { reduceMotionEnabled } = useAccessibility()
-  const [autoplayGifv] = useGlobalStorage.boolean('app.auto_play_gifv')
-  const [preferences] = useAccountStorage.object('preferences')
-  const shouldAutoplayGifv =
-    preferences?.['reading:autoplay:gifs'] !== undefined
-      ? preferences['reading:autoplay:gifs']
-      : autoplayGifv
+  const [shouldAutoplayGifv] = useGlobalStorage.boolean('app.auto_play_gifv')
 
   const videoPlayer = useRef<Video>(null)
   const [videoLoading, setVideoLoading] = useState(false)
@@ -56,9 +53,10 @@ const AttachmentVideo: React.FC<Props> = ({
     <View
       style={{
         flex: 1,
-        flexBasis: '50%',
-        padding: StyleConstants.Spacing.XS / 2,
-        aspectRatio: aspectRatio({ total, index, ...video.meta?.original })
+        backgroundColor: colors.shimmerDefault,
+        aspectRatio: aspectRatio({ total, index, ...video.meta?.original }),
+        alignContent: 'center',
+        justifyContent: 'center'
       }}
     >
       <Video
diff --git a/src/components/Timeline/Shared/Attachment.tsx b/src/components/Timeline/Shared/Attachment/index.tsx
similarity index 60%
rename from src/components/Timeline/Shared/Attachment.tsx
rename to src/components/Timeline/Shared/Attachment/index.tsx
index a10fb3dd..087754a0 100644
--- a/src/components/Timeline/Shared/Attachment.tsx
+++ b/src/components/Timeline/Shared/Attachment/index.tsx
@@ -9,10 +9,11 @@ import { StackNavigationProp } from '@react-navigation/stack'
 import { RootStackParamList } from '@utils/navigation/navigators'
 import { usePreferencesQuery } from '@utils/queryHooks/preferences'
 import { StyleConstants } from '@utils/styles/constants'
+import { chunk } from 'lodash'
 import React, { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
-import StatusContext from './Context'
+import StatusContext from '../Context'
 
 const TimelineAttachment = () => {
   const { status, disableDetails } = useContext(StatusContext)
@@ -96,98 +97,105 @@ const TimelineAttachment = () => {
     navigation.navigate('Screen-ImagesViewer', { imageUrls, id })
   }
 
+  const mapAttachmentType = (attachment: Mastodon.Attachment, index: number) => {
+    switch (attachment.type) {
+      case 'image':
+        return (
+          <AttachmentImage
+            total={status.media_attachments.length}
+            index={index}
+            sensitiveShown={sensitiveShown}
+            image={attachment}
+            navigateToImagesViewer={navigateToImagesViewer}
+          />
+        )
+      case 'video':
+        return (
+          <AttachmentVideo
+            total={status.media_attachments.length}
+            index={index}
+            sensitiveShown={sensitiveShown}
+            video={attachment}
+          />
+        )
+      case 'gifv':
+        return (
+          <AttachmentVideo
+            total={status.media_attachments.length}
+            index={index}
+            sensitiveShown={sensitiveShown}
+            video={attachment}
+            gifv
+          />
+        )
+      case 'audio':
+        return (
+          <AttachmentAudio
+            total={status.media_attachments.length}
+            index={index}
+            sensitiveShown={sensitiveShown}
+            audio={attachment}
+          />
+        )
+      default:
+        if (
+          // https://docs.expo.dev/versions/unversioned/sdk/image/#supported-image-formats
+          attachment.preview_url?.match(/.(?:a?png|jpe?g|webp|avif|heic|gif|svg|ico|icns)$/i) ||
+          attachment.remote_url?.match(/.(?:a?png|jpe?g|webp|avif|heic|gif|svg|ico|icns)$/i)
+        ) {
+          return (
+            <AttachmentImage
+              total={status.media_attachments.length}
+              index={index}
+              sensitiveShown={sensitiveShown}
+              image={attachment as unknown as Mastodon.AttachmentImage}
+              navigateToImagesViewer={navigateToImagesViewer}
+            />
+          )
+        } else if (attachment.remote_url?.match(/.(?:mp4|mkv)$/i)) {
+          return (
+            <AttachmentVideo
+              total={status.media_attachments.length}
+              index={index}
+              sensitiveShown={sensitiveShown}
+              video={attachment as unknown as Mastodon.AttachmentVideo}
+            />
+          )
+        } else {
+          return (
+            <AttachmentUnsupported
+              total={status.media_attachments.length}
+              index={index}
+              sensitiveShown={sensitiveShown}
+              attachment={attachment}
+            />
+          )
+        }
+    }
+  }
+
   return (
-    <View>
-      <View
-        style={{
-          marginTop: StyleConstants.Spacing.S,
-          flex: 1,
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          alignContent: 'stretch'
-        }}
-      >
-        {status.media_attachments.map((attachment, index) => {
-          switch (attachment.type) {
-            case 'image':
-              return (
-                <AttachmentImage
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  image={attachment}
-                  navigateToImagesViewer={navigateToImagesViewer}
-                />
-              )
-            case 'video':
-              return (
-                <AttachmentVideo
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  video={attachment}
-                />
-              )
-            case 'gifv':
-              return (
-                <AttachmentVideo
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  video={attachment}
-                  gifv
-                />
-              )
-            case 'audio':
-              return (
-                <AttachmentAudio
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  audio={attachment}
-                />
-              )
-            default:
-              if (
-                attachment.preview_url?.endsWith('.jpg') ||
-                attachment.preview_url?.endsWith('.jpeg') ||
-                attachment.preview_url?.endsWith('.png') ||
-                attachment.preview_url?.endsWith('.gif') ||
-                attachment.remote_url?.endsWith('.jpg') ||
-                attachment.remote_url?.endsWith('.jpeg') ||
-                attachment.remote_url?.endsWith('.png') ||
-                attachment.remote_url?.endsWith('.gif')
-              ) {
-                return (
-                  <AttachmentImage
-                    key={index}
-                    total={status.media_attachments.length}
-                    index={index}
-                    sensitiveShown={sensitiveShown}
-                    // @ts-ignore
-                    image={attachment}
-                    navigateToImagesViewer={navigateToImagesViewer}
-                  />
-                )
-              } else {
-                return (
-                  <AttachmentUnsupported
-                    key={index}
-                    total={status.media_attachments.length}
-                    index={index}
-                    sensitiveShown={sensitiveShown}
-                    attachment={attachment}
-                  />
-                )
-              }
-          }
-        })}
-      </View>
+    <View
+      style={{
+        marginTop: StyleConstants.Spacing.M,
+        flex: 1,
+        gap: StyleConstants.Spacing.XS
+      }}
+    >
+      {chunk(status.media_attachments, 2).map((chunk, chunkIndex) => (
+        <View
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignContent: 'stretch',
+            gap: StyleConstants.Spacing.XS
+          }}
+        >
+          {chunk.map((a, aIndex) => mapAttachmentType(a, chunkIndex * 2 + aIndex))}
+        </View>
+      ))}
 
       {defaultSensitive() &&
         (sensitiveShown ? (