Changeset 6be57b4 in Klonkt for src/views/pages

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/views/pages

Files:

• admin-audio.ejs (modified) (1 diff)
• embed-player.ejs (added)

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>