[Video] Captions and alt text (#5009)

* video settings modal in composer

* show done button on web

* rm download options

* fix logic for showing settings button

* add language picker (wip)

* subtitle list with language select

* send captions & alt text with video when posting

* style "ensure you have selected a language" text

* include aspect ratio with video

* filter out captions where the lang is not set

* rm log

* fix label and add hint

* minor scrubber fix

1 files changed, 42 insertions, 4 deletions

diff --git a/src/view/com/composer/videos/VideoPreview.web.tsx b/src/view/com/composer/videos/VideoPreview.web.tsx
index 223dbd424..5bf4d2a7f 100644
--- a/src/view/com/composer/videos/VideoPreview.web.tsx
+++ b/src/view/com/composer/videos/VideoPreview.web.tsx
@@ -1,27 +1,65 @@
-import React from 'react'
+import React, {useEffect, useRef} from 'react'
 import {View} from 'react-native'
+import {ImagePickerAsset} from 'expo-image-picker'
 
 import {CompressedVideo} from '#/lib/media/video/compress'
 import {ExternalEmbedRemoveBtn} from 'view/com/composer/ExternalEmbedRemoveBtn'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 
 export function VideoPreview({
+  asset,
   video,
+  setDimensions,
   clear,
 }: {
+  asset: ImagePickerAsset
   video: CompressedVideo
+  setDimensions: (width: number, height: number) => void
   clear: () => void
 }) {
+  const t = useTheme()
+  const ref = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    const abortController = new AbortController()
+    const {signal} = abortController
+    ref.current.addEventListener(
+      'loadedmetadata',
+      function () {
+        setDimensions(this.videoWidth, this.videoHeight)
+      },
+      {signal},
+    )
+
+    return () => {
+      abortController.abort()
+    }
+  }, [setDimensions])
+
+  const aspectRatio = asset.width / asset.height
+
   return (
     <View
       style={[
         a.w_full,
         a.rounded_sm,
-        {aspectRatio: 16 / 9},
+
+        {aspectRatio: isNaN(aspectRatio) ? 16 / 9 : aspectRatio},
         a.overflow_hidden,
+        {backgroundColor: t.palette.black},
       ]}>
       <ExternalEmbedRemoveBtn onRemove={clear} />
-      <video src={video.uri} style={a.flex_1} autoPlay loop muted playsInline />
+      <video
+        ref={ref}
+        src={video.uri}
+        style={a.flex_1}
+        autoPlay
+        loop
+        muted
+        playsInline
+      />
     </View>
   )
 }