Changeset ddecd9a in Klonkt

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

Location:

src

Files:

• assets/css/audio.css (modified) (3 diffs)
• assets/js/audio-player.js (modified) (4 diffs)
• views/shell.ejs (modified) (2 diffs)

src/assets/css/audio.css

@@ -148 +148 @@
 .audio-player-expand-trigger:hover {
   background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
+}
+/* DESKTOP (≥1200px): geen full player — de expand-trigger opent niets (JS),
+   dus 'm niet als klikbaar laten ogen. */
+@media (min-width: 1200px) {
+  .audio-player-expand-trigger { cursor: default; }
+  .audio-player-expand-trigger:hover { background: none; }
 }
 
@@ -350 +356 @@
 body.audio-sheet-locked { overflow: hidden; }
 
-/* MOBILE (<720px): full-width sheet, slide up from bottom */
-@media (max-width: 719.98px) {
+/* TELEFOON (<768px): full-width sheet, slide up from bottom */
+@media (max-width: 767.98px) {
   .audio-sheet-panel {
     /* Real full-screen, edge-to-edge, no rounded corners or shadow */
@@ -371 +377 @@
 }
 
-/* DESKTOP (≥720px): 480px wide, horizontally centered (v9 design intent).
-   We MUST set width here because v9's style.css sets width:480px and
-   we don't want left/right:0 stretching to override it.
-   The -50% horizontal centering is preserved during drag by composing
-   --pcms-drag-y into the existing translate(-50%, ...) transform. */
-@media (min-width: 720px) {
+/* TABLET / AUTO (768–1199px): grote, landscape, knop-vriendelijke full-player
+   voor tablets + een tablet-in-de-auto. Bewust full-screen + grote touch-targets.
+   Desktop (≥1200px) opent de full player NIET (afgehandeld in audio-player.js),
+   dus daar is geen sheet-styling nodig. */
+@media (min-width: 768px) and (max-width: 1199.98px) {
   .audio-sheet-panel {
-    left: 50%;
-    right: auto;
-    width: 480px;
-    transform: translate(-50%, 100%);
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
+    inset: 0; left: 0; right: 0; width: auto;
+    max-height: none;
+    border-radius: 0;
+    box-shadow: none;
+    transform: translateY(100%);
+    padding: clamp(2rem, 5vh, 4rem) clamp(2rem, 6vw, 5rem);
+    gap: clamp(1.25rem, 3vh, 2.5rem);
+    justify-content: center;
+    align-items: center;
   }
-  .audio-sheet.is-open .audio-sheet-panel {
-    transform: translate(-50%, var(--pcms-drag-y, 0px));
-  }
+  .audio-sheet.is-open .audio-sheet-panel { transform: translateY(var(--pcms-drag-y, 0px)); }
+
+  .audio-sheet-drag-zone { align-items: center; width: 100%; margin: 0; padding: 0; }
+  .audio-sheet-cover { width: min(48vh, 460px); max-width: none; border-radius: 20px; }
+  .audio-sheet-cover svg { width: 26%; height: 26%; }
+  .audio-sheet-info { width: 100%; max-width: 660px; }
+  .audio-sheet-title  { font-size: clamp(2rem, 4vw, 3rem); }
+  .audio-sheet-artist { font-size: clamp(1.1rem, 2vw, 1.5rem); margin-top: .5rem; }
+  .audio-sheet-album  { font-size: 1rem; margin-top: .25rem; }
+  .audio-sheet-progress { width: 100%; max-width: 660px; gap: 1.25rem; }
+  .audio-sheet-progress .audio-time { font-size: 1.05rem; min-width: 3.2em; }
+  .audio-sheet-controls { gap: clamp(1.5rem, 5vw, 3.5rem); }
+  .audio-sheet-btn { width: 76px; height: 76px; }
+  .audio-sheet-btn svg { width: 34px; height: 34px; }
+  .audio-sheet-play { width: 108px; height: 108px; }
+  .audio-sheet-play svg { width: 46px; height: 46px; }
 }
 

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();
   });
 

src/views/shell.ejs

@@ -168 +168 @@
      anywhere (admin previews, post embeds, etc). The player itself is
      a singleton — see the script tag near </body>. -->
-<link rel="stylesheet" href="/assets/css/audio.css">
+<link rel="stylesheet" href="/assets/css/audio.css?v=2">
 
 <%- include('partials/shared-styles') %>
@@ -309 +309 @@
      ?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=9"></script>
+<script src="/assets/js/audio-player.js?v=10"></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>