Changeset a85f539 in Klonkt for src/services/AudioEmbedService.js

Timestamp:

07/16/2026 12:20:51 PM (8 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

e276d03

Parents:

8e7f0ec

git-author:

Robin <roboburr@…> (07/12/2026 10:30:07 PM)

git-committer:

Robin <roboburr@…> (07/16/2026 12:20:51 PM)

Message:

Fix: bare .webm/.mp4/.mp3 URLs render a native player

autoembed() and [[embed:]] now detect direct media-file URLs and emit a
<video>/<audio> element (was: left as a plain link). Sanitizer allows
video/audio/source with a tight attr + http(s)-scheme allowlist so
hand-authored and federated-in players survive. detectProvider() is left
untouched so the timeline/cover callers that switch on provider slugs are
unaffected.

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

File:

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

src/services/AudioEmbedService.js

@@ -82 +82 @@
 
     return null;
+  }
+
+  // Direct media files (video/audio) hosted anywhere → a native <video>/<audio>
+  // player. Kept OUT of detectProvider() on purpose: the timeline/cover callers
+  // switch on provider slugs (youtube/spotify/…) and a bare file has none, so
+  // overloading detectProvider would suppress e.g. a PeerTube fallback. Only
+  // autoembed() and [[embed:…]] use this.
+  static MEDIA_FILE_EXT = {
+    video: ['mp4', 'webm', 'm4v', 'mov', 'ogv'],
+    audio: ['mp3', 'ogg', 'oga', 'wav', 'm4a', 'flac', 'opus', 'aac'],
+  };
+
+  static detectMediaFile(url) {
+    if (!url || typeof url !== 'string') return null;
+    if (!/^https?:\/\//i.test(url)) return null;
+    let pathname;
+    try { pathname = new URL(url).pathname.toLowerCase(); } catch { return null; }
+    const ext = (pathname.match(/\.([a-z0-9]+)$/) || [])[1];
+    if (!ext) return null;
+    if (this.MEDIA_FILE_EXT.video.includes(ext)) return { kind: 'video', url };
+    if (this.MEDIA_FILE_EXT.audio.includes(ext)) return { kind: 'audio', url };
+    return null;
+  }
+
+  static mediaFileEmbed(url) {
+    const m = this.detectMediaFile(url);
+    if (!m) return null;
+    const src = this.escape(m.url);
+    if (m.kind === 'video') {
+      return `<figure class="folio-embed folio-embed--video"><video src="${src}" controls preload="metadata" playsinline></video></figure>`;
+    }
+    return `<figure class="folio-embed folio-embed--audio"><audio src="${src}" controls preload="metadata"></audio></figure>`;
   }
 
@@ -238 +270 @@
           return iframe || match;
         }
+        // Bare media file (…/clip.webm, …/song.mp3) → native player.
+        const media = this.mediaFileEmbed(url);
+        if (media) return media;
         return match;
       }
@@ -255 +290 @@
       const detected = this.detectProvider(url);
       if (!detected) {
+        // Bare media file (…/clip.webm, …/song.mp3) → native player.
+        const media = this.mediaFileEmbed(url);
+        if (media) return media;
         return `<div class="post-embed-missing"><em>Embed: niet-ondersteunde of ongeldige URL.</em></div>`;
       }