From 4cabb85344a6a0b319bdf81a3d93280e7b43ca3a Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 2 Feb 2026 15:06:03 -0600
Subject: [PATCH] reuse gif controls component for tenor gifs

---
 .../Post/Embed/ExternalEmbed/Gif.tsx          | 59 ++-----------------
 .../VideoEmbed/GifPresentationControls.tsx    |  6 +-
 2 files changed, 7 insertions(+), 58 deletions(-)

diff --git a/src/components/Post/Embed/ExternalEmbed/Gif.tsx b/src/components/Post/Embed/ExternalEmbed/Gif.tsx
index 0a455b546e..21211e3b33 100644
--- a/src/components/Post/Embed/ExternalEmbed/Gif.tsx
+++ b/src/components/Post/Embed/ExternalEmbed/Gif.tsx
@@ -1,6 +1,5 @@
 import {useRef, useState} from 'react'
 import {
-  Pressable,
   type StyleProp,
   StyleSheet,
   TouchableOpacity,
@@ -17,60 +16,13 @@ import {useAutoplayDisabled} from '#/state/preferences'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 import {atoms as a, useTheme} from '#/alf'
 import {Fill} from '#/components/Fill'
-import {Loader} from '#/components/Loader'
+import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
-import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
 import {IS_WEB} from '#/env'
 import {GifView} from '../../../../../modules/expo-bluesky-gif-view'
 import {type GifViewStateChangeEvent} from '../../../../../modules/expo-bluesky-gif-view/src/GifView.types'
-
-function PlaybackControls({
-  onPress,
-  isPlaying,
-  isLoaded,
-}: {
-  onPress: () => void
-  isPlaying: boolean
-  isLoaded: boolean
-}) {
-  const {_} = useLingui()
-  const t = useTheme()
-
-  return (
-    <Pressable
-      accessibilityRole="button"
-      accessibilityHint={_(msg`Plays or pauses the GIF`)}
-      accessibilityLabel={isPlaying ? _(msg`Pause`) : _(msg`Play`)}
-      style={[
-        a.absolute,
-        a.align_center,
-        a.justify_center,
-        !isLoaded && a.border,
-        t.atoms.border_contrast_medium,
-        a.inset_0,
-        a.w_full,
-        a.h_full,
-        {
-          zIndex: 2,
-          backgroundColor: !isLoaded
-            ? t.atoms.bg_contrast_25.backgroundColor
-            : undefined,
-        },
-      ]}
-      onPress={onPress}>
-      {!isLoaded ? (
-        <View>
-          <View style={[a.align_center, a.justify_center]}>
-            <Loader size="xl" />
-          </View>
-        </View>
-      ) : !isPlaying ? (
-        <PlayButtonIcon />
-      ) : undefined}
-    </Pressable>
-  )
-}
+import {GifPresentationControls} from '../VideoEmbed/GifPresentationControls'
 
 export function GifEmbed({
   params,
@@ -120,8 +72,6 @@ export function GifEmbed({
       style={[
         a.rounded_md,
         a.overflow_hidden,
-        a.border,
-        t.atoms.border_contrast_low,
         {backgroundColor: t.palette.black},
         {aspectRatio},
         style,
@@ -139,10 +89,11 @@ export function GifEmbed({
             right: -2,
           },
         ]}>
-        <PlaybackControls
+        <MediaInsetBorder />
+        <GifPresentationControls
           onPress={onPress}
           isPlaying={playerState.isPlaying}
-          isLoaded={playerState.isLoaded}
+          isLoading={!playerState.isLoaded}
         />
         <GifView
           source={params.playerUri}
diff --git a/src/components/Post/Embed/VideoEmbed/GifPresentationControls.tsx b/src/components/Post/Embed/VideoEmbed/GifPresentationControls.tsx
index e8fbad778b..aaeaf742d5 100644
--- a/src/components/Post/Embed/VideoEmbed/GifPresentationControls.tsx
+++ b/src/components/Post/Embed/VideoEmbed/GifPresentationControls.tsx
@@ -33,9 +33,7 @@ export function GifPresentationControls({
           a.inset_0,
           a.w_full,
           a.h_full,
-          {
-            zIndex: 2,
-          },
+          {zIndex: 2},
         ]}
         onPress={onPress}>
         {isLoading ? (
@@ -51,7 +49,7 @@ export function GifPresentationControls({
           style={[
             t.name === 'light' ? t.atoms.bg_contrast_975 : t.atoms.bg,
             {
-              opacity: 0.3,
+              opacity: 0.2,
               zIndex: 1,
             },
           ]}