experiment zu finktionsstabilisierung

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(", ");