Spotify jetzt als kleiner Knopf auf jeder Seite statt grosser Bloecke

- Alle grossen Musik-Abschnitte entfernt (Start, Links, HasiDog, VanVan) - Neuer schwebender Musik-Knopf unten rechts, wie im Analyse-Tool: Klick oeffnet ein Feld mit den Playern von Hasidog und Van-Van - Zentral in main.js gerendert, erscheint dadurch automatisch auf ALLEN Seiten, ohne jede Datei einzeln anzufassen - Player werden erst beim ersten Oeffnen geladen, damit keine Seite unnoetig zwei fremde Einbettungen mitzieht - Schliessen per Knopf oder Escape, kleiner auf dem Handy, im Druck aus Co-Authored-By: Claude Opus 5 <[email protected]>
2026-07-31 05:56:19 +02:00
parent 84a74fc95d
commit 8fe5105255
6 changed files with 159 additions and 135 deletions
@@ -190,9 +190,80 @@
    document.body.prepend(layer);
  }

+  /* ===================================================================
+     Musik-Knopf (unten rechts, auf jeder Seite)
+
+     Kleiner schwebender Knopf, der ein Feld mit den Spotify-Playern von
+     Hasidog und Van-Van aufklappt. Genauso gelöst wie im Analyse-Tool.
+
+     Zwei bewusste Entscheidungen:
+     1. Das Feld hängt direkt am <body>, nicht in einem Abschnitt — so
+        kann kein Neuaufbau der Seite den laufenden Player unterbrechen.
+     2. Die Player werden ERST beim ersten Öffnen geladen (src wird dann
+        gesetzt). Sonst würde jede Seite zwei fremde Einbettungen laden,
+        auch wenn niemand Musik hören will.
+     =================================================================== */
+  const SPOTIFY_ARTISTS = [
+    { name: "Hasidog", id: "2INiE1VVJGUQdEURsltuJU" },
+    { name: "Van-Van", id: "4J9PcKZBkh6V8dVY3CGliw" },
+  ];
+
+  function renderMusicWidget() {
+    if (document.getElementById("music-widget")) return;
+
+    const widget = document.createElement("div");
+    widget.className = "music-widget";
+    widget.id = "music-widget";
+    widget.innerHTML = `
+      <div class="music-panel" id="music-panel" hidden>
+        <div class="music-panel-head">
+          <strong>Musik von Team Dogi 🎵</strong>
+          <button class="music-close" id="music-close" type="button" aria-label="Musik-Feld schließen">✕</button>
+        </div>
+        <p class="small muted" style="margin:.2rem 0 .6rem;">Läuft weiter, solange du auf dieser Seite bleibst. 🩵</p>
+        ${SPOTIFY_ARTISTS.map(
+          (a) => `
+        <p class="music-artist-label">${a.name}</p>
+        <iframe data-src="https://open.spotify.com/embed/artist/${a.id}?utm_source=generator&amp;theme=0"
+                height="152" loading="lazy" title="${a.name} auf Spotify anhören"
+                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+                allowfullscreen></iframe>`
+        ).join("")}
+      </div>
+      <button class="music-toggle" id="music-toggle" type="button"
+              aria-expanded="false" aria-controls="music-panel"
+              title="Musik von Hasidog &amp; Van-Van">🎵</button>`;
+    document.body.appendChild(widget);
+
+    const panel = document.getElementById("music-panel");
+    const toggle = document.getElementById("music-toggle");
+    let geladen = false;
+
+    function oeffnen(auf) {
+      panel.hidden = !auf;
+      toggle.setAttribute("aria-expanded", String(auf));
+      widget.classList.toggle("open", auf);
+      if (auf && !geladen) {
+        // Player erst jetzt wirklich laden
+        panel.querySelectorAll("iframe[data-src]").forEach((f) => {
+          f.src = f.dataset.src;
+          f.removeAttribute("data-src");
+        });
+        geladen = true;
+      }
+    }
+
+    toggle.addEventListener("click", () => oeffnen(panel.hidden));
+    document.getElementById("music-close").addEventListener("click", () => oeffnen(false));
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && !panel.hidden) oeffnen(false);
+    });
+  }
+
  document.addEventListener("DOMContentLoaded", () => {
    renderHeader();
    renderFooter();
    renderFog();
+    renderMusicWidget();
  });
 })();