source: Klonkt/src/services/AudioEmbedService.js@ 0d7acdf

main
Last change on this file since 0d7acdf was 0d7acdf, checked in by roboburr <roboburr@…>, 3 months ago

feat(audio): per-track owner/credit + license (+ written to mp3 ID3 tags)

New per-track metadata: credit (copyright holder) + license. Editable in the
track editor (license with datalist presets: All rights reserved, CC BY/…/CC0).

  • DB: audio_tracks.credit + .license.
  • ID3: on upload and on every metadata edit the tags are written into the mp3 itself — copyright=credit, comment=license (new retagMp3() in the transcoder, -c copy, no re-encode) → ownership travels with a download.
  • Visible: "credit · license" line below each track (post-audio-track).

busters audio.css?v=7.

Co-Authored-By: Claude <noreply@…>
  • Property mode set to 100644
File size: 23.7 KB
Line 
1/**
2 * AudioEmbedService — Parse URLs and return embed HTML
3 * Supports: Spotify, Bandcamp, SoundCloud, Apple Music, YouTube, Vimeo
4 *
5 * Usage in post content:
6 * <p>https://open.spotify.com/track/123abc</p>
7 * →
8 * <figure class="folio-embed folio-embed--spotify">
9 * <iframe src="..."></iframe>
10 * </figure>
11 */
12
13class AudioEmbedService {
14 static detectProvider(url) {
15 if (!url || typeof url !== 'string') return null;
16 url = url.trim();
17
18 // Alleen http(s)-URL's embedden. De provider-regexes hieronder zijn NIET
19 // verankerd, dus zonder deze check zou bv. `javascript:alert(1)//youtu.be/x`
20 // matchen en als embed-URL belanden (stored XSS via een [[embed:...]]-
21 // shortcode — die tekst gaat niet langs de HTML-sanitizer omdat 'ie in een
22 // text-node zit). De scheme-guard sluit javascript:/data:/vbscript: enz. uit.
23 if (!/^https?:\/\//i.test(url)) return null;
24
25 // Spotify
26 if (/open\.spotify\.com\/(track|album|playlist|episode|show)\/([A-Za-z0-9]+)/i.test(url)) {
27 const match = url.match(/\/(track|album|playlist|episode|show)\/([A-Za-z0-9]+)/i);
28 return { provider: 'spotify', type: match[1], id: match[2], url };
29 }
30
31 // Bandcamp
32 if (/bandcamp\.com\/(track|album)/i.test(url)) {
33 return { provider: 'bandcamp', url };
34 }
35
36 // SoundCloud
37 if (/soundcloud\.com/i.test(url)) {
38 return { provider: 'soundcloud', url };
39 }
40
41 // Apple Music
42 if (/music\.apple\.com\/([a-z]{2})\/(?:album|playlist|song)\//i.test(url)) {
43 return { provider: 'applemusic', url };
44 }
45
46 // YouTube — video-id is altijd exact 11 tekens (lijnt uit met de client-side
47 // ytId() in embed-player.js, die ook {11} verwacht).
48 if (/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/shorts\/|youtube\.com\/live\/)([A-Za-z0-9_-]{11})/i.test(url)) {
49 const match = url.match(/(?:v=|youtu\.be\/|embed\/|shorts\/|live\/)([A-Za-z0-9_-]{11})/i);
50 return { provider: 'youtube', id: match[1], url };
51 }
52
53 // Vimeo
54 if (/vimeo\.com\/(?:video\/)?(\d+)/i.test(url)) {
55 const match = url.match(/\d+/);
56 return { provider: 'vimeo', id: match[0], url };
57 }
58
59 return null;
60 }
61
62 static generateIframe(provider, config) {
63 switch (provider) {
64 // Eigen custom-spelers (client-side via embed-player.js + de echte
65 // platform-API's). We renderen een placeholder met data-attributen i.p.v.
66 // het kale platform-iframe, zodat de embed in ÓNZE huisstijl verschijnt.
67 case 'youtube':
68 return this.embedPlaceholder('youtube', config.id, 'video',
69 config.url || `https://youtu.be/${config.id}`);
70 case 'soundcloud':
71 return this.embedPlaceholder('soundcloud', config.url, 'track', config.url);
72 case 'spotify':
73 return this.embedPlaceholder('spotify', `spotify:${config.type}:${config.id}`,
74 config.type, config.url || `https://open.spotify.com/${config.type}/${config.id}`);
75 // Geen JS-API (Bandcamp/Apple) of niet-prioritair (Vimeo): blijven een
76 // iframe; mutual-exclusion loopt voor deze via de blur-fallback.
77 case 'bandcamp':
78 return this.bandcampIframe(config);
79 case 'applemusic':
80 return this.applemusicIframe(config);
81 case 'vimeo':
82 return this.vimeoIframe(config);
83 default:
84 return null;
85 }
86 }
87
88 /**
89 * Placeholder voor een eigen custom-speler. embed-player.js pikt
90 * .folio-embed[data-embed-provider] op en bouwt de kaart + speler client-side.
91 * ALLE waarden via escape() — post.content_html wordt ongeescaped uitgevoerd.
92 */
93 static embedPlaceholder(provider, ref, type, url) {
94 const attrs = [
95 `data-embed-provider="${this.escape(provider)}"`,
96 `data-embed-ref="${this.escape(ref)}"`,
97 type ? `data-embed-type="${this.escape(type)}"` : '',
98 `data-embed-url="${this.escape(url)}"`,
99 ].filter(Boolean).join(' ');
100 return `<div class="folio-embed folio-embed--${this.escape(provider)} pcms-embed pcms-embed-card pcms-embed-loading" ${attrs}></div>`;
101 }
102
103 static spotifyIframe({ type, id }) {
104 const src = `https://open.spotify.com/embed/${type}/${id}`;
105 return `
106 <figure class="folio-embed folio-embed--spotify">
107 <iframe src="${this.escape(src)}"
108 style="width:100%;height:152px;border:0;"
109 loading="lazy"
110 allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
111 title="Spotify ${type}"></iframe>
112 </figure>
113 `.trim();
114 }
115
116 static bandcampIframe({ url }) {
117 const encodedUrl = encodeURIComponent(url);
118 const src = `https://bandcamp.com/EmbeddedPlayer/url=${encodedUrl}/size=large/bgcol=faf8f3/linkcol=c2410c/tracklist=false/transparent=true/`;
119 return `
120 <figure class="folio-embed folio-embed--bandcamp">
121 <iframe src="${this.escape(src)}"
122 style="width:100%;height:470px;border:0;"
123 loading="lazy"
124 allow="encrypted-media"
125 title="Bandcamp player"></iframe>
126 </figure>
127 `.trim();
128 }
129
130 static soundcloudIframe({ url }) {
131 const params = {
132 url: url,
133 color: '#ff5500',
134 auto_play: 'false',
135 hide_related: 'true',
136 show_comments: 'false',
137 show_user: 'true',
138 show_reposts: 'false',
139 show_teaser: 'false',
140 visual: 'true'
141 };
142 const query = new URLSearchParams(params).toString();
143 const src = `https://w.soundcloud.com/player/?${query}`;
144 return `
145 <figure class="folio-embed folio-embed--soundcloud">
146 <iframe src="${this.escape(src)}"
147 style="width:100%;height:300px;border:0;"
148 loading="lazy"
149 allow="autoplay; clipboard-write; encrypted-media"
150 title="SoundCloud player"></iframe>
151 </figure>
152 `.trim();
153 }
154
155 static applemusicIframe({ url }) {
156 const match = url.match(/music\.apple\.com\/([a-z]{2}\/(?:album|playlist|song)\/[^/?#]+\/[0-9]+)/i);
157 if (!match) return null;
158 const src = `https://embed.music.apple.com/${match[1]}`;
159 return `
160 <figure class="folio-embed folio-embed--applemusic">
161 <iframe src="${this.escape(src)}"
162 style="width:100%;height:175px;border:0;overflow:hidden;border-radius:8px;"
163 loading="lazy"
164 allow="autoplay; clipboard-write; encrypted-media"
165 title="Apple Music"></iframe>
166 </figure>
167 `.trim();
168 }
169
170 static youtubeIframe({ id }) {
171 const src = `https://www.youtube-nocookie.com/embed/${id}`;
172 return `
173 <figure class="folio-embed folio-embed--youtube">
174 <iframe src="${this.escape(src)}"
175 style="aspect-ratio:16/9;width:100%;height:auto;border:0;"
176 loading="lazy"
177 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
178 allowfullscreen
179 title="YouTube video"></iframe>
180 </figure>
181 `.trim();
182 }
183
184 static vimeoIframe({ id }) {
185 const src = `https://player.vimeo.com/video/${id}`;
186 return `
187 <figure class="folio-embed folio-embed--vimeo">
188 <iframe src="${this.escape(src)}"
189 style="aspect-ratio:16/9;width:100%;height:auto;border:0;"
190 loading="lazy"
191 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
192 allowfullscreen
193 title="Vimeo video"></iframe>
194 </figure>
195 `.trim();
196 }
197
198 /**
199 * Auto-embed: Scan paragraphs containing only a URL.
200 * Handles two markdown-rendered shapes:
201 * <p>https://url</p> (bare URL — when GFM auto-link is off)
202 * <p><a href="https://url">https://url</a></p> (marked GFM auto-link — what we get)
203 * Either way → <figure class="folio-embed">...
204 */
205 static autoembed(html) {
206 if (!html) return html;
207 return html.replace(
208 /<p>\s*(?:<a\b[^>]*?\shref="([^"]+)"[^>]*>[^<]*<\/a>|(https?:\/\/[^\s<>"']+))\s*<\/p>/gi,
209 (match, hrefUrl, bareUrl) => {
210 const url = hrefUrl || bareUrl;
211 const detected = this.detectProvider(url);
212 if (detected) {
213 const iframe = this.generateIframe(detected.provider, detected);
214 return iframe || match;
215 }
216 return match;
217 }
218 );
219 }
220
221 /**
222 * Replace [[embed:<url>]] shortcodes met de platform-iframe (YouTube, Spotify,
223 * SoundCloud, Apple Music, Bandcamp, Vimeo). De editor-knop voegt deze
224 * shortcode in; losse URL-regels embedden ook automatisch via autoembed().
225 * Niet-ondersteunde/ongeldige URLs krijgen een nette inline-melding.
226 */
227 static embedMediaShortcodes(html) {
228 if (!html) return html;
229 return html.replace(/\[\[embed:([^\]]+)\]\]/gi, (match, rawUrl) => {
230 const url = rawUrl.trim().replace(/&amp;/g, '&');
231 const detected = this.detectProvider(url);
232 if (!detected) {
233 return `<div class="post-embed-missing"><em>Embed: niet-ondersteunde of ongeldige URL.</em></div>`;
234 }
235 return this.generateIframe(detected.provider, detected) || match;
236 });
237 }
238
239 /**
240 * Replace [[track:<id>]] shortcodes with v9-style player markup.
241 * Caller passes a lookup function (id) -> { id, title, artist, url, cover }
242 * where url is already a signed /audio/stream/... URL. Unknown ids → left as-is.
243 */
244 static embedTrackShortcodes(html, trackLookup) {
245 if (!html || typeof trackLookup !== 'function') return html;
246 return html.replace(/\[\[track:([A-Za-z0-9_-]+)\]\]/g, (match, id) => {
247 const t = trackLookup(id);
248 if (!t || !t.url) return match;
249 const trackJson = JSON.stringify({
250 id,
251 url: t.url,
252 title: t.title || 'Untitled',
253 artist: t.artist || '',
254 cover: t.cover || '',
255 credit: t.credit || '',
256 license: t.license || '',
257 });
258 const titleH = this.escape(t.title || 'Untitled');
259 const artistH = this.escape(t.artist || '');
260 const urlH = this.escape(t.url);
261 // Zichtbare eigenaar/licentie-regel onder de track.
262 const creditBits = [this.escape(t.credit || ''), this.escape(t.license || '')].filter(Boolean).join(' · ');
263 const dataAttr = trackJson
264 .replace(/&/g, '&amp;').replace(/'/g, '&#39;').replace(/</g, '&lt;');
265 // id="track-<id>" = anker zodat de mini-speler hierheen kan scrollen.
266 return `<div class="post-audio-track" id="track-${id}" data-pcms-track-id="${id}" data-pcms-track-url="${urlH}" data-pcms-track='${dataAttr}'>
267 <button type="button" class="pat-play" aria-label="Play ${titleH}">
268 <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 4l12 8-12 8z"/></svg>
269 </button>
270 <div class="pat-info">
271 <div class="pat-title">${titleH}</div>
272 ${artistH ? `<div class="pat-artist">${artistH}</div>` : ''}
273 ${creditBits ? `<div class="pat-credit">${creditBits}</div>` : ''}
274 </div>
275</div>`;
276 });
277 }
278
279 /**
280 * Replace [[album:<name>]] shortcodes with a v9-style album block.
281 * Caller passes a lookup function (name) -> { title, artist, cover, tracks: [{url,title,artist,cover}, ...] }
282 * Tracks must already have signed URLs. Unknown albums → left as-is.
283 * The wrapper carries the full album JSON so audio-player.js can queue it
284 * when any track or the album play button is clicked.
285 */
286 static embedAlbumShortcodes(html, albumLookup) {
287 if (!html || typeof albumLookup !== 'function') return html;
288 return html.replace(/\[\[album:([^\]]+)\]\]/g, (match, rawName) => {
289 const name = rawName.trim();
290 const album = albumLookup(name);
291 if (!album || !album.tracks || !album.tracks.length) return match;
292
293 // Stable DOM id for this rendering — used as data-pcms-album-id on tracks
294 const albumDomId = 'album-' + Math.random().toString(36).slice(2, 10);
295 const albumJson = JSON.stringify(album.tracks)
296 .replace(/&/g, '&amp;').replace(/'/g, '&#39;').replace(/</g, '&lt;');
297 const titleH = this.escape(album.title || name);
298 const artistH = this.escape(album.artist || '');
299 const coverH = album.cover ? this.escape(album.cover) : '';
300
301 const trackItems = album.tracks.map((t, i) => {
302 const tTitle = this.escape(t.title || ('Track ' + (i + 1)));
303 const tArtist = this.escape(t.artist || '');
304 const tUrl = this.escape(t.url);
305 return ` <li class="post-audio-track"${t.id ? ` id="track-${t.id}" data-pcms-track-id="${t.id}"` : ''} data-pcms-track-url="${tUrl}" data-pcms-album-id="${albumDomId}">
306 <button type="button" class="pat-play" aria-label="Play ${tTitle}">
307 <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 4l12 8-12 8z"/></svg>
308 </button>
309 <div class="pat-info">
310 <span class="pat-track-num">${i + 1}.</span>
311 <div class="pat-title">${tTitle}</div>
312 ${tArtist && tArtist !== artistH ? `<div class="pat-artist">${tArtist}</div>` : ''}
313 </div>
314 </li>`;
315 }).join('\n');
316
317 return `<div class="post-album" id="${albumDomId}" data-pcms-album='${albumJson}' data-pcms-album-title="${titleH}">
318 <div class="post-album-header">
319 <button type="button" class="post-album-cover-btn" data-pcms-album-id="${albumDomId}" aria-label="Play album ${titleH}">
320 ${coverH
321 ? `<img src="${coverH}" alt="" class="post-album-cover-img">`
322 : `<svg class="post-album-cover-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 17V5l12-2v12"/><circle cx="6" cy="17" r="3"/><circle cx="18" cy="15" r="3"/></svg>`}
323 <span class="post-album-play-overlay" aria-hidden="true">
324 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 4l12 8-12 8z"/></svg>
325 </span>
326 </button>
327 <div class="post-album-info">
328 <h3 class="post-album-title">${titleH}</h3>
329 ${artistH ? `<p class="post-album-artist">${artistH}</p>` : ''}
330 <p class="post-album-count">${album.tracks.length} track${album.tracks.length === 1 ? '' : 's'}</p>
331 </div>
332 </div>
333 <ol class="post-album-tracks">
334${trackItems}
335 </ol>
336</div>`;
337 });
338 }
339
340 /**
341 * Replace [[playlist:<id>]] shortcodes with a v9-style album block.
342 * Caller passes a lookup function (id) -> hydrated playlist object from
343 * PlaylistService.get(), or null. Unknown playlists render an inline
344 * "niet gevonden" placeholder so the post still validates as HTML.
345 *
346 * Shape returned by lookup:
347 * { id, title, artist, year, cover, kind, tracks: [{url,title,artist,cover,duration}, ...] }
348 *
349 * `kind` is honored:
350 * - 'album' → ordered list with track numbers
351 * - 'playlist' → list with per-track cover thumbnails (mixtape feel)
352 *
353 * opts: { isAdmin: boolean } — when true, an edit/delete action overlay
354 * is rendered top-right of each card. The handlers are wired up in
355 * audio-player.js via event delegation on data-pcms-playlist-delete.
356 */
357 static embedPlaylistShortcodes(html, playlistLookup, opts = {}) {
358 if (!html || typeof playlistLookup !== 'function') return html;
359 const isAdmin = !!opts.isAdmin;
360 return html.replace(/\[\[playlist:([a-z0-9][a-z0-9-]*)\]\]/gi, (match, rawId) => {
361 const id = rawId.toLowerCase();
362 const pl = playlistLookup(id);
363
364 if (!pl) {
365 return `<div class="post-playlist-missing"><em>Playlist "${this.escape(id)}" niet gevonden.</em></div>`;
366 }
367 if (!pl.tracks || !pl.tracks.length) {
368 return `<div class="post-playlist-empty"><em>Playlist "${this.escape(pl.title)}" heeft geen beschikbare tracks.</em></div>`;
369 }
370
371 const albumDomId = 'album-' + id;
372 const kind = (pl.kind === 'playlist') ? 'playlist' : 'album';
373 const kindLabel = kind === 'playlist' ? '📃 Playlist' : '💿 Album';
374 const titleH = this.escape(pl.title || 'Naamloos');
375 const artistH = this.escape(pl.artist || '');
376 const coverH = pl.cover ? this.escape(pl.cover) : '';
377
378 // Audio-player.js reads data-pcms-album for queue. Same shape as
379 // embedAlbumShortcodes — keep both in sync.
380 const tracksData = pl.tracks.map(t => ({
381 id: t.id,
382 url: t.url,
383 title: t.title,
384 artist: t.artist || pl.artist || '',
385 cover: t.cover || pl.cover || '',
386 }));
387 const albumJson = JSON.stringify(tracksData)
388 .replace(/&/g, '&amp;').replace(/'/g, '&#39;').replace(/</g, '&lt;');
389
390 // Total duration for the meta line
391 const totalSec = pl.tracks.reduce((s, t) => s + (t.duration || 0), 0);
392 const metaParts = [];
393 if (pl.year) metaParts.push(String(pl.year));
394 metaParts.push(pl.tracks.length + (pl.tracks.length === 1 ? ' track' : ' tracks'));
395 if (totalSec > 0) {
396 const h = Math.floor(totalSec / 3600);
397 const m = Math.floor((totalSec % 3600) / 60);
398 if (h > 0) metaParts.push(`${h}h ${m}m`);
399 else metaParts.push(`${Math.max(1, m)} min`);
400 }
401 const metaLine = this.escape(metaParts.join(' · '));
402 const firstUrl = this.escape(pl.tracks[0].url);
403
404 // Track items — playlist-kind shows per-track cover thumbs, album-kind shows numbers
405 const trackItems = pl.tracks.map((t, i) => {
406 const tTitleH = this.escape(t.title || ('Track ' + (i + 1)));
407 const tArtistH = this.escape(t.artist || '');
408 const tUrl = this.escape(t.url);
409 const showArtist = tArtistH && tArtistH !== artistH;
410
411 // Duration cell — render even when 0 for consistent column layout
412 const durHtml = t.duration > 0
413 ? `<span class="pat-duration">${Math.floor(t.duration / 60)}:${String(t.duration % 60).padStart(2, '0')}</span>`
414 : `<span class="pat-duration pat-duration-empty">—:—</span>`;
415
416 // Leader cell — number for albums, cover thumb for playlists
417 const leader = (kind === 'playlist' && t.cover)
418 ? `<span class="pat-cover" style="background-image:url(${this.escape(t.cover)})" aria-hidden="true"></span>`
419 : `<span class="pat-num">${i + 1}</span>`;
420
421 const trackBase = String(t.url).split('?')[0];
422 return ` <li class="post-album-track-compact"${t.id ? ` id="track-${t.id}" data-pcms-track-id="${t.id}"` : ''}>
423 <button type="button" class="pat-row"
424 data-pcms-track-url="${tUrl}"
425 data-pcms-album-id="${albumDomId}"
426 data-pcms-track-base="${this.escape(trackBase)}"
427 aria-label="Speel ${tTitleH}">
428 ${leader}
429 <span class="pat-meta">
430 <span class="pat-title">${tTitleH}</span>
431 ${showArtist ? `<span class="pat-artist">${tArtistH}</span>` : ''}
432 </span>
433 ${durHtml}
434 </button>
435 </li>`;
436 }).join('\n');
437
438 return `<div class="post-album" id="${albumDomId}"
439 data-pcms-album='${albumJson}'
440 data-pcms-album-title="${titleH}"
441 data-pcms-album-kind="${kind}"
442 data-pcms-playlist-id="${this.escape(id)}">
443${isAdmin ? ` <div class="post-album-actions" role="group" aria-label="Playlist beheren">
444 <a class="post-album-action" href="/admin/playlists?edit=${this.escape(id)}" title="Bewerk playlist" aria-label="Bewerk playlist">
445 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
446 </a>
447 <button type="button" class="post-album-action is-danger" data-pcms-playlist-delete="${this.escape(id)}" data-pcms-playlist-title="${titleH}" title="Verwijder playlist" aria-label="Verwijder playlist">
448 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></svg>
449 </button>
450 </div>
451` : ''} <div class="post-album-header">
452 <button type="button" class="post-album-cover-btn"
453 data-pcms-track-url="${firstUrl}"
454 data-pcms-album-id="${albumDomId}"
455 aria-label="Speel ${kind === 'playlist' ? 'playlist' : 'album'}">
456 ${coverH
457 ? `<span class="post-album-cover" style="background-image:url('${coverH}')"></span>`
458 : `<span class="post-album-cover post-album-cover-empty">
459 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 17V5l12-2v12"/><circle cx="6" cy="17" r="3" fill="currentColor"/><circle cx="18" cy="15" r="3" fill="currentColor"/></svg>
460 </span>`}
461 <span class="post-album-cover-play" aria-hidden="true">
462 <svg viewBox="0 0 24 24"><path d="M8 4l12 8-12 8z" fill="currentColor"/></svg>
463 </span>
464 </button>
465 <div class="post-album-info">
466 <p class="post-album-label">${kindLabel}</p>
467 <h3 class="post-album-title">${titleH}</h3>
468 ${artistH ? `<p class="post-album-artist">${artistH}</p>` : ''}
469 <p class="post-album-meta">${metaLine}</p>
470 </div>
471 </div>
472 <ol class="post-album-tracks post-album-tracks-compact" data-album-kind="${kind}">
473${trackItems}
474 </ol>
475</div>`;
476 });
477 }
478
479 /**
480 * Human-readable label for a provider slug. Used by external-link buttons.
481 */
482 static platformLabel(provider) {
483 return ({
484 spotify: 'Spotify',
485 bandcamp: 'Bandcamp',
486 soundcloud: 'SoundCloud',
487 applemusic: 'Apple Music',
488 youtube: 'YouTube',
489 vimeo: 'Vimeo',
490 tidal: 'Tidal',
491 deezer: 'Deezer',
492 mixcloud: 'Mixcloud',
493 })[provider] || 'External link';
494 }
495
496 /**
497 * Detect platform from URL purely by hostname (covers more services than
498 * detectProvider, which is embed-focused). Used for [[link:url]] rendering.
499 */
500 static detectLinkPlatform(url) {
501 try {
502 const host = new URL(url).hostname.toLowerCase();
503 if (host.includes('open.spotify.com') || host === 'spotify.com') return 'spotify';
504 if (host.includes('bandcamp.com')) return 'bandcamp';
505 if (host.includes('soundcloud.com')) return 'soundcloud';
506 if (host.includes('music.apple.com') || host.includes('itunes.apple.com')) return 'applemusic';
507 if (host.includes('youtube.com') || host.includes('youtu.be') || host.includes('music.youtube.com')) return 'youtube';
508 if (host.includes('vimeo.com')) return 'vimeo';
509 if (host.includes('tidal.com')) return 'tidal';
510 if (host.includes('deezer.com')) return 'deezer';
511 if (host.includes('mixcloud.com')) return 'mixcloud';
512 return 'other';
513 } catch (e) {
514 return null;
515 }
516 }
517
518 /**
519 * Replace [[link:url]] or [[link:url|Custom Label]] shortcodes with a
520 * branded "Open in <Platform>" anchor (no iframe). Opens in new tab.
521 * Per Robin's v9: "Externe link, klik = open platform (target _blank)".
522 */
523 static embedExternalLinkShortcodes(html) {
524 if (!html) return html;
525 return html.replace(/\[\[link:([^\]|]+)(?:\|([^\]]+))?\]\]/g, (match, rawUrl, customLabel) => {
526 const url = rawUrl.trim();
527 if (!/^https?:\/\//i.test(url)) return match;
528 const platform = this.detectLinkPlatform(url) || 'other';
529 const label = (customLabel || '').trim();
530 const platformLabel = this.platformLabel(platform);
531 const buttonText = label || `Open in ${platformLabel}`;
532 const urlH = this.escape(url);
533 const textH = this.escape(buttonText);
534 return `<a class="post-audio-external post-audio-external--${platform}" href="${urlH}" target="_blank" rel="noopener noreferrer" data-platform="${platform}">
535 <span class="pae-icon" aria-hidden="true">▶</span>
536 <span class="pae-text">${textH}</span>
537 <span class="pae-arrow" aria-hidden="true">↗</span>
538</a>`;
539 });
540 }
541
542 static escape(str) {
543 return str
544 .replace(/&/g, '&amp;')
545 .replace(/</g, '&lt;')
546 .replace(/>/g, '&gt;')
547 .replace(/"/g, '&quot;')
548 .replace(/'/g, '&#39;');
549 }
550}
551
552export default AudioEmbedService;
Note: See TracBrowser for help on using the repository browser.