Changeset 73b41eb in Klonkt for src/assets

Timestamp:

06/20/2026 03:42:00 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

9e6b54f

Parents:

389aa99

Message:

feat(embed): YouTube audio-only option in posts

Per embed you now choose audio-only or video. [[embed:audio:URL]] (YouTube)
renders as an audio card with our controls (play/seek/volume + thumbnail as
cover); the YT player runs hidden off-screen and provides only the sound.
[[embed:URL]] stays video. The editor embed button asks for audio or video
when a YouTube URL is given. Server: audio:/video: prefix in the shortcode
→ data-embed-mode. busters embed-player.js?v=8, embed.css?v=5.

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

Location:

src/assets

Files:

• css/embed.css (modified) (1 diff)
• js/embed-player.js (modified) (3 diffs)

src/assets/css/embed.css

@@ -119 +119 @@
   width: 320px;
   height: 60px;
+  opacity: 0;
+  pointer-events: none;
+}
+/* Audio-only YouTube: de YT-speler draait verborgen (off-screen) maar moet een
+ * echte grootte houden, anders pauzeert de browser 'm. Alleen het geluid telt. */
+.pcms-embed-card--youtube.pcms-embed-audio-mode .pcms-embed-mount {
+  position: absolute;
+  left: -99999px;
+  top: 0;
+  width: 320px;
+  height: 180px;
   opacity: 0;
   pointer-events: none;

src/assets/js/embed-player.js

@@ -183 +183 @@
 
     // --- UI ophangen (verschilt per provider-type) ---
-    const isVideo = provider === 'youtube';
+    // Audio-only YouTube (data-embed-mode="audio"): render als audio-kaart met
+    // onze controls; de YT-speler draait verborgen (off-screen) en levert alleen
+    // het geluid. Video blijft de default.
+    const audioOnly = provider === 'youtube' && el.dataset.embedMode === 'audio';
+    if (audioOnly) el.classList.add('pcms-embed-audio-mode');
+    const isVideo = provider === 'youtube' && !audioOnly;
     const custom = provider === 'youtube' || provider === 'soundcloud'; // eigen controls
     const poster = provider === 'youtube'
@@ -222 +227 @@
     let vol = 100;       // huidige volume 0-100 (wordt op de adapter toegepast)
     let preMuteVol = 100;
+    // Audio-only YouTube: zet de thumbnail als albumhoes op de audio-kaart.
+    if (audioOnly && poster) {
+      const art0 = el.querySelector('.pcms-embed-art');
+      if (art0) { art0.style.backgroundImage = `url('${poster}')`; art0.classList.add('has-art'); }
+    }
 
     function setPlayingUI(on) {
@@ -369 +379 @@
           events: {
             onReady() {
-              let d = 0; try { d = player.getDuration() || 0; } catch (e) {}
-              hooks.onReady({ duration: d });
+              let d = 0; const meta = {};
+              try { d = player.getDuration() || 0; } catch (e) {}
+              try { const vd = player.getVideoData(); if (vd && vd.title) meta.title = vd.title; } catch (e) {}
+              meta.duration = d;
+              hooks.onReady(meta);
               resolve({
                 play() { try { player.playVideo(); } catch (e) {} },