Changeset 73b41eb in Klonkt for src/services/AudioEmbedService.js

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

File:

• src/services/AudioEmbedService.js (modified) (3 diffs)

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