From 2b2cc2000a302052c64abff0117d8dd6fdcbee5f Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sat, 14 Sep 2024 21:17:03 +0800
Subject: [PATCH] MediaAttachmentGrid: fix viewer DOM not removed

---
 src/timelines/MediaAttachmentGrid.tsx | 28 +++++++++++++++------------
 src/timelines/MediaViewer.tsx         |  2 +-
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx
index d3b0058..76d9f96 100644
--- a/src/timelines/MediaAttachmentGrid.tsx
+++ b/src/timelines/MediaAttachmentGrid.tsx
@@ -2,6 +2,8 @@ import type { mastodon } from "masto";
 import {
   type Component,
   For,
+  createEffect,
+  createRenderEffect,
   createSignal,
   onCleanup,
   onMount,
@@ -15,6 +17,7 @@ const MediaAttachmentGrid: Component<{
   attachments: mastodon.v1.MediaAttachment[];
 }> = (props) => {
   let rootRef: HTMLElement;
+  const [dispose, setDispose] = createSignal<() => void>();
   const [viewerIndex, setViewerIndex] = createSignal<number>();
   const viewerOpened = () => typeof viewerIndex() !== "undefined";
   const gridTemplateColumns = () => {
@@ -28,31 +31,32 @@ const MediaAttachmentGrid: Component<{
     return "repeat(3, minmax(40px, auto))";
   };
 
-  const openViewerFor = (index: number) => {
-    setViewerIndex(index);
+  createRenderEffect((lastDispose?: () => void) => {
+    lastDispose?.();
+    const vidx = viewerIndex();
+    if (typeof vidx === "undefined") return;
     const container = document.createElement("div");
     container.setAttribute("role", "presentation");
     document.body.appendChild(container);
+    return render(() => {
+      onCleanup(() => {
+        document.body.removeChild(container);
+      });
 
-    let dispose: () => void;
-
-    const removeContainer = () => {
-      setViewerIndex(undefined);
-      document.body.removeChild(container);
-      dispose();
-    };
-
-    dispose = render(() => {
       return (
         <MediaViewer
           show={viewerOpened()}
           index={viewerIndex() || 0}
           onIndexUpdated={setViewerIndex}
           media={props.attachments}
-          onClose={removeContainer}
+          onClose={() => setViewerIndex()}
         />
       );
     }, container);
+  });
+
+  const openViewerFor = (index: number) => {
+    setViewerIndex(index);
   };
 
   css`
diff --git a/src/timelines/MediaViewer.tsx b/src/timelines/MediaViewer.tsx
index f573031..ba92772 100644
--- a/src/timelines/MediaViewer.tsx
+++ b/src/timelines/MediaViewer.tsx
@@ -323,7 +323,7 @@ const MediaViewer: ParentComponent<MediaViewerProps> = (props) => {
               boxShadow: showControls() ? "var(--tutu-shadow-e6)" : undefined,
             }}
           >
-            <IconButton onClick={props.onClose}>
+            <IconButton onClick={props.onClose} disableRipple>
               <Close />
             </IconButton>
           </Toolbar>