feat: setting to hide controls on gallery open

src/features/media/gallery/GalleryProvider.tsx

@@ -18,7 +18,7 @@ import { useLocation } from "react-router";
 import { findBlurOverlayContainer } from "#/features/post/inFeed/large/media/BlurOverlayMessage";
 import { setPostRead } from "#/features/post/postSlice";
 import { getSafeArea, isAndroid, isNative } from "#/helpers/device";
-import { useAppDispatch } from "#/store";
+import { useAppDispatch, useAppSelector } from "#/store";
 
 import GalleryPostActions from "./actions/GalleryPostActions";
 import ImageMoreActions from "./actions/ImageMoreActions";
@@ -49,6 +49,10 @@ type ThumbEl = ComponentRef<typeof GalleryMedia>;
 
 export default function GalleryProvider({ children }: React.PropsWithChildren) {
   const dispatch = useAppDispatch();
+  const showControlsOnOpen = useAppSelector(
+    (state) => state.settings.general.media.showControlsOnOpen,
+  );
+  const showControlsOnOpenRef = useRef(showControlsOnOpen);
   const [actionContainer, setActionContainer] = useState<HTMLElement | null>(
     null,
   );
@@ -58,6 +62,10 @@ export default function GalleryProvider({ children }: React.PropsWithChildren) {
   const lightboxRef = useRef<PhotoSwipeLightbox | null>(null);
   const location = useLocation();
 
+  useEffect(() => {
+    showControlsOnOpenRef.current = showControlsOnOpen;
+  }, [showControlsOnOpen]);
+
   useEffect(() => {
     return () => {
       lightboxRef.current?.destroy();
@@ -229,15 +237,43 @@ export default function GalleryProvider({ children }: React.PropsWithChildren) {
       });
 
       instance.on("openingAnimationEnd", () => {
+        preventControlsIfNeeded();
+
         if (!post) return;
 
         dispatch(setPostRead(post.post.id));
       });
 
       instance.on("openingAnimationStart", () => {
+        preventControlsIfNeeded();
+
         if (isNative()) StatusBar.hide();
       });
 
+      instance.on("imageClickAction", (e) => {
+        const showingControls =
+          instance.pswp?.gestures.pswp.element?.classList.contains(
+            "pswp--ui-visible",
+          );
+
+        if (!showingControls && currZoomLevel === zoomLevel.initial) {
+          instance.pswp?.gestures.pswp.element?.classList.add(
+            "pswp--ui-visible",
+          );
+          e.preventDefault();
+        }
+      });
+
+      function preventControlsIfNeeded() {
+        if (showControlsOnOpenRef.current) return;
+
+        queueMicrotask(() => {
+          instance.pswp?.gestures.pswp.element?.classList.remove(
+            "pswp--ui-visible",
+          );
+        });
+      }
+
       instance.on("close", () => {
         if (isNative()) StatusBar.show();
       });
@@ -246,6 +282,8 @@ export default function GalleryProvider({ children }: React.PropsWithChildren) {
         instance.pswp?.ui?.registerElement({
           appendTo: "root",
           onInit: (el) => {
+            preventControlsIfNeeded();
+
             setActionContainer(el);
           },
         });

src/features/settings/general/media/Media.tsx

@@ -4,6 +4,7 @@ import { IonList } from "@ionic/react";
 import { ListHeader } from "#/features/settings/shared/formatting";
 
 import HideAltText from "./HideAltText";
+import ShowControlsOnOpen from "./ShowControlsOnOpen";
 
 export default function Media() {
   return (
@@ -12,6 +13,7 @@ export default function Media() {
         <IonLabel>Media</IonLabel>
       </ListHeader>
       <IonList inset>
+        <ShowControlsOnOpen />
         <HideAltText />
       </IonList>
     </>

src/features/settings/general/media/ShowControlsOnOpen.tsx

@@ -0,0 +1,23 @@
+import { IonItem, IonToggle } from "@ionic/react";
+
+import { useAppDispatch, useAppSelector } from "#/store";
+
+import { setShowControlsOnOpen } from "../../settingsSlice";
+
+export default function ShowControlsOnOpen() {
+  const dispatch = useAppDispatch();
+  const showControlsOnOpen = useAppSelector(
+    (state) => state.settings.general.media.showControlsOnOpen,
+  );
+
+  return (
+    <IonItem>
+      <IonToggle
+        checked={showControlsOnOpen}
+        onIonChange={(e) => dispatch(setShowControlsOnOpen(e.detail.checked))}
+      >
+        Show Controls When Opened
+      </IonToggle>
+    </IonItem>
+  );
+}

src/features/settings/settingsSlice.tsx

@@ -148,6 +148,7 @@ export interface SettingsState {
     };
     media: {
       hideAltText: boolean;
+      showControlsOnOpen: boolean;
     };
     enableHapticFeedback: boolean;
     linkHandler: LinkHandlerType;
@@ -238,6 +239,7 @@ const baseState: SettingsState = {
     linkHandler: OLinkHandlerType.InApp,
     media: {
       hideAltText: false,
+      showControlsOnOpen: true,
     },
     noSubscribedInFeed: false,
     posts: {
@@ -482,6 +484,10 @@ export const settingsSlice = createSlice({
       state.appearance.posts.showCommunityIcons = action.payload;
       db.setSetting("show_community_icons", action.payload);
     },
+    setShowControlsOnOpen(state, action: PayloadAction<boolean>) {
+      state.general.media.showControlsOnOpen = action.payload;
+      db.setSetting("show_controls_on_open", action.payload);
+    },
     setShowHiddenInCommunities(state, action: PayloadAction<boolean>) {
       state.general.posts.showHiddenInCommunities = action.payload;
 
@@ -799,6 +805,7 @@ export const {
   setShowCollapsedComment,
   setShowCommentImages,
   setShowCommunityIcons,
+  setShowControlsOnOpen,
   setShowHiddenInCommunities,
   setShowHideReadButton,
   setShowJumpButton,
@@ -891,6 +898,7 @@ function hydrateStateWithGlobalSettings(
       linkHandler: settings.link_handler,
       media: {
         hideAltText: settings.hide_alt_text,
+        showControlsOnOpen: settings.show_controls_on_open,
       },
       noSubscribedInFeed: settings.no_subscribed_in_feed,
       posts: {

src/services/db.ts

@@ -364,6 +364,7 @@ export interface GlobalSettingValueTypes {
   show_collapsed_comment: boolean;
   show_comment_images: boolean;
   show_community_icons: boolean;
+  show_controls_on_open: boolean;
   show_hidden_in_communities: boolean;
   show_hide_read_button: boolean;
   show_jump_button: boolean;
@@ -458,6 +459,7 @@ export const ALL_GLOBAL_SETTINGS = arrayOfAll<keyof GlobalSettingValueTypes>()([
   "vote_display_mode",
   "votes_theme",
   "hide_alt_text",
+  "show_controls_on_open",
 ]);
 
 export interface ISettingItem<T extends keyof SettingValueTypes> {