Fix video alt text (#10947)

src/components/Post/Embed/VideoEmbed/GifPresentationControls.tsx

@@ -74,7 +74,7 @@ export function GifPresentationControls({
   )
 }
 
-function AltBadge({text}: {text: string}) {
+export function AltBadge({text}: {text: string}) {
   const control = Prompt.usePromptControl()
   const {_} = useLingui()
 
@@ -131,7 +131,7 @@ const styles = StyleSheet.create({
     paddingVertical: 3,
     position: 'absolute',
     right: 6,
-    bottom: 6,
+    top: 6,
     zIndex: 2,
   },
 })

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerNative.tsx

@@ -16,7 +16,7 @@ import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/compone
 import {KeepAwake} from '#/components/KeepAwake'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {useVideoMuteState} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
-import {GifPresentationControls} from '../GifPresentationControls'
+import {AltBadge, GifPresentationControls} from '../GifPresentationControls'
 import {TimeIndicator} from './TimeIndicator'
 
 export function VideoEmbedInnerNative({
@@ -112,6 +112,7 @@ export function VideoEmbedInnerNative({
           timeRemaining={timeRemaining}
         />
       )}
+      {!isGif && embed.alt && <AltBadge text={embed.alt} />}
       <MediaInsetBorder />
       <KeepAwake enabled={isPlaying} />
     </View>

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerWeb.tsx

@@ -7,6 +7,8 @@ import type * as HlsTypes from 'hls.js'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {atoms as a} from '#/alf'
+import {useFullscreen} from '#/components/hooks/useFullscreen'
+import {AltBadge} from '../GifPresentationControls'
 import * as BandwidthEstimate from './bandwidth-estimate'
 import {Controls} from './web-controls/VideoControls'
 
@@ -30,6 +32,7 @@ export function VideoEmbedInnerWeb({
   const [hlsLoading, setHlsLoading] = useState(false)
   const figId = useId()
   const {_} = useLingui()
+  const [isFullscreen] = useFullscreen(containerRef)
 
   // send error up to error boundary
   const [error, setError] = useState<Error | null>(null)
@@ -77,6 +80,7 @@ export function VideoEmbedInnerWeb({
             </figcaption>
           )}
         </figure>
+        {!isFullscreen && embed.alt && <AltBadge text={embed.alt} />}
         <Controls
           videoRef={videoRef}
           hlsRef={hlsRef}