plugins/webamp: robust bundle load and visible errors (#24)

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

@@ -36,29 +36,49 @@ async function loadTracks() {
 
 let webamp = null;
 
+// Load the UMD bundle as a classic script. Hide any AMD/CommonJS globals on the page
+// while it runs, so the bundle always attaches itself to window.Webamp.
 function loadWebamp() {
   if (window.Webamp) return Promise.resolve(window.Webamp);
   return new Promise((ok, fail) => {
+    const saved = { define: window.define, module: window.module, exports: window.exports };
+    window.define = window.module = window.exports = undefined;
+    const restore = () => Object.assign(window, saved);
     const s = document.createElement('script');
     s.src = new URL('webamp.bundle.min.js', import.meta.url).href;
-    s.onload = () => ok(window.Webamp);
-    s.onerror = fail;
+    s.onload = () => {
+      restore();
+      window.Webamp ? ok(window.Webamp) : fail(new Error('Webamp global missing after load'));
+    };
+    s.onerror = () => { restore(); fail(new Error('could not load ' + s.src)); };
     document.head.appendChild(s);
   });
 }
 
 async function open() {
   if (webamp) return;
-  const Webamp = await loadWebamp();
-  if (!Webamp.browserIsSupported()) return;
-  webamp = new Webamp({ initialTracks: await loadTracks() });
-  webamp.onClose(() => {
-    webamp.dispose();
+  btn.textContent = '… webamp';
+  try {
+    const Webamp = await loadWebamp();
+    if (!Webamp.browserIsSupported()) throw new Error('browser not supported');
+    webamp = new Webamp({ initialTracks: await loadTracks() });
+    webamp.onClose(() => {
+      webamp.dispose();
+      webamp = null;
+      try { localStorage.removeItem(KEY); } catch {}
+    });
+    const host = document.createElement('div');
+    host.id = 'teahub-webamp';
+    document.body.appendChild(host);
+    await webamp.renderWhenReady(host);
+    try { localStorage.setItem(KEY, '1'); } catch {}
+    btn.textContent = '▶ webamp';
+  } catch (err) {
+    console.error('[teahub webamp]', err);
     webamp = null;
-    try { localStorage.removeItem(KEY); } catch {}
-  });
-  await webamp.renderWhenReady(document.body.appendChild(document.createElement('div')));
-  try { localStorage.setItem(KEY, '1'); } catch {}
+    btn.textContent = '✕ webamp';
+    btn.title = String(err && err.message || err);
+  }
 }
 
 // Small launcher in the corner: the "sound system" button.

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=011" data-playlist="https://gandora.yolopreneur.lol/playlist.json"></script>
+<script type="module" nonce="{{ctx.CspScriptNonce}}" src="{{AssetUrlPrefix}}/plugins/webamp/webamp-mod.js?v=012" data-playlist="https://gandora.yolopreneur.lol/playlist.json"></script>