forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {Fragment} from 'react'
2import {View} from 'react-native'
3import {Trans} from '@lingui/macro'
4
5import {
6 type CommonNavigatorParams,
7 type NativeStackScreenProps,
8} from '#/lib/routes/types'
9import {
10 type EmbedPlayerSource,
11 externalEmbedLabels,
12} from '#/lib/strings/embed-player'
13import {
14 useExternalEmbedsPrefs,
15 useSetExternalEmbedPref,
16} from '#/state/preferences'
17import {atoms as a, native} from '#/alf'
18import {Admonition} from '#/components/Admonition'
19import * as Toggle from '#/components/forms/Toggle'
20import * as Layout from '#/components/Layout'
21import * as SettingsList from './components/SettingsList'
22
23type Props = NativeStackScreenProps<
24 CommonNavigatorParams,
25 'PreferencesExternalEmbeds'
26>
27export function ExternalMediaPreferencesScreen({}: Props) {
28 return (
29 <Layout.Screen testID="externalMediaPreferencesScreen">
30 <Layout.Header.Outer>
31 <Layout.Header.BackButton />
32 <Layout.Header.Content>
33 <Layout.Header.TitleText>
34 <Trans>External Media Preferences</Trans>
35 </Layout.Header.TitleText>
36 </Layout.Header.Content>
37 <Layout.Header.Slot />
38 </Layout.Header.Outer>
39 <Layout.Content>
40 <SettingsList.Container>
41 <SettingsList.Item>
42 <Admonition type="info" style={[a.flex_1]}>
43 <Trans>
44 External media may allow websites to collect information about
45 you and your device. No information is sent or requested until
46 you press the "play" button.
47 </Trans>
48 </Admonition>
49 </SettingsList.Item>
50 <SettingsList.Group iconInset={false}>
51 <SettingsList.ItemText>
52 <Trans>Enable media players for</Trans>
53 </SettingsList.ItemText>
54 <View style={[a.mt_sm, a.w_full]}>
55 {native(<SettingsList.Divider style={[a.my_0]} />)}
56 {Object.entries(externalEmbedLabels)
57 // TODO: Remove special case when we disable the old integration.
58 .filter(([key]) => key !== 'tenor')
59 .map(([key, label]) => (
60 <Fragment key={key}>
61 <PrefSelector
62 source={key as EmbedPlayerSource}
63 label={label}
64 key={key}
65 />
66 {native(<SettingsList.Divider style={[a.my_0]} />)}
67 </Fragment>
68 ))}
69 </View>
70 </SettingsList.Group>
71 </SettingsList.Container>
72 </Layout.Content>
73 </Layout.Screen>
74 )
75}
76
77function PrefSelector({
78 source,
79 label,
80}: {
81 source: EmbedPlayerSource
82 label: string
83}) {
84 const setExternalEmbedPref = useSetExternalEmbedPref()
85 const sources = useExternalEmbedsPrefs()
86
87 return (
88 <Toggle.Item
89 name={label}
90 label={label}
91 type="checkbox"
92 value={sources?.[source] === 'show'}
93 onChange={() =>
94 setExternalEmbedPref(
95 source,
96 sources?.[source] === 'show' ? 'hide' : 'show',
97 )
98 }
99 style={[
100 a.flex_1,
101 a.py_md,
102 native([a.justify_between, a.flex_row_reverse]),
103 ]}>
104 <Toggle.Platform />
105 <Toggle.LabelText style={[a.text_md]}>{label}</Toggle.LabelText>
106 </Toggle.Item>
107 )
108}