experiment zu finktionsstabilisierung

2025-11-10 14:59:17 +01:00
parent 37c8bb014f
commit 6e407b8bfc
3 changed files with 120 additions and 161 deletions
--- a/adventskalender/2025/content/day01.html
+++ b/adventskalender/2025/content/day01.html
@@ -88,8 +88,8 @@


  <!-- === Hintergrundmusik (optional) === -->
-  <audio id="bgmusic" autoplay loop>
-    <source src="/2025/assets/sounds/FallingSnow.mp3" type="audio/mpeg">
-  </audio> 
+  <audio id="bgmusic" loop preload="auto">
+  <source src="/2025/assets/sounds/FallingSnow.mp3" type="audio/mpeg">
+</audio>

 </section>
--- a/adventskalender/2025/js/background.js
+++ b/adventskalender/2025/js/background.js
@@ -39,7 +39,6 @@
    link.href = path;
  }

-  // === Setze Favicon direkt ===
  const faviconPath = `${basePath}1920/webp/${filename}.webp`;
  setFavicon(faviconPath);

@@ -51,70 +50,76 @@

    if (!picture || !img || !sources) return;

-    // === Daumenkino (nur für Tag 1, wenn Popup geladen wurde) ===
-    if (dayToShow === 1) {
-      document.addEventListener("day01-loaded", () => {
-        const thumbkino = document.querySelector(".thumbkino-video");
-        if (!thumbkino) {
-          console.warn("[Bratonien] Kein Daumenkino-Element gefunden.");
-          return;
-        }
+    // === Daumenkino für Tag 1 ===
+    document.addEventListener("day01-loaded", () => {
+      const thumbkino = document.querySelector(".thumbkino-video");
+      if (!thumbkino) {
+        console.warn("[Bratonien] Kein Daumenkino-Element gefunden.");
+        return;
+      }

-        const formats = ["webm", "mp4"];
-        const resolutions = [
-          "nHD",
-          "FWVGA",
-          "qHD",
-          "HD",
-          "HDplus",
-          "FullHD",
-          "1440p",
-          "4K",
-        ];
-        const breakpoints = [640, 854, 960, 1280, 1600, 1920, 2560, 3840];
+      const formats = ["webm", "mp4"];
+      const resolutions = [
+        "nHD",
+        "FWVGA",
+        "qHD",
+        "HD",
+        "HDplus",
+        "FullHD",
+        "1440p",
+        "4K",
+      ];
+      const breakpoints = [640, 854, 960, 1280, 1600, 1920, 2560, 3840];

-        // alte Quellen entfernen
-        while (thumbkino.firstChild) thumbkino.removeChild(thumbkino.firstChild);
+      // aktuelle Quellen komplett entfernen
+      while (thumbkino.firstChild) thumbkino.removeChild(thumbkino.firstChild);

-        formats.forEach((format) => {
-          resolutions.forEach((res, i) => {
-            const mediaQuery =
-              i === resolutions.length - 1
-                ? "(min-width: 2561px)"
-                : `(max-width: ${breakpoints[i]}px)`;
+      // neue Quellen basierend auf aktuellem Tag hinzufügen
+      formats.forEach((format) => {
+        resolutions.forEach((res, i) => {
+          const mediaQuery =
+            i === resolutions.length - 1
+              ? "(min-width:2561px)"
+              : `(max-width:${breakpoints[i]}px)`;

-            const source = document.createElement("source");
-            source.src = `/${YEAR}/assets/videos/${res}/${format}/${padded}.${format}`;
-            source.type = `video/${format}`;
-            source.media = mediaQuery;
-            thumbkino.appendChild(source);
-          });
+          const source = document.createElement("source");
+          source.src = `/${YEAR}/assets/videos/${res}/${format}/${padded}.${format}`;
+          source.type = `video/${format}`;
+          source.media = mediaQuery;
+          thumbkino.appendChild(source);
        });
-
-        thumbkino.load();
-        thumbkino.play().catch(() => {});
-
-        console.log(`[Bratonien] Daumenkino gesetzt für Tag ${padded}`);
      });
-    }

+      // Video neu initialisieren
+      thumbkino.pause();
+      thumbkino.load();
+
+      // Sicherstellen, dass das neue Video vollständig geladen ist, bevor es startet
+      thumbkino.addEventListener(
+        "loadeddata",
+        () => {
+          thumbkino.currentTime = 0;
+          thumbkino.play().catch(() => {});
+          console.log(`[Bratonien] Daumenkino aktualisiert für Tag ${padded}`);
+        },
+        { once: true }
+      );
+    });
+
+    // === Responsive Hintergrundbilder ===
    const breakpoints = [420, 768, 1024, 1366, 1600, 1920, 2560, 3840];

-    // === <source> für AVIF und WebP aktualisieren ===
    sources.forEach((source) => {
      const type = source.getAttribute("type");
-      const format = type?.split("/")[1]; // "avif" oder "webp"
+      const format = type?.split("/")[1];
      if (!format) return;

      const newSrcset = breakpoints
-        .map(
-          (bp) => `${basePath}${bp}/${format}/${filename}.${format} ${bp}w`
-        )
+        .map((bp) => `${basePath}${bp}/${format}/${filename}.${format} ${bp}w`)
        .join(", ");
      source.setAttribute("srcset", newSrcset);
    });

-    // === <img> (JPEG-Fallback) ===
    const jpegSrcset = breakpoints
      .map((bp) => `${basePath}${bp}/jpeg/${filename}.jpeg ${bp}w`)
      .join(", ");
--- a/adventskalender/2025/js/popup.js
+++ b/adventskalender/2025/js/popup.js
@@ -1,11 +1,10 @@
 // Adventskalender 2025 – Popup-Logik (Bratonien Edition)

 const popupOverlay = document.getElementById("popup-overlay");
-const popupBox = document.getElementById("popup-box");
 const popupContent = document.getElementById("popup-content");
 const popupClose = document.getElementById("popup-close");

-let activeSound = null; // aktuell laufender Hintergrundsound
+let activeDay = null;

 // === Platzhalterfunktion ===
 function placeholder(text) {
@@ -20,31 +19,31 @@ function placeholder(text) {
 const popupData = {
  1: { title: "🎁 Adventskalenderstart + Daumenkino", content: placeholder("QR-Code zum Daumenkino & Intro-Post") },
  2: { title: "🍰 Foodcheck: Tassenkuchen", content: placeholder("3-Zutaten-Rezept – Quickclip folgt") },
-  3: { title: "🎧 Mini-Podcast: Kindheitsweihnachten", content: placeholder("Audioaufnahme folgt – Thema: Kindheitsweihnachten") },
-  4: { title: "🎞️ Mini-Comic", content: placeholder("Comic (1–3 Panels) folgt") },
-  5: { title: "👗 Cosplay-Winter-Transformation", content: placeholder("Reel oder Kurzvideo folgt") },
-  6: { title: "☕ Foodcheck: Winterdrink", content: placeholder("Rezeptclip / Ästhetikaufnahme folgt") },
-  7: { title: "🎧 Mini-Podcast: Was ist Bratonien?", content: placeholder("Kurzpodcast mit Stimme & Haltung folgt") },
-  8: { title: "📱 Bratonien Icon-Pack", content: placeholder("Download-Link & Vorschau folgen") },
-  9: { title: "🍽️ Foodcheck: Last-Minute-Snack", content: placeholder("Schneller Clip / Humorige Variante folgt") },
-  10: { title: "🥕 Fiktive Bratonien-Tradition", content: placeholder("Text oder Kurzclip zur Möhre auf dem Fenstersims folgt") },
-  11: { title: "👑 Cosplay-Inspo: Accessoires", content: placeholder("Foto / Nahaufnahme folgt") },
-  12: { title: "🎥 POV: So beginnt ein Bratonien-Stream", content: placeholder("Stream-Intro-Video folgt") },
-  13: { title: "🎙️ Mini-Podcast: Weihnachtscringe", content: placeholder("Podcastaufnahme folgt") },
-  14: { title: "🍪 Foodcheck: Last-Minute-Plätzchen", content: placeholder("Clip oder Foto folgt") },
-  15: { title: "🧠 Mini-Podcast: Der große Wunsch", content: placeholder("Kurzer Audio-Text folgt") },
-  16: { title: "📦 5 Dinge, die du nicht mehr kaufen solltest", content: placeholder("Humor-Reel folgt") },
-  17: { title: "🎞️ Die besten Weihnachtsfilme in Bratonien", content: placeholder("Liste oder humorige Zusammenstellung folgt") },
-  18: { title: "🎧 Mini-Podcast: Weihnachten früher", content: placeholder("Audioaufnahme folgt") },
-  19: { title: "🍪 Foodcheck: Das hässlichste Plätzchen", content: placeholder("Humorclip oder Foto folgt") },
-  20: { title: "🎁 3 Arten von Menschen beim Geschenkeeinpacken", content: placeholder("Sketch-Reel folgt") },
-  21: { title: "📞 Audio-Sketch: Der Weihnachtsanruf", content: placeholder("Audioaufnahme folgt") },
+  3: { title: "🎧 Mini-Podcast: Kindheitsweihnachten", content: placeholder("Audioaufnahme folgt") },
+  4: { title: "🎞️ Mini-Comic", content: placeholder("Comic folgt") },
+  5: { title: "👗 Cosplay-Winter-Transformation", content: placeholder("Reel folgt") },
+  6: { title: "☕ Foodcheck: Winterdrink", content: placeholder("Rezeptclip folgt") },
+  7: { title: "🎧 Mini-Podcast: Was ist Bratonien?", content: placeholder("Kurzpodcast folgt") },
+  8: { title: "📱 Bratonien Icon-Pack", content: placeholder("Download-Link folgt") },
+  9: { title: "🍽️ Foodcheck: Last-Minute-Snack", content: placeholder("Humorclip folgt") },
+  10: { title: "🥕 Fiktive Bratonien-Tradition", content: placeholder("Text folgt") },
+  11: { title: "👑 Cosplay-Inspo: Accessoires", content: placeholder("Foto folgt") },
+  12: { title: "🎥 POV: So beginnt ein Bratonien-Stream", content: placeholder("Video folgt") },
+  13: { title: "🎙️ Mini-Podcast: Weihnachtscringe", content: placeholder("Podcast folgt") },
+  14: { title: "🍪 Foodcheck: Last-Minute-Plätzchen", content: placeholder("Clip folgt") },
+  15: { title: "🧠 Mini-Podcast: Der große Wunsch", content: placeholder("Kurztext folgt") },
+  16: { title: "📦 5 Dinge, die du nicht mehr kaufen solltest", content: placeholder("Reel folgt") },
+  17: { title: "🎞️ Die besten Weihnachtsfilme in Bratonien", content: placeholder("Liste folgt") },
+  18: { title: "🎧 Mini-Podcast: Weihnachten früher", content: placeholder("Audio folgt") },
+  19: { title: "🍪 Foodcheck: Das hässlichste Plätzchen", content: placeholder("Humorclip folgt") },
+  20: { title: "🎁 3 Arten von Menschen beim Geschenkeeinpacken", content: placeholder("Sketch folgt") },
+  21: { title: "📞 Audio-Sketch: Der Weihnachtsanruf", content: placeholder("Audio folgt") },
  22: { title: "🎲 Bratonischer Geschenke-Generator", content: placeholder("Minispiel folgt") },
-  23: { title: "🍨 Foodcheck: Deko-Dessert (Schneekugel)", content: placeholder("Foodfoto / Clip folgt") },
-  24: { title: "🎬 Danke & Geschenk", content: placeholder("Finale Video & Freebie folgen") }
+  23: { title: "🍨 Foodcheck: Deko-Dessert (Schneekugel)", content: placeholder("Foodfoto folgt") },
+  24: { title: "🎬 Danke & Geschenk", content: placeholder("Finale folgt") }
 };

-// === Türchen öffnen – HTML laden oder Fallback ===
+// === Popup öffnen ===
 function openPopup(day) {
  const data = popupData[day];
  if (!data) return;
@@ -53,114 +52,69 @@ function openPopup(day) {
  const url = `/2025/content/day${tag}.html`;

  fetch(url)
-    .then(res => {
-      if (!res.ok) throw new Error("Inhalt nicht gefunden");
-      return res.text();
-    })
+    .then(res => res.ok ? res.text() : Promise.reject("Inhalt nicht gefunden"))
    .then(html => {
+      activeDay = day;
      popupContent.innerHTML = `<h2>${data.title}</h2>${html}`;
      popupOverlay.classList.add("active");

-      // === Event an background.js senden, sobald day01 geladen ist ===
-      if (day === 1) {
-        document.dispatchEvent(new CustomEvent("day01-loaded"));
-      }
-
-      // === Tag 1: Sound + Daumenkino starten ===
+      // Event für background.js
      if (day === 1) {
        setTimeout(() => {
-          try {
-            const bg = popupContent.querySelector("#bgmusic");
-            const thumbkino = popupContent.querySelector(".thumbkino-video");
-
-            if (bg) {
-              bg.volume = 0.5;
-              bg.currentTime = 0;
-              bg.play().catch(() => {});
-              activeSound = bg;
-            }
-
-            if (thumbkino) {
-              thumbkino.muted = true;
-              thumbkino.loop = true;
-              thumbkino.play().catch(() => {});
-            }
-          } catch (err) {
-            console.warn("Audio oder Video konnten nicht gestartet werden:", err);
-          }
-        }, 250);
-      } else {
-        // === alle anderen Tage: nur Video-Autoplay sichern ===
-        setTimeout(() => {
-          const videos = popupContent.querySelectorAll("video[autoplay]");
-          videos.forEach(v => v.play().catch(() => {}));
-        }, 250);
+          document.dispatchEvent(new CustomEvent("day01-loaded"));
+        }, 100);
      }
+
+      // Medien starten
+      setTimeout(() => {
+        const bg = popupContent.querySelector("#bgmusic");
+        const videos = popupContent.querySelectorAll("video");
+
+        if (day === 1 && bg) {
+          bg.volume = 0.5;
+          bg.currentTime = 0;
+          bg.play().catch(() => {});
+        }
+
+        videos.forEach(v => {
+          v.muted = true;
+          v.loop = true;
+          v.play().catch(() => {});
+        });
+      }, 300);
    })
    .catch(err => {
      popupContent.innerHTML = `<h2>${data.title}</h2>${data.content}`;
      popupOverlay.classList.add("active");
-      console.warn(`Türchen ${day}: HTML konnte nicht geladen werden. Fallback verwendet.`, err);
+      console.warn(`Türchen ${day}: ${err}`);
    });
 }

-// === Gesperrte Türchen – Zufallsspruch + Countdown ===
-window.showLockedPopup = function (day) {
-  const sprueche = [
-    "🎁 Na na na, hier wird nicht geschummelt!",
-    "❄️ Geduld ist auch eine Form von Magie.",
-    "🎅 Ho ho ho – zu früh! Versuch es später nochmal.",
-    "⏳ Die Tür klemmt noch – vielleicht morgen?",
-    "🍪 Kein Plätzchen für Ungeduldige!",
-    "🎄 Schön, dass du neugierig bist – aber noch ist Geheimniszeit!",
-    "🔒 Tür verriegelt. Der Weihnachtszauber hat Öffnungszeiten.",
-    "✨ Geduld, kleiner Weihnachtself – noch ein bisschen Glitzer abwarten!",
-    "🕯️ Zu früh dran? Das Lichtlein brennt noch nicht für dich."
-  ];
+// === Popup schließen ===
+function closePopup() {
+  popupOverlay.classList.remove("active");

-  const zufall = sprueche[Math.floor(Math.random() * sprueche.length)];
+  // Alle Audioelemente im Popup stoppen
+  popupContent.querySelectorAll("audio").forEach(a => {
+    a.pause();
+    a.currentTime = 0;
+  });

-  const yearMatch = document.title.match(/\d{4}/);
-  const year = yearMatch ? parseInt(yearMatch[0], 10) : new Date().getFullYear();
-  const unlockDate = new Date(year, 11, parseInt(day, 10), 0, 0, 0);
-  const now = new Date();
+  // Alle Videos im Popup stoppen
+  popupContent.querySelectorAll("video").forEach(v => {
+    v.pause();
+    v.currentTime = 0;
+  });

-  let diff = unlockDate - now;
-  if (diff < 0) diff = 0;
+  activeDay = null;
+}

-  const totalMinutes = Math.floor(diff / 60000);
-  const days = Math.floor(totalMinutes / (60 * 24));
-  const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
-  const minutes = totalMinutes % 60;
-
-  let timeText = "";
-  if (days > 0) timeText += `${days} Tag${days !== 1 ? "en" : ""}`;
-  if (hours > 0) timeText += `${timeText ? ", " : ""}${hours} Stunde${hours !== 1 ? "n" : ""}`;
-  if (minutes > 0 || timeText === "")
-    timeText += `${timeText ? " und " : ""}${minutes} Minute${minutes !== 1 ? "n" : ""}`;
-
-  popupContent.innerHTML = `
-    <h2>Türchen ${day} ist noch geschlossen</h2>
-    <p>${zufall}</p>
-    <p style="margin-top: 10px; opacity: 0.8;">🔓 Öffnet in <strong>${timeText}</strong></p>
-  `;
-  popupOverlay.classList.add("active");
-};
-
-// === Schließen – Overlay oder X-Button ===
+// === Schließen-Events ===
 popupClose.addEventListener("click", closePopup);
 popupOverlay.addEventListener("click", e => {
  if (e.target === popupOverlay) closePopup();
 });

-function closePopup() {
-  popupOverlay.classList.remove("active");
-  if (activeSound) {
-    activeSound.pause();
-    activeSound.currentTime = 0;
-    activeSound = null;
-  }
-}
-
 // === Export für door-open.js ===
-window.openPopup = openPopup;
+window.openPopup = openPopup;
+window.closePopup = closePopup;