feat: video download for output + community songs

Replace WAV download with animated waveform video generation (.webm).
Output card "Download" button is now white/bright and generates a
1080x1080 video with thumbnail, title, tags, animated waveform
progress, and CTA link. Community cards get a white download icon
next to duration that does the same. Video renders in real-time
using Canvas + MediaRecorder with synced audio.

index.html

@@ -173,14 +173,37 @@
     .play-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
     .time-display { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: 1; }
     .download-btn {
-      display: inline-flex; align-items: center; gap: 4px; background: transparent;
-      border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted);
-      text-decoration: none; font-family: var(--font); font-size: 11px;
-      font-weight: 500; padding: 4px 9px; transition: border-color 0.15s, color 0.15s;
+      display: inline-flex; align-items: center; gap: 4px; background: #fff;
+      border: none; border-radius: 6px; color: #111;
+      font-family: var(--font); font-size: 11px;
+      font-weight: 600; padding: 5px 10px; cursor: pointer;
+      transition: opacity 0.15s;
     }
-    .download-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.15); }
+    .download-btn:hover { opacity: 0.85; }
+    .download-btn:disabled { opacity: 0.4; cursor: not-allowed; }
     .download-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 
+    .share-icon-btn {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; background: #fff; border: none; border-radius: 4px;
+      color: #111; font-size: 10px; cursor: pointer; flex-shrink: 0; margin-left: 4px;
+      transition: opacity 0.15s;
+    }
+    .share-icon-btn:hover { opacity: 0.85; }
+    .share-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .share-icon-btn svg { width: 11px; height: 11px; }
+
+    /* Video generation overlay */
+    .video-overlay {
+      position: fixed; inset: 0; background: rgba(0,0,0,0.85);
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      z-index: 100; gap: 12px;
+    }
+    .video-overlay .label { font-size: 13px; color: var(--text-muted); }
+    .video-overlay .pct { font-size: 28px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
+    .video-overlay .bar-track { width: 200px; height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
+    .video-overlay .bar-fill { height: 100%; background: #fff; border-radius: 2px; transition: width 0.3s; }
+
     /* ── Community feed ───────────────────────────────────────────────────── */
     .feed-header {
       font-size: 11px; font-weight: 600; color: var(--text-muted);
@@ -321,7 +344,7 @@
           <div class="playback-controls">
             <button class="play-btn" id="play-btn" title="Play / Pause">▶</button>
             <span class="time-display" id="time-display">0:00 / 0:00</span>
-            <a class="download-btn" id="download-btn" download="output.wav">⬇ Download</a>
+            <button class="download-btn" id="download-btn">⬇ Download</button>
           </div>
         </div>
       </div>
@@ -369,6 +392,10 @@
     const downloadBtn     = document.getElementById("download-btn");
     const feedEl          = document.getElementById("feed");
 
+    downloadBtn.addEventListener("click", () => {
+      if (currentSong) generateShareVideo(currentSong, downloadBtn);
+    });
+
     // ── Main player (plain Audio + bar waveform) ─────────────────────────────
     const mainAudio = new Audio();
     const waveformEl = document.getElementById("waveform");
@@ -405,6 +432,172 @@
       }
     });
 
+    // ── Current song state (for video generation) ────────────────────────────
+    let currentSong = null;
+
+    // ── Video generation ────────────────────────────────────────────────────
+    async function generateShareVideo(song, btn) {
+      const origHTML = btn.innerHTML;
+      btn.disabled = true;
+      btn.textContent = "…";
+      stopFeedAudio();
+      mainAudio.pause();
+
+      const overlay = document.createElement("div");
+      overlay.className = "video-overlay";
+      overlay.innerHTML = `
+        <div class="label">Generating video…</div>
+        <div class="pct" id="vid-pct">0%</div>
+        <div class="bar-track"><div class="bar-fill" id="vid-bar" style="width:0%"></div></div>
+      `;
+      document.body.appendChild(overlay);
+      const pctEl = overlay.querySelector("#vid-pct");
+      const barEl = overlay.querySelector("#vid-bar");
+
+      try {
+        await document.fonts.ready;
+
+        const audioResp = await fetch(song.audio_url);
+        const audioArrayBuf = await audioResp.arrayBuffer();
+        const audioCtx = new AudioContext();
+        const decoded = await audioCtx.decodeAudioData(audioArrayBuf);
+
+        const raw = decoded.getChannelData(0);
+        const numBars = 60;
+        const blockSize = Math.floor(raw.length / numBars);
+        const peaks = [];
+        for (let i = 0; i < numBars; i++) {
+          let sum = 0;
+          for (let j = 0; j < blockSize; j++) sum += Math.abs(raw[i * blockSize + j]);
+          peaks.push(sum / blockSize);
+        }
+        const mx = Math.max(...peaks);
+        const normPeaks = peaks.map(p => mx > 0 ? p / mx : 0.5);
+
+        let thumbImg = null;
+        if (song.thumb_url) {
+          thumbImg = new Image();
+          thumbImg.crossOrigin = "anonymous";
+          await new Promise(r => { thumbImg.onload = r; thumbImg.onerror = r; thumbImg.src = song.thumb_url; });
+        }
+
+        const W = 1080, H = 1080;
+        const canvas = document.createElement("canvas");
+        canvas.width = W; canvas.height = H;
+        const ctx = canvas.getContext("2d");
+
+        const source = audioCtx.createBufferSource();
+        source.buffer = decoded;
+        const audioDest = audioCtx.createMediaStreamDestination();
+        source.connect(audioDest);
+
+        const canvasStream = canvas.captureStream(30);
+        const combined = new MediaStream([
+          ...canvasStream.getTracks(),
+          ...audioDest.stream.getTracks(),
+        ]);
+
+        const recorder = new MediaRecorder(combined, {
+          mimeType: MediaRecorder.isTypeSupported("video/webm;codecs=vp9,opus")
+            ? "video/webm;codecs=vp9,opus" : "video/webm",
+          videoBitsPerSecond: 2_000_000,
+        });
+        const chunks = [];
+        recorder.ondataavailable = e => { if (e.data.size > 0) chunks.push(e.data); };
+
+        const duration = decoded.duration;
+
+        function drawFrame(progress) {
+          ctx.fillStyle = "#111111";
+          ctx.fillRect(0, 0, W, H);
+
+          const topY = 120;
+          if (thumbImg && thumbImg.naturalWidth > 0) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.roundRect(90, topY, 120, 120, 14);
+            ctx.clip();
+            ctx.drawImage(thumbImg, 90, topY, 120, 120);
+            ctx.restore();
+          }
+
+          const textX = thumbImg && thumbImg.naturalWidth > 0 ? 230 : 90;
+          ctx.fillStyle = "#ffffff";
+          ctx.font = "600 36px 'Hanken Grotesk', sans-serif";
+          ctx.textAlign = "left";
+          ctx.textBaseline = "middle";
+          let title = song.title || "Untitled";
+          while (ctx.measureText(title).width > W - textX - 90 && title.length > 3) title = title.slice(0, -1);
+          if (title !== song.title) title += "…";
+          ctx.fillText(title, textX, topY + 45);
+
+          ctx.fillStyle = "rgba(255,255,255,0.45)";
+          ctx.font = "400 22px 'Hanken Grotesk', sans-serif";
+          let tags = song.tags || "";
+          while (ctx.measureText(tags).width > W - textX - 90 && tags.length > 3) tags = tags.slice(0, -1);
+          if (tags !== song.tags) tags += "…";
+          ctx.fillText(tags, textX, topY + 90);
+
+          const waveY = 440, waveH = 220, pad = 80;
+          const totalW = W - pad * 2;
+          const gap = 3;
+          const barW = (totalW - (numBars - 1) * gap) / numBars;
+          for (let i = 0; i < numBars; i++) {
+            const x = pad + i * (barW + gap);
+            const h = Math.max(4, normPeaks[i] * waveH);
+            ctx.fillStyle = (i / numBars) <= progress ? "rgba(255,255,255,0.92)" : "rgba(255,255,255,0.15)";
+            ctx.beginPath();
+            ctx.roundRect(x, waveY + (waveH - h) / 2, barW, h, Math.min(barW / 2, 3));
+            ctx.fill();
+          }
+
+          ctx.textAlign = "center";
+          ctx.fillStyle = "rgba(255,255,255,0.40)";
+          ctx.font = "400 36px 'Hanken Grotesk', sans-serif";
+          ctx.fillText("Create your own song:", W / 2, 880);
+          ctx.fillStyle = "rgba(255,255,255,0.55)";
+          ctx.font = "500 33px 'Hanken Grotesk', sans-serif";
+          ctx.fillText("hf.co/spaces/victor/ace-step-jam", W / 2, 930);
+          ctx.textAlign = "left";
+        }
+
+        recorder.start(100);
+        source.start();
+        const startT = performance.now();
+
+        await new Promise((resolve) => {
+          function tick() {
+            const elapsed = (performance.now() - startT) / 1000;
+            const progress = Math.min(elapsed / duration, 1);
+            drawFrame(progress);
+            pctEl.textContent = `${Math.round(progress * 100)}%`;
+            barEl.style.width = `${Math.round(progress * 100)}%`;
+            if (progress < 1) requestAnimationFrame(tick);
+            else setTimeout(() => recorder.stop(), 200);
+          }
+          recorder.onstop = () => {
+            const blob = new Blob(chunks, { type: "video/webm" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            const safeName = (song.title || "song").replace(/[^a-zA-Z0-9 -]/g, "").trim().replace(/\s+/g, "-") || "song";
+            a.download = `${safeName}.webm`;
+            a.click();
+            URL.revokeObjectURL(url);
+            audioCtx.close();
+            resolve();
+          };
+          requestAnimationFrame(tick);
+        });
+      } catch (e) {
+        console.error("Video generation failed:", e);
+      } finally {
+        overlay.remove();
+        btn.disabled = false;
+        btn.innerHTML = origHTML;
+      }
+    }
+
     // ── Gradio client ───────────────────────────────────────────────────────
     let gradioClient = null;
     async function getClient() {
@@ -454,7 +647,7 @@
       }
 
       mainAudio.src = url;
-      downloadBtn.href = url;
+      currentSong = { ...currentSong, audio_url: url };
       outputSection.style.display = "block";
       stopFeedAudio();
       mainAudio.play();
@@ -558,21 +751,24 @@
               <div class="song-title">${esc(song.title || "Untitled")}</div>
               <div class="song-tags">${esc(song.tags || "")}</div>
               <div class="song-duration">${dur}</div>
+              <button class="share-icon-btn" title="Download video"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M3.5 13V8.5h1V12h7V8.5h1V13a.5.5 0 01-.5.5H4a.5.5 0 01-.5-.5zM8 10.25L4.75 7h2V2.5h2.5V7h2L8 10.25z"/></svg></button>
             </div>
             <div class="mini-waveform">${miniBars}</div>
           `;
-          // Play button: toggle play/pause
           card.querySelector(".song-play-btn").addEventListener("click", (e) => {
             e.stopPropagation();
             playFeedSong(card, song.audio_url);
           });
-          // Waveform: seek to click position
           card.querySelector(".mini-waveform").addEventListener("click", (e) => {
             e.stopPropagation();
             const rect = e.currentTarget.getBoundingClientRect();
             const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
             playFeedSong(card, song.audio_url, ratio);
           });
+          card.querySelector(".share-icon-btn").addEventListener("click", (e) => {
+            e.stopPropagation();
+            generateShareVideo(song, e.currentTarget);
+          });
           feedEl.appendChild(card);
         }
       } catch (e) {
@@ -632,8 +828,11 @@
             const thumbEl = document.getElementById("song-thumb");
             if (result.thumbnail) { thumbEl.src = result.thumbnail; thumbEl.style.display = "block"; }
             else { thumbEl.style.display = "none"; }
-            const safeName = (result.title || "output").replace(/[^a-zA-Z0-9 -]/g, "").trim().replace(/\s+/g, "-");
-            downloadBtn.download = `${safeName}.wav`;
+            currentSong = {
+              title: result.title || "Untitled",
+              tags: result.tags || "",
+              thumb_url: result.thumbnail || null,
+            };
             await loadAudio(result.audio);
             // Refresh feed if shared
             if (communityChk.checked) loadFeed();