Changeset e6888ca in Klonkt

Timestamp:

06/15/2026 01:29:13 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

851239c

Parents:

bd7f10d

Message:

feat: audio player persists + resumes across page navigations (session persistence)

An <audio> doesn't survive a full reload, and cross-context navigation (e.g. to
the headerless hub overview) is intentionally full-nav -> the playing player
disappeared. Now the player saves queue+position+playstate to sessionStorage
(pagehide/play/pause + 5s interval) and restores+resumes on the next page;
restore wins over the page seed. Position is applied on loadedmetadata.
audio-player.js v=10->v=11.

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

Location:

src

Files:

• assets/js/audio-player.js (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/assets/js/audio-player.js

@@ -694 +694 @@
 
   // ============================================================
-  // 10. Site-level pre-seed (window.PCMS_SITE_TRACKS)
-  // ============================================================
-  if (Array.isArray(window.PCMS_SITE_TRACKS) && window.PCMS_SITE_TRACKS.length) {
-    queue = window.PCMS_SITE_TRACKS.map(t => ({
-      url:    t.media_url || t.url,
-      title:  t.title  || 'Untitled',
-      artist: t.artist || '',
-      cover:  t.cover_url || t.cover || '',
-    }));
-    if (queue.length) loadTrack(0, false, true);  // metadata only — fetch on first play
+  // 10. Sessie-persistentie — speler "blijft" over page-navigaties heen
+  // ============================================================
+  // Een <audio> overleeft geen volledige page-load (en cross-context navigatie
+  // — bv. naar de headerloze hub-overview — is bewust full-nav). We bewaren de
+  // sessie in sessionStorage en herstellen + hervatten 'm op de volgende pagina:
+  // de speler staat er weer met dezelfde track op dezelfde positie. In Chrome
+  // (hoge media-engagement) speelt 'ie meteen door; staat de browser autoplay
+  // niet toe, dan staat 'ie klaar op die plek (één tik = verder).
+  const PLAYER_STATE_KEY = 'pcms-player-state';
+  let pendingSeek = 0;
+  function savePlayerState() {
+    try {
+      if (!queue.length) { sessionStorage.removeItem(PLAYER_STATE_KEY); return; }
+      sessionStorage.setItem(PLAYER_STATE_KEY, JSON.stringify({
+        queue, currentIndex, albumName,
+        time: audio.currentTime || 0,
+        playing: !!audio.src && !audio.paused,
+      }));
+    } catch (e) {}
+  }
+  window.addEventListener('pagehide', savePlayerState);
+  window.addEventListener('beforeunload', savePlayerState);
+  audio.addEventListener('play',  savePlayerState);
+  audio.addEventListener('pause', savePlayerState);
+  audio.addEventListener('ended', savePlayerState);
+  setInterval(() => { if (audio.src && !audio.paused) savePlayerState(); }, 5000);
+  // Herstelde positie toepassen zodra de track-metadata binnen is.
+  audio.addEventListener('loadedmetadata', () => {
+    if (pendingSeek > 0 && isFinite(audio.duration) && audio.duration > 0) {
+      try { audio.currentTime = Math.min(pendingSeek, audio.duration - 0.25); } catch (e) {}
+      pendingSeek = 0;
+    }
+  });
+  function restorePlayerState() {
+    let s = null;
+    try { s = JSON.parse(sessionStorage.getItem(PLAYER_STATE_KEY) || 'null'); } catch (e) { return false; }
+    if (!s || !Array.isArray(s.queue) || !s.queue.length) return false;
+    queue = s.queue;
+    albumName = s.albumName || '';
+    pendingSeek = s.time || 0;
+    const idx = Math.max(0, Math.min(s.currentIndex || 0, queue.length - 1));
+    // playing -> fetch + (poging tot) hervatten; gepauzeerd -> alleen metadata.
+    loadTrack(idx, !!s.playing, !s.playing);
+    return true;
+  }
+
+  // ============================================================
+  // 11. Site-level pre-seed (window.PCMS_SITE_TRACKS)
+  // ============================================================
+  // Een actieve sessie (restore) wint van de pagina-seed, zodat lopende muziek
+  // doorgaat i.p.v. vervangen te worden door de tracks van de nieuwe pagina.
+  if (!restorePlayerState()) {
+    if (Array.isArray(window.PCMS_SITE_TRACKS) && window.PCMS_SITE_TRACKS.length) {
+      queue = window.PCMS_SITE_TRACKS.map(t => ({
+        url:    t.media_url || t.url,
+        title:  t.title  || 'Untitled',
+        artist: t.artist || '',
+        cover:  t.cover_url || t.cover || '',
+      }));
+      if (queue.length) loadTrack(0, false, true);  // metadata only — fetch on first play
+    }
   }
 })();

src/views/shell.ejs

@@ -309 +309 @@
      ?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=10"></script>
+<script src="/assets/js/audio-player.js?v=11"></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>