diff --git a/src/features/media/gallery/actions/AltText.tsx b/src/features/media/gallery/actions/AltText.tsx index a88f56ed5c..5bb1293cba 100644 --- a/src/features/media/gallery/actions/AltText.tsx +++ b/src/features/media/gallery/actions/AltText.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; import { cx } from "#/helpers/css"; +import { useAppSelector } from "#/store"; import styles from "./AltText.module.css"; @@ -9,9 +10,12 @@ interface AltTextProps { } export default function AltText({ alt }: AltTextProps) { + const hideAltText = useAppSelector( + (state) => state.settings.general.media.hideAltText, + ); const [shouldClampAltText, setShouldClampAltText] = useState(true); - if (!alt) return; + if (!alt || hideAltText) return; return (
diff --git a/src/features/media/gallery/actions/ImageMoreActions.tsx b/src/features/media/gallery/actions/ImageMoreActions.tsx index a0e24bd4c0..683a70c362 100644 --- a/src/features/media/gallery/actions/ImageMoreActions.tsx +++ b/src/features/media/gallery/actions/ImageMoreActions.tsx @@ -1,4 +1,5 @@ import { isNative } from "#/helpers/device"; +import { useAppSelector } from "#/store"; import AltText from "./AltText"; import GalleryActions from "./GalleryActions"; @@ -15,6 +16,10 @@ export default function ImageMoreActions({ imgSrc, alt, }: ImageMoreActionsProps) { + const hideAltText = useAppSelector( + (state) => state.settings.general.media.hideAltText, + ); + return ( <> {isNative() && ( @@ -22,10 +27,10 @@ export default function ImageMoreActions({
)} - {alt && ( + {alt && !hideAltText && ( - + )} diff --git a/src/features/settings/general/GeneralSettings.tsx b/src/features/settings/general/GeneralSettings.tsx index a8303aa5dc..208aca7201 100644 --- a/src/features/settings/general/GeneralSettings.tsx +++ b/src/features/settings/general/GeneralSettings.tsx @@ -1,4 +1,5 @@ import Comments from "./comments/Comments"; +import Media from "./media/Media"; import Other from "./other/Other"; import Posts from "./posts/Posts"; import Safari from "./safari/Safari"; @@ -9,6 +10,7 @@ export default function GeneralSettings() { + ); diff --git a/src/features/settings/general/media/HideAltText.tsx b/src/features/settings/general/media/HideAltText.tsx new file mode 100644 index 0000000000..266e21ebb4 --- /dev/null +++ b/src/features/settings/general/media/HideAltText.tsx @@ -0,0 +1,23 @@ +import { IonItem, IonToggle } from "@ionic/react"; + +import { useAppDispatch, useAppSelector } from "#/store"; + +import { setHideAltText } from "../../settingsSlice"; + +export default function HideAltText() { + const dispatch = useAppDispatch(); + const hideAltText = useAppSelector( + (state) => state.settings.general.media.hideAltText, + ); + + return ( + + dispatch(setHideAltText(e.detail.checked))} + > + Hide Accessible Captions + + + ); +} diff --git a/src/features/settings/general/media/Media.tsx b/src/features/settings/general/media/Media.tsx new file mode 100644 index 0000000000..39b0262f86 --- /dev/null +++ b/src/features/settings/general/media/Media.tsx @@ -0,0 +1,19 @@ +import { IonLabel } from "@ionic/react"; +import { IonList } from "@ionic/react"; + +import { ListHeader } from "#/features/settings/shared/formatting"; + +import HideAltText from "./HideAltText"; + +export default function Media() { + return ( + <> + + Media + + + + + + ); +} diff --git a/src/features/settings/settingsSlice.tsx b/src/features/settings/settingsSlice.tsx index 3d32e08c93..ce6da32f50 100644 --- a/src/features/settings/settingsSlice.tsx +++ b/src/features/settings/settingsSlice.tsx @@ -146,6 +146,9 @@ export interface SettingsState { safari: { alwaysUseReaderMode: boolean; }; + media: { + hideAltText: boolean; + }; enableHapticFeedback: boolean; linkHandler: LinkHandlerType; preferNativeApps: boolean; @@ -233,6 +236,9 @@ const baseState: SettingsState = { defaultFeed: undefined, enableHapticFeedback: true, linkHandler: OLinkHandlerType.InApp, + media: { + hideAltText: false, + }, noSubscribedInFeed: false, posts: { autoHideRead: false, @@ -387,6 +393,10 @@ export const settingsSlice = createSlice({ state.appearance.font.fontSizeMultiplier = action.payload; set(LOCALSTORAGE_KEYS.FONT.FONT_SIZE_MULTIPLIER, action.payload); }, + setHideAltText(state, action: PayloadAction) { + state.general.media.hideAltText = action.payload; + db.setSetting("hide_alt_text", action.payload); + }, setHighlightNewAccount(state, action: PayloadAction) { state.general.comments.highlightNewAccount = action.payload; db.setSetting("highlight_new_account", action.payload); @@ -769,6 +779,7 @@ export const { setFilteredKeywords, setFilteredWebsites, setFontSizeMultiplier, + setHideAltText, setHighlightNewAccount, setInfiniteScrolling, setJumpButtonPosition, @@ -878,6 +889,9 @@ function hydrateStateWithGlobalSettings( }, enableHapticFeedback: settings.enable_haptic_feedback, linkHandler: settings.link_handler, + media: { + hideAltText: settings.hide_alt_text, + }, noSubscribedInFeed: settings.no_subscribed_in_feed, posts: { autoHideRead: settings.auto_hide_read, diff --git a/src/services/db.ts b/src/services/db.ts index 8419dac939..3d51c73165 100644 --- a/src/services/db.ts +++ b/src/services/db.ts @@ -346,6 +346,7 @@ export interface GlobalSettingValueTypes { enable_haptic_feedback: boolean; filtered_keywords: string[]; filtered_websites: string[]; + hide_alt_text: boolean; highlight_new_account: boolean; infinite_scrolling: boolean; jump_button_position: JumpButtonPositionType; @@ -456,6 +457,7 @@ export const ALL_GLOBAL_SETTINGS = arrayOfAll()([ "user_instance_url_display", "vote_display_mode", "votes_theme", + "hide_alt_text", ]); export interface ISettingItem {