Changeset 0dbb5c1 in Klonkt

Timestamp:

06/18/2026 07:24:25 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

6623453

Parents:

5c261b7

Message:

Mini player: clickable on desktop → navigates to the associated post

When playing from a post embed, the current post URL is stored on the track(s)
(survives the sessionStorage resume). The expand trigger (cover+title) navigates
on desktop (≥768px) via htmx to that post — audio keeps playing. Mobile (or no
post known, e.g. site tracks) keeps the current behaviour: open the player sheet.
audio-player.js cache-buster v16.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

Location:

src

Files:

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

src/assets/js/audio-player.js

@@ -562 +562 @@
     if (sheet.classList.contains('is-open')) closeSheet(true);
   });
-  expandTrigger.addEventListener('click', openSheet);
+  // Mini-player-info aanklikken:
+  //  - DESKTOP (≥768px): spring naar de post waar de track vandaan komt (als bekend),
+  //    via htmx zodat de audio blijft spelen. Geen post bekend → val terug op de sheet.
+  //  - MOBIEL: altijd de uitgebreide speler-sheet openen (huidig gedrag).
+  function goToPost(url) {
+    if (window.htmx && url.charAt(0) === '/') {
+      try {
+        window.htmx.ajax('GET', url, { target: '#pcms-main', swap: 'innerHTML' });
+        history.pushState({}, '', url);
+        window.scrollTo(0, 0);
+        return;
+      } catch (e) { /* val terug op volledige navigatie */ }
+    }
+    location.href = url;
+  }
+  expandTrigger.addEventListener('click', () => {
+    const t = queue[currentIndex];
+    const isDesktop = window.matchMedia && window.matchMedia('(min-width: 768px)').matches;
+    if (isDesktop && t && t.postUrl) { goToPost(t.postUrl); return; }
+    openSheet();
+  });
   sheetClose.addEventListener('click', () => closeSheet());
   sheetBackdrop.addEventListener('click', () => closeSheet());
@@ -663 +683 @@
     e.preventDefault();
     e.stopPropagation();
+    // De post waar je VANAF afspeelt = de pagina waar je nu bent (de embeds staan
+    // in de post-content). Bewaar 'm op de track(s) zodat de mini-player er op
+    // desktop naartoe kan springen — overleeft ook de sessionStorage-resume.
+    const postUrl = location.pathname + location.search;
     // Resolve metadata: button-first, then closest .post-audio-track wrapper
     // (only inline single-track widgets put the data on the wrapper).
@@ -676 +700 @@
       try {
         const tracks = JSON.parse(album.dataset.pcmsAlbum);
+        tracks.forEach((t) => { t.postUrl = postUrl; });
         // Start at the clicked track if we know its URL, else start at 0
         // (cover-btn and playall both want to start from the beginning).
@@ -684 +709 @@
       try {
         const t = JSON.parse(trackData);
+        t.postUrl = postUrl;
         setQueue([t], 0);
       } catch(err) { console.error('[pcms-audio] bad track JSON', err, trackData); }
     } else if (trackUrl) {
       // Fallback: at minimum we have the signed URL
-      setQueue([{ url: trackUrl, title: 'Track', artist: '', cover: '' }], 0);
+      setQueue([{ url: trackUrl, title: 'Track', artist: '', cover: '', postUrl }], 0);
     } else {
       console.error('[pcms-audio] no track data or url on button or wrapper', btn);

src/views/shell.ejs

@@ -300 +300 @@
      ?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=15"></script>
+<script src="/assets/js/audio-player.js?v=16"></script>
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) via de echte
      player-API's + gedeelde mutual-exclusion registry met de site-speler. -->