Changeset 557a76f in Klonkt

Timestamp:

06/20/2026 03:04:22 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

7990e00

Parents:

2873b30

Message:

feat(embed): volume slider + mute for YouTube & SoundCloud

YT/SC use our own controls → volume is now adjustable: mute button + slider
in the control bar. Adapters got setVolume (YT mute/unMute+setVolume, SC
setVolume); the value is remembered and reapplied after (re)mount. Spotify
is excluded (cross-origin iframe, no API volume — as discussed). busters
embed-player.js?v=7, embed.css?v=4.

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

Location:

src

Files:

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

src/assets/css/embed.css

@@ -195 +195 @@
   text-align: center;
 }
+/* Volume: mute-knop + compacte schuif (alleen YT/SC — eigen controls). */
+.pcms-embed-mute {
+  flex: 0 0 auto;
+  width: 28px; height: 28px;
+  border: 0; background: none; padding: 0;
+  color: var(--ink-muted, #6b6560);
+  cursor: pointer;
+  display: grid; place-items: center;
+}
+.pcms-embed-mute svg { width: 18px; height: 18px; }
+.pcms-embed-vol {
+  flex: 0 0 auto;
+  width: 64px;
+  cursor: pointer;
+  accent-color: var(--accent, #c2410c);
+}
+@media (max-width: 480px) {
+  /* Smal scherm: schuif weg, alleen de mute-knop houden (ruimte). */
+  .pcms-embed-vol { display: none; }
+}
 .pcms-embed-seek {
   position: relative;

src/assets/js/embed-player.js

@@ -148 +148 @@
     play: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 4l12 8-12 8z" fill="currentColor"/></svg>',
     pause: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4h4v16H7zM13 4h4v16h-4z" fill="currentColor"/></svg>',
+    volume: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9v6h4l5 5V4L7 9H3z" fill="currentColor"/><path d="M16 8a5 5 0 010 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+    muted: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9v6h4l5 5V4L7 9H3z" fill="currentColor"/><path d="M16 9l5 6M21 9l-5 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
   };
   const LABEL = { youtube: 'YouTube', soundcloud: 'SoundCloud', spotify: 'Spotify' };
@@ -202 +204 @@
             + `<div class="pcms-embed-seek" role="slider" aria-label="Voortgang" tabindex="0"><div class="pcms-embed-seek-fill"></div></div>`
             + `<span class="pcms-embed-dur mono">0:00</span>`
+            + `<button type="button" class="pcms-embed-mute" aria-label="Dempen">${ICON.volume}</button>`
+            + `<input type="range" class="pcms-embed-vol" min="0" max="100" value="100" aria-label="Volume">`
             + `<a class="pcms-embed-badge" href="${escAttr(safeHref(url))}" target="_blank" rel="noopener">${LABEL[provider] || provider}</a>`
             + `</div>`
@@ -214 +218 @@
     const posterBtn = el.querySelector('.pcms-embed-poster, .pcms-embed-art');
     const subEl = el.querySelector('.pcms-embed-sub');
+    const volEl = el.querySelector('.pcms-embed-vol');
+    const muteBtn = el.querySelector('.pcms-embed-mute');
+    let vol = 100;       // huidige volume 0-100 (wordt op de adapter toegepast)
+    let preMuteVol = 100;
 
     function setPlayingUI(on) {
@@ -297 +305 @@
       try {
         adapter = await MOUNTERS[provider](mountEl, { ref, url }, hooks);
+        if (el._pcmsApplyVol) el._pcmsApplyVol();  // onthouden volume toepassen
         // is-mounted: CSS verbergt de poster (video) of de Spotify-facade en
         // toont de echte speler. Voor SoundCloud blijft onze kaart+balk staan en
@@ -319 +328 @@
       adapter.seek(ratio * dur);
     });
+    // Volume: schuif zet vol (0-100) en past 'm toe op de adapter (YT/SC hebben
+    // setVolume). De waarde wordt onthouden en na het mounten opnieuw toegepast.
+    function applyVol() {
+      if (adapter && adapter.setVolume) { try { adapter.setVolume(vol); } catch (e) {} }
+      if (muteBtn) muteBtn.innerHTML = vol === 0 ? ICON.muted : ICON.volume;
+      if (volEl && String(volEl.value) !== String(vol)) volEl.value = vol;
+      el.classList.toggle('is-muted', vol === 0);
+    }
+    if (volEl) volEl.addEventListener('input', () => { vol = parseInt(volEl.value, 10) || 0; if (vol > 0) preMuteVol = vol; applyVol(); });
+    if (muteBtn) muteBtn.addEventListener('click', () => {
+      if (vol > 0) { preMuteVol = vol; vol = 0; } else { vol = preMuteVol || 100; }
+      applyVol();
+    });
+    el._pcmsApplyVol = applyVol;  // door ensureMountedAndPlay aangeroepen na mount
   }
 
@@ -352 +375 @@
                 pause() { try { player.pauseVideo(); } catch (e) {} },
                 seek(sec) { try { player.seekTo(sec, true); } catch (e) {} },
+                setVolume(pct) { try { if (pct <= 0) player.mute(); else { player.unMute(); player.setVolume(pct); } } catch (e) {} },
                 destroy() {
                   if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
@@ -411 +435 @@
             pause() { widget.pause(); },
             seek(sec) { widget.seekTo(sec * 1000); },
+            setVolume(pct) { try { widget.setVolume(pct); } catch (e) {} },
             destroy() {
               try { ['READY', 'PLAY', 'PAUSE', 'FINISH', 'PLAY_PROGRESS', 'ERROR'].forEach((k) => E[k] && widget.unbind(E[k])); } catch (e) {}

src/views/shell.ejs

@@ -170 +170 @@
 <link rel="stylesheet" href="/assets/css/audio.css?v=6">
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) in huisstijl. -->
-<link rel="stylesheet" href="/assets/css/embed.css?v=3">
+<link rel="stylesheet" href="/assets/css/embed.css?v=4">
 
 <%- include('partials/shared-styles') %>
@@ -303 +303 @@
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) via de echte
      player-API's + gedeelde mutual-exclusion registry met de site-speler. -->
-<script src="/assets/js/embed-player.js?v=6" defer></script>
+<script src="/assets/js/embed-player.js?v=7" defer></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>