From 5fdf8511525b07f7ccfe6957880856b99698e361 Mon Sep 17 00:00:00 2001 From: Alexander Harding Date: Sun, 5 Jan 2025 19:13:18 -0600 Subject: [PATCH] Add setting to hide controls on gallery open --- .../media/gallery/GalleryProvider.tsx | 40 ++++++++++++++++++- src/features/settings/general/media/Media.tsx | 2 + .../general/media/ShowControlsOnOpen.tsx | 23 +++++++++++ src/features/settings/settingsSlice.tsx | 8 ++++ src/services/db.ts | 2 + 5 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 src/features/settings/general/media/ShowControlsOnOpen.tsx diff --git a/src/features/media/gallery/GalleryProvider.tsx b/src/features/media/gallery/GalleryProvider.tsx index 413115d983..891220e9de 100644 --- a/src/features/media/gallery/GalleryProvider.tsx +++ b/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; 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( null, ); @@ -58,6 +62,10 @@ export default function GalleryProvider({ children }: React.PropsWithChildren) { const lightboxRef = useRef(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); }, }); diff --git a/src/features/settings/general/media/Media.tsx b/src/features/settings/general/media/Media.tsx index 39b0262f86..f22810b6e1 100644 --- a/src/features/settings/general/media/Media.tsx +++ b/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() { Media + diff --git a/src/features/settings/general/media/ShowControlsOnOpen.tsx b/src/features/settings/general/media/ShowControlsOnOpen.tsx new file mode 100644 index 0000000000..9f199a9cf4 --- /dev/null +++ b/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 ( + + dispatch(setShowControlsOnOpen(e.detail.checked))} + > + Show Controls When Opened + + + ); +} diff --git a/src/features/settings/settingsSlice.tsx b/src/features/settings/settingsSlice.tsx index ce6da32f50..fc72cd916f 100644 --- a/src/features/settings/settingsSlice.tsx +++ b/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) { + state.general.media.showControlsOnOpen = action.payload; + db.setSetting("show_controls_on_open", action.payload); + }, setShowHiddenInCommunities(state, action: PayloadAction) { 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: { diff --git a/src/services/db.ts b/src/services/db.ts index 3d51c73165..b83dddfe57 100644 --- a/src/services/db.ts +++ b/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()([ "vote_display_mode", "votes_theme", "hide_alt_text", + "show_controls_on_open", ]); export interface ISettingItem {