Changeset 230e446 in Klonkt

Timestamp:

06/20/2026 01:38:16 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

fa08981

Parents:

d188736

Message:

feat(player): mini-player jumps to post AND scrolls to the track (desktop)

Track embed gets id="track-<id>" (anchor) + id in the track JSON. goToPost
now carries the track id: after the htmx swap to the post it scrolls to the
track embed (block:center, smooth) with a brief highlight, instead of
scrolling to the top. Busters: audio-player.js?v=17, style.css?v=16.

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

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• assets/js/audio-player.js (modified) (1 diff)
• services/AudioEmbedService.js (modified) (2 diffs)
• views/shell.ejs (modified) (2 diffs)

src/assets/css/style.css

@@ -2819 +2819 @@
     border-color: var(--accent, #c2410c);
     background: color-mix(in srgb, var(--accent, #c2410c) 5%, var(--paper-2, transparent));
+}
+/* Korte highlight wanneer je via de mini-speler naar deze track springt. */
+.post-audio-track.pat-flash {
+    animation: patFlash 1.6s ease-out;
+}
+@keyframes patFlash {
+    0%, 30% { border-color: var(--accent, #c2410c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #c2410c) 35%, transparent); }
+    100% { box-shadow: 0 0 0 0 transparent; }
 }
 .post-audio-track .pat-play {

src/assets/js/audio-player.js

@@ -566 +566 @@
   //    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) {
+  function scrollToTrack(trackId) {
+    if (!trackId) { window.scrollTo(0, 0); return; }
+    const el = document.getElementById('track-' + trackId);
+    if (!el) { window.scrollTo(0, 0); return; }
+    el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    el.classList.add('pat-flash');
+    setTimeout(() => el.classList.remove('pat-flash'), 1600);
+  }
+  function goToPost(url, trackId) {
+    const hash = trackId ? ('#track-' + trackId) : '';
     if (window.htmx && url.charAt(0) === '/') {
       try {
-        window.htmx.ajax('GET', url, { target: '#pcms-main', swap: 'innerHTML' });
-        history.pushState({}, '', url);
-        window.scrollTo(0, 0);
+        const p = window.htmx.ajax('GET', url, { target: '#pcms-main', swap: 'innerHTML' });
+        history.pushState({}, '', url + hash);
+        // Na de swap naar de track scrollen (klein uitstel zodat de globale
+        // afterSwap-top-scroll eerst is geweest); val terug op top als niet gevonden.
+        const go = () => setTimeout(() => scrollToTrack(trackId), 60);
+        if (p && typeof p.then === 'function') p.then(go); else setTimeout(go, 150);
         return;
       } catch (e) { /* val terug op volledige navigatie */ }
     }
-    location.href = url;
+    location.href = url + hash;
   }
   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; }
+    if (isDesktop && t && t.postUrl) { goToPost(t.postUrl, t.id); return; }
     openSheet();
   });

src/services/AudioEmbedService.js

@@ -248 +248 @@
       if (!t || !t.url) return match;
       const trackJson = JSON.stringify({
+        id,
         url: t.url,
         title: t.title || 'Untitled',
@@ -258 +259 @@
       const dataAttr = trackJson
         .replace(/&/g, '&amp;').replace(/'/g, '&#39;').replace(/</g, '&lt;');
-      return `<div class="post-audio-track" data-pcms-track-url="${urlH}" data-pcms-track='${dataAttr}'>
+      // id="track-<id>" = anker zodat de mini-speler hierheen kan scrollen.
+      return `<div class="post-audio-track" id="track-${id}" data-pcms-track-id="${id}" data-pcms-track-url="${urlH}" data-pcms-track='${dataAttr}'>
   <button type="button" class="pat-play" aria-label="Play ${titleH}">
     <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 4l12 8-12 8z"/></svg>

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=15">
+<link rel="stylesheet" href="/assets/css/style.css?v=16">
 
 <!-- Audio player styles: loaded on every page so the mini-player works
@@ -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=16"></script>
+<script src="/assets/js/audio-player.js?v=17"></script>
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) via de echte
      player-API's + gedeelde mutual-exclusion registry met de site-speler. -->