From f0f55d42cb9c3eb59f37f51e88e97930911641d0 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 14 Aug 2025 11:37:25 +0300
Subject: [PATCH] allow gifs on native, treat as videos

---
 src/lib/media/video/compress.ts               |  7 +++++
 src/view/com/composer/SelectMediaButton.tsx   |  7 ++++-
 src/view/com/composer/videos/VideoPreview.tsx | 31 +++++++++++++------
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/lib/media/video/compress.ts b/src/lib/media/video/compress.ts
index ae6eeae3aa..1d00bfcea1 100644
--- a/src/lib/media/video/compress.ts
+++ b/src/lib/media/video/compress.ts
@@ -20,6 +20,13 @@ export async function compressVideo(
     file.mimeType as SupportedMimeTypes,
   )
 
+  if (file.mimeType === 'image/gif') {
+    // let's hope they're small enough that they don't need compression!
+    // this compression library doesn't support gifs
+    // worst case - server rejects them. I think that's fine -sfn
+    return {uri: file.uri, size: file.fileSize ?? -1, mimeType: 'image/gif'}
+  }
+
   const minimumFileSizeForCompress = isAcceptableFormat
     ? MIN_SIZE_FOR_COMPRESSION
     : 0
diff --git a/src/view/com/composer/SelectMediaButton.tsx b/src/view/com/composer/SelectMediaButton.tsx
index 7cd140ab72..3a1a5fd8f9 100644
--- a/src/view/com/composer/SelectMediaButton.tsx
+++ b/src/view/com/composer/SelectMediaButton.tsx
@@ -1,4 +1,5 @@
 import {useCallback} from 'react'
+import {Keyboard} from 'react-native'
 import {
   type ImagePickerAsset,
   launchImageLibraryAsync,
@@ -176,7 +177,7 @@ function classifyImagePickerAsset(asset: ImagePickerAsset):
    * Distill this down into a type "class".
    */
   let type: AssetType | undefined
-  if (isWeb && mimeType === 'image/gif') {
+  if (mimeType === 'image/gif') {
     type = 'gif'
   } else if (mimeType?.startsWith('video/')) {
     type = 'video'
@@ -436,6 +437,10 @@ export function SelectMediaButton({
       }
     }
 
+    if (Keyboard.isVisible()) {
+      Keyboard.dismiss()
+    }
+
     const {assets, canceled} = await sheetWrapper(
       launchImageLibraryAsync({
         exif: false,
diff --git a/src/view/com/composer/videos/VideoPreview.tsx b/src/view/com/composer/videos/VideoPreview.tsx
index 255174beab..84cb1dba75 100644
--- a/src/view/com/composer/videos/VideoPreview.tsx
+++ b/src/view/com/composer/videos/VideoPreview.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import {View} from 'react-native'
-import {ImagePickerAsset} from 'expo-image-picker'
+import {Image} from 'expo-image'
+import {type ImagePickerAsset} from 'expo-image-picker'
 import {BlueskyVideoView} from '@haileyok/bluesky-video'
 
-import {CompressedVideo} from '#/lib/media/video/types'
+import {type CompressedVideo} from '#/lib/media/video/types'
 import {clamp} from '#/lib/numbers'
 import {useAutoplayDisabled} from '#/state/preferences'
 import {ExternalEmbedRemoveBtn} from '#/view/com/composer/ExternalEmbedRemoveBtn'
@@ -48,13 +49,25 @@ export function VideoPreview({
         <VideoTranscodeBackdrop uri={asset.uri} />
       </View>
       {isActivePost && (
-        <BlueskyVideoView
-          url={video.uri}
-          autoplay={!autoplayDisabled}
-          beginMuted={true}
-          forceTakeover={true}
-          ref={playerRef}
-        />
+        <>
+          {video.mimeType === 'image/gif' ? (
+            <Image
+              style={[a.flex_1]}
+              autoplay={!autoplayDisabled}
+              source={{uri: video.uri}}
+              accessibilityIgnoresInvertColors
+              cachePolicy="none"
+            />
+          ) : (
+            <BlueskyVideoView
+              url={video.uri}
+              autoplay={!autoplayDisabled}
+              beginMuted={true}
+              forceTakeover={true}
+              ref={playerRef}
+            />
+          )}
+        </>
       )}
       <ExternalEmbedRemoveBtn onRemove={clear} />
       {autoplayDisabled && (