Onboarding moderation improvements (#2713)
* create separate label group arrays * render adult and other label groups separately * animate in/out the additional settings * improve toggle logic * support animations on all platforms * remove debug * update notice, prevent running animations on mount * reorg importszio/stable
parent
a4ff290769
commit
5db56277c0
|
@ -2,19 +2,17 @@ import React from 'react'
|
||||||
import {View} from 'react-native'
|
import {View} from 'react-native'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
import {msg, Trans} from '@lingui/macro'
|
import {msg, Trans} from '@lingui/macro'
|
||||||
|
import {UseMutateFunction} from '@tanstack/react-query'
|
||||||
|
|
||||||
import {isIOS} from '#/platform/detection'
|
|
||||||
import * as Toast from '#/view/com/util/Toast'
|
import * as Toast from '#/view/com/util/Toast'
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
import {atoms as a, useTheme} from '#/alf'
|
||||||
import {
|
import {usePreferencesQuery} from '#/state/queries/preferences'
|
||||||
usePreferencesQuery,
|
|
||||||
usePreferencesSetAdultContentMutation,
|
|
||||||
} from '#/state/queries/preferences'
|
|
||||||
import {logger} from '#/logger'
|
import {logger} from '#/logger'
|
||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
import {InlineLink} from '#/components/Link'
|
|
||||||
import * as Toggle from '#/components/forms/Toggle'
|
import * as Toggle from '#/components/forms/Toggle'
|
||||||
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
|
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
|
||||||
|
import * as Prompt from '#/components/Prompt'
|
||||||
|
import {isIOS} from '#/platform/detection'
|
||||||
|
|
||||||
function Card({children}: React.PropsWithChildren<{}>) {
|
function Card({children}: React.PropsWithChildren<{}>) {
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
|
@ -36,16 +34,25 @@ function Card({children}: React.PropsWithChildren<{}>) {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function AdultContentEnabledPref() {
|
export function AdultContentEnabledPref({
|
||||||
|
mutate,
|
||||||
|
variables,
|
||||||
|
}: {
|
||||||
|
mutate: UseMutateFunction<void, unknown, {enabled: boolean}, unknown>
|
||||||
|
variables: {enabled: boolean} | undefined
|
||||||
|
}) {
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
|
const prompt = Prompt.usePromptControl()
|
||||||
|
|
||||||
// Reuse logic here form ContentFilteringSettings.tsx
|
// Reuse logic here form ContentFilteringSettings.tsx
|
||||||
const {data: preferences} = usePreferencesQuery()
|
const {data: preferences} = usePreferencesQuery()
|
||||||
const {mutate, variables} = usePreferencesSetAdultContentMutation()
|
|
||||||
|
|
||||||
const onToggleAdultContent = React.useCallback(async () => {
|
const onToggleAdultContent = React.useCallback(async () => {
|
||||||
if (isIOS) return
|
if (isIOS) {
|
||||||
|
prompt.open()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
mutate({
|
mutate({
|
||||||
|
@ -57,15 +64,33 @@ export function AdultContentEnabledPref() {
|
||||||
)
|
)
|
||||||
logger.error('Failed to update preferences with server', {error: e})
|
logger.error('Failed to update preferences with server', {error: e})
|
||||||
}
|
}
|
||||||
}, [variables, preferences, mutate, _])
|
}, [variables, preferences, mutate, _, prompt])
|
||||||
|
|
||||||
if (!preferences) return null
|
if (!preferences) return null
|
||||||
|
|
||||||
if (isIOS) {
|
return (
|
||||||
if (preferences?.adultContentEnabled === true) {
|
<>
|
||||||
return null
|
{preferences.userAge && preferences.userAge >= 18 ? (
|
||||||
} else {
|
<View style={[a.w_full, a.px_xs]}>
|
||||||
return (
|
<Toggle.Item
|
||||||
|
name={_(msg`Enable adult content in your feeds`)}
|
||||||
|
label={_(msg`Enable adult content in your feeds`)}
|
||||||
|
value={variables?.enabled ?? preferences?.adultContentEnabled}
|
||||||
|
onChange={onToggleAdultContent}>
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
a.flex_row,
|
||||||
|
a.w_full,
|
||||||
|
a.justify_between,
|
||||||
|
a.align_center,
|
||||||
|
a.py_md,
|
||||||
|
]}>
|
||||||
|
<Text style={[a.font_bold]}>Enable Adult Content</Text>
|
||||||
|
<Toggle.Switch />
|
||||||
|
</View>
|
||||||
|
</Toggle.Item>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
<Card>
|
<Card>
|
||||||
<CircleInfo size="sm" fill={t.palette.contrast_500} />
|
<CircleInfo size="sm" fill={t.palette.contrast_500} />
|
||||||
<Text
|
<Text
|
||||||
|
@ -75,61 +100,23 @@ export function AdultContentEnabledPref() {
|
||||||
a.leading_snug,
|
a.leading_snug,
|
||||||
{paddingTop: 1},
|
{paddingTop: 1},
|
||||||
]}>
|
]}>
|
||||||
<Trans>
|
<Trans>You must be 18 years or older to enable adult content</Trans>
|
||||||
Adult content can only be enabled via the Web at{' '}
|
|
||||||
<InlineLink style={[a.leading_snug]} to="https://bsky.app">
|
|
||||||
bsky.app
|
|
||||||
</InlineLink>
|
|
||||||
.
|
|
||||||
</Trans>
|
|
||||||
</Text>
|
</Text>
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)}
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (preferences?.userAge) {
|
|
||||||
if (preferences.userAge >= 18) {
|
|
||||||
return (
|
|
||||||
<View style={[a.w_full]}>
|
|
||||||
<Toggle.Item
|
|
||||||
name={_(msg`Enable adult content in your feeds`)}
|
|
||||||
label={_(msg`Enable adult content in your feeds`)}
|
|
||||||
value={variables?.enabled ?? preferences?.adultContentEnabled}
|
|
||||||
onChange={onToggleAdultContent}>
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
a.flex_row,
|
|
||||||
a.w_full,
|
|
||||||
a.justify_between,
|
|
||||||
a.align_center,
|
|
||||||
a.py_md,
|
|
||||||
]}>
|
|
||||||
<Text style={[a.font_bold]}>Enable Adult Content</Text>
|
|
||||||
<Toggle.Switch />
|
|
||||||
</View>
|
|
||||||
</Toggle.Item>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CircleInfo size="sm" fill={t.palette.contrast_500} />
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
a.flex_1,
|
|
||||||
t.atoms.text_contrast_700,
|
|
||||||
a.leading_snug,
|
|
||||||
{paddingTop: 1},
|
|
||||||
]}>
|
|
||||||
<Trans>
|
|
||||||
You must be 18 years or older to enable adult content
|
|
||||||
</Trans>
|
|
||||||
</Text>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return null
|
<Prompt.Outer control={prompt}>
|
||||||
}
|
<Prompt.Title>Adult Content</Prompt.Title>
|
||||||
|
<Prompt.Description>
|
||||||
|
<Trans>
|
||||||
|
Due to Apple policies, adult content can only be enabled on the web
|
||||||
|
after completing sign up.
|
||||||
|
</Trans>
|
||||||
|
</Prompt.Description>
|
||||||
|
<Prompt.Actions>
|
||||||
|
<Prompt.Action onPress={prompt.close}>OK</Prompt.Action>
|
||||||
|
</Prompt.Actions>
|
||||||
|
</Prompt.Outer>
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import {View} from 'react-native'
|
||||||
import {LabelPreference} from '@atproto/api'
|
import {LabelPreference} from '@atproto/api'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
import {msg} from '@lingui/macro'
|
import {msg} from '@lingui/macro'
|
||||||
|
import Animated, {Easing, Layout, FadeIn} from 'react-native-reanimated'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
CONFIGURABLE_LABEL_GROUPS,
|
CONFIGURABLE_LABEL_GROUPS,
|
||||||
|
@ -16,8 +17,10 @@ import * as ToggleButton from '#/components/forms/ToggleButton'
|
||||||
|
|
||||||
export function ModerationOption({
|
export function ModerationOption({
|
||||||
labelGroup,
|
labelGroup,
|
||||||
|
isMounted,
|
||||||
}: {
|
}: {
|
||||||
labelGroup: ConfigurableLabelGroup
|
labelGroup: ConfigurableLabelGroup
|
||||||
|
isMounted: React.MutableRefObject<boolean>
|
||||||
}) {
|
}) {
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const t = useTheme()
|
const t = useTheme()
|
||||||
|
@ -41,7 +44,7 @@ export function ModerationOption({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<Animated.View
|
||||||
style={[
|
style={[
|
||||||
a.flex_row,
|
a.flex_row,
|
||||||
a.justify_between,
|
a.justify_between,
|
||||||
|
@ -49,7 +52,9 @@ export function ModerationOption({
|
||||||
a.py_xs,
|
a.py_xs,
|
||||||
a.px_xs,
|
a.px_xs,
|
||||||
a.align_center,
|
a.align_center,
|
||||||
]}>
|
]}
|
||||||
|
layout={Layout.easing(Easing.ease).duration(200)}
|
||||||
|
entering={isMounted.current ? FadeIn : undefined}>
|
||||||
<View style={[a.gap_xs, {width: '50%'}]}>
|
<View style={[a.gap_xs, {width: '50%'}]}>
|
||||||
<Text style={[a.font_bold]}>{groupInfo.title}</Text>
|
<Text style={[a.font_bold]}>{groupInfo.title}</Text>
|
||||||
<Text style={[t.atoms.text_contrast_700, a.leading_snug]}>
|
<Text style={[t.atoms.text_contrast_700, a.leading_snug]}>
|
||||||
|
@ -57,29 +62,23 @@ export function ModerationOption({
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<View style={[a.justify_center, {minHeight: 35}]}>
|
<View style={[a.justify_center, {minHeight: 35}]}>
|
||||||
{!preferences?.adultContentEnabled && groupInfo.isAdultImagery ? (
|
<ToggleButton.Group
|
||||||
<View style={[a.justify_center, {minHeight: 40}]}>
|
label={_(
|
||||||
<Text style={[a.font_bold]}>{labels.hide}</Text>
|
msg`Configure content filtering setting for category: ${groupInfo.title.toLowerCase()}`,
|
||||||
</View>
|
)}
|
||||||
) : (
|
values={[visibility ?? 'hide']}
|
||||||
<ToggleButton.Group
|
onChange={onChange}>
|
||||||
label={_(
|
<ToggleButton.Button name="hide" label={labels.hide}>
|
||||||
msg`Configure content filtering setting for category: ${groupInfo.title.toLowerCase()}`,
|
{labels.hide}
|
||||||
)}
|
</ToggleButton.Button>
|
||||||
values={[visibility ?? 'hide']}
|
<ToggleButton.Button name="warn" label={labels.warn}>
|
||||||
onChange={onChange}>
|
{labels.warn}
|
||||||
<ToggleButton.Button name="hide" label={labels.hide}>
|
</ToggleButton.Button>
|
||||||
{labels.hide}
|
<ToggleButton.Button name="ignore" label={labels.show}>
|
||||||
</ToggleButton.Button>
|
{labels.show}
|
||||||
<ToggleButton.Button name="warn" label={labels.warn}>
|
</ToggleButton.Button>
|
||||||
{labels.warn}
|
</ToggleButton.Group>
|
||||||
</ToggleButton.Button>
|
|
||||||
<ToggleButton.Button name="ignore" label={labels.show}>
|
|
||||||
{labels.show}
|
|
||||||
</ToggleButton.Button>
|
|
||||||
</ToggleButton.Group>
|
|
||||||
)}
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</Animated.View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,9 +2,14 @@ import React from 'react'
|
||||||
import {View} from 'react-native'
|
import {View} from 'react-native'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
import {msg, Trans} from '@lingui/macro'
|
import {msg, Trans} from '@lingui/macro'
|
||||||
|
import Animated, {Easing, Layout} from 'react-native-reanimated'
|
||||||
|
|
||||||
import {atoms as a} from '#/alf'
|
import {atoms as a} from '#/alf'
|
||||||
import {configurableLabelGroups} from 'state/queries/preferences'
|
import {
|
||||||
|
configurableAdultLabelGroups,
|
||||||
|
configurableOtherLabelGroups,
|
||||||
|
usePreferencesSetAdultContentMutation,
|
||||||
|
} from 'state/queries/preferences'
|
||||||
import {Divider} from '#/components/Divider'
|
import {Divider} from '#/components/Divider'
|
||||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||||
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
|
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
|
||||||
|
@ -23,11 +28,32 @@ import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/Adult
|
||||||
import {Context} from '#/screens/Onboarding/state'
|
import {Context} from '#/screens/Onboarding/state'
|
||||||
import {IconCircle} from '#/screens/Onboarding/IconCircle'
|
import {IconCircle} from '#/screens/Onboarding/IconCircle'
|
||||||
|
|
||||||
|
function AnimatedDivider() {
|
||||||
|
return (
|
||||||
|
<Animated.View layout={Layout.easing(Easing.ease).duration(200)}>
|
||||||
|
<Divider />
|
||||||
|
</Animated.View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export function StepModeration() {
|
export function StepModeration() {
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const {track} = useAnalytics()
|
const {track} = useAnalytics()
|
||||||
const {state, dispatch} = React.useContext(Context)
|
const {state, dispatch} = React.useContext(Context)
|
||||||
const {data: preferences} = usePreferencesQuery()
|
const {data: preferences} = usePreferencesQuery()
|
||||||
|
const {mutate, variables} = usePreferencesSetAdultContentMutation()
|
||||||
|
|
||||||
|
// We need to know if the screen is mounted so we know if we want to run entering animations
|
||||||
|
// https://github.com/software-mansion/react-native-reanimated/discussions/2513
|
||||||
|
const isMounted = React.useRef(false)
|
||||||
|
React.useLayoutEffect(() => {
|
||||||
|
isMounted.current = true
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const adultContentEnabled = !!(
|
||||||
|
(variables && variables.enabled) ||
|
||||||
|
(!variables && preferences?.adultContentEnabled)
|
||||||
|
)
|
||||||
|
|
||||||
const onContinue = React.useCallback(() => {
|
const onContinue = React.useCallback(() => {
|
||||||
dispatch({type: 'next'})
|
dispatch({type: 'next'})
|
||||||
|
@ -57,14 +83,23 @@ export function StepModeration() {
|
||||||
</View>
|
</View>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<AdultContentEnabledPref />
|
<AdultContentEnabledPref mutate={mutate} variables={variables} />
|
||||||
|
|
||||||
<View style={[a.gap_sm, a.w_full]}>
|
<View style={[a.gap_sm, a.w_full]}>
|
||||||
{configurableLabelGroups.map((g, index) => (
|
{adultContentEnabled &&
|
||||||
|
configurableAdultLabelGroups.map((g, index) => (
|
||||||
|
<React.Fragment key={index}>
|
||||||
|
{index === 0 && <AnimatedDivider />}
|
||||||
|
<ModerationOption labelGroup={g} isMounted={isMounted} />
|
||||||
|
<AnimatedDivider />
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{configurableOtherLabelGroups.map((g, index) => (
|
||||||
<React.Fragment key={index}>
|
<React.Fragment key={index}>
|
||||||
{index === 0 && <Divider />}
|
{!adultContentEnabled && index === 0 && <AnimatedDivider />}
|
||||||
<ModerationOption labelGroup={g} />
|
<ModerationOption labelGroup={g} isMounted={isMounted} />
|
||||||
<Divider />
|
<AnimatedDivider />
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -5,15 +5,23 @@ import {
|
||||||
BskyFeedViewPreference,
|
BskyFeedViewPreference,
|
||||||
} from '@atproto/api'
|
} from '@atproto/api'
|
||||||
|
|
||||||
export const configurableLabelGroups = [
|
export const configurableAdultLabelGroups = [
|
||||||
'nsfw',
|
'nsfw',
|
||||||
'nudity',
|
'nudity',
|
||||||
'suggestive',
|
'suggestive',
|
||||||
'gore',
|
'gore',
|
||||||
|
] as const
|
||||||
|
|
||||||
|
export const configurableOtherLabelGroups = [
|
||||||
'hate',
|
'hate',
|
||||||
'spam',
|
'spam',
|
||||||
'impersonation',
|
'impersonation',
|
||||||
] as const
|
] as const
|
||||||
|
|
||||||
|
export const configurableLabelGroups = [
|
||||||
|
...configurableAdultLabelGroups,
|
||||||
|
...configurableOtherLabelGroups,
|
||||||
|
] as const
|
||||||
export type ConfigurableLabelGroup = (typeof configurableLabelGroups)[number]
|
export type ConfigurableLabelGroup = (typeof configurableLabelGroups)[number]
|
||||||
|
|
||||||
export type LabelGroup =
|
export type LabelGroup =
|
||||||
|
|
Loading…
Reference in New Issue