plugins/webamp: open in view on long pages

Webamp centered on the whole document, so on tall pages it opened below
the fold and the button looked dead. Center it in a fixed viewport-sized
host, pin #webamp above Gitea's layers, and make the button re-center an
open player. Playlist fetch dropped until gandora publishes one. v=015.
Confirmed in the user's browser.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HLEj1MiGohaV4qJE4NE1Xq

plugins/webamp/public/assets/plugins/webamp/webamp-mod.js

@@ -1,7 +1,7 @@
 // teahub plugin: webamp — a Winamp-style player docked on every Teahub page.
-// Loads the self-hosted Webamp bundle on first click, so pages stay fast for everyone else.
+// Loads Webamp from the CDN on first click, so pages stay fast for everyone else.
 
-// Module scripts have no document.currentScript, so find our tag by its src.
+// Module scripts have no document.currentScript, so find our tag by its data attribute.
 const script = document.querySelector('script[src*="plugins/webamp/webamp-mod.js"]');
 const PLAYLIST_URL = script?.dataset.playlist;
 const KEY = 'teahub-webamp-open';
@@ -56,7 +56,12 @@ function loadWebamp() {
 }
 
 async function open() {
-  if (webamp) return;
+  if (webamp) {
+    // Already open (maybe off-screen or hidden): close and reopen so it lands centered in view.
+    webamp.dispose();
+    webamp = null;
+    document.getElementById('teahub-webamp')?.remove();
+  }
   btn.textContent = '… webamp';
   try {
     const Webamp = await loadWebamp();
@@ -69,6 +74,8 @@ async function open() {
     });
     const host = document.createElement('div');
     host.id = 'teahub-webamp';
+    // Webamp centers itself in this node, so make it exactly the visible viewport.
+    host.style.cssText = 'position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none';
     document.body.appendChild(host);
     await webamp.renderWhenReady(host);
     try { localStorage.setItem(KEY, '1'); } catch {}
@@ -81,12 +88,17 @@ async function open() {
   }
 }
 
+// Keep Webamp pinned to the viewport and above Gitea's own layers.
+const style = document.createElement('style');
+style.textContent = '#webamp{position:fixed!important;z-index:99990!important}';
+document.head.appendChild(style);
+
 // Small launcher in the corner: the "sound system" button.
 const btn = document.createElement('button');
 btn.textContent = '▶ webamp';
 btn.title = 'Open Webamp';
 btn.style.cssText = [
-  'position:fixed', 'right:12px', 'bottom:12px', 'z-index:9999',
+  'position:fixed', 'right:12px', 'bottom:12px', 'z-index:99999',
   'font:12px/1 monospace', 'padding:6px 10px', 'border-radius:4px',
   'border:1px solid #1d3', 'background:#000', 'color:#1d3', 'cursor:pointer',
 ].join(';');

plugins/webamp/templates/custom/footer.tmpl

@@ -1,2 +1,2 @@
 {{/* teahub plugin: webamp */}}
-<script type="module" nonce="{{ctx.CspScriptNonce}}" src="{{AssetUrlPrefix}}/plugins/webamp/webamp-mod.js?v=012" data-playlist="https://gandora.yolopreneur.lol/playlist.json"></script>
+<script type="module" nonce="{{ctx.CspScriptNonce}}" src="{{AssetUrlPrefix}}/plugins/webamp/webamp-mod.js?v=015"></script>