From 0f931933a7b7b72505fbab6e1f25860f7a84e59c Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 19 Jun 2024 22:32:44 +0100 Subject: [PATCH] Option for large alt badges (#4571) * add pref for large alt badge * add to settings * do the large badge bit * Tweak wording --------- Co-authored-by: Dan Abramov --- src/state/persisted/schema.ts | 2 + src/state/preferences/alt-text-required.tsx | 1 + src/state/preferences/hidden-posts.tsx | 1 + src/state/preferences/index.tsx | 25 ++++++----- src/state/preferences/large-alt-badge.tsx | 49 +++++++++++++++++++++ src/view/com/util/images/Gallery.tsx | 22 +++++---- src/view/com/util/post-embeds/GifEmbed.tsx | 6 ++- src/view/com/util/post-embeds/index.tsx | 15 +++---- src/view/screens/AccessibilitySettings.tsx | 35 ++++++++++----- 9 files changed, 113 insertions(+), 43 deletions(-) create mode 100644 src/state/preferences/large-alt-badge.tsx diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts index 9d5b17d3..c942828f 100644 --- a/src/state/persisted/schema.ts +++ b/src/state/persisted/schema.ts @@ -60,6 +60,7 @@ export const schema = z.object({ appLanguage: z.string(), }), requireAltTextEnabled: z.boolean(), // should move to server + largeAltBadgeEnabled: z.boolean().optional(), externalEmbeds: z .object({ giphy: z.enum(externalEmbedOptions).optional(), @@ -112,6 +113,7 @@ export const defaults: Schema = { appLanguage: deviceLocales[0] || 'en', }, requireAltTextEnabled: false, + largeAltBadgeEnabled: false, externalEmbeds: {}, mutedThreads: [], invites: { diff --git a/src/state/preferences/alt-text-required.tsx b/src/state/preferences/alt-text-required.tsx index 81de9e00..642e790f 100644 --- a/src/state/preferences/alt-text-required.tsx +++ b/src/state/preferences/alt-text-required.tsx @@ -1,4 +1,5 @@ import React from 'react' + import * as persisted from '#/state/persisted' type StateContext = persisted.Schema['requireAltTextEnabled'] diff --git a/src/state/preferences/hidden-posts.tsx b/src/state/preferences/hidden-posts.tsx index 11119ce7..2c6a373e 100644 --- a/src/state/preferences/hidden-posts.tsx +++ b/src/state/preferences/hidden-posts.tsx @@ -1,4 +1,5 @@ import React from 'react' + import * as persisted from '#/state/persisted' type SetStateCb = ( diff --git a/src/state/preferences/index.tsx b/src/state/preferences/index.tsx index 70c8efc8..e1a35f19 100644 --- a/src/state/preferences/index.tsx +++ b/src/state/preferences/index.tsx @@ -8,6 +8,7 @@ import {Provider as HiddenPostsProvider} from './hidden-posts' import {Provider as InAppBrowserProvider} from './in-app-browser' import {Provider as KawaiiProvider} from './kawaii' import {Provider as LanguagesProvider} from './languages' +import {Provider as LargeAltBadgeProvider} from './large-alt-badge' export { useRequireAltTextEnabled, @@ -27,17 +28,19 @@ export function Provider({children}: React.PropsWithChildren<{}>) { return ( - - - - - - {children} - - - - - + + + + + + + {children} + + + + + + ) diff --git a/src/state/preferences/large-alt-badge.tsx b/src/state/preferences/large-alt-badge.tsx new file mode 100644 index 00000000..b3d597c5 --- /dev/null +++ b/src/state/preferences/large-alt-badge.tsx @@ -0,0 +1,49 @@ +import React from 'react' + +import * as persisted from '#/state/persisted' + +type StateContext = persisted.Schema['largeAltBadgeEnabled'] +type SetContext = (v: persisted.Schema['largeAltBadgeEnabled']) => void + +const stateContext = React.createContext( + persisted.defaults.largeAltBadgeEnabled, +) +const setContext = React.createContext( + (_: persisted.Schema['largeAltBadgeEnabled']) => {}, +) + +export function Provider({children}: React.PropsWithChildren<{}>) { + const [state, setState] = React.useState( + persisted.get('largeAltBadgeEnabled'), + ) + + const setStateWrapped = React.useCallback( + (largeAltBadgeEnabled: persisted.Schema['largeAltBadgeEnabled']) => { + setState(largeAltBadgeEnabled) + persisted.write('largeAltBadgeEnabled', largeAltBadgeEnabled) + }, + [setState], + ) + + React.useEffect(() => { + return persisted.onUpdate(() => { + setState(persisted.get('largeAltBadgeEnabled')) + }) + }, [setStateWrapped]) + + return ( + + + {children} + + + ) +} + +export function useLargeAltBadgeEnabled() { + return React.useContext(stateContext) +} + +export function useSetLargeAltBadgeEnabled() { + return React.useContext(setContext) +} diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx index 8d23d258..9bbb2ac1 100644 --- a/src/view/com/util/images/Gallery.tsx +++ b/src/view/com/util/images/Gallery.tsx @@ -5,7 +5,9 @@ import {AppBskyEmbedImages} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {isWeb} from 'platform/detection' +import {isWeb} from '#/platform/detection' +import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' +import {atoms as a} from '#/alf' type EventFunction = (index: number) => void @@ -27,20 +29,21 @@ export const GalleryItem: FC = ({ onLongPress, }) => { const {_} = useLingui() + const largeAltBadge = useLargeAltBadgeEnabled() const image = images[index] return ( - + onPress(index) : undefined} onPressIn={onPressIn ? () => onPressIn(index) : undefined} onLongPress={onLongPress ? () => onLongPress(index) : undefined} - style={styles.fullWidth} + style={a.flex_1} accessibilityRole="button" accessibilityLabel={image.alt || _(msg`Image`)} accessibilityHint=""> = ({ {image.alt === '' ? null : ( - + ALT @@ -59,13 +64,6 @@ export const GalleryItem: FC = ({ } const styles = StyleSheet.create({ - fullWidth: { - flex: 1, - }, - image: { - flex: 1, - borderRadius: 4, - }, altContainer: { backgroundColor: 'rgba(0, 0, 0, 0.75)', borderRadius: 6, diff --git a/src/view/com/util/post-embeds/GifEmbed.tsx b/src/view/com/util/post-embeds/GifEmbed.tsx index f2e2a8b0..1558b75c 100644 --- a/src/view/com/util/post-embeds/GifEmbed.tsx +++ b/src/view/com/util/post-embeds/GifEmbed.tsx @@ -8,6 +8,7 @@ import {useLingui} from '@lingui/react' import {HITSLOP_20} from '#/lib/constants' import {parseAltFromGIFDescription} from '#/lib/gif-alt-text' import {isWeb} from '#/platform/detection' +import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' import {EmbedPlayerParams} from 'lib/strings/embed-player' import {useAutoplayDisabled} from 'state/preferences' import {atoms as a, useTheme} from '#/alf' @@ -157,6 +158,7 @@ export function GifEmbed({ function AltText({text}: {text: string}) { const control = Prompt.usePromptControl() + const largeAltBadge = useLargeAltBadgeEnabled() const {_} = useLingui() return ( @@ -169,7 +171,9 @@ function AltText({text}: {text: string}) { hitSlop={HITSLOP_20} onPress={control.open} style={styles.altContainer}> - + ALT diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index a13fffc3..be34a286 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -21,6 +21,7 @@ import { import {ImagesLightbox, useLightboxControls} from '#/state/lightbox' import {usePalette} from 'lib/hooks/usePalette' import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' +import {atoms as a} from '#/alf' import {ContentHider} from '../../../../components/moderation/ContentHider' import {AutoSizedImage} from '../images/AutoSizedImage' import {ImageLayoutGrid} from '../images/ImageLayoutGrid' @@ -28,6 +29,7 @@ import {ExternalLinkEmbed} from './ExternalLinkEmbed' import {ListEmbed} from './ListEmbed' import {MaybeQuoteEmbed} from './QuoteEmbed' import hairlineWidth = StyleSheet.hairlineWidth +import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' type Embed = | AppBskyEmbedRecord.View @@ -51,6 +53,7 @@ export function PostEmbeds({ }) { const pal = usePalette('default') const {openLightbox} = useLightboxControls() + const largeAltBadge = useLargeAltBadgeEnabled() // quote post with media // = @@ -130,10 +133,12 @@ export function PostEmbeds({ dimensionsHint={aspectRatio} onPress={() => _openLightbox(0)} onPressIn={() => onPressIn(0)} - style={[styles.singleImage]}> + style={a.rounded_sm}> {alt === '' ? null : ( - + ALT @@ -151,9 +156,6 @@ export function PostEmbeds({ images={embed.images} onPress={_openLightbox} onPressIn={onPressIn} - style={ - embed.images.length === 1 ? [styles.singleImage] : undefined - } /> @@ -179,9 +181,6 @@ const styles = StyleSheet.create({ imagesContainer: { marginTop: 8, }, - singleImage: { - borderRadius: 8, - }, altContainer: { backgroundColor: 'rgba(0, 0, 0, 0.75)', borderRadius: 6, diff --git a/src/view/screens/AccessibilitySettings.tsx b/src/view/screens/AccessibilitySettings.tsx index ac0d985f..9ac97933 100644 --- a/src/view/screens/AccessibilitySettings.tsx +++ b/src/view/screens/AccessibilitySettings.tsx @@ -4,13 +4,12 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {useAnalytics} from '#/lib/analytics/analytics' +import {usePalette} from '#/lib/hooks/usePalette' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' import {isNative} from '#/platform/detection' -import {useSetMinimalShellMode} from '#/state/shell' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' import { useAutoplayDisabled, useHapticsDisabled, @@ -18,11 +17,16 @@ import { useSetAutoplayDisabled, useSetHapticsDisabled, useSetRequireAltTextEnabled, -} from 'state/preferences' -import {ToggleButton} from 'view/com/util/forms/ToggleButton' -import {SimpleViewHeader} from '../com/util/SimpleViewHeader' -import {Text} from '../com/util/text/Text' -import {ScrollView} from '../com/util/Views' +} from '#/state/preferences' +import { + useLargeAltBadgeEnabled, + useSetLargeAltBadgeEnabled, +} from '#/state/preferences/large-alt-badge' +import {useSetMinimalShellMode} from '#/state/shell' +import {ToggleButton} from '#/view/com/util/forms/ToggleButton' +import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' +import {Text} from '#/view/com/util/text/Text' +import {ScrollView} from '#/view/com/util/Views' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -41,6 +45,8 @@ export function AccessibilitySettingsScreen({}: Props) { const setAutoplayDisabled = useSetAutoplayDisabled() const hapticsDisabled = useHapticsDisabled() const setHapticsDisabled = useSetHapticsDisabled() + const largeAltBadgeEnabled = useLargeAltBadgeEnabled() + const setLargeAltBadgeEnabled = useSetLargeAltBadgeEnabled() useFocusEffect( React.useCallback(() => { @@ -84,6 +90,13 @@ export function AccessibilitySettingsScreen({}: Props) { isSelected={requireAltTextEnabled} onPress={() => setRequireAltTextEnabled(!requireAltTextEnabled)} /> + setLargeAltBadgeEnabled(!largeAltBadgeEnabled)} + /> Media