update

src/components/textNote/ImageDisplay.tsx

@@ -1,4 +1,4 @@
-import { Component, createEffect, createSignal, Show } from 'solid-js';
+import { Component, createEffect, createSignal, onMount, Show, JSX } from 'solid-js';
 import { fixUrl } from '@/utils/imageUrl';
 import SafeLink from '../utils/SafeLink';
 
@@ -8,7 +8,37 @@ type ImageDisplayProps = {
 };
 
 const ImageDisplay: Component<ImageDisplayProps> = (props) => {
+  let imageRef: HTMLImageElement | undefined;
+  let canvasRef: HTMLCanvasElement | undefined;
+
   const [hidden, setHidden] = createSignal(props.initialHidden);
+  const [playing, setPlaying] = createSignal(true);
+
+  const isGIF = () => props.url.match(/\.gif/i);
+
+  const play = () => {
+    setPlaying(true);
+  };
+
+  const stop = () => {
+    if (canvasRef == null || imageRef == null) return;
+    canvasRef.width = imageRef.width;
+    canvasRef.height = imageRef.height;
+    canvasRef
+      .getContext('2d')
+      ?.drawImage(
+        imageRef,
+        0,
+        0,
+        imageRef.naturalWidth,
+        imageRef.naturalHeight,
+        0,
+        0,
+        imageRef.width,
+        imageRef.height,
+      );
+    setPlaying(false);
+  };
 
   return (
     <Show
@@ -24,11 +54,45 @@ const ImageDisplay: Component<ImageDisplayProps> = (props) => {
     >
       <SafeLink class="my-2 block" href={props.url}>
         <img
-          class="inline-block max-h-64 max-w-full rounded object-contain shadow hover:shadow-md"
-          src={fixUrl(props.url)}
+          ref={imageRef}
+          class="max-h-64 max-w-full rounded object-contain shadow hover:shadow-md"
+          classList={{
+            'inline-block': playing(),
+            hidden: !playing(),
+          }}
+          src={playing() ? fixUrl(props.url) : undefined}
           alt={props.url}
         />
+        <canvas
+          ref={canvasRef}
+          class="inline-block max-h-64 max-w-full rounded object-contain shadow hover:shadow-md"
+          classList={{
+            'w-0': playing(),
+            'h-0': playing(),
+            'w-auto': !playing(),
+            'h-auto': !playing(),
+          }}
+          onClick={(ev) => {
+            ev.preventDefault();
+            play();
+          }}
+        />
       </SafeLink>
+      {/*
+      <Show when={isGIF()}>
+        <button
+          class=""
+          onClick={() => {
+            if (playing()) stop();
+            else play();
+          }}
+        >
+          <Show when={!playing()} fallback="⏸">
+            ▶
+          </Show>
+        </button>
+      </Show>
+      */}
     </Show>
   );
 };