align alt text behaviour between gif types (#9822)

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

@@ -1,25 +1,14 @@
 import {useRef, useState} from 'react'
-import {
-  type StyleProp,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  type ViewStyle,
-} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {HITSLOP_20} from '#/lib/constants'
 import {clamp} from '#/lib/numbers'
 import {type EmbedPlayerParams} from '#/lib/strings/embed-player'
 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 {MediaInsetBorder} from '#/components/MediaInsetBorder'
-import * as Prompt from '#/components/Prompt'
-import {Text} from '#/components/Typography'
-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'
 import {GifPresentationControls} from '../VideoEmbed/GifPresentationControls'
@@ -94,6 +83,7 @@ export function GifEmbed({
           onPress={onPress}
           isPlaying={playerState.isPlaying}
           isLoading={!playerState.isLoaded}
+          altText={!hideAlt && isPreferredAltText ? altText : undefined}
         />
         <GifView
           source={params.playerUri}
@@ -115,68 +105,7 @@ export function GifEmbed({
             ]}
           />
         )}
-        {!hideAlt && isPreferredAltText && <AltText text={altText} />}
       </View>
     </View>
   )
 }
-
-function AltText({text}: {text: string}) {
-  const control = Prompt.usePromptControl()
-  const largeAltBadge = useLargeAltBadgeEnabled()
-
-  const {_} = useLingui()
-  return (
-    <>
-      <TouchableOpacity
-        testID="altTextButton"
-        accessibilityRole="button"
-        accessibilityLabel={_(msg`Show alt text`)}
-        accessibilityHint=""
-        hitSlop={HITSLOP_20}
-        onPress={control.open}
-        style={styles.altContainer}>
-        <Text
-          style={[styles.alt, largeAltBadge && a.text_xs]}
-          accessible={false}>
-          <Trans>ALT</Trans>
-        </Text>
-      </TouchableOpacity>
-      <Prompt.Outer control={control}>
-        <Prompt.Content>
-          <Prompt.TitleText>
-            <Trans>Alt Text</Trans>
-          </Prompt.TitleText>
-          <Prompt.DescriptionText selectable>{text}</Prompt.DescriptionText>
-        </Prompt.Content>
-        <Prompt.Actions>
-          <Prompt.Action
-            onPress={() => control.close()}
-            cta={_(msg`Close`)}
-            color="secondary"
-          />
-        </Prompt.Actions>
-      </Prompt.Outer>
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  altContainer: {
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-    borderRadius: 6,
-    paddingHorizontal: IS_WEB ? 8 : 6,
-    paddingVertical: IS_WEB ? 6 : 3,
-    position: 'absolute',
-    // Related to margin/gap hack. This keeps the alt label in the same position
-    // on all platforms
-    right: IS_WEB ? 8 : 5,
-    bottom: IS_WEB ? 8 : 5,
-    zIndex: 2,
-  },
-  alt: {
-    color: 'white',
-    fontSize: IS_WEB ? 10 : 7,
-    fontWeight: '600',
-  },
-})