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

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
zio/stable
Hailey 2024-09-06 08:26:37 -07:00 committed by GitHub
parent 64b50ba69a
commit a1969faf8e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 16 deletions

View File

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

View File

@ -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,14 +152,15 @@ 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>
)}
</>
)}
<View style={web([a.flex_row, a.justify_end])}>
<Button
@ -162,7 +168,10 @@ function SubtitleDialogInner({
size={isWeb ? 'small' : 'medium'}
color="primary"
variant="solid"
onPress={() => control.close()}
onPress={() => {
saveAltText(altText)
control.close()
}}
style={a.mt_lg}>
<ButtonText>
<Trans>Done</Trans>