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 <dan.abramov@gmail.com>

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: {

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']

src/state/preferences/hidden-posts.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import * as persisted from '#/state/persisted'
 
 type SetStateCb = (

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,6 +28,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   return (
     <LanguagesProvider>
       <AltTextRequiredProvider>
+        <LargeAltBadgeProvider>
           <ExternalEmbedsProvider>
             <HiddenPostsProvider>
               <InAppBrowserProvider>
@@ -38,6 +40,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
               </InAppBrowserProvider>
             </HiddenPostsProvider>
           </ExternalEmbedsProvider>
+        </LargeAltBadgeProvider>
       </AltTextRequiredProvider>
     </LanguagesProvider>
   )

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<StateContext>(
+  persisted.defaults.largeAltBadgeEnabled,
+)
+const setContext = React.createContext<SetContext>(
+  (_: 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 (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setStateWrapped}>
+        {children}
+      </setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useLargeAltBadgeEnabled() {
+  return React.useContext(stateContext)
+}
+
+export function useSetLargeAltBadgeEnabled() {
+  return React.useContext(setContext)
+}

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<GalleryItemProps> = ({
   onLongPress,
 }) => {
   const {_} = useLingui()
+  const largeAltBadge = useLargeAltBadgeEnabled()
   const image = images[index]
   return (
-    <View style={styles.fullWidth}>
+    <View style={a.flex_1}>
       <Pressable
         onPress={onPress ? () => 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
           source={{uri: image.thumb}}
-          style={[styles.image, imageStyle]}
+          style={[a.flex_1, a.rounded_xs, imageStyle]}
           accessible={true}
           accessibilityLabel={image.alt}
           accessibilityHint=""
@@ -49,7 +52,9 @@ export const GalleryItem: FC<GalleryItemProps> = ({
       </Pressable>
       {image.alt === '' ? null : (
         <View style={styles.altContainer}>
-          <Text style={styles.alt} accessible={false}>
+          <Text
+            style={[styles.alt, largeAltBadge && a.text_xs]}
+            accessible={false}>
             ALT
           </Text>
         </View>
@@ -59,13 +64,6 @@ export const GalleryItem: FC<GalleryItemProps> = ({
 }
 
 const styles = StyleSheet.create({
-  fullWidth: {
-    flex: 1,
-  },
-  image: {
-    flex: 1,
-    borderRadius: 4,
-  },
   altContainer: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 6,

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}>
-        <Text style={styles.alt} accessible={false}>
+        <Text
+          style={[styles.alt, largeAltBadge && a.text_xs]}
+          accessible={false}>
           <Trans>ALT</Trans>
         </Text>
       </TouchableOpacity>

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 : (
                   <View style={styles.altContainer}>
-                    <Text style={styles.alt} accessible={false}>
+                    <Text
+                      style={[styles.alt, largeAltBadge && a.text_xs]}
+                      accessible={false}>
                       ALT
                     </Text>
                   </View>
@@ -151,9 +156,6 @@ export function PostEmbeds({
               images={embed.images}
               onPress={_openLightbox}
               onPressIn={onPressIn}
-              style={
-                embed.images.length === 1 ? [styles.singleImage] : undefined
-              }
             />
           </View>
         </ContentHider>
@@ -179,9 +181,6 @@ const styles = StyleSheet.create({
   imagesContainer: {
     marginTop: 8,
   },
-  singleImage: {
-    borderRadius: 8,
-  },
   altContainer: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 6,

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)}
           />
+          <ToggleButton
+            type="default-light"
+            label={_(msg`Display larger alt text badges`)}
+            labelType="lg"
+            isSelected={!!largeAltBadgeEnabled}
+            onPress={() => setLargeAltBadgeEnabled(!largeAltBadgeEnabled)}
+          />
         </View>
         <Text type="xl-bold" style={[pal.text, styles.heading]}>
           <Trans>Media</Trans>