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