feat: setting to hide accessible captions (#1792)

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 (
     <div className={cx("alt-text", styles.container)}>

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,17 +16,21 @@ export default function ImageMoreActions({
   imgSrc,
   alt,
 }: ImageMoreActionsProps) {
+  const hideAltText = useAppSelector(
+    (state) => state.settings.general.media.hideAltText,
+  );
+
   return (
     <>
       {isNative() && (
         <div className={styles.topContainer}>
           <GalleryActions imgSrc={imgSrc} />
         </div>
       )}
-      {alt && (
+      {alt && !hideAltText && (
         <BottomContainer>
           <AltText alt={alt} />
-          <BottomContainerActions withBg={!!alt} />
+          <BottomContainerActions withBg />
         </BottomContainer>
       )}
     </>

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() {
       <Posts />
       <Comments />
       <Safari />
+      <Media />
       <Other />
     </>
   );

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 (
+    <IonItem>
+      <IonToggle
+        checked={hideAltText}
+        onIonChange={(e) => dispatch(setHideAltText(e.detail.checked))}
+      >
+        Hide Accessible Captions
+      </IonToggle>
+    </IonItem>
+  );
+}

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 (
+    <>
+      <ListHeader>
+        <IonLabel>Media</IonLabel>
+      </ListHeader>
+      <IonList inset>
+        <HideAltText />
+      </IonList>
+    </>
+  );
+}

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<boolean>) {
+      state.general.media.hideAltText = action.payload;
+      db.setSetting("hide_alt_text", action.payload);
+    },
     setHighlightNewAccount(state, action: PayloadAction<boolean>) {
       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,

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<keyof GlobalSettingValueTypes>()([
   "user_instance_url_display",
   "vote_display_mode",
   "votes_theme",
+  "hide_alt_text",
 ]);
 
 export interface ISettingItem<T extends keyof SettingValueTypes> {