Spaces:

build-small-hackathon
/

LoFinity

Running on Zero

App Files Files Community

eloigil6 commited on Jun 12

Commit

7b00de0

1 Parent(s): a39beee

Add song metadata handling and collection feature. Updated app.py to generate and store song metadata alongside audio files, introduced a new API endpoint for listing songs, and enhanced frontend components in ui.js and main.js to manage song collection display and interactions. Modified index.html and style.css for improved UI presentation of the cassette collection.

Browse files

Files changed (5) hide show

app.py +28 -0
frontend/index.html +172 -76
frontend/main.js +36 -12
frontend/style.css +424 -33
frontend/ui.js +157 -10

app.py CHANGED Viewed

@@ -19,6 +19,7 @@ import math
 import os
 import struct
 import threading
 import uuid
 import wave
 from pathlib import Path
@@ -217,6 +218,10 @@ def generate_song(prompt: str) -> dict:
     print(f"[lofinity] brewing {title!r} :: {music_prompt}")
     engine = stub_engine if ENGINE == "stub" else musicgen_engine
     out = engine(music_prompt)
     return {
         "title": title,
         # url is what browser clients play from; the path alone only works
@@ -225,6 +230,29 @@ def generate_song(prompt: str) -> dict:
     }
 @app.get("/")
 async def homepage():
     return FileResponse(FRONTEND / "index.html")

 import os
 import struct
 import threading
+import time
 import uuid
 import wave
 from pathlib import Path
     print(f"[lofinity] brewing {title!r} :: {music_prompt}")
     engine = stub_engine if ENGINE == "stub" else musicgen_engine
     out = engine(music_prompt)
+    # sidecar metadata so the tape shows up in the collection later
+    out.with_suffix(".json").write_text(
+        json.dumps({"title": title, "prompt": prompt, "created": time.time()})
+    )
     return {
         "title": title,
         # url is what browser clients play from; the path alone only works
     }
+@app.api(name="list_songs")
+def list_songs() -> list:
+    """Every tape actually vended, newest first. A wav without its sidecar
+    label is not a tape the user owns (stub tones, dev leftovers) — skip it."""
+    songs = []
+    for wav in SONGS_DIR.glob("*.wav"):
+        meta_path = wav.with_suffix(".json")
+        if not meta_path.exists():
+            continue
+        title, created = "Untitled Tape", wav.stat().st_mtime
+        try:
+            meta = json.loads(meta_path.read_text())
+            title = str(meta.get("title") or title)
+            created = float(meta.get("created") or created)
+        except (ValueError, OSError):
+            pass  # a torn label, but the tape was vended — still plays fine
+        songs.append(
+            {"title": title, "created": created, "url": f"/gradio_api/file={wav}"}
+        )
+    songs.sort(key=lambda s: s["created"], reverse=True)
+    return songs
 @app.get("/")
 async def homepage():
     return FileResponse(FRONTEND / "index.html")

frontend/index.html CHANGED Viewed

@@ -1,89 +1,185 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>LoFinity</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&family=DotGothic16&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="/static/style.css" />
-  <script type="importmap">
-    {
-      "imports": {
-        "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js"
       }
-    }
-  </script>
-</head>
-<body>
-  <div id="title-overlay">
-    <h1 id="title">LoFinity</h1>
-    <p id="subtitle">♪ chill beats, freshly vended</p>
-  </div>
-  <div id="vending-label" class="hover-label"><span>♪ vend a vibe</span></div>
-  <div id="collection-label" class="hover-label"><span>♪ cassette collection</span></div>
-  <div id="machine-modal" class="hidden">
-    <button id="modal-close" aria-label="close">×</button>
-    <div id="led-screen">
-      <p class="led-title">PICK YOUR VIBE<span class="led-cursor">_</span></p>
-      <p class="led-sub">TELL THE MACHINE WHAT TO BREW</p>
-      <textarea id="prompt-input" rows="3" maxlength="200"
-        placeholder="rainy night in kyoto, soft piano, vinyl crackle..."></textarea>
-      <div id="generating" class="hidden">
-        <div class="eq"><i></i><i></i><i></i><i></i><i></i></div>
-        <p class="led-status">BREWING YOUR BEAT<span class="dots">...</span></p>
-        <p class="led-sub">REAL TAPES TAKE A MINUTE OR TWO</p>
-      </div>
-      <p id="error-msg" class="hidden"></p>
     </div>
-    <div id="controls-row">
-      <div id="coin-slot-area">
-        <div id="coin-slot"></div>
-        <svg id="wado-coin" viewBox="0 0 100 100" aria-hidden="true">
-          <defs>
-            <radialGradient id="bronze" cx="35%" cy="30%" r="80%">
-              <stop offset="0%" stop-color="#dcb670" />
-              <stop offset="65%" stop-color="#b08540" />
-              <stop offset="100%" stop-color="#8a6630" />
-            </radialGradient>
-          </defs>
-          <circle cx="50" cy="50" r="47" fill="url(#bronze)" stroke="#7a5a28" stroke-width="4" />
-          <circle cx="50" cy="50" r="38" fill="none" stroke="#8a6a35" stroke-width="1.5" opacity="0.6" />
-          <rect x="41" y="41" width="18" height="18" fill="#3b2c16" stroke="#7a5a28" stroke-width="3" />
-          <text x="50" y="26" text-anchor="middle" dominant-baseline="central" class="wado-kanji">和</text>
-          <text x="75" y="51" text-anchor="middle" dominant-baseline="central" class="wado-kanji">同</text>
-          <text x="50" y="76" text-anchor="middle" dominant-baseline="central" class="wado-kanji">開</text>
-          <text x="25" y="51" text-anchor="middle" dominant-baseline="central" class="wado-kanji">珎</text>
-        </svg>
-      </div>
-      <button id="coin-button">INSERT COIN</button>
     </div>
-    <div id="cassette-stage" class="hidden">
-      <div id="cassette">
-        <div class="cassette-label"><span id="cassette-title"></span></div>
-        <div class="reels">
-          <span class="reel"></span>
-          <span class="tape-window"></span>
-          <span class="reel"></span>
         </div>
       </div>
-      <div id="player">
-        <button id="play-btn" aria-label="play/pause">▶</button>
-        <div id="progress"><div id="progress-fill"></div></div>
-        <span id="time">0:00</span>
       </div>
-      <button id="again-btn">MAKE ANOTHER</button>
     </div>
   </div>
-  <div id="now-playing" class="hidden">
-    <button id="np-toggle" aria-label="play/pause">❚❚</button>
-    <span id="np-title"></span>
   </div>
-  <audio id="tape-audio"></audio>
-  <canvas id="scene"></canvas>
-  <script type="module" src="/static/main.js"></script>
-</body>
 </html>

 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>LoFinity</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&family=DotGothic16&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/static/style.css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js"
+        }
       }
+    </script>
+  </head>
+  <body>
+    <div id="title-overlay">
+      <h1 id="title">LoFinity</h1>
+      <p id="subtitle">♪ chill beats, freshly vended</p>
     </div>
+    <div id="vending-label" class="hover-label"><span>♪ vend a vibe</span></div>
+    <div id="collection-label" class="hover-label">
+      <span>♪ cassette collection</span>
     </div>
+    <div id="machine-modal" class="hidden">
+      <button id="modal-close" aria-label="close">×</button>
+      <div id="led-screen">
+        <p class="led-title">PICK YOUR VIBE<span class="led-cursor">_</span></p>
+        <p class="led-sub">TELL THE MACHINE WHAT TO BREW</p>
+        <textarea
+          id="prompt-input"
+          rows="3"
+          maxlength="200"
+          placeholder="rainy night in kyoto, soft piano, vinyl crackle..."
+        ></textarea>
+        <div id="generating" class="hidden">
+          <div class="eq"><i></i><i></i><i></i><i></i><i></i></div>
+          <p class="led-status">
+            BREWING YOUR BEAT<span class="dots">...</span>
+          </p>
+          <p class="led-sub">REAL TAPES TAKE A MINUTE OR TWO</p>
         </div>
+        <p id="error-msg" class="hidden"></p>
       </div>
+      <div id="controls-row">
+        <div id="coin-slot-area">
+          <div id="coin-slot"></div>
+          <svg id="wado-coin" viewBox="0 0 100 100" aria-hidden="true">
+            <defs>
+              <radialGradient id="bronze" cx="35%" cy="30%" r="80%">
+                <stop offset="0%" stop-color="#dcb670" />
+                <stop offset="65%" stop-color="#b08540" />
+                <stop offset="100%" stop-color="#8a6630" />
+              </radialGradient>
+            </defs>
+            <circle
+              cx="50"
+              cy="50"
+              r="47"
+              fill="url(#bronze)"
+              stroke="#7a5a28"
+              stroke-width="4"
+            />
+            <circle
+              cx="50"
+              cy="50"
+              r="38"
+              fill="none"
+              stroke="#8a6a35"
+              stroke-width="1.5"
+              opacity="0.6"
+            />
+            <rect
+              x="41"
+              y="41"
+              width="18"
+              height="18"
+              fill="#3b2c16"
+              stroke="#7a5a28"
+              stroke-width="3"
+            />
+            <text
+              x="50"
+              y="26"
+              text-anchor="middle"
+              dominant-baseline="central"
+              class="wado-kanji"
+            >
+              和
+            </text>
+            <text
+              x="75"
+              y="51"
+              text-anchor="middle"
+              dominant-baseline="central"
+              class="wado-kanji"
+            >
+              同
+            </text>
+            <text
+              x="50"
+              y="76"
+              text-anchor="middle"
+              dominant-baseline="central"
+              class="wado-kanji"
+            >
+              開
+            </text>
+            <text
+              x="25"
+              y="51"
+              text-anchor="middle"
+              dominant-baseline="central"
+              class="wado-kanji"
+            >
+              珎
+            </text>
+          </svg>
+        </div>
+        <button id="coin-button">INSERT COIN</button>
+      </div>
+      <div id="cassette-stage" class="hidden">
+        <div id="cassette">
+          <div class="cassette-label"><span id="cassette-title"></span></div>
+          <div class="reels">
+            <span class="reel"></span>
+            <span class="tape-window"></span>
+            <span class="reel"></span>
+          </div>
+        </div>
+        <div id="player">
+          <button id="play-btn" aria-label="play/pause">▶</button>
+          <div id="progress"><div id="progress-fill"></div></div>
+          <span id="time">0:00</span>
+        </div>
+        <button id="again-btn">MAKE ANOTHER</button>
       </div>
+    </div>
+    <div id="collection-panel" class="hidden">
+    <p id="collection-heading"><span>♪ cassette collection</span></p>
+    <button id="collection-close" aria-label="close collection">×</button>
+    <p id="collection-status" class="hidden"></p>
+    <div id="carousel-row">
+      <button class="caro-btn" id="caro-prev" aria-label="scroll left">‹</button>
+      <div id="carousel"></div>
+      <button class="caro-btn" id="caro-next" aria-label="scroll right">›</button>
     </div>
   </div>
+  <div id="tape-deck" class="hidden">
+    <button id="deck-play" aria-label="play/pause">▶</button>
+    <div id="deck-info">
+      <span id="deck-title">pick a tape</span>
+      <div id="deck-progress"><div id="deck-fill"></div></div>
+    </div>
+    <span id="deck-time">0:00</span>
+    <div id="deck-cassette" aria-hidden="true">
+      <span class="mini-reel"></span>
+      <span class="mini-reel"></span>
+    </div>
+    <a id="deck-download" class="disabled" aria-label="download tape" title="download tape">
+      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor"
+        stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 3v12" /><path d="m6 11 6 6 6-6" /><path d="M5 21h14" />
+      </svg>
+    </a>
   </div>
+  <div id="now-playing" class="hidden">
+      <button id="np-toggle" aria-label="play/pause">❚❚</button>
+      <span id="np-title"></span>
+    </div>
+    <audio id="tape-audio"></audio>
+    <canvas id="scene"></canvas>
+    <script type="module" src="/static/main.js"></script>
+  </body>
 </html>

frontend/main.js CHANGED Viewed

@@ -32,7 +32,7 @@ const camera = new THREE.PerspectiveCamera(
   55,
   window.innerWidth / window.innerHeight,
   0.1,
-  1000
 );
 // The camera starts high in the sky gaze and dollies down/back during the
@@ -160,7 +160,7 @@ const interactables = [
 window.addEventListener("pointermove", (e) => {
   pointerNDC.set(
     (e.clientX / window.innerWidth) * 2 - 1,
-    -(e.clientY / window.innerHeight) * 2 + 1
   );
   pointerActive = true;
 });
@@ -190,8 +190,8 @@ function updateHover() {
   raycaster.setFromCamera(pointerNDC, camera);
   setHoveredItem(
     interactables.find(
-      (item) => raycaster.intersectObject(item.object, true).length > 0
-    ) ?? null
   );
   if (hoveredItem) {
@@ -253,6 +253,7 @@ function closeMachineView() {
 }
 function closeBenchView() {
   startViewTransition("zoom-out", CAM_END, LOOK_SCENE);
 }
@@ -286,15 +287,23 @@ function setMachineBusy(busy) {
 // ---------------------------------------------------------------------------
 let generateFn = null;
 const ui = initUI({
   generate: (prompt) => {
     if (!generateFn) return Promise.reject(new Error("backend not connected"));
     return generateFn(prompt);
   },
   onRequestClose: () => {
     if (view.mode === "machine") closeMachineView();
   },
   onGeneratingChange: setMachineBusy,
 });
@@ -305,11 +314,16 @@ import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js")
       const result = await client.predict("/generate_song", { prompt });
       const data = result.data[0];
       const url =
-        data.audio?.url ?? (data.audio?.path ? `/gradio_api/file=${data.audio.path}` : null);
       if (!url) throw new Error("no audio in response");
       return { title: data.title, url };
     };
-    window.lofinity = { generate: generateFn };
     console.log("[LoFinity] backend connected");
   })
   .catch((err) => console.warn("[LoFinity] backend not reachable:", err));
@@ -335,10 +349,10 @@ function startDescent() {
 const pageLoaded = new Promise((resolve) =>
   document.readyState === "complete"
     ? resolve()
-    : window.addEventListener("load", resolve)
 );
 Promise.all([pageLoaded, document.fonts.ready]).then(() =>
-  setTimeout(startDescent, HOLD_MS)
 );
 const easeInOutCubic = (t) =>
@@ -374,6 +388,7 @@ window.lofinityDebug = {
     view.mode = "bench";
     camera.position.copy(BENCH_CAM);
     lookTarget.copy(BENCH_LOOK);
   },
   stats() {
     return { ...renderer.info.render, ...renderer.info.memory };
@@ -427,7 +442,8 @@ function animate(now = 0) {
   bird.rotation.y =
     -0.5 + Math.sin(elapsed * 0.4) * 0.4 + Math.sin(elapsed * 1.1) * 0.12;
   bird.position.y =
-    bird.userData.baseY + Math.pow(Math.max(0, Math.sin(elapsed * 1.9)), 12) * 0.06;
   bird.userData.tail.rotation.x =
     -0.35 + Math.pow(Math.max(0, Math.sin(elapsed * 1.3 + 1)), 8) * 0.5;
@@ -452,6 +468,7 @@ function animate(now = 0) {
       if (view.mode === "zoom-in") {
         view.mode = view.target;
         if (view.target === "machine") ui.openModal();
       } else {
         view.mode = "scene";
         intro.idleStart = elapsed; // sway ramps back in
@@ -468,8 +485,16 @@ function animate(now = 0) {
   if (machineBusy) {
     // the machine hums while it brews
     const pulse = 0.5 + 0.5 * Math.sin(elapsed * 6);
-    world.vending.userData.screenMaterial.color.setHSL(0.38, 0.55, 0.12 + 0.3 * pulse);
-    world.vending.userData.dispenserMaterial.color.setHSL(0.13, 0.85, 0.08 + 0.3 * pulse);
   }
   camera.lookAt(lookTarget);
@@ -477,4 +502,3 @@ function animate(now = 0) {
   renderer.render(scene, camera);
 }
 animate();

   55,
   window.innerWidth / window.innerHeight,
   0.1,
+  1000,
 );
 // The camera starts high in the sky gaze and dollies down/back during the
 window.addEventListener("pointermove", (e) => {
   pointerNDC.set(
     (e.clientX / window.innerWidth) * 2 - 1,
+    -(e.clientY / window.innerHeight) * 2 + 1,
   );
   pointerActive = true;
 });
   raycaster.setFromCamera(pointerNDC, camera);
   setHoveredItem(
     interactables.find(
+      (item) => raycaster.intersectObject(item.object, true).length > 0,
+    ) ?? null,
   );
   if (hoveredItem) {
 }
 function closeBenchView() {
+  ui.closeCollection();
   startViewTransition("zoom-out", CAM_END, LOOK_SCENE);
 }
 // ---------------------------------------------------------------------------
 let generateFn = null;
+let listSongsFn = null;
 const ui = initUI({
   generate: (prompt) => {
     if (!generateFn) return Promise.reject(new Error("backend not connected"));
     return generateFn(prompt);
   },
+  listSongs: () => {
+    if (!listSongsFn) return Promise.reject(new Error("backend not connected"));
+    return listSongsFn();
+  },
   onRequestClose: () => {
     if (view.mode === "machine") closeMachineView();
   },
+  onRequestCloseCollection: () => {
+    if (view.mode === "bench") closeBenchView();
+  },
   onGeneratingChange: setMachineBusy,
 });
       const result = await client.predict("/generate_song", { prompt });
       const data = result.data[0];
       const url =
+        data.audio?.url ??
+        (data.audio?.path ? `/gradio_api/file=${data.audio.path}` : null);
       if (!url) throw new Error("no audio in response");
       return { title: data.title, url };
     };
+    listSongsFn = async () => {
+      const result = await client.predict("/list_songs", {});
+      return result.data[0] ?? [];
+    };
+    window.lofinity = { generate: generateFn, listSongs: listSongsFn };
     console.log("[LoFinity] backend connected");
   })
   .catch((err) => console.warn("[LoFinity] backend not reachable:", err));
 const pageLoaded = new Promise((resolve) =>
   document.readyState === "complete"
     ? resolve()
+    : window.addEventListener("load", resolve),
 );
 Promise.all([pageLoaded, document.fonts.ready]).then(() =>
+  setTimeout(startDescent, HOLD_MS),
 );
 const easeInOutCubic = (t) =>
     view.mode = "bench";
     camera.position.copy(BENCH_CAM);
     lookTarget.copy(BENCH_LOOK);
+    ui.openCollection();
   },
   stats() {
     return { ...renderer.info.render, ...renderer.info.memory };
   bird.rotation.y =
     -0.5 + Math.sin(elapsed * 0.4) * 0.4 + Math.sin(elapsed * 1.1) * 0.12;
   bird.position.y =
+    bird.userData.baseY +
+    Math.pow(Math.max(0, Math.sin(elapsed * 1.9)), 12) * 0.06;
   bird.userData.tail.rotation.x =
     -0.35 + Math.pow(Math.max(0, Math.sin(elapsed * 1.3 + 1)), 8) * 0.5;
       if (view.mode === "zoom-in") {
         view.mode = view.target;
         if (view.target === "machine") ui.openModal();
+        else if (view.target === "bench") ui.openCollection();
       } else {
         view.mode = "scene";
         intro.idleStart = elapsed; // sway ramps back in
   if (machineBusy) {
     // the machine hums while it brews
     const pulse = 0.5 + 0.5 * Math.sin(elapsed * 6);
+    world.vending.userData.screenMaterial.color.setHSL(
+      0.38,
+      0.55,
+      0.12 + 0.3 * pulse,
+    );
+    world.vending.userData.dispenserMaterial.color.setHSL(
+      0.13,
+      0.85,
+      0.08 + 0.3 * pulse,
+    );
   }
   camera.lookAt(lookTarget);
   renderer.render(scene, camera);
 }
 animate();

frontend/style.css CHANGED Viewed

@@ -25,7 +25,9 @@ body {
   z-index: 10;
   opacity: 1;
   transform: translateY(0);
-  transition: opacity 1.8s ease, transform 1.8s cubic-bezier(0.55, 0, 0.55, 1);
 }
 #title-overlay.hidden {
@@ -276,7 +278,9 @@ body {
   font-size: 1.3rem;
   letter-spacing: 0.1em;
   color: #5dff8d;
-  text-shadow: 0 0 8px rgba(93, 255, 141, 0.7), 0 0 2px rgba(93, 255, 141, 0.9);
   animation: led-flicker 4s steps(1) infinite;
 }
@@ -294,11 +298,23 @@ body {
 }
 @keyframes led-flicker {
-  0%, 93%, 100% { opacity: 1; }
-  94% { opacity: 0.75; }
-  95% { opacity: 1; }
-  97% { opacity: 0.85; }
-  98% { opacity: 1; }
 }
 #prompt-input {
@@ -337,10 +353,19 @@ body {
 }
 @keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-6px); }
-  50% { transform: translateX(6px); }
-  75% { transform: translateX(-4px); }
 }
 #generating {
@@ -362,8 +387,13 @@ body {
 }
 @keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.15; }
 }
 .eq {
@@ -382,15 +412,35 @@ body {
   animation: eq-bounce 1s ease-in-out infinite;
 }
-.eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
-.eq i:nth-child(2) { height: 75%; animation-delay: 0.15s; }
-.eq i:nth-child(3) { height: 100%; animation-delay: 0.3s; }
-.eq i:nth-child(4) { height: 65%; animation-delay: 0.45s; }
-.eq i:nth-child(5) { height: 45%; animation-delay: 0.6s; }
 @keyframes eq-bounce {
-  0%, 100% { transform: scaleY(0.5); }
-  50% { transform: scaleY(1); }
 }
 /* --- coin slot + red button -------------------------------------------------- */
@@ -413,7 +463,9 @@ body {
   background: linear-gradient(#5fabd6, #4f9cc8);
   border: 2px solid #3f86ad;
   border-radius: 10px;
-  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.35), inset 0 -3px 5px rgba(31, 79, 116, 0.4);
   perspective: 300px;
 }
@@ -422,7 +474,9 @@ body {
   height: 40px;
   background: #0e1116;
   border-radius: 5px;
-  box-shadow: inset 0 0 5px #000, 0 1px 0 rgba(255, 255, 255, 0.4);
 }
 #wado-coin {
@@ -479,7 +533,11 @@ body {
 }
 @keyframes slot-flash {
-  50% { box-shadow: inset 0 0 5px #000, 0 0 12px rgba(93, 255, 141, 0.9); }
 }
 #coin-button {
@@ -494,12 +552,16 @@ body {
   letter-spacing: 0.12em;
   text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
   cursor: pointer;
-  box-shadow: 0 5px 0 #8f1d18, inset 0 2px 3px rgba(255, 255, 255, 0.4);
 }
 #coin-button:active {
   transform: translateY(3px);
-  box-shadow: 0 2px 0 #8f1d18, inset 0 2px 3px rgba(255, 255, 255, 0.4);
 }
 #coin-button:disabled {
@@ -515,7 +577,9 @@ body {
   background: linear-gradient(#3a4254, #2c3344);
   border-radius: 14px;
   padding-bottom: 4px;
-  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.12), 0 8px 22px rgba(15, 40, 90, 0.3);
   animation: cassette-out 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
@@ -560,12 +624,15 @@ body {
   box-sizing: border-box;
 }
-#cassette.playing .reel {
   animation: reel-spin 2.4s linear infinite;
 }
 @keyframes reel-spin {
-  to { transform: rotate(360deg); }
 }
 .tape-window {
@@ -584,7 +651,8 @@ body {
 }
 #play-btn,
-#np-toggle {
   width: 44px;
   height: 44px;
   flex: none;
@@ -598,7 +666,8 @@ body {
 }
 #play-btn:active,
-#np-toggle:active {
   transform: translateY(2px);
   box-shadow: 0 1px 0 #d9ab1e;
 }
@@ -640,7 +709,9 @@ body {
   font-size: 1rem;
   letter-spacing: 0.12em;
   cursor: pointer;
-  box-shadow: 0 4px 0 #16213a, inset 0 2px 2px rgba(255, 255, 255, 0.18);
 }
 #again-btn:hover {
@@ -649,7 +720,9 @@ body {
 #again-btn:active {
   transform: translateY(2px);
-  box-shadow: 0 2px 0 #16213a, inset 0 2px 2px rgba(255, 255, 255, 0.18);
 }
 #error-msg {
@@ -690,7 +763,9 @@ body {
   font-weight: 700;
   font-size: 0.95rem;
   color: #2b3a55;
-  transition: opacity 0.3s ease, transform 0.3s ease;
 }
 #now-playing.hidden {
@@ -711,3 +786,319 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }

   z-index: 10;
   opacity: 1;
   transform: translateY(0);
+  transition:
+    opacity 1.8s ease,
+    transform 1.8s cubic-bezier(0.55, 0, 0.55, 1);
 }
 #title-overlay.hidden {
   font-size: 1.3rem;
   letter-spacing: 0.1em;
   color: #5dff8d;
+  text-shadow:
+    0 0 8px rgba(93, 255, 141, 0.7),
+    0 0 2px rgba(93, 255, 141, 0.9);
   animation: led-flicker 4s steps(1) infinite;
 }
 }
 @keyframes led-flicker {
+  0%,
+  93%,
+  100% {
+    opacity: 1;
+  }
+  94% {
+    opacity: 0.75;
+  }
+  95% {
+    opacity: 1;
+  }
+  97% {
+    opacity: 0.85;
+  }
+  98% {
+    opacity: 1;
+  }
 }
 #prompt-input {
 }
 @keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-6px);
+  }
+  50% {
+    transform: translateX(6px);
+  }
+  75% {
+    transform: translateX(-4px);
+  }
 }
 #generating {
 }
 @keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.15;
+  }
 }
 .eq {
   animation: eq-bounce 1s ease-in-out infinite;
 }
+.eq i:nth-child(1) {
+  height: 40%;
+  animation-delay: 0s;
+}
+.eq i:nth-child(2) {
+  height: 75%;
+  animation-delay: 0.15s;
+}
+.eq i:nth-child(3) {
+  height: 100%;
+  animation-delay: 0.3s;
+}
+.eq i:nth-child(4) {
+  height: 65%;
+  animation-delay: 0.45s;
+}
+.eq i:nth-child(5) {
+  height: 45%;
+  animation-delay: 0.6s;
+}
 @keyframes eq-bounce {
+  0%,
+  100% {
+    transform: scaleY(0.5);
+  }
+  50% {
+    transform: scaleY(1);
+  }
 }
 /* --- coin slot + red button -------------------------------------------------- */
   background: linear-gradient(#5fabd6, #4f9cc8);
   border: 2px solid #3f86ad;
   border-radius: 10px;
+  box-shadow:
+    inset 0 2px 4px rgba(255, 255, 255, 0.35),
+    inset 0 -3px 5px rgba(31, 79, 116, 0.4);
   perspective: 300px;
 }
   height: 40px;
   background: #0e1116;
   border-radius: 5px;
+  box-shadow:
+    inset 0 0 5px #000,
+    0 1px 0 rgba(255, 255, 255, 0.4);
 }
 #wado-coin {
 }
 @keyframes slot-flash {
+  50% {
+    box-shadow:
+      inset 0 0 5px #000,
+      0 0 12px rgba(93, 255, 141, 0.9);
+  }
 }
 #coin-button {
   letter-spacing: 0.12em;
   text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
   cursor: pointer;
+  box-shadow:
+    0 5px 0 #8f1d18,
+    inset 0 2px 3px rgba(255, 255, 255, 0.4);
 }
 #coin-button:active {
   transform: translateY(3px);
+  box-shadow:
+    0 2px 0 #8f1d18,
+    inset 0 2px 3px rgba(255, 255, 255, 0.4);
 }
 #coin-button:disabled {
   background: linear-gradient(#3a4254, #2c3344);
   border-radius: 14px;
   padding-bottom: 4px;
+  box-shadow:
+    inset 0 2px 6px rgba(255, 255, 255, 0.12),
+    0 8px 22px rgba(15, 40, 90, 0.3);
   animation: cassette-out 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
   box-sizing: border-box;
 }
+#cassette.playing .reel,
+.cassette-card.playing .reel {
   animation: reel-spin 2.4s linear infinite;
 }
 @keyframes reel-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 .tape-window {
 }
 #play-btn,
+#np-toggle,
+#deck-play {
   width: 44px;
   height: 44px;
   flex: none;
 }
 #play-btn:active,
+#np-toggle:active,
+#deck-play:active {
   transform: translateY(2px);
   box-shadow: 0 1px 0 #d9ab1e;
 }
   font-size: 1rem;
   letter-spacing: 0.12em;
   cursor: pointer;
+  box-shadow:
+    0 4px 0 #16213a,
+    inset 0 2px 2px rgba(255, 255, 255, 0.18);
 }
 #again-btn:hover {
 #again-btn:active {
   transform: translateY(2px);
+  box-shadow:
+    0 2px 0 #16213a,
+    inset 0 2px 2px rgba(255, 255, 255, 0.18);
 }
 #error-msg {
   font-weight: 700;
   font-size: 0.95rem;
   color: #2b3a55;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
 }
 #now-playing.hidden {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+/* --- cassette collection: carousel ------------------------------------------ */
+#collection-panel {
+  position: fixed;
+  top: 6vh;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(780px, 94vw);
+  z-index: 18;
+  text-align: center;
+  transition:
+    opacity 0.35s ease,
+    transform 0.35s ease;
+}
+#collection-panel.hidden {
+  opacity: 0;
+  transform: translate(-50%, -18px);
+  pointer-events: none;
+}
+#collection-heading {
+  margin: 0;
+}
+#collection-heading span {
+  display: inline-block;
+  font-family: "Baloo 2", sans-serif;
+  font-weight: 800;
+  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
+  color: #3a2c14;
+  background: #ffd84a;
+  padding: 0.4em 1.3em;
+  border-radius: 999px;
+  box-shadow: 0 8px 24px rgba(18, 44, 96, 0.3);
+}
+#collection-close {
+  position: absolute;
+  top: -6px;
+  right: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.22);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  color: #fff;
+  font-size: 1.15rem;
+  line-height: 1;
+  cursor: pointer;
+  text-shadow: 0 1px 3px rgba(15, 40, 90, 0.4);
+}
+#collection-close:hover {
+  background: rgba(255, 255, 255, 0.38);
+}
+#collection-status {
+  margin: 26px 0 0;
+  font-family: "Baloo 2", sans-serif;
+  font-weight: 700;
+  font-size: 1.05rem;
+  color: #fff;
+  text-shadow: 0 2px 8px rgba(15, 40, 90, 0.45);
+}
+#collection-status.hidden {
+  display: none;
+}
+#carousel-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 16px;
+}
+.caro-btn {
+  flex: none;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.22);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  color: #fff;
+  font-size: 1.5rem;
+  line-height: 1;
+  padding-bottom: 4px;
+  cursor: pointer;
+  text-shadow: 0 1px 3px rgba(15, 40, 90, 0.4);
+}
+.caro-btn:hover {
+  background: rgba(255, 255, 255, 0.38);
+}
+#carousel {
+  flex: 1;
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  padding: 14px 6px 20px;
+  scrollbar-width: none;
+}
+#carousel::-webkit-scrollbar {
+  display: none;
+}
+.cassette-card {
+  flex: none;
+  width: 196px;
+  box-sizing: border-box;
+  scroll-snap-align: center;
+  cursor: pointer;
+  border: none;
+  padding: 0 0 4px;
+  font-family: "Baloo 2", sans-serif;
+  background: linear-gradient(var(--shell1, #3a4254), var(--shell2, #2c3344));
+  border-radius: 14px;
+  box-shadow:
+    inset 0 2px 6px rgba(255, 255, 255, 0.14),
+    0 8px 22px rgba(15, 40, 90, 0.32);
+  transition:
+    transform 0.18s ease,
+    box-shadow 0.18s ease;
+  animation: cassette-out 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+.cassette-card:hover {
+  transform: translateY(-4px);
+}
+.cassette-card.selected {
+  transform: translateY(-6px);
+  box-shadow:
+    0 0 0 3px #ffd84a,
+    inset 0 2px 6px rgba(255, 255, 255, 0.14),
+    0 12px 28px rgba(15, 40, 90, 0.4);
+}
+.cassette-card .cassette-label {
+  margin: 10px 12px 8px;
+  padding: 6px 8px;
+  font-size: 0.85rem;
+}
+.cassette-card .reels {
+  padding: 0 22px 10px;
+}
+.cassette-card .reel {
+  width: 28px;
+  height: 28px;
+  border-width: 4px;
+}
+.cassette-card .tape-window {
+  height: 13px;
+  margin: 0 10px;
+}
+/* --- tape deck: glass pill player -------------------------------------------- */
+#tape-deck {
+  position: fixed;
+  bottom: 26px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 18;
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  width: min(620px, 92vw);
+  box-sizing: border-box;
+  padding: 9px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.42);
+  backdrop-filter: blur(16px) saturate(1.35);
+  -webkit-backdrop-filter: blur(16px) saturate(1.35);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.5),
+    0 16px 44px rgba(15, 40, 90, 0.38);
+  font-family: "Baloo 2", sans-serif;
+  transition:
+    opacity 0.35s ease,
+    transform 0.35s ease;
+}
+#tape-deck.hidden {
+  opacity: 0;
+  transform: translate(-50%, 18px);
+  pointer-events: none;
+}
+#deck-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+#deck-title {
+  font-weight: 800;
+  font-size: 0.98rem;
+  color: #fff;
+  text-shadow: 0 1px 4px rgba(15, 40, 90, 0.45);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 6px;
+}
+#deck-progress {
+  height: 8px;
+  border-radius: 4px;
+  background: rgba(13, 26, 43, 0.35);
+  cursor: pointer;
+  overflow: hidden;
+}
+#deck-fill {
+  height: 100%;
+  width: 0%;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #ffd84a, #e8a13c);
+  box-shadow: 0 0 8px rgba(255, 216, 74, 0.65);
+}
+#deck-time {
+  flex: none;
+  font-family: "DotGothic16", monospace;
+  font-size: 0.85rem;
+  color: #fff;
+  text-shadow: 0 1px 3px rgba(15, 40, 90, 0.45);
+  min-width: 38px;
+  text-align: right;
+}
+#deck-cassette {
+  flex: none;
+  position: relative;
+  width: 64px;
+  height: 42px;
+  border-radius: 8px;
+  background: linear-gradient(var(--shell1, #3a4254), var(--shell2, #2c3344));
+  box-shadow:
+    inset 0 1px 2px rgba(255, 255, 255, 0.2),
+    0 3px 10px rgba(15, 40, 90, 0.3);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 12px;
+  padding-bottom: 6px;
+  box-sizing: border-box;
+}
+#deck-cassette::before {
+  content: "";
+  position: absolute;
+  top: 5px;
+  left: 7px;
+  right: 7px;
+  height: 12px;
+  background: #f6f1e3;
+  border: 1px solid #e0d6bd;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+.mini-reel {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  border: 3px dashed #cfd6e4;
+  background: #1d232f;
+  box-sizing: border-box;
+}
+#tape-deck.playing .mini-reel {
+  animation: reel-spin 2.4s linear infinite;
+}
+#deck-download {
+  flex: none;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.22);
+  color: #fff;
+  cursor: pointer;
+  text-decoration: none;
+  box-sizing: border-box;
+  transition: background 0.15s ease;
+}
+#deck-download:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+#deck-download.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

frontend/ui.js CHANGED Viewed

@@ -4,7 +4,13 @@
 const $ = (id) => document.getElementById(id);
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-export function initUI({ generate, onRequestClose, onGeneratingChange }) {
   const modal = $("machine-modal");
   const input = $("prompt-input");
   const coinBtn = $("coin-button");
@@ -22,9 +28,22 @@ export function initUI({ generate, onRequestClose, onGeneratingChange }) {
   const pill = $("now-playing");
   const pillToggle = $("np-toggle");
   const pillTitle = $("np-title");
   audio.loop = true; // a cassette of endless chill
   let busy = false;
   function setStage(stage) {
     controlsRow.classList.toggle("hidden", stage !== "prompt");
@@ -82,11 +101,117 @@ export function initUI({ generate, onRequestClose, onGeneratingChange }) {
     }
   }
-  function loadCassette({ title, url }) {
-    cassetteTitle.textContent = title;
-    pillTitle.textContent = title;
-    audio.src = url;
     audio.play().catch(() => {});
   }
   // --- audio wiring ---------------------------------------------------------
@@ -98,27 +223,46 @@ export function initUI({ generate, onRequestClose, onGeneratingChange }) {
     const playing = !audio.paused;
     playBtn.textContent = playing ? "❚❚" : "▶";
     pillToggle.textContent = playing ? "❚❚" : "▶";
     cassette.classList.toggle("playing", playing);
   }
   audio.addEventListener("play", syncPlayState);
   audio.addEventListener("pause", syncPlayState);
   audio.addEventListener("timeupdate", () => {
     if (audio.duration) {
-      progressFill.style.width = `${(audio.currentTime / audio.duration) * 100}%`;
     }
     timeEl.textContent = fmt(audio.currentTime);
   });
   const togglePlay = () => (audio.paused ? audio.play() : audio.pause());
   playBtn.addEventListener("click", togglePlay);
   pillToggle.addEventListener("click", togglePlay);
-  progress.addEventListener("click", (e) => {
     if (!audio.duration) return;
-    const rect = progress.getBoundingClientRect();
     audio.currentTime = ((e.clientX - rect.left) / rect.width) * audio.duration;
-  });
   // --- modal controls ---------------------------------------------------------
@@ -142,8 +286,9 @@ export function initUI({ generate, onRequestClose, onGeneratingChange }) {
   });
   function syncPill() {
     const modalHidden = modal.classList.contains("hidden");
-    pill.classList.toggle("hidden", !(audio.src && modalHidden));
   }
   let closeTimer = null;
@@ -170,5 +315,7 @@ export function initUI({ generate, onRequestClose, onGeneratingChange }) {
       }, 300);
       syncPill();
     },
   };
 }

 const $ = (id) => document.getElementById(id);
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+export function initUI({
+  generate,
+  listSongs,
+  onRequestClose,
+  onRequestCloseCollection,
+  onGeneratingChange,
+}) {
   const modal = $("machine-modal");
   const input = $("prompt-input");
   const coinBtn = $("coin-button");
   const pill = $("now-playing");
   const pillToggle = $("np-toggle");
   const pillTitle = $("np-title");
+  const collectionPanel = $("collection-panel");
+  const collectionStatus = $("collection-status");
+  const carousel = $("carousel");
+  const deck = $("tape-deck");
+  const deckPlay = $("deck-play");
+  const deckTitle = $("deck-title");
+  const deckProgress = $("deck-progress");
+  const deckFill = $("deck-fill");
+  const deckTime = $("deck-time");
+  const deckCassette = $("deck-cassette");
+  const deckDownload = $("deck-download");
   audio.loop = true; // a cassette of endless chill
   let busy = false;
+  let collectionOpen = false;
+  let currentSong = null; // { title, url } of the tape in the deck
   function setStage(stage) {
     controlsRow.classList.toggle("hidden", stage !== "prompt");
     }
   }
+  function loadCassette(song, shell) {
+    currentSong = song;
+    cassetteTitle.textContent = song.title;
+    pillTitle.textContent = song.title;
+    deckTitle.textContent = song.title;
+    deckDownload.href = song.url;
+    deckDownload.setAttribute("download", `${song.title}.wav`);
+    deckDownload.classList.remove("disabled");
+    deckCassette.style.setProperty("--shell1", (shell ?? SHELL_COLORS[0])[0]);
+    deckCassette.style.setProperty("--shell2", (shell ?? SHELL_COLORS[0])[1]);
+    audio.src = song.url;
     audio.play().catch(() => {});
+    syncCards();
+  }
+  // --- cassette collection: carousel + tape deck ------------------------------
+  // shell gradients, cycled per card like the tape pile on the bench
+  const SHELL_COLORS = [
+    ["#3a4254", "#2c3344"],
+    ["#f2e8d5", "#dccfae"],
+    ["#d95d4e", "#b8453a"],
+    ["#7cc4ea", "#58a8d6"],
+    ["#f2c84b", "#dba62a"],
+    ["#5d4a37", "#46382a"],
+  ];
+  function setCollectionStatus(message) {
+    collectionStatus.classList.toggle("hidden", !message);
+    collectionStatus.textContent = message ?? "";
+  }
+  // the wav filename is a uuid — a stable identity even when one source hands
+  // out absolute URLs and the other relative ones
+  const tapeKey = (url) => url?.split("/").pop();
+  function syncCards() {
+    const playing = !audio.paused;
+    for (const card of carousel.children) {
+      const selected =
+        !!currentSong && tapeKey(card.dataset.url) === tapeKey(currentSong.url);
+      card.classList.toggle("selected", selected);
+      card.classList.toggle("playing", selected && playing);
+    }
+  }
+  function renderCarousel(songs) {
+    carousel.innerHTML = "";
+    songs.forEach((song, i) => {
+      const shell = SHELL_COLORS[i % SHELL_COLORS.length];
+      const card = document.createElement("button");
+      card.className = "cassette-card";
+      card.dataset.url = song.url;
+      card.style.setProperty("--shell1", shell[0]);
+      card.style.setProperty("--shell2", shell[1]);
+      card.style.animationDelay = `${Math.min(i * 60, 480)}ms`;
+      card.title = song.title;
+      const label = document.createElement("div");
+      label.className = "cassette-label";
+      const labelText = document.createElement("span");
+      labelText.textContent = song.title;
+      label.appendChild(labelText);
+      const reels = document.createElement("div");
+      reels.className = "reels";
+      reels.innerHTML =
+        '<span class="reel"></span><span class="tape-window"></span><span class="reel"></span>';
+      card.append(label, reels);
+      card.addEventListener("click", () => {
+        if (tapeKey(currentSong?.url) === tapeKey(song.url)) togglePlay();
+        else loadCassette(song, shell);
+      });
+      carousel.appendChild(card);
+    });
+    syncCards();
+    carousel
+      .querySelector(".selected")
+      ?.scrollIntoView({ inline: "center", block: "nearest" });
+  }
+  async function openCollection() {
+    collectionOpen = true;
+    collectionPanel.classList.remove("hidden");
+    deck.classList.remove("hidden");
+    syncPill();
+    carousel.innerHTML = "";
+    setCollectionStatus("rummaging through the tapes…");
+    let songs;
+    try {
+      songs = await listSongs();
+    } catch (err) {
+      console.warn("[LoFinity] couldn't list tapes:", err);
+      if (collectionOpen) setCollectionStatus("the tape shelf is unreachable — try again later");
+      return;
+    }
+    if (!collectionOpen) return; // closed while we were rummaging
+    if (!songs.length) {
+      setCollectionStatus("no tapes yet — go vend a vibe at the machine ♪");
+      return;
+    }
+    setCollectionStatus(null);
+    renderCarousel(songs);
+  }
+  function closeCollection() {
+    collectionOpen = false;
+    collectionPanel.classList.add("hidden");
+    deck.classList.add("hidden");
+    syncPill();
   }
   // --- audio wiring ---------------------------------------------------------
     const playing = !audio.paused;
     playBtn.textContent = playing ? "❚❚" : "▶";
     pillToggle.textContent = playing ? "❚❚" : "▶";
+    deckPlay.textContent = playing ? "❚❚" : "▶";
     cassette.classList.toggle("playing", playing);
+    deck.classList.toggle("playing", playing);
+    syncCards();
   }
   audio.addEventListener("play", syncPlayState);
   audio.addEventListener("pause", syncPlayState);
   audio.addEventListener("timeupdate", () => {
     if (audio.duration) {
+      const pct = `${(audio.currentTime / audio.duration) * 100}%`;
+      progressFill.style.width = pct;
+      deckFill.style.width = pct;
     }
     timeEl.textContent = fmt(audio.currentTime);
+    deckTime.textContent = fmt(audio.currentTime);
   });
   const togglePlay = () => (audio.paused ? audio.play() : audio.pause());
   playBtn.addEventListener("click", togglePlay);
   pillToggle.addEventListener("click", togglePlay);
+  deckPlay.addEventListener("click", () => {
+    if (audio.src) togglePlay();
+  });
+  const seek = (bar) => (e) => {
     if (!audio.duration) return;
+    const rect = bar.getBoundingClientRect();
     audio.currentTime = ((e.clientX - rect.left) / rect.width) * audio.duration;
+  };
+  progress.addEventListener("click", seek(progress));
+  deckProgress.addEventListener("click", seek(deckProgress));
+  $("collection-close").addEventListener("click", () => onRequestCloseCollection());
+  $("caro-prev").addEventListener("click", () =>
+    carousel.scrollBy({ left: -440, behavior: "smooth" })
+  );
+  $("caro-next").addEventListener("click", () =>
+    carousel.scrollBy({ left: 440, behavior: "smooth" })
+  );
   // --- modal controls ---------------------------------------------------------
   });
   function syncPill() {
+    // the corner pill yields to the machine modal and the tape deck
     const modalHidden = modal.classList.contains("hidden");
+    pill.classList.toggle("hidden", !(audio.src && modalHidden && !collectionOpen));
   }
   let closeTimer = null;
       }, 300);
       syncPill();
     },
+    openCollection,
+    closeCollection,
   };
 }