blob: 6ab0131d9d5b250ec2714b37b521bbf80951e77f (
plain) (
blame)
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
106
107
108
109
110
111
112
|
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {CommonNavigatorParams} from '#/lib/routes/types'
import {isNative} from '#/platform/detection'
import {
useHapticsDisabled,
useRequireAltTextEnabled,
useSetHapticsDisabled,
useSetRequireAltTextEnabled,
} from '#/state/preferences'
import {
useLargeAltBadgeEnabled,
useSetLargeAltBadgeEnabled,
} from '#/state/preferences/large-alt-badge'
import * as SettingsList from '#/screens/Settings/components/SettingsList'
import {atoms as a} from '#/alf'
import {Admonition} from '#/components/Admonition'
import * as Toggle from '#/components/forms/Toggle'
import {Accessibility_Stroke2_Corner2_Rounded as AccessibilityIcon} from '#/components/icons/Accessibility'
import {Haptic_Stroke2_Corner2_Rounded as HapticIcon} from '#/components/icons/Haptic'
import * as Layout from '#/components/Layout'
import {InlineLinkText} from '#/components/Link'
type Props = NativeStackScreenProps<
CommonNavigatorParams,
'AccessibilitySettings'
>
export function AccessibilitySettingsScreen({}: Props) {
const {_} = useLingui()
const requireAltTextEnabled = useRequireAltTextEnabled()
const setRequireAltTextEnabled = useSetRequireAltTextEnabled()
const hapticsDisabled = useHapticsDisabled()
const setHapticsDisabled = useSetHapticsDisabled()
const largeAltBadgeEnabled = useLargeAltBadgeEnabled()
const setLargeAltBadgeEnabled = useSetLargeAltBadgeEnabled()
return (
<Layout.Screen>
<Layout.Header title={_(msg`Accessibility`)} />
<Layout.Content>
<SettingsList.Container>
<SettingsList.Group contentContainerStyle={[a.gap_sm]}>
<SettingsList.ItemIcon icon={AccessibilityIcon} />
<SettingsList.ItemText>
<Trans>Alt text</Trans>
</SettingsList.ItemText>
<Toggle.Item
name="require_alt_text"
label={_(msg`Require alt text before posting`)}
value={requireAltTextEnabled ?? false}
onChange={value => setRequireAltTextEnabled(value)}
style={[a.w_full]}>
<Toggle.LabelText style={[a.flex_1]}>
<Trans>Require alt text before posting</Trans>
</Toggle.LabelText>
<Toggle.Platform />
</Toggle.Item>
<Toggle.Item
name="large_alt_badge"
label={_(msg`Display larger alt text badges`)}
value={!!largeAltBadgeEnabled}
onChange={value => setLargeAltBadgeEnabled(value)}
style={[a.w_full]}>
<Toggle.LabelText style={[a.flex_1]}>
<Trans>Display larger alt text badges</Trans>
</Toggle.LabelText>
<Toggle.Platform />
</Toggle.Item>
</SettingsList.Group>
{isNative && (
<>
<SettingsList.Divider />
<SettingsList.Group contentContainerStyle={[a.gap_sm]}>
<SettingsList.ItemIcon icon={HapticIcon} />
<SettingsList.ItemText>
<Trans>Haptics</Trans>
</SettingsList.ItemText>
<Toggle.Item
name="haptics"
label={_(msg`Disable haptic feedback`)}
value={hapticsDisabled ?? false}
onChange={value => setHapticsDisabled(value)}
style={[a.w_full]}>
<Toggle.LabelText style={[a.flex_1]}>
<Trans>Disable haptic feedback</Trans>
</Toggle.LabelText>
<Toggle.Platform />
</Toggle.Item>
</SettingsList.Group>
</>
)}
<SettingsList.Item>
<Admonition type="info" style={[a.flex_1]}>
<Trans>
Autoplay options have moved to the{' '}
<InlineLinkText
to="/settings/content-and-media"
label={_(msg`Content and media`)}>
Content and Media settings
</InlineLinkText>
.
</Trans>
</Admonition>
</SettingsList.Item>
</SettingsList.Container>
</Layout.Content>
</Layout.Screen>
)
}
|
