Fix NSFW messaging visible when image opened with scaling animation (a…

…eharding#1462)
wudong · May 6, 2024 · 9b388b0 · 9b388b0
1 parent 39f6c88
commit 9b388b0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/src/features/media/gallery/GalleryProvider.tsx b/src/features/media/gallery/GalleryProvider.tsx
@@ -26,6 +26,8 @@ import type ZoomLevel from "photoswipe/dist/types/slide/zoom-level";
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 
 import "photoswipe/style.css";
+import { findBlurOverlayContainer } from "../../post/inFeed/large/media/BlurOverlayMessage";
+import { compact } from "lodash";
 
 interface IGalleryContext {
   // used for determining whether page needs to be scrolled up first
@@ -173,13 +175,17 @@ export default function GalleryProvider({ children }: GalleryProviderProps) {
       instance.on("openingAnimationStart", () => {
         if (animationType !== "zoom") return;
 
-        thumbEl.style.setProperty("visibility", "hidden");
+        compact([thumbEl, findBlurOverlayContainer(thumbEl)]).forEach((el) =>
+          el.style.setProperty("visibility", "hidden"),
+        );
       });
 
       const cleanupHideThumb = () => {
         if (animationType !== "zoom") return;
 
-        thumbEl.style.removeProperty("visibility");
+        compact([thumbEl, findBlurOverlayContainer(thumbEl)]).forEach((el) =>
+          el.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,10 @@ 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";
+
 const PostBody = styled.div`
   font-size: 0.8em;
   line-height: 1.25;
@@ -64,7 +68,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,7 @@
 import { IonIcon } from "@ionic/react";
 import { styled } from "@linaria/react";
 import { alertCircle } from "ionicons/icons";
+import { LARGE_POST_MEDIA_CONTAINER_CLASSNAME } from "../LargePostContents";
 
 const MessageContainer = styled.div`
   // Safari bug where absolutely positioned content isn't viewable over
@@ -55,12 +56,24 @@ const Description = styled.div`
   ${showIfTaller}
 `;
 
+const BLUR_OVERLAY_CONTAINER_CLASSNAME = "blur-overlay-container";
+
 export default function BlurOverlayMessage() {
   return (
-    <MessageContainer>
+    <MessageContainer className={BLUR_OVERLAY_CONTAINER_CLASSNAME}>
       <WarningIcon icon={alertCircle} />
       <Title>NSFW</Title>
       <Description>Sensitive content — tap to view</Description>
     </MessageContainer>
   );
 }
+
+export function findBlurOverlayContainer(
+  imgEl: HTMLElement,
+): HTMLElement | undefined {
+  const el = imgEl
+    .closest(`.${LARGE_POST_MEDIA_CONTAINER_CLASSNAME}`)
+    ?.querySelector(`.${BLUR_OVERLAY_CONTAINER_CLASSNAME}`);
+
+  if (el instanceof HTMLElement) return el;
+}