Changeset 21522ae in Klonkt for src/views

Timestamp:

05/20/2026 10:14:01 PM (4 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

353c39c

Parents:

46f23fd

git-author:

Robin Genis <roboburr@…> (05/20/2026 10:13:26 PM)

git-committer:

Robin Genis <roboburr@…> (05/20/2026 10:14:01 PM)

Message:

audio: Spotify-style blob playback + same-origin gate (fix playback loop)

Root cause of the "next-loops-but-never-plays after 4-5 songs" bug: every
track URL was HMAC-signed once at page-render time with a 10-min TTL. A whole
queue shared that single deadline, so tracks further down expired mid-session
-> /audio/stream returned 403 -> audio 'error' -> auto-skip -> next track also
expired -> infinite loop. The 3-strike guard never fired because the eager
'play' event reset the counter before each 403 landed.

Removed the expiring-token system entirely and replaced it with two
non-expiring layers:

• Client fetch()es track bytes and plays from a blob: object URL (no shareable URL, no "save audio as"); blobs revoked to avoid leaks; loadSeq guards fast prev/next; pre-seed is metadata-only (no auto-download).
• Server gates /audio/stream to same-origin browser fetches (X-Audio-Player header or Sec-Fetch-Site): blocks address-bar paste, hotlinks, curl.

Also: reset error counter on real 'playing' event (not eager 'play') so the
3-strike auto-skip-stop actually works; fix admin play-state detection to
compare logical currentTrack().url instead of the now-blob: audio.src; bump
audio-player.js cache-buster v5.

Co-Authored-By: Claude Opus 4.7 <noreply@…>

Location:

src/views

Files:

• pages/admin-audio.ejs (modified) (2 diffs)
• partials/track-editor.ejs (modified) (1 diff)
• shell.ejs (modified) (1 diff)

src/views/pages/admin-audio.ejs

@@ -583 +583 @@
     function resyncAll() {
       const audio = document.getElementById('audio-element');
+      const player = window.pcmsAudioPlayer;
       const playing = audio && !audio.paused && !audio.ended;
-      const currentSrc = audio ? audio.src : '';
+      // audio.src is now a blob: URL (Spotify-style playback), so compare
+      // against the player's logical track URL, not the element src.
+      const cur = player && player.currentTrack();
+      const curUrl = cur ? cur.url : '';
       buttons.forEach(b => {
-        const isThisOne = playing && currentSrc.endsWith(b.dataset.streamUrl);
+        const isThisOne = playing && curUrl === b.dataset.streamUrl;
         setIcon(b, isThisOne);
       });
@@ -617 +621 @@
         };
 
-        // If this exact track is already playing, toggle pause/play instead
-        // of restarting from zero.
-        const audio = document.getElementById('audio-element');
-        if (audio && audio.src.endsWith(url)) {
-          if (audio.paused) player.play();
-          else              player.pause();
+        // If this exact track is already current, toggle pause/play instead
+        // of restarting from zero. Compare logical URLs (audio.src is a blob:).
+        const cur = player.currentTrack();
+        if (cur && cur.url === url) {
+          if (player.isPlaying()) player.pause();
+          else                    player.play();
           return;
         }

src/views/partials/track-editor.ejs

@@ -445 +445 @@
       };
       const isOurTrack = () => {
-        const audio = document.getElementById('audio-element');
-        return audio && track.stream_url && audio.src.endsWith(track.stream_url);
+        // audio.src is a blob: URL (Spotify-style playback) — compare against
+        // the player's logical current-track URL instead.
+        const player = window.pcmsAudioPlayer;
+        const cur = player && player.currentTrack();
+        return !!(cur && track.stream_url && cur.url === track.stream_url);
       };
       const resync = () => {

src/views/shell.ejs

@@ -277 +277 @@
      ?v=N — cache-buster: bump bij elke audio-player.js wijziging zodat
      Cloudflare (max-age=1y) niet de oude versie blijft serveren. -->
-<script src="/assets/js/audio-player.js?v=3"></script>
+<script src="/assets/js/audio-player.js?v=5"></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>