[Video] Fix alt text dialog on iOS and Android (#5177)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/view/com/composer/Composer.tsx

@@ -764,8 +764,8 @@ export const ComposePost = observer(function ComposePost({
                       />
                     ) : null)}
                   <SubtitleDialogBtn
-                    altText={videoAltText}
-                    setAltText={setVideoAltText}
+                    defaultAltText={videoAltText}
+                    saveAltText={setVideoAltText}
                     captions={captions}
                     setCaptions={setCaptions}
                   />

src/view/com/composer/videos/SubtitleDialog.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React, {useCallback, useState} from 'react'
 import {Keyboard, StyleProp, View, ViewStyle} from 'react-native'
 import RNPickerSelect from 'react-native-picker-select'
 import {msg, Trans} from '@lingui/macro'
@@ -7,7 +7,7 @@ import {useLingui} from '@lingui/react'
 import {MAX_ALT_TEXT} from '#/lib/constants'
 import {useEnforceMaxGraphemeCount} from '#/lib/strings/helpers'
 import {LANGUAGES} from '#/locale/languages'
-import {isWeb} from '#/platform/detection'
+import {isAndroid, isWeb} from '#/platform/detection'
 import {useLanguagePrefs} from '#/state/preferences'
 import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -21,9 +21,9 @@ import {Text} from '#/components/Typography'
 import {SubtitleFilePicker} from './SubtitleFilePicker'
 
 interface Props {
-  altText: string
+  defaultAltText: string
   captions: {lang: string; file: File}[]
-  setAltText: (altText: string) => void
+  saveAltText: (altText: string) => void
   setCaptions: React.Dispatch<
     React.SetStateAction<{lang: string; file: File}[]>
   >
@@ -54,7 +54,9 @@ export function SubtitleDialogBtn(props: Props) {
           {isWeb ? <Trans>Captions & alt text</Trans> : <Trans>Alt text</Trans>}
         </ButtonText>
       </Button>
-      <Dialog.Outer control={control}>
+      <Dialog.Outer
+        control={control}
+        nativeOptions={isAndroid ? {sheet: {snapPoints: ['60%']}} : {}}>
         <Dialog.Handle />
         <SubtitleDialogInner {...props} />
       </Dialog.Outer>
@@ -63,8 +65,8 @@ export function SubtitleDialogBtn(props: Props) {
 }
 
 function SubtitleDialogInner({
-  altText,
-  setAltText,
+  defaultAltText,
+  saveAltText,
   captions,
   setCaptions,
 }: Props) {
@@ -74,6 +76,8 @@ function SubtitleDialogInner({
   const enforceLen = useEnforceMaxGraphemeCount()
   const {primaryLanguage} = useLanguagePrefs()
 
+  const [altText, setAltText] = useState(defaultAltText)
+
   const handleSelectFile = useCallback(
     (file: File) => {
       setCaptions(subs => [
@@ -105,6 +109,7 @@ function SubtitleDialogInner({
             onChangeText={evt => setAltText(enforceLen(evt, MAX_ALT_TEXT))}
             maxLength={MAX_ALT_TEXT * 10}
             multiline
+            style={{maxHeight: 300}}
             numberOfLines={3}
             onKeyPress={({nativeEvent}) => {
               if (nativeEvent.key === 'Escape') {
@@ -147,22 +152,26 @@ function SubtitleDialogInner({
                 />
               ))}
             </View>
+            {subtitleMissingLanguage && (
+              <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
+                <Trans>
+                  Ensure you have selected a language for each subtitle file.
+                </Trans>
+              </Text>
+            )}
           </>
         )}
 
-        {subtitleMissingLanguage && (
-          <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
-            Ensure you have selected a language for each subtitle file.
-          </Text>
-        )}
-
         <View style={web([a.flex_row, a.justify_end])}>
           <Button
             label={_(msg`Done`)}
             size={isWeb ? 'small' : 'medium'}
             color="primary"
             variant="solid"
-            onPress={() => control.close()}
+            onPress={() => {
+              saveAltText(altText)
+              control.close()
+            }}
             style={a.mt_lg}>
             <ButtonText>
               <Trans>Done</Trans>