From b40287e4be8cc9cf38d1b917431ad5e8053160b5 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Wed, 19 Apr 2023 14:27:54 -0500 Subject: [PATCH] [APP 513] Label tuning (#496) * Label updates: break out sexual into 3 categories; tune defaults; improve descriptions * Fix misapplication of warning in notifications --- src/lib/labeling/const.ts | 31 ++++++- src/state/models/ui/preferences.ts | 4 +- .../com/modals/ContentFilteringSettings.tsx | 81 ++++++++++++------- src/view/com/notifications/FeedItem.tsx | 2 +- src/view/com/util/moderation/ContentHider.tsx | 2 +- .../util/moderation/ProfileHeaderLabels.tsx | 2 +- 6 files changed, 88 insertions(+), 34 deletions(-) diff --git a/src/lib/labeling/const.ts b/src/lib/labeling/const.ts index 8403fdf1..f6835322 100644 --- a/src/lib/labeling/const.ts +++ b/src/lib/labeling/const.ts @@ -3,6 +3,8 @@ import {LabelPreferencesModel} from 'state/models/ui/preferences' export interface LabelValGroup { id: keyof LabelPreferencesModel | 'illegal' | 'unknown' title: string + subtitle?: string + warning?: string values: string[] } @@ -24,27 +26,50 @@ export const CONFIGURABLE_LABEL_GROUPS: Record< > = { nsfw: { id: 'nsfw', - title: 'Sexual Content', - values: ['porn', 'nudity', 'sexual'], + title: 'Explicit Sexual Images', + subtitle: 'i.e. Pornography', + warning: 'Sexually Explicit', + values: ['porn'], + }, + nudity: { + id: 'nudity', + title: 'Other Nudity', + subtitle: 'Including non-sexual and artistic', + warning: 'Nudity', + values: ['nudity'], + }, + suggestive: { + id: 'suggestive', + title: 'Sexually Suggestive', + subtitle: 'Does not include nudity', + warning: 'Sexually Suggestive', + values: ['sexual'], }, gore: { id: 'gore', title: 'Violent / Bloody', + subtitle: 'Gore, self-harm, torture', + warning: 'Violence', values: ['gore', 'self-harm', 'torture'], }, hate: { id: 'hate', title: 'Political Hate-Groups', - values: ['icon-kkk', 'icon-nazi', 'icon-confederate'], + warning: 'Hate', + values: ['icon-kkk', 'icon-nazi'], }, spam: { id: 'spam', title: 'Spam', + subtitle: 'Excessive low-quality posts', + warning: 'Spam', values: ['spam'], }, impersonation: { id: 'impersonation', title: 'Impersonation', + subtitle: 'Accounts falsely claiming to be people or orgs', + warning: 'Impersonation', values: ['impersonation'], }, } diff --git a/src/state/models/ui/preferences.ts b/src/state/models/ui/preferences.ts index 5ab5d13f..ae3f712c 100644 --- a/src/state/models/ui/preferences.ts +++ b/src/state/models/ui/preferences.ts @@ -15,7 +15,9 @@ export type LabelPreference = 'show' | 'warn' | 'hide' export class LabelPreferencesModel { nsfw: LabelPreference = 'warn' - gore: LabelPreference = 'hide' + nudity: LabelPreference = 'show' + suggestive: LabelPreference = 'show' + gore: LabelPreference = 'warn' hate: LabelPreference = 'hide' spam: LabelPreference = 'hide' impersonation: LabelPreference = 'warn' diff --git a/src/view/com/modals/ContentFilteringSettings.tsx b/src/view/com/modals/ContentFilteringSettings.tsx index 2e015e40..735de85a 100644 --- a/src/view/com/modals/ContentFilteringSettings.tsx +++ b/src/view/com/modals/ContentFilteringSettings.tsx @@ -1,15 +1,17 @@ import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {StyleSheet, Pressable, View} from 'react-native' import LinearGradient from 'react-native-linear-gradient' import {observer} from 'mobx-react-lite' +import {ScrollView} from './util' import {useStores} from 'state/index' import {LabelPreference} from 'state/models/ui/preferences' import {s, colors, gradients} from 'lib/styles' import {Text} from '../util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {CONFIGURABLE_LABEL_GROUPS} from 'lib/labeling/const' +import {isDesktopWeb} from 'platform/detection' -export const snapPoints = [500] +export const snapPoints = ['90%'] export function Component({}: {}) { const store = useStores() @@ -20,22 +22,28 @@ export function Component({}: {}) { return ( - Content Filtering - - - - - - - - - Done - - + Content Moderation + + + + + + + + + + + + + + Done + + + ) } @@ -46,9 +54,16 @@ const ContentLabelPref = observer( const pal = usePalette('default') return ( - - {CONFIGURABLE_LABEL_GROUPS[group].title} - + + + {CONFIGURABLE_LABEL_GROUPS[group].title} + + {typeof CONFIGURABLE_LABEL_GROUPS[group].subtitle === 'string' && ( + + {CONFIGURABLE_LABEL_GROUPS[group].subtitle} + + )} + store.preferences.setContentLabelPref(group, v)} @@ -109,7 +124,7 @@ function SelectableBtn({ const pal = usePalette('default') const palPrimary = usePalette('inverted') return ( - {label} - + ) } const styles = StyleSheet.create({ container: { flex: 1, - paddingHorizontal: 10, - paddingBottom: 40, }, title: { textAlign: 'center', @@ -141,19 +154,33 @@ const styles = StyleSheet.create({ paddingHorizontal: 2, marginBottom: 10, }, + scrollContainer: { + flex: 1, + paddingHorizontal: 10, + }, + bottomSpacer: { + height: isDesktopWeb ? 0 : 60, + }, + btnContainer: { + paddingTop: 10, + paddingHorizontal: 10, + paddingBottom: isDesktopWeb ? 0 : 40, + borderTopWidth: isDesktopWeb ? 0 : 1, + }, contentLabelPref: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - paddingTop: 10, + paddingTop: 14, paddingLeft: 4, - marginBottom: 10, + marginBottom: 14, borderTopWidth: 1, }, selectableBtns: { flexDirection: 'row', + marginLeft: 10, }, selectableBtn: { flexDirection: 'row', diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index 22a354da..fd9f2324 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -140,7 +140,7 @@ export const FeedItem = observer(function FeedItem({ handle: item2.author.handle, displayName: item2.author.displayName, avatar: item2.author.avatar, - labels: item.author.labels, + labels: item2.author.labels, })), ) } diff --git a/src/view/com/util/moderation/ContentHider.tsx b/src/view/com/util/moderation/ContentHider.tsx index f65635d3..c1512171 100644 --- a/src/view/com/util/moderation/ContentHider.tsx +++ b/src/view/com/util/moderation/ContentHider.tsx @@ -55,7 +55,7 @@ export function ContentHider({ {isMuted ? ( <>Post from an account you muted. ) : ( - <>Warning: {labelPref.desc.title} + <>Warning: {labelPref.desc.warning || labelPref.desc.title} )} This account has been flagged for{' '} - {labelGroup.title.toLocaleLowerCase()}. + {(labelGroup.warning || labelGroup.title).toLocaleLowerCase()}. )