[Video] Fix alt text dialog on iOS and Android (#5177)
Co-authored-by: Samuel Newman <mozzius@protonmail.com>zio/stable
parent
64b50ba69a
commit
a1969faf8e
|
@ -764,8 +764,8 @@ export const ComposePost = observer(function ComposePost({
|
|||
/>
|
||||
) : null)}
|
||||
<SubtitleDialogBtn
|
||||
altText={videoAltText}
|
||||
setAltText={setVideoAltText}
|
||||
defaultAltText={videoAltText}
|
||||
saveAltText={setVideoAltText}
|
||||
captions={captions}
|
||||
setCaptions={setCaptions}
|
||||
/>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue