@profitlich/template-toolkit 2.18.6 → 2.19.0

package/components/mux-player/MuxPlayer.js

@@ -1,6 +1,25 @@
 import '@mux/mux-player';
 import './mux-player.scss';
 
+/**
+ * Lädt Mux-Videos lazy und steuert Autoplay per IntersectionObserver.
+ *
+ * Ladereihenfolge:
+ * 1. observeLazyElements() beobachtet alle .mux-player-Container.
+ * 2. Betritt ein Container den Viewport, ersetzt #handleLazyLoad ihn durch
+ *    ein <mux-player>-Element und ruft handleVisibilityChange auf.
+ * 3. handleVisibilityChange → #setup für alle sichtbaren Videos:
+ *    - Autoplay: muted, Controls versteckt, #playPauseObserver startet
+ *    - Kein Autoplay: keine Änderungen, User steuert Wiedergabe selbst
+ *    - display:none beim Laden: Setup wird übersprungen; Projekt ruft
+ *      handleVisibilityChange erneut auf, sobald das Video sichtbar wird.
+ * 4. onPlayerCreated (optional): wird für alle Player aufgerufen, unabhängig
+ *    von Autoplay und nach dem internen Setup.
+ *
+ * Pausierlogik:
+ * - Viewport verlassen → #handlePlayPause via IntersectionObserver (nur Autoplay)
+ * - display:none gesetzt → handleVisibilityChange (manuell vom Projekt aufzurufen)
+ */
 export class MuxPlayer {
     #lazyLoadObserver;
     #playPauseObserver;
@@ -28,6 +47,7 @@ export class MuxPlayer {
             return;
         }
 
+        const autoplay = player.dataset.autoplay === 'true';
         if (autoplay) player.muted = true;
         if (autoplay) player.style.setProperty('--controls', 'none');
         if (this.#loop) player.loop = true;
@@ -35,16 +55,19 @@ export class MuxPlayer {
         // 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', () => {
+        if (autoplay) {
+            if (player.readyState >= 2) { // HAVE_CURRENT_DATA oder höher
                 this.#playPauseObserver.observe(player);
-            }, { once: true });
+            } else {
+                player.addEventListener('loadeddata', () => {
+                    this.#playPauseObserver.observe(player);
+                }, { once: true });
+            }
         }
     }
 
+    // Für Videos, die ein-/ausgeblendet werden
+    // zum Beispiel Startseite Angebote
     handleVisibilityChange(player) {
         const isVisible = window.getComputedStyle(player).display !== 'none';
 
@@ -99,13 +122,16 @@ export class MuxPlayer {
 
                 if (autoplay) {
                     player.setAttribute('data-autoplay', 'true');
+                } else {
+                    player.setAttribute('data-autoplay', 'false');
                 }
 
-                const setPlaying = value => player.setAttribute('data-playing', value);
+                const setStatus = value => player.setAttribute('data-status', value);
 
-                player.addEventListener('playing', () => setPlaying('true'));
-                player.addEventListener('pause', () => setPlaying('pause'));
-                player.addEventListener('ended', () => setPlaying('ended'));
+                player.addEventListener('loadstart', () => setStatus('loadstart'));
+                player.addEventListener('playing', () => setStatus('playing'));
+                player.addEventListener('pause', () => setStatus('pause'));
+                player.addEventListener('ended', () => setStatus('ended'));
 
                 console.log(
                     'Toolkit Video',
@@ -115,17 +141,17 @@ export class MuxPlayer {
                 );
 
                 container.replaceWith(player);
-                setPlaying('false');
+                setStatus('false');
 
+                this.handleVisibilityChange(player);
                 if (this.#onPlayerCreated) {
                     this.#onPlayerCreated(player, container);
-                } else if (autoplay) {
-                    this.handleVisibilityChange(player);
                 }
             }
         }
     }
 
+    // Für autoplay Videos: play und 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.18.6",
+    "version": "2.19.0",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "exports": {