Changeset 359b9ae in Klonkt

Timestamp:

06/20/2026 02:09:51 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

ddf549f

Parents:

85d5972

Message:

fix(player): scroll-to-track also from album & playlist

Album track JSON was not passing id (posts.js) and album/playlist rows had
no anchor. Now: id in the album track data + id="track-<id>" on album and
playlist rows (playlist already had the id via PlaylistService). Highlight
flash also on playlist rows. style.css?v=17.

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

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• routes/posts.js (modified) (1 diff)
• services/AudioEmbedService.js (modified) (2 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -2821 +2821 @@
 }
 /* Korte highlight wanneer je via de mini-speler naar deze track springt. */
-.post-audio-track.pat-flash {
+.post-audio-track.pat-flash,
+.post-album-track-compact.pat-flash {
     animation: patFlash 1.6s ease-out;
+    border-radius: 8px;
 }
 @keyframes patFlash {

src/routes/posts.js

@@ -562 +562 @@
         if (!byAlbum.has(r.album)) byAlbum.set(r.album, []);
         byAlbum.get(r.album).push({
+          id: r.id,
           url: audioUrl(r.filename),
           title: r.title || 'Untitled',

src/services/AudioEmbedService.js

@@ -298 +298 @@
         const tArtist = this.escape(t.artist || '');
         const tUrl = this.escape(t.url);
-        return `    <li class="post-audio-track" data-pcms-track-url="${tUrl}" data-pcms-album-id="${albumDomId}">
+        return `    <li class="post-audio-track"${t.id ? ` id="track-${t.id}" data-pcms-track-id="${t.id}"` : ''} data-pcms-track-url="${tUrl}" data-pcms-album-id="${albumDomId}">
       <button type="button" class="pat-play" aria-label="Play ${tTitle}">
         <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 4l12 8-12 8z"/></svg>
@@ -414 +414 @@
 
         const trackBase = String(t.url).split('?')[0];
-        return `    <li class="post-album-track-compact">
+        return `    <li class="post-album-track-compact"${t.id ? ` id="track-${t.id}" data-pcms-track-id="${t.id}"` : ''}>
       <button type="button" class="pat-row"
               data-pcms-track-url="${tUrl}"

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=16">
+<link rel="stylesheet" href="/assets/css/style.css?v=17">
 
 <!-- Audio player styles: loaded on every page so the mini-player works