diff --git a/src/state/models/ui/preferences.ts b/src/state/models/ui/preferences.ts index 6e43198a31..d03fa8d24a 100644 --- a/src/state/models/ui/preferences.ts +++ b/src/state/models/ui/preferences.ts @@ -83,7 +83,6 @@ export class PreferencesModel { prioritizeFollowedUsers: true, lab_treeViewEnabled: false, // experimental } - requireAltTextEnabled: boolean = false // used to help with transitions from device-stored to server-stored preferences legacyPreferences: LegacyPreferences | undefined @@ -111,7 +110,6 @@ export class PreferencesModel { contentLabels: this.contentLabels, savedFeeds: this.savedFeeds, pinnedFeeds: this.pinnedFeeds, - requireAltTextEnabled: this.requireAltTextEnabled, } } @@ -180,13 +178,6 @@ export class PreferencesModel { ) { this.pinnedFeeds = v.pinnedFeeds } - // check if requiring alt text is enabled in preferences, then hydrate - if ( - hasProp(v, 'requireAltTextEnabled') && - typeof v.requireAltTextEnabled === 'boolean' - ) { - this.requireAltTextEnabled = v.requireAltTextEnabled - } // grab legacy values this.legacyPreferences = getLegacyPreferences(v) } @@ -608,10 +599,6 @@ export class PreferencesModel { } } - toggleRequireAltTextEnabled() { - this.requireAltTextEnabled = !this.requireAltTextEnabled - } - setPrimaryLanguage(lang: string) { this.primaryLanguage = lang } diff --git a/src/state/persisted/index.ts b/src/state/persisted/index.ts index 67fac6b65b..f43cc9527c 100644 --- a/src/state/persisted/index.ts +++ b/src/state/persisted/index.ts @@ -6,7 +6,7 @@ import * as store from '#/state/persisted/store' import BroadcastChannel from '#/state/persisted/broadcast' export type {Schema} from '#/state/persisted/schema' -export {defaults as schema} from '#/state/persisted/schema' +export {defaults} from '#/state/persisted/schema' const broadcast = new BroadcastChannel('BSKY_BROADCAST_CHANNEL') const UPDATE_EVENT = 'BSKY_UPDATE' diff --git a/src/state/shell/alt-text-required.tsx b/src/state/shell/alt-text-required.tsx new file mode 100644 index 0000000000..81de9e0060 --- /dev/null +++ b/src/state/shell/alt-text-required.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import * as persisted from '#/state/persisted' + +type StateContext = persisted.Schema['requireAltTextEnabled'] +type SetContext = (v: persisted.Schema['requireAltTextEnabled']) => void + +const stateContext = React.createContext( + persisted.defaults.requireAltTextEnabled, +) +const setContext = React.createContext( + (_: persisted.Schema['requireAltTextEnabled']) => {}, +) + +export function Provider({children}: React.PropsWithChildren<{}>) { + const [state, setState] = React.useState( + persisted.get('requireAltTextEnabled'), + ) + + const setStateWrapped = React.useCallback( + (requireAltTextEnabled: persisted.Schema['requireAltTextEnabled']) => { + setState(requireAltTextEnabled) + persisted.write('requireAltTextEnabled', requireAltTextEnabled) + }, + [setState], + ) + + React.useEffect(() => { + return persisted.onUpdate(() => { + setState(persisted.get('requireAltTextEnabled')) + }) + }, [setStateWrapped]) + + return ( + + + {children} + + + ) +} + +export function useRequireAltTextEnabled() { + return React.useContext(stateContext) +} + +export function useSetRequireAltTextEnabled() { + return React.useContext(setContext) +} diff --git a/src/state/shell/index.tsx b/src/state/shell/index.tsx index 1e01a4e7d5..807ee79ab8 100644 --- a/src/state/shell/index.tsx +++ b/src/state/shell/index.tsx @@ -3,6 +3,7 @@ import {Provider as DrawerOpenProvider} from './drawer-open' import {Provider as DrawerSwipableProvider} from './drawer-swipe-disabled' import {Provider as MinimalModeProvider} from './minimal-mode' import {Provider as ColorModeProvider} from './color-mode' +import {Provider as AltTextRequiredProvider} from './alt-text-required' export {useIsDrawerOpen, useSetDrawerOpen} from './drawer-open' export { @@ -11,13 +12,19 @@ export { } from './drawer-swipe-disabled' export {useMinimalShellMode, useSetMinimalShellMode} from './minimal-mode' export {useColorMode, useSetColorMode} from './color-mode' +export { + useRequireAltTextEnabled, + useSetRequireAltTextEnabled, +} from './alt-text-required' export function Provider({children}: React.PropsWithChildren<{}>) { return ( - {children} + + {children} + diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index e44a0ce010..a08992df42 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -49,6 +49,7 @@ import {LabelsBtn} from './labels/LabelsBtn' import {SelectLangBtn} from './select-language/SelectLangBtn' import {EmojiPickerButton} from './text-input/web/EmojiPicker.web' import {insertMentionAt} from 'lib/strings/mention-manip' +import {useRequireAltTextEnabled} from '#/state/shell' type Props = ComposerOpts export const ComposePost = observer(function ComposePost({ @@ -61,6 +62,7 @@ export const ComposePost = observer(function ComposePost({ const pal = usePalette('default') const {isDesktop, isMobile} = useWebMediaQueries() const store = useStores() + const requireAltTextEnabled = useRequireAltTextEnabled() const textInput = useRef(null) const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true}) const [isProcessing, setIsProcessing] = useState(false) @@ -187,7 +189,7 @@ export const ComposePost = observer(function ComposePost({ if (isProcessing || graphemeLength > MAX_GRAPHEME_LENGTH) { return } - if (store.preferences.requireAltTextEnabled && gallery.needsAltText) { + if (requireAltTextEnabled && gallery.needsAltText) { return } @@ -241,12 +243,8 @@ export const ComposePost = observer(function ComposePost({ const canPost = useMemo( () => graphemeLength <= MAX_GRAPHEME_LENGTH && - (!store.preferences.requireAltTextEnabled || !gallery.needsAltText), - [ - graphemeLength, - store.preferences.requireAltTextEnabled, - gallery.needsAltText, - ], + (!requireAltTextEnabled || !gallery.needsAltText), + [graphemeLength, requireAltTextEnabled, gallery.needsAltText], ) const selectTextInputPlaceholder = replyTo ? 'Write your reply' : `What's up?` @@ -314,7 +312,7 @@ export const ComposePost = observer(function ComposePost({ )} - {store.preferences.requireAltTextEnabled && gallery.needsAltText && ( + {requireAltTextEnabled && gallery.needsAltText && ( () const {isMobile} = useWebMediaQueries() const {screen, track} = useAnalytics() @@ -372,8 +376,8 @@ export const SettingsScreen = withAuthRequired( type="default-light" label="Require alt text before posting" labelType="lg" - isSelected={store.preferences.requireAltTextEnabled} - onPress={store.preferences.toggleRequireAltTextEnabled} + isSelected={requireAltTextEnabled} + onPress={() => setRequireAltTextEnabled(!requireAltTextEnabled)} />