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