Changeset 5258945 in Klonkt

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@…>

Location:

src

Files:

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

src/assets/css/style.css

@@ -2824 +2824 @@
 .post-album-track-compact.pat-flash {
     animation: patFlash 1.6s ease-out;
+    border-radius: 8px;
+}
+/* Blijvende highlight op de track die NU actief is in de speler. */
+.post-audio-track.pat-playing,
+.post-album-track-compact.pat-playing {
+    background: color-mix(in srgb, var(--accent, #c2410c) 12%, var(--paper-2, transparent));
+    box-shadow: inset 3px 0 0 0 var(--accent, #c2410c);
     border-radius: 8px;
 }

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;

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=17">
+<link rel="stylesheet" href="/assets/css/style.css?v=18">
 
 <!-- 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=18"></script>
+<script src="/assets/js/audio-player.js?v=19"></script>
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) via de echte
      player-API's + gedeelde mutual-exclusion registry met de site-speler. -->