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 {