From de5180af353acedfd22ae32005ded6140a123399 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Tue, 1 Jul 2025 16:04:32 +0200
Subject: [PATCH] feat: fade in/out artwork

---
 .../blur/artwork-controller/_applet.astro     | 63 ++++++++++++++-----
 .../orchestrator/input-cache/_applet.astro    | 10 +--
 src/scripts/processor/artwork/worker.ts       |  2 -
 3 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/src/pages/constituent/blur/artwork-controller/_applet.astro b/src/pages/constituent/blur/artwork-controller/_applet.astro
index f1263b1..ba8b71a 100644
--- a/src/pages/constituent/blur/artwork-controller/_applet.astro
+++ b/src/pages/constituent/blur/artwork-controller/_applet.astro
@@ -31,6 +31,10 @@ import "@styles/diffuse/fonts.css";
 </main>
 
 <style>
+  :root {
+    --transition-durition: 500ms;
+  }
+
   main {
     background: var(--color-3);
     color: white;
@@ -42,8 +46,8 @@ import "@styles/diffuse/fonts.css";
     overflow: hidden;
     position: relative;
     transition:
-      background-color 500ms,
-      color 500ms;
+      background-color var(--transition-durition),
+      color var(--transition-durition);
   }
 
   /* Artwork */
@@ -57,9 +61,12 @@ import "@styles/diffuse/fonts.css";
     height: 100%;
     left: 0;
     object-fit: cover;
+    opacity: 0;
     pointer-events: none;
     position: absolute;
     top: 0;
+    transition-duration: var(--transition-durition);
+    transition-property: opacity;
     width: 100%;
     z-index: 0;
   }
@@ -78,8 +85,8 @@ import "@styles/diffuse/fonts.css";
     text-transform: uppercase;
     top: var(--space-xs);
     transition:
-      background-color 500ms,
-      color 500ms;
+      background-color var(--transition-durition),
+      color var(--transition-durition);
     z-index: 1;
   }
 
@@ -122,7 +129,7 @@ import "@styles/diffuse/fonts.css";
     inset: 0;
     opacity: 0.5;
     position: absolute;
-    transition: background-color 500ms;
+    transition: background-color var(--transition-durition);
     z-index: 1;
   }
 
@@ -306,6 +313,7 @@ import "@styles/diffuse/fonts.css";
   import scope from "astro:scope";
   import { FastAverageColor } from "fast-average-color";
   import { Temporal } from "@js-temporal/polyfill";
+  import { xxh32r } from "xxh32/dist/raw.js";
 
   import { computed, effect, type Signal, signal } from "spellcaster";
   import { tags, text, type ElementConfigurator } from "spellcaster/hyperscript.js";
@@ -486,28 +494,44 @@ import "@styles/diffuse/fonts.css";
   // UI ░ ARTWORK
   ////////////////////////////////////////////
 
+  const timeouts: Record<string, ReturnType<typeof setTimeout>> = {};
+
   effect(() => {
     const art = artwork();
 
-    console.log("ART", art[0]);
-
-    // TODO: Remove existing art?
+    // No artwork, fade out existing.
     if (art.length === 0) {
+      showcase.querySelectorAll("img").forEach((node) => {
+        node.style.opacity = "0";
+        timeouts[hash] = setTimeout(() => node.remove(), 1000);
+      });
+      return;
+    }
+
+    // Determine if the current artwork needs to be replaced.
+    const hash = xxh32r(art[0].bytes).toString();
+    const existingArtwork = showcase.querySelector<HTMLImageElement>(`img[data-hash="${hash}"]`);
+
+    // If the artwork is the same, stop here.
+    if (existingArtwork) {
+      const timeoutId = timeouts[hash];
+      if (timeoutId) clearTimeout(timeoutId);
+      existingArtwork.style.opacity = "1";
       return;
     }
 
-    // Show artwork
+    // Add new artwork
     const blob = new Blob([art[0].bytes], { type: art[0].mime });
     const url = URL.createObjectURL(blob);
 
-    // Remove existing artwork
-    // TODO: Fade in new artwork and then remove other
-    showcase.querySelectorAll("img").forEach((node) => {
-      showcase.removeChild(node);
-    });
-
     // Create img for new artwork
-    const img = h("img", { src: url, className: "artwork" });
+    const img = h("img", {
+      src: url,
+      className: "artwork",
+      attrs: {
+        "data-hash": hash,
+      },
+    });
 
     // Extract average color
     img.onload = () => {
@@ -516,6 +540,13 @@ import "@styles/diffuse/fonts.css";
       setArtworkColor(color.rgba);
       bg.style.backgroundColor = color.rgba;
       main.style.backgroundColor = color.rgba;
+      img.style.opacity = "1";
+
+      showcase.querySelectorAll("img").forEach((node) => {
+        if (node === img) return;
+        node.style.opacity = "0";
+        timeouts[hash] = setTimeout(() => node.remove(), 1000);
+      });
     };
 
     // Insert new artwork
diff --git a/src/pages/orchestrator/input-cache/_applet.astro b/src/pages/orchestrator/input-cache/_applet.astro
index 5be24cf..b8a86d3 100644
--- a/src/pages/orchestrator/input-cache/_applet.astro
+++ b/src/pages/orchestrator/input-cache/_applet.astro
@@ -23,11 +23,11 @@
   };
 
   // Start processing once settled and tracks are loaded
-  context
-    .settled()
-    .then(() => configurator.output)
-    .then((output) => wait(output, (d) => d?.tracks.state === "loaded"))
-    .then(() => (context.isMainInstance() ? process() : undefined));
+  // context
+  //   .settled()
+  //   .then(() => configurator.output)
+  //   .then((output) => wait(output, (d) => d?.tracks.state === "loaded"))
+  //   .then(() => (context.isMainInstance() ? process() : undefined));
 
   ////////////////////////////////////////////
   // ACTIONS
diff --git a/src/scripts/processor/artwork/worker.ts b/src/scripts/processor/artwork/worker.ts
index 20c77e9..9f280b6 100644
--- a/src/scripts/processor/artwork/worker.ts
+++ b/src/scripts/processor/artwork/worker.ts
@@ -121,9 +121,7 @@ async function processRequest(req: ArtworkRequest): Promise<Artwork[]> {
   let art: Artwork[] = [];
 
   // Get metadata + possible artwork from file metadata
-  console.log("ART REQ", req);
   const meta = await musicMetadataTags({ ...req, includeArtwork: true });
-  console.log("ART META", meta);
   if (!req.tags) req.tags = meta.tags;
 
   // Add artwork from metadata
-- 
2.51.2