Changeset 995b100 in Klonkt for src/services/AudioEmbedService.js

Timestamp:

08/17/2026 07:32:49 AM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

e854ace

Parents:

d97c58c

git-author:

Robin <roboburr@…> (08/17/2026 07:30:41 AM)

git-committer:

Robin <roboburr@…> (08/17/2026 07:32:49 AM)

Message:

YouTube-playlists in een post, met dezelfde parsing als de hub

Een link naar een YouTube-album speelde het eerste nummer en stopte, en
een kale playlist-link werd helemaal niet als YouTube herkend.
detectProvider hield alleen de video-id vast en gooide list= weg.

De ref kent nu drie vormen, exact die van de Klonkt hub, zodat één ref
tussen de twee heen en weer kan zonder vertaling:

"<video>" een video
"<video>?list=<L>" die video, en door de lijst heen
"list:<L>" de hele playlist (YouTube's videoseries)

list mag voor of na v= staan en is in een gebakken href vaak
entity-gecodeerd (&amp;), dus er wordt over de hele URL gezocht in plaats
van op een vaste volgorde. youtube-nocookie.com telt mee als host: dat is
wat een embed zelf uitzendt en dus wat mensen terugplakken.

videoseries is EXACT elf tekens, net als een video-id. Geen lengte- of
grensregel vangt hem -- hij moet bij naam uitgesloten worden. Ik liep er
tijdens het bouwen zelf in met een grenscontrole die eroverheen leek te
gaan; vandaar de test die hem apart vastlegt.

Aan de clientkant (embed-player.js) kennen ytId/ytList/ytEmbedSrc dezelfde
drie vormen. Twee dingen die daar meekomen:

• De poster interpoleerde een null video-id tot i.ytimg.com/vi/null/hqdefault.jpg -- een 404 als achtergrond. Een kale playlist heeft geen video, en krijgt nu gewoon geen poster.
• YouTube meldt binnen een playlist "ended" TUSSEN elk tweetal nummers. Daar meteen onEnded op vuren geeft de wachtrij door na nummer één en kapt het album af. Op een lijst wachten we daarom 2,5 seconde, en telt alleen een stilte die niet door het volgende nummer wordt onderbroken -- dezelfde regel als in de hub.

De dode youtubeIframe() is meegegaan: hij wordt nergens aangeroepen, maar
een terugval die de playlist stil laat vallen is de ergste soort, want
die ziet eruit alsof het werkte.

Wat hier NIET in zit: de hub haalt ook de nummerlijst van een playlist op
(Data API met sleutel, anders keyless via de RSS-feed). Dat vraagt een
sleutel en een bewaarplek en is een aparte keuze.

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

File:

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

src/services/AudioEmbedService.js

@@ -68 +68 @@
     }
 
-    // YouTube — video id is always exactly 11 characters (aligns with the client-side
-    // ytId() in embed-player.js, which also expects {11}).
-    if (/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/shorts\/|youtube\.com\/live\/)([A-Za-z0-9_-]{11})/i.test(url)) {
-      const match = url.match(/(?:v=|youtu\.be\/|embed\/|shorts\/|live\/)([A-Za-z0-9_-]{11})/i);
-      return { provider: 'youtube', id: match[1], url };
+    // YouTube — a video id is always exactly 11 characters (aligns with the
+    // client-side ytId() in embed-player.js, which also expects {11}).
+    //
+    // A link may carry a video, a playlist, or both, and until now we kept only
+    // the video and threw `list=` away -- so a link to an album played its first
+    // song and stopped. The ref now keeps whichever is there, in the same three
+    // shapes the Klonkt hub uses, so one ref travels between the two unchanged:
+    //
+    //   "<video>"           one video
+    //   "<video>?list=<L>"  that video, and on through the list
+    //   "list:<L>"          the whole playlist (YouTube's `videoseries`)
+    //
+    // `list` may sit before or after `v=` and is often entity-encoded (&amp;)
+    // in a baked href, hence the scan over the whole URL rather than a fixed
+    // order. A list id is 10-60 chars: longer and looser than a video id.
+    if (/(?:youtube(?:-nocookie)?\.com\/(?:watch\?|playlist\?|embed\/|shorts\/|live\/)|youtu\.be\/)/i.test(url)) {
+      const vm = url.match(/(?:[?&](?:amp;)?v=|youtu\.be\/|\/embed\/|\/shorts\/|\/live\/)([A-Za-z0-9_-]{11})(?![A-Za-z0-9_-])/i);
+      const lm = url.match(/[?&](?:amp;)?list=([A-Za-z0-9_-]{10,60})/i);
+      // `videoseries` is a marker, not a video: a bare playlist embed URL reads
+      // /embed/videoseries?list=..., and taking that for an id gives a dead
+      // frame. It is EXACTLY eleven characters, so no length rule catches it --
+      // it has to be named. (Measured, not assumed: it slipped through a
+      // boundary check that looked like it covered this.)
+      const id = vm && vm[1] !== 'videoseries' ? vm[1] : null;
+      const list = lm ? lm[1] : null;
+      if (id || list) {
+        const ref = id ? (list ? `${id}?list=${list}` : id) : `list:${list}`;
+        // `id` stays exactly what it was for every caller that only wants a
+        // video; `list` and `ref` are additions.
+        return { provider: 'youtube', id, list, ref, url };
+      }
     }
 
@@ -122 +148 @@
       // iframe, so the embed appears in OUR brand style.
       case 'youtube':
-        return this.embedPlaceholder('youtube', config.id, 'video',
-          config.url || `https://youtu.be/${config.id}`);
+        // The ref carries the list when there is one; `id` alone would drop it
+        // and play a single song out of an album.
+        return this.embedPlaceholder('youtube', config.ref || config.id, 'video',
+          config.url || (config.id ? `https://youtu.be/${config.id}`
+                                   : `https://www.youtube.com/playlist?list=${config.list}`));
       case 'soundcloud':
         return this.embedPlaceholder('soundcloud', config.url, 'track', config.url);
@@ -224 +253 @@
   }
 
-  static youtubeIframe({ id }) {
-    const src = `https://www.youtube-nocookie.com/embed/${id}`;
+  /**
+   * The plain provider iframe. Takes the same ref shapes as the placeholder:
+   * "<video>", "<video>?list=<L>" and "list:<L>" -- a bare playlist embeds as
+   * `videoseries`. Kept in step with the placeholder path on purpose: this is
+   * the fallback, and a fallback that silently drops the playlist is the worst
+   * kind, because it looks like it worked.
+   */
+  static youtubeIframe({ id, ref }) {
+    const r = ref || id || '';
+    const base = 'https://www.youtube-nocookie.com/embed/';
+    let src;
+    if (r.startsWith('list:')) {
+      src = `${base}videoseries?list=${encodeURIComponent(r.slice(5))}`;
+    } else if (r.includes('?list=')) {
+      const [v, l] = r.split('?list=');
+      src = `${base}${encodeURIComponent(v)}?list=${encodeURIComponent(l)}`;
+    } else {
+      src = base + encodeURIComponent(r);
+    }
     return `
       <figure class="folio-embed folio-embed--youtube">