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

Timestamp:

06/20/2026 05:37:42 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

a66f691

Parents:

183875b

Message:

feat(audio): tracks without audio (link-only) — list with open-in links, no upload

You can now add a "Track without audio" in Admin → Audio (button) — only
title/artist + the Spotify/YouTube/SoundCloud links, no file. Such tracks
appear in albums & playlists (and standalone track embeds) in the list
with the open-in icons but WITHOUT a play button, and stay outside the
playback queue (which matches on URL). Lookups (posts album/single +
PlaylistService) no longer filter out fileless tracks. New route POST
/admin/audio/create-link. buster audio.css?v=9.

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

File:

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

src/services/AudioEmbedService.js

@@ -270 +270 @@
     return html.replace(/\[\[track:([A-Za-z0-9_-]+)\]\]/g, (match, id) => {
       const t = trackLookup(id);
-      if (!t || !t.url) return match;
+      if (!t) return match;
+      const titleH0 = this.escape(t.title || 'Untitled');
+      const artistH0 = this.escape(t.artist || '');
+      const creditBits0 = [this.escape(t.credit || ''), this.escape(t.license || '')].filter(Boolean).join(' · ');
+      // Link-only track (geen audiobestand): geen afspeelknop, wel info + open-in.
+      if (!t.url) {
+        return `<div class="post-audio-track post-audio-track--static" id="track-${id}">
+  <span class="pat-noplay" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span>
+  <div class="pat-info">
+    <div class="pat-title">${titleH0}</div>
+    ${artistH0 ? `<div class="pat-artist">${artistH0}</div>` : ''}
+    ${creditBits0 ? `<div class="pat-credit">${creditBits0}</div>` : ''}
+  </div>
+  ${this.openInLinks(t)}
+</div>`;
+      }
       const trackJson = JSON.stringify({
         id,
@@ -318 +333 @@
       // Stable DOM id for this rendering — used as data-pcms-album-id on tracks
       const albumDomId = 'album-' + Math.random().toString(36).slice(2, 10);
-      const albumJson = JSON.stringify(album.tracks)
+      // Alleen afspeelbare tracks (met url) in de queue; link-only tracks staan
+      // wel in de lijst maar niet in de afspeel-JSON.
+      const albumJson = JSON.stringify(album.tracks.filter((t) => t.url))
         .replace(/&/g, '&amp;').replace(/'/g, '&#39;').replace(/</g, '&lt;');
       const titleH = this.escape(album.title || name);
@@ -327 +344 @@
         const tTitle = this.escape(t.title || ('Track ' + (i + 1)));
         const tArtist = this.escape(t.artist || '');
+        // Link-only track: geen afspeelknop, wel nummer + info + open-in.
+        if (!t.url) {
+          return `    <li class="post-audio-track post-audio-track--static"${t.id ? ` id="track-${t.id}"` : ''}>
+      <span class="pat-track-num">${i + 1}.</span>
+      <div class="pat-info">
+        <div class="pat-title">${tTitle}</div>
+        ${tArtist && tArtist !== artistH ? `<div class="pat-artist">${tArtist}</div>` : ''}
+      </div>
+      ${this.openInLinks(t)}
+    </li>`;
+        }
         const tUrl = this.escape(t.url);
         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}">
@@ -404 +432 @@
       // Audio-player.js reads data-pcms-album for queue. Same shape as
       // embedAlbumShortcodes — keep both in sync.
-      const tracksData = pl.tracks.map(t => ({
+      // Alleen afspeelbare tracks in de queue; link-only tracks staan wel in de
+      // lijst maar niet in de afspeel-JSON.
+      const tracksData = pl.tracks.filter(t => t.url).map(t => ({
         id:     t.id,
         url:    t.url,
@@ -426 +456 @@
       }
       const metaLine = this.escape(metaParts.join(' · '));
-      const firstUrl = this.escape(pl.tracks[0].url);
+      const firstUrl = this.escape((pl.tracks.find(t => t.url) || {}).url || '');
 
       // Track items — playlist-kind shows per-track cover thumbs, album-kind shows numbers
@@ -445 +475 @@
           : `<span class="pat-num">${i + 1}</span>`;
 
+        // Link-only track: geen klikbare afspeel-rij (statische div), wel open-in.
+        if (!t.url) {
+          return `    <li class="post-album-track-compact post-album-track-compact--static"${t.id ? ` id="track-${t.id}"` : ''}>
+      <div class="pat-row pat-static">
+        ${leader}
+        <span class="pat-meta">
+          <span class="pat-title">${tTitleH}</span>
+          ${showArtist ? `<span class="pat-artist">${tArtistH}</span>` : ''}
+        </span>
+        ${durHtml}
+      </div>
+      ${this.openInLinks(t)}
+    </li>`;
+        }
         const trackBase = String(t.url).split('?')[0];
         return `    <li class="post-album-track-compact"${t.id ? ` id="track-${t.id}" data-pcms-track-id="${t.id}"` : ''}>