[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

3 files changed, 46 insertions, 6 deletions

diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index fa2e4ba6c..f6537e3d1 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -1,4 +1,5 @@
 import {
+  AppBskyEmbedDefs,
   AppBskyEmbedExternal,
   AppBskyEmbedImages,
   AppBskyEmbedRecord,
@@ -45,7 +46,12 @@ interface PostOpts {
     uri: string
     cid: string
   }
-  video?: BlobRef
+  video?: {
+    blobRef: BlobRef
+    altText: string
+    captions: {lang: string; file: File}[]
+    aspectRatio?: AppBskyEmbedDefs.AspectRatio
+  }
   extLink?: ExternalEmbedDraft
   images?: ImageModel[]
   labels?: string[]
@@ -128,19 +134,35 @@ export async function post(agent: BskyAgent, opts: PostOpts) {
 
   // add video embed if present
   if (opts.video) {
+    const captions = await Promise.all(
+      opts.video.captions
+        .filter(caption => caption.lang !== '')
+        .map(async caption => {
+          const {data} = await agent.uploadBlob(caption.file, {
+            encoding: 'text/vtt',
+          })
+          return {lang: caption.lang, file: data.blob}
+        }),
+    )
     if (opts.quote) {
       embed = {
         $type: 'app.bsky.embed.recordWithMedia',
         record: embed,
         media: {
           $type: 'app.bsky.embed.video',
-          video: opts.video,
+          video: opts.video.blobRef,
+          alt: opts.video.altText || undefined,
+          captions: captions.length === 0 ? undefined : captions,
+          aspectRatio: opts.video.aspectRatio,
         } as AppBskyEmbedVideo.Main,
       } as AppBskyEmbedRecordWithMedia.Main
     } else {
       embed = {
         $type: 'app.bsky.embed.video',
-        video: opts.video,
+        video: opts.video.blobRef,
+        alt: opts.video.altText || undefined,
+        captions: captions.length === 0 ? undefined : captions,
+        aspectRatio: opts.video.aspectRatio,
       } as AppBskyEmbedVideo.Main
     }
   }
diff --git a/src/lib/moderation/useLabelInfo.ts b/src/lib/moderation/useLabelInfo.ts
index b1cffe1e7..0ff7e1246 100644
--- a/src/lib/moderation/useLabelInfo.ts
+++ b/src/lib/moderation/useLabelInfo.ts
@@ -1,9 +1,9 @@
 import {
-  ComAtprotoLabelDefs,
   AppBskyLabelerDefs,
-  LABELS,
-  interpretLabelValueDefinition,
+  ComAtprotoLabelDefs,
   InterpretedLabelValueDefinition,
+  interpretLabelValueDefinition,
+  LABELS,
 } from '@atproto/api'
 import {useLingui} from '@lingui/react'
 import * as bcp47Match from 'bcp-47-match'
diff --git a/src/lib/strings/helpers.ts b/src/lib/strings/helpers.ts
index b4ce64fa5..acd55da2d 100644
--- a/src/lib/strings/helpers.ts
+++ b/src/lib/strings/helpers.ts
@@ -1,3 +1,6 @@
+import {useCallback, useMemo} from 'react'
+import Graphemer from 'graphemer'
+
 export function enforceLen(
   str: string,
   len: number,
@@ -23,6 +26,21 @@ export function enforceLen(
   return str
 }
 
+export function useEnforceMaxGraphemeCount() {
+  const splitter = useMemo(() => new Graphemer(), [])
+
+  return useCallback(
+    (text: string, maxCount: number) => {
+      if (splitter.countGraphemes(text) > maxCount) {
+        return splitter.splitGraphemes(text).slice(0, maxCount).join('')
+      } else {
+        return text
+      }
+    },
+    [splitter],
+  )
+}
+
 // https://stackoverflow.com/a/52171480
 export function toHashCode(str: string, seed = 0): number {
   let h1 = 0xdeadbeef ^ seed,