wip

src/components/Post/Embed/ExternalEmbed/Gif.tsx

@@ -56,6 +56,8 @@ export function GifEmbed({
     aspectRatio = clamp(ratio, 0.75, 4)
   }
 
+  console.log('[gif debug]', params.source, params.playerUri)
+
   return (
     <View
       style={[

src/features/gifPicker/components/GifPickerGrid.tsx

@@ -107,7 +107,7 @@ function distributeIntoColumns(items: Gif[], numColumns: number): Gif[][] {
   const heights = new Array(numColumns).fill(0)
 
   for (const item of items) {
-    const [w, h] = item.media_formats.tinygif.dims
+    const [w, h] = item.media_formats.mediumgif.dims
     const ratio = w > 0 && h > 0 ? h / w : 1
 
     let shortest = 0

src/features/gifPicker/components/GifPickerItem.tsx

@@ -18,7 +18,8 @@ export function GifPickerItem({
   const {t: l} = useLingui()
   const t = useTheme()
 
-  const [width, height] = gif.media_formats.tinygif.dims
+  const sourceFormat = gif.media_formats.webp ?? gif.media_formats.mediumgif
+  const [width, height] = sourceFormat.dims
   const aspectRatio = width > 0 && height > 0 ? width / height : 1
 
   const onPress = () => {
@@ -47,7 +48,9 @@ export function GifPickerItem({
               transform: [{scale: pressed ? 0.97 : 1}],
             },
           ]}
-          source={{uri: gifPreviewUrl(gif.media_formats.tinygif.url)}}
+          source={{uri: gifPreviewUrl(sourceFormat.url)}}
+          placeholder={{uri: gifPreviewUrl(gif.media_formats.tinygif.url)}}
+          placeholderContentFit="cover"
           contentFit="cover"
           accessibilityLabel={gif.title}
           accessibilityHint=""

src/features/gifPicker/types.ts

@@ -8,7 +8,7 @@ export type Gif = {
   hasaudio: boolean
   id: string
   media_formats: Record<BaseContentFormats, MediaObject> &
-    Partial<Record<VideoContentFormats, MediaObject>>
+    Partial<Record<VideoContentFormats | 'webp', MediaObject>>
   tags: string[]
   title: string
   content_description: string
@@ -26,7 +26,7 @@ type MediaObject = {
   size: number
 }
 
-type BaseContentFormats = 'preview' | 'gif' | 'tinygif'
+type BaseContentFormats = 'preview' | 'gif' | 'mediumgif' | 'tinygif'
 
 type VideoContentFormats = 'mp4' | 'webm'
 

src/view/com/composer/drafts/state/api.ts

@@ -508,6 +508,7 @@ export async function draftToComposerPosts(
                 url: gifData.url, // Required for useResolveGifQuery
                 media_formats: {
                   gif: mediaObject,
+                  mediumgif: mediaObject,
                   tinygif: mediaObject,
                   preview: mediaObject,
                 },