Changeset 73b41eb in Klonkt

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

Files:

• assets/css/embed.css (modified) (1 diff)
• assets/js/embed-player.js (modified) (3 diffs)
• services/AudioEmbedService.js (modified) (3 diffs)
• views/pages/post-edit.ejs (modified) (1 diff)
• views/shell.ejs (modified) (2 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) {} },

src/services/AudioEmbedService.js

@@ -67 +67 @@
       case 'youtube':
         return this.embedPlaceholder('youtube', config.id, 'video',
-          config.url || `https://youtu.be/${config.id}`);
+          config.url || `https://youtu.be/${config.id}`, config.mode);
       case 'soundcloud':
         return this.embedPlaceholder('soundcloud', config.url, 'track', config.url);
@@ -91 +91 @@
    * ALLE waarden via escape() — post.content_html wordt ongeescaped uitgevoerd.
    */
-  static embedPlaceholder(provider, ref, type, url) {
+  static embedPlaceholder(provider, ref, type, url, mode) {
     const attrs = [
       `data-embed-provider="${this.escape(provider)}"`,
       `data-embed-ref="${this.escape(ref)}"`,
       type ? `data-embed-type="${this.escape(type)}"` : '',
+      mode ? `data-embed-mode="${this.escape(mode)}"` : '',
       `data-embed-url="${this.escape(url)}"`,
     ].filter(Boolean).join(' ');
@@ -227 +228 @@
   static embedMediaShortcodes(html) {
     if (!html) return html;
-    return html.replace(/\[\[embed:([^\]]+)\]\]/gi, (match, rawUrl) => {
-      const url = rawUrl.trim().replace(/&/g, '&');
+    return html.replace(/\[\[embed:([^\]]+)\]\]/gi, (match, rawSpec) => {
+      // Optionele modus-prefix: [[embed:audio:URL]] = alleen-audio speler,
+      // [[embed:video:URL]] / [[embed:URL]] = normaal (video waar van toepassing).
+      let spec = rawSpec.trim();
+      let mode = null;
+      const mm = spec.match(/^(audio|video):(.+)$/i);
+      if (mm) { mode = mm[1].toLowerCase(); spec = mm[2].trim(); }
+      const url = spec.replace(/&/g, '&');
       const detected = this.detectProvider(url);
       if (!detected) {
         return `<div class="post-embed-missing"><em>Embed: niet-ondersteunde of ongeldige URL.</em></div>`;
       }
-      return this.generateIframe(detected.provider, detected) || match;
+      return this.generateIframe(detected.provider, { ...detected, mode }) || match;
     });
   }

src/views/pages/post-edit.ejs

@@ -1463 +1463 @@
       const url = raw.trim();
       if (!/^https?:\/\//i.test(url)) { alert('Geef een volledige URL (https://…).'); return; }
-      insertChip('embed', url);
+      // YouTube: keuze audio-only (alleen geluid) of video.
+      let val = url;
+      if (/(youtube\.com|youtu\.be)/i.test(url)) {
+        const audioOnly = window.confirm('YouTube — alleen audio afspelen?\n\nOK = audio-only speler (geen video)\nAnnuleren = video');
+        if (audioOnly) val = 'audio:' + url;
+      }
+      insertChip('embed', val);
     });
   }

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=4">
+<link rel="stylesheet" href="/assets/css/embed.css?v=5">
 
 <%- 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=7" defer></script>
+<script src="/assets/js/embed-player.js?v=8" defer></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>