Changeset ddecd9a in Klonkt for src/assets/js/audio-player.js

Timestamp:

06/14/2026 10:17:23 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

102d2f0

Parents:

a1c8cb8

Message:

feat: audio player three layouts — desktop mini-only, tablet/auto full-player

• Desktop (>=1200px): NO full player anymore; the expand trigger opens nothing (JS guard) and doesn't look clickable. Mini player only.
• Tablet/auto (768-1199px): new large, full-screen, button-friendly full-player variant (large cover + large controls) for tablets + tablet-in-the-car. Opens on tap and auto-opens on a fresh queue.
• Phone (<768px): unchanged fullscreen sheet (breakpoint 720->768).
• Cache busters: audio-player.js v9->v10, audio.css (new) v2.

Note: real Android Auto requires a native app; this is the web tablet/car variant.

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

File:

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

src/assets/js/audio-player.js

@@ -327 +327 @@
   // (@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;
-  }
+  // Drie weergaves (Robin 2026-06-15): telefoon (<768) = fullscreen sheet;
+  // tablet/auto (768–1199) = grote landscape full-player (tablet + tablet-in-de-
+  // auto); desktop (≥1200) = alleen mini-speler, GEEN full player. matchMedia
+  // zodat dit exact de CSS-breekpunten volgt.
+  function playerTier() {
+    if (window.matchMedia('(min-width: 1200px)').matches) return 'desktop';
+    if (window.matchMedia('(min-width: 768px)').matches) return 'tablet';
+    return 'phone';
+  }
+  function hasFullPlayer() { return playerTier() !== 'desktop'; }
+  function isMobileView() { return playerTier() === 'phone'; }
 
   function setQueue(tracks, startIdx, opts) {
@@ -341 +349 @@
     // niet bij next/prev of de site-pre-seed — zodat een sheet die de gebruiker
     // bewust sloot niet vanzelf terugkomt.
-    if (isMobileView()) openSheet();
+    if (hasFullPlayer()) openSheet();
   }
 
@@ -502 +510 @@
 
   function openSheet() {
+    if (!hasFullPlayer()) return; // desktop (≥1200): geen full player, alleen mini-speler
     if (sheet.classList.contains('is-open')) return;
     sheet.classList.add('is-open');
     sheet.setAttribute('aria-hidden', 'false');
     document.body.classList.add('audio-sheet-locked');
-    if (isMobileView()) {
-      try { history.pushState({ pcmsSheet: true }, ''); sheetHistoryPushed = true; } catch (e) {}
-    }
+    // Telefoon + tablet: history-entry zodat de terug-knop eerst de sheet sluit.
+    try { history.pushState({ pcmsSheet: true }, ''); sheetHistoryPushed = true; } catch (e) {}
   }
   function closeSheet(fromPopstate) {
@@ -532 +540 @@
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && sheet.classList.contains('is-open')) closeSheet();
+  });
+  // Naar desktop-breedte (≥1200) gesleept terwijl de full player open is? Sluiten —
+  // op desktop bestaat de full player niet.
+  window.addEventListener('resize', () => {
+    if (!hasFullPlayer() && sheet.classList.contains('is-open')) closeSheet();
   });