Use the new gap option

2025-06-05 22:19:13 +02:00 · 2023-02-11 23:37:17 +01:00
parent b679c0760f
commit 242c75079a
6 changed files with 147 additions and 166 deletions
--- 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
--- 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
--- 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>
  )
--- 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 ? (
--- 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
--- a/src/components/Timeline/Shared/Attachment/index.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 ? (