@profitlich/template-toolkit 2.10.0 → 2.11.1

package/components/mux-player/MuxPlayer.js

@@ -1,11 +1,16 @@
 import '@mux/mux-player';
+import config from '../../config.json' with { type: 'json' };
 import './mux-player.scss';
 
 export class MuxPlayer {
     #lazyLoadObserver;
     #playPauseObserver;
+    #loop;
+    #onPlayerCreated;
 
-    constructor() {
+    constructor({ loop = false, onPlayerCreated = null } = {}) {
+        this.#loop = loop;
+        this.#onPlayerCreated = onPlayerCreated;
         this.#lazyLoadObserver = new IntersectionObserver(this.#handleLazyLoad.bind(this));
         this.#playPauseObserver = new IntersectionObserver(this.#handlePlayPause.bind(this));
     }
@@ -16,6 +21,40 @@ export class MuxPlayer {
         });
     }
 
+    #setupAutoplay(player) {
+        // Guard Clause: Führe das Setup nur aus, wenn es noch nicht passiert ist.
+        if (player.dataset.isSetup === 'true') {
+            return;
+        }
+
+        player.muted = true;
+        player.style.setProperty('--controls', 'none');
+        if (this.#loop) player.loop = true;
+
+        // Flag setzen, um zukünftige Ausführungen zu verhindern.
+        player.dataset.isSetup = 'true';
+
+        // Den playPauseObserver starten, sobald die Daten geladen sind.
+        if (player.readyState >= 2) { // HAVE_CURRENT_DATA oder höher
+            this.#playPauseObserver.observe(player);
+        } else {
+            player.addEventListener('loadeddata', () => {
+                this.#playPauseObserver.observe(player);
+            }, { once: true });
+        }
+    }
+
+    handleVisibilityChange(player) {
+        const isVisible = window.getComputedStyle(player).display !== 'none';
+
+        if (isVisible && player.hasAttribute('data-autoplay') && player.dataset.isSetup !== 'true') {
+            this.#setupAutoplay(player);
+        } else if (!isVisible) {
+            this.#playPauseObserver.unobserve(player);
+            player.pause();
+        }
+    }
+
     #handleLazyLoad(entries) {
         for (const entry of entries) {
             if (entry.isIntersecting) {
@@ -30,69 +69,28 @@ export class MuxPlayer {
                 player.streamType = 'on-demand';
                 player.playsInline = true;
                 player.style.aspectRatio = aspectRatio;
+                player.thumbnailTime = 0;
+                player.minResolution = config.muxMinResolution || '1080p';
+
+                if (container.dataset.accentColor) {
+                    player.accentColor = container.dataset.accentColor;
+                }
 
-                // Autoplay-Attribut am Player-Element setzen, damit es später gefunden werden kann
                 if (autoplay) {
                     player.setAttribute('data-autoplay', 'true');
                 }
 
-                const wrapper = container.closest('[data-video-wrapper]');
-
-                // Wenn ein Wrapper gefunden wird, richte den MutationObserver ein
-                if (wrapper) {
-                    const visibilityObserver = new MutationObserver(() => {
-                        this.#handleVisibilityChange(player);
-                    });
-
-                    // Beobachte den gefundenen Wrapper
-                    visibilityObserver.observe(wrapper, { attributes: true, childList: true, subtree: true });
-
-                    // Container durch Player ersetzen BEVOR die Sichtbarkeitsprüfung
-                    container.replaceWith(player);
+                container.replaceWith(player);
 
-                    // Führe eine initiale Prüfung durch, falls es schon sichtbar ist
-                    this.#handleVisibilityChange(player);
+                if (this.#onPlayerCreated) {
+                    this.#onPlayerCreated(player, container);
                 } else if (autoplay) {
-                    // Fallback für normale Autoplay-Videos ohne speziellen Wrapper
-                    player.muted = true;
-                    player.style.setProperty('--controls', 'none');
-                    container.replaceWith(player);
-
-                    player.addEventListener('loadeddata', () => {
-                        this.#playPauseObserver.observe(player);
-                    });
-                } else {
-                    // Für Videos ohne Autoplay
-                    container.replaceWith(player);
+                    this.handleVisibilityChange(player);
                 }
             }
         }
     }
 
-    #handleVisibilityChange(player) {
-        // Prüfe direkt am Player, ob er durch CSS sichtbar ist
-        const isVisible = window.getComputedStyle(player).display !== 'none';
-
-        if (isVisible && player.hasAttribute('data-autoplay')) {
-            // Wenn der Player sichtbar ist und Autoplay haben soll
-            player.muted = true;
-            player.style.setProperty('--controls', 'none');
-
-            // Warte auf loadeddata bevor der IntersectionObserver aktiviert wird
-            if (player.readyState >= 2) { // HAVE_CURRENT_DATA oder höher
-                this.#playPauseObserver.observe(player);
-            } else {
-                player.addEventListener('loadeddata', () => {
-                    this.#playPauseObserver.observe(player);
-                }, { once: true });
-            }
-        } else if (!isVisible) {
-            // Wenn der Player unsichtbar wird, pausiere ihn und stoppe die Beobachtung
-            this.#playPauseObserver.unobserve(player);
-            player.pause();
-        }
-    }
-
     #handlePlayPause(entries) {
         for (const entry of entries) {
             const player = entry.target;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "2.10.0",
+    "version": "2.11.1",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "exports": {
@@ -16,6 +16,7 @@
         "./utils/MailAdresses": "./utils/MailAdresses.js",
         "./utils/MediaQueries": "./utils/MediaQueries.js",
         "./utils/Vh100": "./utils/Vh100.js",
+        "./utils/ImagesLoaded": "./utils/images-loaded/ImagesLoaded.js",
         "./scripts/copy-files": "./scripts/copy-files.js",
         "./scripts/deploy": "./scripts/deploy.js",
         "./vite/jsonToScss": "./vite/jsonToScss.js"

package/utils/images-loaded/ImagesLoaded.js

@@ -0,0 +1,44 @@
+import './images-loaded.scss';
+
+/**
+ * Steuert das sanfte Einblenden von Bildern, die nativ (loading="lazy") geladen wurden.
+ * Fügt dem Bild das Attribut 'loaded="true"' hinzu, sobald der Ladevorgang erfolgreich abgeschlossen ist.
+ */
+export class ImagesLoaded {
+    #selector;
+    #attributeName;
+    #attributeValue;
+
+    constructor(selector, loadedAttribute = 'data-loaded', loadedValue = 'true') {
+        this.#selector = selector;
+        this.#attributeName = loadedAttribute;
+        this.#attributeValue = loadedValue;
+
+        // Führt die Initialisierung erst nach dem vollständigen Laden des DOM aus.
+        document.addEventListener('DOMContentLoaded', this.#init.bind(this));
+    }
+
+    #init() {
+        const images = document.querySelectorAll(this.#selector);
+        images.forEach(img => this.#setupImage(img));
+    }
+
+    #setupImage(img) {
+        // Prüfen auf geladenen Zustand und gültige Dimensionen
+        if (img.complete && img.naturalHeight > 0) {
+            this.#signalLoaded(img);
+        } else {
+            // Ansonsten auf das erfolgreiche Lade-Event warten
+            img.addEventListener('load', () => this.#signalLoaded(img));
+
+            // Fehlerbehandlung (optional)
+            img.addEventListener('error', () => {
+                console.warn(`[ImagesLoaded] Ladevorgang fehlgeschlagen für: ${img.src}`);
+            });
+        }
+    }
+
+    #signalLoaded(img) {
+        img.setAttribute(this.#attributeName, this.#attributeValue);
+    }
+}

package/utils/images-loaded/images-loaded.scss

@@ -0,0 +1,8 @@
+img {
+    opacity: 0;
+
+    &[data-loaded="true"] {
+        opacity: 1;
+        transition: opacity 0.3s cubic-bezier(0.76, 0, 0.24, 1);
+    }
+}