first prototype of MediaQuickview

src/timelines/toots/MediaAttachmentGrid.tsx

@@ -5,13 +5,9 @@ import {
   Match,
   Switch,
   createMemo,
-  createRenderEffect,
   createSignal,
-  onCleanup,
   untrack,
 } from "solid-js";
-import MediaViewer from "../MediaViewer";
-import { render } from "solid-js/web";
 import {
   createElementSize,
   useWindowSize,
@@ -24,6 +20,7 @@ import "~material/cards.css";
 import { Preview } from "@suid/icons-material";
 import { IconButton } from "@suid/material";
 import Masonry from "~platform/Masonry";
+import { createMediaQuickview } from "~platform/MediaQuickview";
 
 type ElementSize = { width: number; height: number };
 
@@ -58,39 +55,23 @@ const MediaAttachmentGrid: Component<{
   sensitive?: boolean;
 }> = (props) => {
   const [rootRef, setRootRef] = createSignal<HTMLElement>();
-  const [viewerIndex, setViewerIndex] = createSignal<number>();
-  const viewerOpened = () => typeof viewerIndex() !== "undefined";
   const settings = useStore($settings);
   const windowSize = useWindowSize();
   const [reveal, setReveal] = createSignal([] as number[]);
 
-  createRenderEffect(() => {
-    const vidx = viewerIndex();
-    if (typeof vidx === "undefined") return;
-    const container = document.createElement("div");
-    container.setAttribute("role", "presentation");
-    document.body.appendChild(container);
-    const dispose = render(() => {
-      onCleanup(() => {
-        document.body.removeChild(container);
-      });
-
-      return (
-        <MediaViewer
-          show={viewerOpened()}
-          index={viewerIndex() || 0}
-          onIndexUpdated={setViewerIndex}
-          media={props.attachments}
-          onClose={() => setViewerIndex()}
-        />
-      );
-    }, container);
-
-    onCleanup(dispose);
-  });
+  const openMediaQuickview = createMediaQuickview();
 
   const openViewerFor = (index: number) => {
-    setViewerIndex(index);
+    openMediaQuickview(
+      props.attachments.map((item) => {
+        return {
+          cat: item.type,
+          src: item.url as string,
+          alt: item.description || undefined,
+        };
+      }),
+      index,
+    );
   };
 
   const columnCount = () => {