Add persistent player support for all show types (Mixcloud, YouTube)

- Rewrote player.js to load Mixcloud/YouTube into bottom bar via Widget APIs
- All play buttons now use KloomPlayer.load() regardless of show type
- Player state persists across page navigation for all types
- Added CSP rules for widget.mixcloud.com and www.youtube.com APIs
- Added embed wrapper styles to player.css
- Updated CLAUDE.md with new player behavior documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: willbearfruits

CLAUDE.md

@@ -38,11 +38,13 @@ No CI pipeline — GitHub Pages serves master at root directly. `.nojekyll` is p
 
 ### Show types & player behaviour
 
-Shows in `shows.json` have a `type` field:
+Shows in `shows.json` have a `type` field. **All types play through the persistent bottom-bar player** and survive page navigation via `localStorage`:
 
-- **`local_audio`** — file hosted in the repo (`src` field). Plays through the persistent bottom-bar player (`KloomPlayer.load()`). Survives page navigation via `localStorage`; on restore a pulsing "TAP TO RESUME" hint appears because browsers block autoplay without a gesture.
-- **`embed`** — Mixcloud iframe. Audio lives inside the iframe and cannot be routed through our `<Audio>` element. On the index, clicking play navigates to the show page (which renders the embed at full width). No cross-page persistence.
-- **`youtube`** — YouTube iframe. Same constraints as embed.
+- **`local_audio`** — file hosted in the repo (`src` field). Uses HTML5 `<audio>` element.
+- **`embed`** — Mixcloud iframe. Uses the [Mixcloud Widget API](https://www.mixcloud.com/developers/widget/) loaded dynamically.
+- **`youtube`** — YouTube iframe. Uses the [YouTube IFrame API](https://developers.google.com/youtube/iframe_api_reference) loaded dynamically.
+
+On page restore, a pulsing "TAP TO RESUME" hint appears because browsers block autoplay without a gesture. The player saves position every 3s and restores it on reload.
 
 ### SSH Teletext Radio (`kloom_ssh.py`)
 
@@ -118,6 +120,6 @@ The cheat system is defined in the `<script>` block in `index_list_glitch.html`
 ## Security notes
 
 - CSP (Content-Security-Policy) is set on all pages via `<meta>` tag.
-- `'unsafe-inline'` is required in `script-src` due to `onclick` handlers — this is an accepted trade-off.
+- `script-src` allows `'unsafe-inline'` (for `onclick` handlers) plus `widget.mixcloud.com` and `www.youtube.com` (for the persistent player APIs).
 - All user-facing URLs are validated (only Mixcloud, YouTube, or local paths allowed).
 - The SSH server requires no authentication by design (it's a public radio).

about.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>KLOOM // ABOUT</title>
     <meta name="description" content="About Kloom Lo Kadosh — an underground experimental radio archive. Nothing is Holy.">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; media-src 'self' blob:;">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://widget.mixcloud.com https://www.youtube.com; style-src 'self' 'unsafe-inline'; img-src 'self' https://thumbnailer.mixcloud.com https://i.ytimg.com data:; frame-src https://player-widget.mixcloud.com https://www.youtube.com; media-src 'self' blob:; connect-src 'self' https://api.mixcloud.com;">
     <link rel="icon" href="assets/favicon.svg">
     <link rel="canonical" href="https://willbearfruits.github.io/kloom-radio/about.html">
     <link rel="alternate" type="application/rss+xml" title="KLOOM LO KADOSH" href="feed.xml">
@@ -157,7 +157,7 @@ <h1>NOTHING<br>IS HOLY</h1>
     </div>
 
     <div class="footer">
-        KLOOM LO KADOSH RADIO ARCHIVE // GENERATED 2026-02-04 03:10:50
+        KLOOM LO KADOSH RADIO ARCHIVE // GENERATED 2026-02-04 03:22:35
     </div>
 
     <script src="assets/player.js"></script>

assets/player.css

@@ -37,6 +37,13 @@
 .kp-resume { color:#00ff00; font-family:monospace; font-size:.75rem; font-weight:bold; text-align:center; padding:2px 0; animation:kp-pulse 1.4s ease-in-out infinite; }
 @keyframes kp-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
 
+/* embed wrapper (Mixcloud/YouTube in persistent player) */
+.kp-embed-wrap { display:flex; flex-direction:column; gap:4px; }
+.kp-embed-wrap iframe { border:none; background:#111; max-height:60px; }
+.kp-embed-progress { margin-top:2px; }
+.kp-youtube-wrap iframe { pointer-events:none; }
+.kp-youtube-wrap #kp-youtube { background:#111; }
+
 /* embed / youtube "now playing" badge */
 .kp-badge {
   display:inline-flex; align-items:center; gap:6px;