From a0a5967264376dcf4900f46ae1141301767cfb95 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 5 Oct 2024 20:04:53 +0900
Subject: [PATCH] Split GifEmbed props

---
 src/view/com/composer/GifAltText.tsx          |  4 +++-
 .../util/post-embeds/ExternalLinkEmbed.tsx    | 12 ++++++++++-
 src/view/com/util/post-embeds/GifEmbed.tsx    | 21 ++++++++-----------
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index 90d20d94f7..9b1d12b3ce 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -200,7 +200,9 @@ function AltTextInner({
           </Text>
           <View style={[a.align_center]}>
             <GifEmbed
-              link={link}
+              thumb={link.thumb}
+              altText={altText}
+              isPreferredAltText={true}
               params={params}
               hideAlt
               style={[native({maxHeight: 225})]}
diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
index 98332c33b0..eb03385d0a 100644
--- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
+++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
@@ -5,6 +5,7 @@ import {AppBskyEmbedExternal} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {shareUrl} from '#/lib/sharing'
@@ -55,7 +56,16 @@ export const ExternalLinkEmbed = ({
   }, [link.uri, externalEmbedPrefs])
 
   if (embedPlayerParams?.source === 'tenor') {
-    return <GifEmbed params={embedPlayerParams} link={link} hideAlt={hideAlt} />
+    const parsedAlt = parseAltFromGIFDescription(link.description)
+    return (
+      <GifEmbed
+        params={embedPlayerParams}
+        thumb={link.thumb}
+        altText={parsedAlt.alt}
+        isPreferredAltText={parsedAlt.isPreferred}
+        hideAlt={hideAlt}
+      />
+    )
   }
 
   return (
diff --git a/src/view/com/util/post-embeds/GifEmbed.tsx b/src/view/com/util/post-embeds/GifEmbed.tsx
index a1af6ab26b..fc66278c95 100644
--- a/src/view/com/util/post-embeds/GifEmbed.tsx
+++ b/src/view/com/util/post-embeds/GifEmbed.tsx
@@ -7,12 +7,10 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {AppBskyEmbedExternal} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {HITSLOP_20} from '#/lib/constants'
-import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
 import {EmbedPlayerParams} from '#/lib/strings/embed-player'
 import {isWeb} from '#/platform/detection'
 import {useAutoplayDisabled} from '#/state/preferences'
@@ -77,12 +75,16 @@ function PlaybackControls({
 
 export function GifEmbed({
   params,
-  link,
+  thumb,
+  altText,
+  isPreferredAltText,
   hideAlt,
   style = {width: '100%'},
 }: {
   params: EmbedPlayerParams
-  link: AppBskyEmbedExternal.ViewExternal
+  thumb: string | undefined
+  altText: string
+  isPreferredAltText: boolean
   hideAlt?: boolean
   style?: StyleProp<ViewStyle>
 }) {
@@ -111,11 +113,6 @@ export function GifEmbed({
     playerRef.current?.toggleAsync()
   }, [])
 
-  const parsedAlt = React.useMemo(
-    () => parseAltFromGIFDescription(link.description),
-    [link],
-  )
-
   return (
     <View style={[a.rounded_md, a.overflow_hidden, a.mt_sm, style]}>
       <View
@@ -131,13 +128,13 @@ export function GifEmbed({
         />
         <GifView
           source={params.playerUri}
-          placeholderSource={link.thumb}
+          placeholderSource={thumb}
           style={[a.flex_1, a.rounded_md]}
           autoplay={!autoplayDisabled}
           onPlayerStateChange={onPlayerStateChange}
           ref={playerRef}
           accessibilityHint={_(msg`Animated GIF`)}
-          accessibilityLabel={parsedAlt.alt}
+          accessibilityLabel={altText}
         />
         {!playerState.isPlaying && (
           <Fill
@@ -150,7 +147,7 @@ export function GifEmbed({
           />
         )}
         <MediaInsetBorder />
-        {!hideAlt && parsedAlt.isPreferred && <AltText text={parsedAlt.alt} />}
+        {!hideAlt && isPreferredAltText && <AltText text={altText} />}
       </View>
     </View>
   )