Changeset 6be57b4 in Klonkt

Timestamp:

06/19/2026 04:13:46 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

b9dc94c

Parents:

1794fac

Message:

Embeddable player (premium feature #7)

Standalone /embed page (no shell) with a compact audio player for the site
tracks, intended for an <iframe> on external sites. The page runs on the klonkt
origin, so audio requests from the iframe remain same-origin -> the
/audio/stream gate lets them through, even on an external site. Helmet's
X-Frame-Options + frame-ancestors are overridden per route (frame-ancestors *)
so external embedding is allowed.

• routes/embed.js (premium-gated): GET /embed.
• views/pages/embed-player.ejs: standalone HTML, inline css/js, play/pause, track click, auto-next, progress bar; themable on site.accent.
• admin-audio: embedUrl + "Embeddable player" section with copyable iframe code + preview link (premium).

node --check passed.

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

Location:

src

Files:

• routes/admin-audio.js (modified) (1 diff)
• routes/embed.js (added)
• server.js (modified) (2 diffs)
• views/pages/admin-audio.ejs (modified) (1 diff)
• views/pages/embed-player.ejs (added)

src/routes/admin-audio.js

@@ -91 +91 @@
   }));
 
+  const base = (process.env.PUBLIC_BASE_URL || ('https://' + (req.get('host') || ''))).replace(/\/$/, '');
+  const embedUrl = base + (res.locals.siteUrlBase || '') + '/embed';
   renderPage(req, res, 'pages/admin-audio', {
     pageTitle: 'Audio tracks',
     bodyClass: 'on-admin',
     tracks,
+    embedUrl,
     error: req.query.error || null,
     success: req.query.success || null,

src/server.js

@@ -57 +57 @@
 import downloadRoutes from './routes/download.js';
 import linkbioRoutes from './routes/linkbio.js';
+import embedRoutes from './routes/embed.js';
 
 if (!process.env.SESSION_SECRET) {
@@ -275 +276 @@
 app.use('/', downloadRoutes); // /downloads + /download/:id download-voor-email (premium)
 app.use('/', linkbioRoutes); // /links link-in-bio + klikstats (premium)
+app.use('/', embedRoutes); // /embed inbedbare audiospeler (premium)
 app.use('/', postsRoutes);
 

src/views/pages/admin-audio.ejs

@@ -115 +115 @@
     <% } %>
   </section>
+
+  <% if ((typeof premiumUnlocked === 'undefined' || premiumUnlocked) && typeof embedUrl !== 'undefined') { %>
+    <section class="ax-section" style="margin-top:1.5rem">
+      <h2 style="margin:0 0 .4rem">🔊 Embedbare speler</h2>
+      <p style="opacity:.75;font-size:.9rem;margin:0 0 .6rem">Plak deze code op je eigen website/blog om je muziek met deze speler in te sluiten:</p>
+      <textarea readonly rows="3" onclick="this.select()" style="width:100%;font-family:monospace;font-size:12px;padding:10px;border-radius:8px;border:1px solid var(--rule);background:var(--paper-2);color:inherit;">&lt;iframe src="<%= embedUrl %>" width="100%" height="420" frameborder="0" loading="lazy" style="border-radius:12px"&gt;&lt;/iframe&gt;</textarea>
+      <p style="margin:.6rem 0 0"><a class="btn" href="<%= embedUrl %>" target="_blank">▶ Speler-voorbeeld openen</a></p>
+    </section>
+  <% } %>
 
 </div>