Changeset a85f539 in Klonkt

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

Location:

src/services

Files:

• AudioEmbedService.js (modified) (3 diffs)
• HtmlSanitizerService.js (modified) (1 diff)

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

src/services/HtmlSanitizerService.js

@@ -25 +25 @@
   'strong', 'em', 'b', 'i', 'u', 's', 'mark', 'small', 'sub', 'sup',
   'code', 'a', 'span', 'img',
+  // Native media (bare .webm/.mp4/.mp3 embeds + federated-in players)
+  'video', 'audio', 'source',
 ];
 
 // Per-tag attribute allowlist. '*' applies to every tag.
 const ALLOWED_ATTRS = {
-  '*': ['class', 'id', 'dir', 'lang', 'data-sc'],
-  a:   ['href', 'title', 'target', 'rel'],
-  img: ['src', 'alt', 'title', 'width', 'height', 'loading'],
+  '*':   ['class', 'id', 'dir', 'lang', 'data-sc'],
+  a:     ['href', 'title', 'target', 'rel'],
+  img:   ['src', 'alt', 'title', 'width', 'height', 'loading'],
+  video: ['src', 'controls', 'preload', 'poster', 'width', 'height', 'loop', 'muted', 'autoplay', 'playsinline'],
+  audio: ['src', 'controls', 'preload', 'loop', 'muted', 'autoplay'],
+  source: ['src', 'type'],
 };
 
 const ALLOWED_SCHEMES = ['http', 'https', 'mailto', 'tel'];
 const ALLOWED_SCHEMES_BY_TAG = {
-  img: ['http', 'https', 'data'],
-  a:   ['http', 'https', 'mailto', 'tel'],
+  img:    ['http', 'https', 'data'],
+  a:      ['http', 'https', 'mailto', 'tel'],
+  video:  ['http', 'https'],
+  audio:  ['http', 'https'],
+  source: ['http', 'https'],
 };