Changeset 230e446 in Klonkt for src/assets

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/assets

Files:

• css/style.css (modified) (1 diff)
• js/audio-player.js (modified) (1 diff)

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();
   });