Index: src/assets/css/audio.css =================================================================== --- src/assets/css/audio.css (revision 459acd973746ff4a214e65748d6254ae5898a32b) +++ src/assets/css/audio.css (revision 183875b46fb28dbb72cffa7bc53cedaad373f8cd) @@ -82,4 +82,27 @@ text-overflow: ellipsis; } + +/* "Open in" Spotify/YouTube/SoundCloud — kleine brand-iconen per track. */ +.pat-links { + display: inline-flex; align-items: center; gap: 0.1rem; + flex: 0 0 auto; +} +/* Single + album-rij (.post-audio-track is flex) → duw de links naar rechts. */ +.post-audio-track .pat-links { margin-left: auto; padding-right: 0.5rem; } +/* Playlist-rij: de li flex maken zodat de links naast de afspeel-rij passen. */ +.post-album-track-compact { display: flex; align-items: center; } +.post-album-track-compact .pat-row { flex: 1 1 auto; min-width: 0; } +.post-album-track-compact .pat-links { padding-right: 0.6rem; } +.pat-link { + display: inline-flex; align-items: center; justify-content: center; + width: 26px; height: 26px; + opacity: 0.75; + transition: opacity 120ms, transform 120ms; +} +.pat-link svg { width: 17px; height: 17px; } +.pat-link:hover { opacity: 1; transform: scale(1.12); } +.pat-link--spotify { color: #1DB954; } +.pat-link--youtube { color: #FF0000; } +.pat-link--soundcloud { color: #FF5500; } /* ============================================================ Index: src/config/database.js =================================================================== --- src/config/database.js (revision 459acd973746ff4a214e65748d6254ae5898a32b) +++ src/config/database.js (revision 183875b46fb28dbb72cffa7bc53cedaad373f8cd) @@ -92,4 +92,7 @@ ensureColumn('audio_tracks', 'credit', 'TEXT'); // eigenaar/credit (copyright-houder) ensureColumn('audio_tracks', 'license', 'TEXT'); // licentie (bv. "CC BY 4.0", "Alle rechten voorbehouden") + ensureColumn('audio_tracks', 'link_spotify', 'TEXT'); // "open in"-links per track + ensureColumn('audio_tracks', 'link_youtube', 'TEXT'); + ensureColumn('audio_tracks', 'link_soundcloud', 'TEXT'); // Playlists (v9 feature) — first-class entity. CREATE IF NOT EXISTS is Index: src/routes/admin-audio.js =================================================================== --- src/routes/admin-audio.js (revision 459acd973746ff4a214e65748d6254ae5898a32b) +++ src/routes/admin-audio.js (revision 183875b46fb28dbb72cffa7bc53cedaad373f8cd) @@ -72,4 +72,21 @@ const router = express.Router(); + +// "Open in"-platformlinks per track: alleen https + de juiste host accepteren +// (href komt ongeescaped in de view → scheme/host-guard tegen misbruik). +const LINK_DOMAINS = { + spotify: ['spotify.com'], + youtube: ['youtube.com', 'youtu.be', 'music.youtube.com'], + soundcloud: ['soundcloud.com'], +}; +function platformLink(url, domains) { + const u = String(url || '').trim(); + if (!u || !/^https:\/\//i.test(u)) return null; + try { + const h = new URL(u).hostname.toLowerCase(); + if (domains.some((d) => h === d || h.endsWith('.' + d))) return u; + } catch (e) { /* ongeldige URL */ } + return null; +} router.get('/', requireGod, (req, res) => { @@ -172,4 +189,7 @@ const finalCredit = (req.body.credit || '').trim() || finalArtist || null; const finalLicense = (req.body.license || '').trim() || null; + const finalLinkSpotify = platformLink(req.body.link_spotify, LINK_DOMAINS.spotify); + const finalLinkYoutube = platformLink(req.body.link_youtube, LINK_DOMAINS.youtube); + const finalLinkSoundcloud = platformLink(req.body.link_soundcloud, LINK_DOMAINS.soundcloud); console.log('[admin-audio] upload received:', { @@ -222,6 +242,6 @@ console.log('[admin-audio] inserting audio_tracks row (duration=' + finalDuration + ')'); db.prepare(` - INSERT INTO audio_tracks (id, site_id, title, artist, album, duration, cover_url, credit, license, media_id, position) - VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, COALESCE( + INSERT INTO audio_tracks (id, site_id, title, artist, album, duration, cover_url, credit, license, link_spotify, link_youtube, link_soundcloud, media_id, position) + VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, COALESCE( (SELECT MAX(position) + 1 FROM audio_tracks WHERE site_id = ?), 0 @@ -233,4 +253,5 @@ coverUrl, finalCredit, finalLicense, + finalLinkSpotify, finalLinkYoutube, finalLinkSoundcloud, mediaId, site.id ); @@ -378,5 +399,6 @@ const t = db.prepare(` SELECT t.id, t.title, t.artist, t.album, t.duration, t.cover_url, - t.credit, t.license, t.position, t.created_at, m.filename + t.credit, t.license, t.link_spotify, t.link_youtube, t.link_soundcloud, + t.position, t.created_at, m.filename FROM audio_tracks t LEFT JOIN media m ON m.id = t.media_id WHERE t.id = ? AND t.site_id = ? @@ -445,4 +467,13 @@ if (Object.prototype.hasOwnProperty.call(body, 'license')) { fields.push('license = ?'); values.push(String(body.license || '').trim() || null); + } + if (Object.prototype.hasOwnProperty.call(body, 'link_spotify')) { + fields.push('link_spotify = ?'); values.push(platformLink(body.link_spotify, LINK_DOMAINS.spotify)); + } + if (Object.prototype.hasOwnProperty.call(body, 'link_youtube')) { + fields.push('link_youtube = ?'); values.push(platformLink(body.link_youtube, LINK_DOMAINS.youtube)); + } + if (Object.prototype.hasOwnProperty.call(body, 'link_soundcloud')) { + fields.push('link_soundcloud = ?'); values.push(platformLink(body.link_soundcloud, LINK_DOMAINS.soundcloud)); } Index: src/routes/posts.js =================================================================== --- src/routes/posts.js (revision 459acd973746ff4a214e65748d6254ae5898a32b) +++ src/routes/posts.js (revision 183875b46fb28dbb72cffa7bc53cedaad373f8cd) @@ -529,5 +529,6 @@ const placeholders = trackIds.map(() => '?').join(','); const rows = db.prepare(` - SELECT t.id, t.title, t.artist, t.cover_url, t.credit, t.license, m.filename + SELECT t.id, t.title, t.artist, t.cover_url, t.credit, t.license, + t.link_spotify, t.link_youtube, t.link_soundcloud, m.filename FROM audio_tracks t LEFT JOIN media m ON m.id = t.media_id WHERE t.site_id = ? AND t.id IN (${placeholders}) @@ -544,4 +545,7 @@ credit: r.credit || '', license: r.license || '', + link_spotify: r.link_spotify || '', + link_youtube: r.link_youtube || '', + link_soundcloud: r.link_soundcloud || '', url: audioUrl(r.filename), }; @@ -554,5 +558,6 @@ const placeholders = albumNames.map(() => '?').join(','); const albumRows = db.prepare(` - SELECT t.id, t.title, t.artist, t.album, t.cover_url, t.position, m.filename + SELECT t.id, t.title, t.artist, t.album, t.cover_url, t.position, + t.link_spotify, t.link_youtube, t.link_soundcloud, m.filename FROM audio_tracks t LEFT JOIN media m ON m.id = t.media_id WHERE t.site_id = ? AND t.album IN (${placeholders}) @@ -569,4 +574,7 @@ artist: r.artist || '', cover: r.cover_url || '', + link_spotify: r.link_spotify || '', + link_youtube: r.link_youtube || '', + link_soundcloud: r.link_soundcloud || '', }); } Index: src/services/AudioEmbedService.js =================================================================== --- src/services/AudioEmbedService.js (revision 459acd973746ff4a214e65748d6254ae5898a32b) +++ src/services/AudioEmbedService.js (revision 183875b46fb28dbb72cffa7bc53cedaad373f8cd) @@ -11,5 +11,29 @@ */ +// "Open in"-iconen (brand-gekleurd via CSS .pat-link--*). +const OPEN_IN_SVG = { + spotify: '', + youtube: '', + soundcloud: '', +}; + class AudioEmbedService { + // Kleine "open in"-links voor een track (Spotify/YouTube/SoundCloud). De hrefs + // zijn server-side al gevalideerd (alleen https + juiste host). Geeft '' als er + // geen links zijn. Wordt naast de play-knop gezet (buiten de knop → geen + // conflict met afspelen). + static openInLinks(t) { + if (!t) return ''; + const out = []; + const add = (url, key, label) => { + if (!url) return; + out.push(`${OPEN_IN_SVG[key]}`); + }; + add(t.link_spotify, 'spotify', 'Spotify'); + add(t.link_youtube, 'youtube', 'YouTube'); + add(t.link_soundcloud, 'soundcloud', 'SoundCloud'); + return out.length ? `${out.join('')}` : ''; + } + static detectProvider(url) { if (!url || typeof url !== 'string') return null; @@ -273,4 +297,5 @@ ${creditBits ? `
${creditBits}
` : ''} + ${this.openInLinks(t)} `; }); @@ -312,4 +337,5 @@ ${tArtist && tArtist !== artistH ? `
${tArtist}
` : ''} + ${this.openInLinks(t)} `; }).join('\n'); @@ -433,4 +459,5 @@ ${durHtml} + ${this.openInLinks(t)} `; }).join('\n'); Index: src/services/PlaylistService.js =================================================================== --- src/services/PlaylistService.js (revision 459acd973746ff4a214e65748d6254ae5898a32b) +++ src/services/PlaylistService.js (revision 183875b46fb28dbb72cffa7bc53cedaad373f8cd) @@ -94,5 +94,6 @@ // filenames (only tracks with a media file are playable). const tracks = db.prepare(` - SELECT t.id, t.title, t.artist, t.duration, t.cover_url, m.filename + SELECT t.id, t.title, t.artist, t.duration, t.cover_url, + t.link_spotify, t.link_youtube, t.link_soundcloud, m.filename FROM playlist_tracks pt JOIN audio_tracks t ON t.id = pt.track_id @@ -110,4 +111,7 @@ cover: t.cover_url || p.cover_url || '', duration: t.duration || 0, + link_spotify: t.link_spotify || '', + link_youtube: t.link_youtube || '', + link_soundcloud: t.link_soundcloud || '', url: urlFor ? urlFor(t.filename) : null, })); Index: src/views/partials/track-editor.ejs =================================================================== --- src/views/partials/track-editor.ejs (revision 459acd973746ff4a214e65748d6254ae5898a32b) +++ src/views/partials/track-editor.ejs (revision 183875b46fb28dbb72cffa7bc53cedaad373f8cd) @@ -430,4 +430,14 @@
+ Open in (links naar dezelfde track elders) + + + +
+ +
Cover
@@ -664,4 +674,7 @@ credit: $('#te-credit').value.trim() || null, license: $('#te-license').value.trim() || null, + link_spotify: $('#te-link-spotify').value.trim() || null, + link_youtube: $('#te-link-youtube').value.trim() || null, + link_soundcloud: $('#te-link-soundcloud').value.trim() || null, duration: $('#te-duration').value ? Number($('#te-duration').value) : null, cover_url: urlInput.value.trim() || null, Index: src/views/shell.ejs =================================================================== --- src/views/shell.ejs (revision 459acd973746ff4a214e65748d6254ae5898a32b) +++ src/views/shell.ejs (revision 183875b46fb28dbb72cffa7bc53cedaad373f8cd) @@ -168,5 +168,5 @@ anywhere (admin previews, post embeds, etc). The player itself is a singleton — see the script tag near . --> - +