robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {useCallback} from 'react'
2import {View} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {
7 type EmbedPlayerSource,
8 embedPlayerSources,
9 externalEmbedLabels,
10} from '#/lib/strings/embed-player'
11import {useSetExternalEmbedPref} from '#/state/preferences'
12import {atoms as a, useBreakpoints, useTheme} from '#/alf'
13import {Button, ButtonText} from '#/components/Button'
14import * as Dialog from '#/components/Dialog'
15import {Text} from '#/components/Typography'
16
17export function EmbedConsentDialog({
18 control,
19 source,
20 onAccept,
21}: {
22 control: Dialog.DialogControlProps
23 source: EmbedPlayerSource
24 onAccept: () => void
25}) {
26 const {_} = useLingui()
27 const t = useTheme()
28 const setExternalEmbedPref = useSetExternalEmbedPref()
29 const {gtMobile} = useBreakpoints()
30
31 const onShowAllPress = useCallback(() => {
32 for (const key of embedPlayerSources) {
33 setExternalEmbedPref(key, 'show')
34 }
35 onAccept()
36 control.close()
37 }, [control, onAccept, setExternalEmbedPref])
38
39 const onShowPress = useCallback(() => {
40 setExternalEmbedPref(source, 'show')
41 onAccept()
42 control.close()
43 }, [control, onAccept, setExternalEmbedPref, source])
44
45 const onHidePress = useCallback(() => {
46 setExternalEmbedPref(source, 'hide')
47 control.close()
48 }, [control, setExternalEmbedPref, source])
49
50 return (
51 <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
52 <Dialog.Handle />
53 <Dialog.ScrollableInner
54 label={_(msg`External Media`)}
55 style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
56 <View style={a.gap_sm}>
57 <Text style={[a.text_2xl, a.font_semi_bold]}>
58 <Trans>External Media</Trans>
59 </Text>
60
61 <View style={[a.mt_sm, a.mb_2xl, a.gap_lg]}>
62 <Text>
63 <Trans>
64 This content is hosted by {externalEmbedLabels[source]}. Do you
65 want to enable external media?
66 </Trans>
67 </Text>
68
69 <Text style={t.atoms.text_contrast_medium}>
70 <Trans>
71 External media may allow websites to collect information about
72 you and your device. No information is sent or requested until
73 you press the "play" button.
74 </Trans>
75 </Text>
76 </View>
77 </View>
78 <View style={a.gap_md}>
79 <Button
80 style={gtMobile && a.flex_1}
81 label={_(msg`Enable external media`)}
82 onPress={onShowAllPress}
83 onAccessibilityEscape={control.close}
84 color="primary"
85 size="large"
86 variant="solid">
87 <ButtonText>
88 <Trans>Enable external media</Trans>
89 </ButtonText>
90 </Button>
91 <Button
92 style={gtMobile && a.flex_1}
93 label={_(msg`Enable this source only`)}
94 onPress={onShowPress}
95 onAccessibilityEscape={control.close}
96 color="secondary"
97 size="large"
98 variant="solid">
99 <ButtonText>
100 <Trans>Enable {externalEmbedLabels[source]} only</Trans>
101 </ButtonText>
102 </Button>
103 <Button
104 label={_(msg`No thanks`)}
105 onAccessibilityEscape={control.close}
106 onPress={onHidePress}
107 color="secondary"
108 size="large"
109 variant="ghost">
110 <ButtonText>
111 <Trans>No thanks</Trans>
112 </ButtonText>
113 </Button>
114 </View>
115 <Dialog.Close />
116 </Dialog.ScrollableInner>
117 </Dialog.Outer>
118 )
119}