Fix NSFW messaging visible when image opened with scaling animation

aeharding · May 5, 2024 · c20c740 · c20c740
1 parent 09180b7
commit c20c740
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git a/src/features/media/gallery/GalleryProvider.tsx b/src/features/media/gallery/GalleryProvider.tsx
@@ -26,6 +26,10 @@ import type ZoomLevel from "photoswipe/dist/types/slide/zoom-level";
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 
 import "photoswipe/style.css";
+import {
+  LARGE_POST_MEDIA_CONTAINER_CLASSNAME,
+  LARGE_POST_MEDIA_CONTAINER_HIDDEN_CLASSNAME,
+} from "../../post/inFeed/large/LargePostContents";
 
 interface IGalleryContext {
   // used for determining whether page needs to be scrolled up first
@@ -173,13 +177,33 @@ export default function GalleryProvider({ children }: GalleryProviderProps) {
       instance.on("openingAnimationStart", () => {
         if (animationType !== "zoom") return;
 
-        thumbEl.style.setProperty("visibility", "hidden");
+        const largePostMediaContainerEl = thumbEl.closest(
+          `.${LARGE_POST_MEDIA_CONTAINER_CLASSNAME}`,
+        );
+
+        if (largePostMediaContainerEl) {
+          largePostMediaContainerEl.classList.add(
+            LARGE_POST_MEDIA_CONTAINER_HIDDEN_CLASSNAME,
+          );
+        } else {
+          thumbEl.style.setProperty("visibility", "hidden");
+        }
       });
 
       const cleanupHideThumb = () => {
         if (animationType !== "zoom") return;
 
-        thumbEl.style.removeProperty("visibility");
+        const largePostMediaContainerEl = thumbEl.closest(
+          `.${LARGE_POST_MEDIA_CONTAINER_CLASSNAME}`,
+        );
+
+        if (largePostMediaContainerEl) {
+          largePostMediaContainerEl.classList.remove(
+            LARGE_POST_MEDIA_CONTAINER_HIDDEN_CLASSNAME,
+          );
+        } else {
+          thumbEl.style.removeProperty("visibility");
+        }
       };
 
       instance.on("closingAnimationEnd", cleanupHideThumb);

diff --git a/src/features/post/inFeed/large/LargePostContents.tsx b/src/features/post/inFeed/large/LargePostContents.tsx
@@ -11,6 +11,11 @@ import { InFeedContext } from "../../../feed/Feed";
 import useIsPostUrlMedia from "../../useIsPostUrlMedia";
 import PostLink from "../../link/PostLink";
 
+// This is needed to hide NSFW messaging, etc when image is open
+export const LARGE_POST_MEDIA_CONTAINER_CLASSNAME =
+  "large-post-media-container";
+export const LARGE_POST_MEDIA_CONTAINER_HIDDEN_CLASSNAME = "hidden";
+
 const PostBody = styled.div`
   font-size: 0.8em;
   line-height: 1.25;
@@ -36,6 +41,12 @@ const postBodyUnreadCss = css`
 const ImageContainer = styled.div`
   overflow: hidden;
   margin: 0 -12px;
+
+  &.${LARGE_POST_MEDIA_CONTAINER_HIDDEN_CLASSNAME} {
+    img {
+      visibility: hidden;
+    }
+  }
 `;
 
 interface LargePostContentsProps {
@@ -64,7 +75,7 @@ export default function LargePostContents({ post }: LargePostContentsProps) {
 
   if (urlIsMedia || markdownLoneImage) {
     return (
-      <ImageContainer>
+      <ImageContainer className={LARGE_POST_MEDIA_CONTAINER_CLASSNAME}>
         <LargeFeedPostMedia
           blur={inFeed ? isNsfwBlurred(post, blurNsfw) : false}
           post={post}

diff --git a/src/features/post/inFeed/large/media/BlurOverlayMessage.tsx b/src/features/post/inFeed/large/media/BlurOverlayMessage.tsx
@@ -1,6 +1,10 @@
 import { IonIcon } from "@ionic/react";
 import { styled } from "@linaria/react";
 import { alertCircle } from "ionicons/icons";
+import {
+  LARGE_POST_MEDIA_CONTAINER_CLASSNAME,
+  LARGE_POST_MEDIA_CONTAINER_HIDDEN_CLASSNAME,
+} from "../LargePostContents";
 
 const MessageContainer = styled.div`
   // Safari bug where absolutely positioned content isn't viewable over
@@ -23,6 +27,11 @@ const MessageContainer = styled.div`
   pointer-events: none;
 
   container-type: size;
+
+  .${LARGE_POST_MEDIA_CONTAINER_CLASSNAME}.${LARGE_POST_MEDIA_CONTAINER_HIDDEN_CLASSNAME}
+    & {
+    visibility: hidden;
+  }
 `;
 
 const WarningIcon = styled(IonIcon)`