Changeset 5258945 in Klonkt for src/assets/js

Timestamp:

06/20/2026 02:17:12 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

795c925

Parents:

ddf549f

Message:

feat(player): persistent highlight on the active track

The currently playing track gets a persistent highlight (.pat-playing, accent
border + tint) for as long as it is the current one; markPlaying() runs on
every loadTrack and is re-applied after htmx navigation. The short spring
pulse (pat-flash) remains. busters: audio-player.js?v=19, style.css?v=18.

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

File:

• src/assets/js/audio-player.js (modified) (2 diffs)

src/assets/js/audio-player.js

@@ -276 +276 @@
   // Used by the site pre-seed so opening a page doesn't auto-download audio;
   // the blob is fetched lazily on the first play().
+  // Markeer de huidige track persistent (blijvende highlight zolang 'ie actief is).
+  function markPlaying(trackId) {
+    document.querySelectorAll('.pat-playing').forEach((e) => e.classList.remove('pat-playing'));
+    if (!trackId) return;
+    const el = document.getElementById('track-' + trackId);
+    if (el) el.classList.add('pat-playing');
+  }
+  // Na een htmx-navigatie is de post-DOM vervangen → highlight opnieuw zetten.
+  document.body.addEventListener('htmx:afterSettle', () => {
+    const t = queue[currentIndex];
+    if (t) markPlaying(t.id);
+  });
+
   function loadTrack(index, autoplay, metaOnly) {
     if (!queue[index]) {
@@ -300 +313 @@
     document.body.classList.add('has-audio-player');
     renderQueue();
+    markPlaying(t.id);
 
     if (metaOnly) return;