bas.sh
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
samuel.fm
1import {useRef} from 'react'
2import {View} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5import type React from 'react'
6
7import {logger} from '#/logger'
8import * as Toast from '#/view/com/util/Toast'
9import {atoms as a} from '#/alf'
10import {Button, ButtonIcon, ButtonText} from '#/components/Button'
11import {CC_Stroke2_Corner0_Rounded as CCIcon} from '#/components/icons/CC'
12
13export function SubtitleFilePicker({
14 onSelectFile,
15 disabled,
16}: {
17 onSelectFile: (file: File) => void
18 disabled?: boolean
19}) {
20 const {_} = useLingui()
21 const ref = useRef<HTMLInputElement>(null)
22
23 const handleClick = () => {
24 ref.current?.click()
25 }
26
27 const handlePick = (evt: React.ChangeEvent<HTMLInputElement>) => {
28 const selectedFile = evt.target.files?.[0]
29 if (selectedFile) {
30 if (
31 selectedFile.type === 'text/vtt' ||
32 // HACK: sometimes the mime type is just straight-up missing
33 // best we can do is check the file extension and hope for the best
34 selectedFile.name.endsWith('.vtt')
35 ) {
36 onSelectFile(selectedFile)
37 } else {
38 logger.error('Invalid subtitle file type', {
39 safeMessage: `File: ${selectedFile.name} (${selectedFile.type})`,
40 })
41 Toast.show(_(msg`Only WebVTT (.vtt) files are supported`))
42 }
43 }
44 }
45
46 return (
47 <View style={a.gap_lg}>
48 <input
49 type="file"
50 accept=".vtt"
51 ref={ref}
52 style={a.hidden}
53 onChange={handlePick}
54 disabled={disabled}
55 aria-disabled={disabled}
56 />
57 <View style={a.flex_row}>
58 <Button
59 onPress={handleClick}
60 label={_(msg`Select subtitle file (.vtt)`)}
61 size="large"
62 color="primary"
63 variant="solid"
64 disabled={disabled}>
65 <ButtonIcon icon={CCIcon} />
66 <ButtonText>
67 <Trans>Select subtitle file (.vtt)</Trans>
68 </ButtonText>
69 </Button>
70 </View>
71 </View>
72 )
73}