Changeset 9b36f45 in Klonkt

Timestamp:

06/14/2026 02:40:35 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

942028f

Parents:

b5bae24

Message:

audio: mobile — tapping a track automatically opens the now-playing sheet (Spotify style)

On mobile (CSS breakpoint <=719.98px) setQueue after a user-initiated track tap
from an album/playlist now automatically opens the full sheet instead of only
showing the mini strip. Only in setQueue (not next/prev or pre-seed), so a
deliberately closed sheet does not come back. Desktop unchanged.
Cache buster audio-player.js ?v=6 -> ?v=7 (Cloudflare 1y cache).

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

Location:

src

Files:

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

src/assets/js/audio-player.js

@@ -323 +323 @@
   }
 
+  // True when the viewport is in the mobile sheet-layout — matches the CSS
+  // breakpoint where .audio-sheet slides up full-width from the bottom
+  // (@media max-width:719.98px). On wider/desktop widths the sheet is a centered
+  // panel, so we do NOT auto-open it there.
+  function isMobileView() {
+    return window.matchMedia('(max-width: 719.98px)').matches;
+  }
+
   function setQueue(tracks, startIdx, opts) {
     queue = Array.isArray(tracks) ? tracks.slice() : [];
@@ -328 +336 @@
     if (!queue.length) return;
     loadTrack(typeof startIdx === 'number' ? Math.max(0, Math.min(startIdx, queue.length - 1)) : 0, true);
+    // Mobile: a track press from an album/playlist auto-opens the full
+    // now-playing sheet (Spotify-style) i.p.v. alleen de dunne mini-strip.
+    // Alleen hier (setQueue = een verse, door-de-gebruiker-gestarte queue) —
+    // niet bij next/prev of de site-pre-seed — zodat een sheet die de gebruiker
+    // bewust sloot niet vanzelf terugkomt.
+    if (isMobileView()) openSheet();
   }
 

src/views/shell.ejs

@@ -277 +277 @@
      ?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=6"></script>
+<script src="/assets/js/audio-player.js?v=7"></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>