[APP-2170] Render GIFs through ConstrainedImage (#10453)

Co-authored-by: vineyardbovines <spencer@thepope.dev>

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

@@ -1,13 +1,13 @@
 import {useRef, useState} from 'react'
-import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
-import {clamp} from '#/lib/numbers'
 import {type EmbedPlayerParams} from '#/lib/strings/embed-player'
 import {useAutoplayDisabled} from '#/state/preferences'
 import {atoms as a, useTheme} from '#/alf'
 import {Fill} from '#/components/Fill'
+import {ConstrainedImage} from '#/components/images/AutoSizedImage'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {GifView} from '../../../../../modules/expo-bluesky-gif-view'
 import {type GifViewStateChangeEvent} from '../../../../../modules/expo-bluesky-gif-view/src/GifView.types'
@@ -19,14 +19,12 @@ export function GifEmbed({
   altText,
   isPreferredAltText,
   hideAlt,
-  style = {width: '100%'},
 }: {
   params: EmbedPlayerParams
   thumb: string | undefined
   altText: string
   isPreferredAltText: boolean
   hideAlt?: boolean
-  style?: StyleProp<ViewStyle>
 }) {
   const t = useTheme()
   const {_} = useLingui()
@@ -53,17 +51,20 @@ export function GifEmbed({
   let aspectRatio = 1
   if (params.dimensions) {
     const ratio = params.dimensions.width / params.dimensions.height
-    aspectRatio = clamp(ratio, 0.75, 4)
+    if (!Number.isNaN(ratio)) {
+      aspectRatio = ratio
     }
+  }
+  const constrained = Math.max(aspectRatio, 1 / 2)
 
   return (
+    <ConstrainedImage aspectRatio={constrained} minMobileAspectRatio={14 / 9}>
       <View
         style={[
+          a.flex_1,
           a.rounded_md,
           a.overflow_hidden,
           {backgroundColor: t.palette.black},
-        {aspectRatio},
-        style,
         ]}>
         <View
           style={[
@@ -108,5 +109,6 @@ export function GifEmbed({
           )}
         </View>
       </View>
+    </ConstrainedImage>
   )
 }

src/view/com/composer/GifAltText.tsx

@@ -216,18 +216,15 @@ function AltTextInner({
             style={[a.text_2xl, a.font_semi_bold, a.leading_tight, a.pb_sm]}>
             <Trans>Add alt text</Trans>
           </Text>
-          <View style={[a.align_center]}>
           <GifEmbed
             thumb={thumb}
             altText={altText}
             isPreferredAltText={true}
             params={params}
             hideAlt
-              style={[{height: 225}]}
           />
         </View>
       </View>
-      </View>
       <Dialog.Close />
     </Dialog.ScrollableInner>
   )