zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/view/com/composer/Composer.tsx
View File

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

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