robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Video] Fix alt text dialog on iOS and Android (#5177)
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
authored by
Samuel Newman
and committed by
GitHub
a1969faf
64b50ba6
+25
-16
+2
-2
src/view/com/composer/Composer.tsx
+2
-2
src/view/com/composer/Composer.tsx
+23
-14
src/view/com/composer/videos/SubtitleDialog.tsx
+23
-14
src/view/com/composer/videos/SubtitleDialog.tsx
···
1
-
import React, {useCallback} from 'react'
1
+
import React, {useCallback, useState} from 'react'
2
2
import {Keyboard, StyleProp, View, ViewStyle} from 'react-native'
3
3
import RNPickerSelect from 'react-native-picker-select'
4
4
import {msg, Trans} from '@lingui/macro'
···
7
7
import {MAX_ALT_TEXT} from '#/lib/constants'
8
8
import {useEnforceMaxGraphemeCount} from '#/lib/strings/helpers'
9
9
import {LANGUAGES} from '#/locale/languages'
10
-
import {isWeb} from '#/platform/detection'
10
+
import {isAndroid, isWeb} from '#/platform/detection'
11
11
import {useLanguagePrefs} from '#/state/preferences'
12
12
import {atoms as a, useTheme, web} from '#/alf'
13
13
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
···
21
21
import {SubtitleFilePicker} from './SubtitleFilePicker'
22
22
23
23
interface Props {
24
-
altText: string
24
+
defaultAltText: string
25
25
captions: {lang: string; file: File}[]
26
-
setAltText: (altText: string) => void
26
+
saveAltText: (altText: string) => void
27
27
setCaptions: React.Dispatch<
28
28
React.SetStateAction<{lang: string; file: File}[]>
29
29
>
···
54
54
{isWeb ? <Trans>Captions & alt text</Trans> : <Trans>Alt text</Trans>}
55
55
</ButtonText>
56
56
</Button>
57
-
<Dialog.Outer control={control}>
57
+
<Dialog.Outer
58
+
control={control}
59
+
nativeOptions={isAndroid ? {sheet: {snapPoints: ['60%']}} : {}}>
58
60
<Dialog.Handle />
59
61
<SubtitleDialogInner {...props} />
60
62
</Dialog.Outer>
···
63
65
}
64
66
65
67
function SubtitleDialogInner({
66
-
altText,
67
-
setAltText,
68
+
defaultAltText,
69
+
saveAltText,
68
70
captions,
69
71
setCaptions,
70
72
}: Props) {
···
73
75
const t = useTheme()
74
76
const enforceLen = useEnforceMaxGraphemeCount()
75
77
const {primaryLanguage} = useLanguagePrefs()
78
+
79
+
const [altText, setAltText] = useState(defaultAltText)
76
80
77
81
const handleSelectFile = useCallback(
78
82
(file: File) => {
···
105
109
onChangeText={evt => setAltText(enforceLen(evt, MAX_ALT_TEXT))}
106
110
maxLength={MAX_ALT_TEXT * 10}
107
111
multiline
112
+
style={{maxHeight: 300}}
108
113
numberOfLines={3}
109
114
onKeyPress={({nativeEvent}) => {
110
115
if (nativeEvent.key === 'Escape') {
···
147
152
/>
148
153
))}
149
154
</View>
155
+
{subtitleMissingLanguage && (
156
+
<Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
157
+
<Trans>
158
+
Ensure you have selected a language for each subtitle file.
159
+
</Trans>
160
+
</Text>
161
+
)}
150
162
</>
151
163
)}
152
164
153
-
{subtitleMissingLanguage && (
154
-
<Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
155
-
Ensure you have selected a language for each subtitle file.
156
-
</Text>
157
-
)}
158
-
159
165
<View style={web([a.flex_row, a.justify_end])}>
160
166
<Button
161
167
label={_(msg`Done`)}
162
168
size={isWeb ? 'small' : 'medium'}
163
169
color="primary"
164
170
variant="solid"
165
-
onPress={() => control.close()}
171
+
onPress={() => {
172
+
saveAltText(altText)
173
+
control.close()
174
+
}}
166
175
style={a.mt_lg}>
167
176
<ButtonText>
168
177
<Trans>Done</Trans>