@edm-webplayer/webplayer-angular 0.1.89 → 0.1.91

package/fesm2022/edm-webplayer-webplayer-angular.mjs

@@ -90,32 +90,13 @@ class PlyrPlayerComponent {
     liveInteractionBlocker;
     iosFullscreenCleanup;
     pendingStartTime;
+    autoplayConfig;
     onResize = () => {
         this.updateRecommendationBlockerSafeZone();
     };
-    onRecommendationBlockerClick = (event) => {
-        if (event) {
-            try {
-                event.preventDefault();
-            }
-            catch { }
-            try {
-                event.stopPropagation();
-            }
-            catch { }
-        }
-    };
-    onTopBlockerPointerDown = (event) => {
-        try {
-            event.preventDefault();
-        }
-        catch { }
-        try {
-            event.stopPropagation();
-        }
-        catch { }
-    };
-    onTopBlockerClick = (event) => {
+    consumeEvent = (event) => {
+        if (!event)
+            return;
         try {
             event.preventDefault();
         }
@@ -195,6 +176,9 @@ class PlyrPlayerComponent {
         }
         return Math.max(this.overlayInteractionGapPx, this.getControlsSafeZone());
     }
+    getOverlayGuardHeight() {
+        return Math.max(48, Math.ceil(this.getOverlaySafeZone()));
+    }
     getOpenMenuHeight() {
         const container = this.plyr?.elements?.container;
         if (!container)
@@ -302,28 +286,32 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             return null;
         const blocker = this.document.createElement("div");
         blocker.className = "plyr-recommendation-blocker";
-        blocker.style.position = "absolute";
-        blocker.style.top = "0";
-        blocker.style.left = "0";
-        blocker.style.width = "100%";
-        blocker.style.height = "100%";
-        blocker.style.zIndex = "9";
-        blocker.style.pointerEvents = "none";
-        blocker.style.display = "none";
-        blocker.style.background = "rgba(0,0,0,0)";
-        blocker.style.cursor = "pointer";
+        Object.assign(blocker.style, {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%",
+            zIndex: "9",
+            pointerEvents: "none",
+            display: "none",
+            background: "rgba(0,0,0,0)",
+            cursor: "pointer",
+        });
         const activeZone = this.document.createElement("div");
         activeZone.className = "plyr-recommendation-blocker__zone";
-        activeZone.style.position = "absolute";
-        activeZone.style.top = "0";
-        activeZone.style.left = "0";
-        activeZone.style.width = "100%";
-        activeZone.style.bottom = `20px`;
-        activeZone.style.pointerEvents = "auto";
-        activeZone.style.background = "rgba(0,0,0,0)";
-        activeZone.style.cursor = "pointer";
-        activeZone.addEventListener("pointerdown", this.onTopBlockerPointerDown);
-        activeZone.addEventListener("click", this.onRecommendationBlockerClick);
+        Object.assign(activeZone.style, {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            width: "100%",
+            bottom: `20px`,
+            pointerEvents: "auto",
+            background: "rgba(0,0,0,0)",
+            cursor: "pointer",
+        });
+        activeZone.addEventListener("pointerdown", this.consumeEvent);
+        activeZone.addEventListener("click", this.consumeEvent);
         blocker.appendChild(activeZone);
         wrapper.appendChild(blocker);
         this.recommendationBlocker = blocker;
@@ -363,18 +351,20 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         const blocker = this.document.createElement("div");
         blocker.className = "plyr-top-click-blocker";
-        blocker.style.position = "absolute";
-        blocker.style.top = "0";
-        blocker.style.left = "0";
-        blocker.style.right = "0";
-        blocker.style.width = "100%";
-        blocker.style.zIndex = "12";
-        blocker.style.pointerEvents = "auto";
-        blocker.style.background = "rgba(0,0,0,0)";
-        blocker.style.touchAction = "none";
-        blocker.style.cursor = "default";
-        blocker.addEventListener("pointerdown", this.onTopBlockerPointerDown);
-        blocker.addEventListener("click", this.onTopBlockerClick);
+        Object.assign(blocker.style, {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            right: "0",
+            width: "100%",
+            zIndex: "12",
+            pointerEvents: "auto",
+            background: "rgba(0,0,0,0)",
+            touchAction: "none",
+            cursor: "default",
+        });
+        blocker.addEventListener("pointerdown", this.consumeEvent);
+        blocker.addEventListener("click", this.consumeEvent);
         wrapper.appendChild(blocker);
         this.topClickBlocker = blocker;
         this.updateTopClickBlockerSafeZone();
@@ -382,8 +372,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
     updateTopClickBlockerSafeZone() {
         if (!this.topClickBlocker)
             return;
-        const height = Math.max(48, Math.ceil(this.getOverlaySafeZone()));
-        this.topClickBlocker.style.height = `${height}px`;
+        this.topClickBlocker.style.height = `${this.getOverlayGuardHeight()}px`;
         this.topClickBlocker.style.pointerEvents = this.overlayBlockAll
             ? "auto"
             : "none";
@@ -501,12 +490,6 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
     isIframeProvider() {
         return this.config?.video_host === "youtube";
     }
-    shouldDisableAutoplayForIOS() {
-        if (this.config?.is_live) {
-            return false;
-        }
-        return this.isIOSContext();
-    }
     shouldResetProgressToBeginning() {
         const host = this.config?.video_host;
         if (host !== "youtube") {
@@ -594,59 +577,18 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         this.liveInteractionBlocker = null;
     }
-    wantsAutoplay() {
-        return !!(this.config?.autoplay || this.config?.is_live);
-    }
-    // Debug: disable qualquer tentativa de autoplay em todas as plataformas
-    isAutoplayDisabledForDebug() {
-        return true;
-    }
-    shouldPreventAutoplayFromResume() {
-        return this.isIOSContext() && this.hasResumeProgress();
-    }
-    hasResumeProgress() {
-        const rawTime = Number(this.config?.last_time);
-        if (Number.isFinite(rawTime) && rawTime > 0.5) {
-            return true;
-        }
-        const rawPercent = Number(this.config?.last_percent);
-        if (Number.isFinite(rawPercent) && rawPercent > 0.01) {
-            return true;
-        }
-        return false;
-    }
-    shouldAutoplay() {
-        if (this.isAutoplayDisabledForDebug()) {
-            return false;
-        }
-        if (this.config?.is_live) {
-            return true;
-        }
-        if (this.shouldPreventAutoplayFromResume()) {
-            return false;
-        }
-        if (this.shouldDisableAutoplayForIOS()) {
-            return false;
-        }
-        return this.wantsAutoplay();
-    }
-    requiresMutedAutoplay() {
-        if (this.isAutoplayDisabledForDebug()) {
-            return false;
-        }
-        if (this.config?.is_live && this.isIOSDevice()) {
-            return true;
-        }
-        if (!this.isIOSDevice() || this.shouldDisableAutoplayForIOS()) {
-            return false;
-        }
-        return this.wantsAutoplay();
+    isLivePlayback() {
+        return !!this.config?.is_live;
     }
-    shouldBlockIframeAutoplay() {
-        return this.shouldDisableAutoplayForIOS();
+    getAutoplayConfig() {
+        const enabled = this.isLivePlayback();
+        const startMuted = enabled && this.isIOSDevice();
+        const blockIframe = !this.isLivePlayback() && this.isIOSContext();
+        this.autoplayConfig = { enabled, startMuted, blockIframe };
+        return this.autoplayConfig;
     }
-    stopRestrictedIframeAutoplay() {
-        if (!this.shouldBlockIframeAutoplay()) {
+    stopRestrictedIframeAutoplay(autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
+        if (!autoplayConfig.blockIframe) {
             return;
         }
         this.clearAutoplayUnlockListener();
@@ -725,7 +667,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         const media = target ?? this.videoRef?.nativeElement ?? null;
         const prevVideoMuted = media?.muted ?? false;
         const prevPlyrMuted = !!this.plyr?.muted;
-        const shouldForceUnmute = !this.shouldAutoplay();
+        const autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig();
+        const shouldForceUnmute = !autoplayConfig.enabled;
         try {
             if (media) {
                 media.muted = true;
@@ -765,12 +708,11 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             this.interactionUnmuteCleanup = undefined;
         }
     }
-    ensureAutoplayUnlockListener() {
-        if (typeof window === "undefined" ||
-            this.interactionUnmuteCleanup ||
-            !this.shouldAutoplay() ||
-            this.shouldPreventAutoplayFromResume() ||
-            this.isAutoplayDisabledForDebug()) {
+    ensureAutoplayUnlockListener(autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
+        if (typeof window === "undefined" || this.interactionUnmuteCleanup) {
+            return;
+        }
+        if (!autoplayConfig.enabled) {
             return;
         }
         const capture = true;
@@ -778,6 +720,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             this.setPlayerMutedState(false);
             try {
                 this.plyr?.play();
+                console.log("Autoplay unlocked via user interaction");
             }
             catch { }
             this.clearAutoplayUnlockListener();
@@ -822,9 +765,11 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         iframe.setAttribute("allowfullscreen", "true");
         iframe.setAttribute("data-keepplaying", "true");
     }
-    scheduleUserInteractionUnmute(video) {
-        this.unmuteAfterDelay(video || undefined);
-        this.ensureAutoplayUnlockListener();
+    scheduleUserInteractionUnmute(video, autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
+        if (!autoplayConfig.enabled)
+            return;
+        this.unmuteAfterDelay(video || undefined, undefined, 1, autoplayConfig);
+        this.ensureAutoplayUnlockListener(autoplayConfig);
     }
     requestStartTimeSeek(start, opts = {}) {
         if (!(start > 0)) {
@@ -936,11 +881,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         return null;
     }
-    startAutoplayFlow(video) {
-        if (!this.shouldAutoplay() ||
-            !this.plyr ||
-            this.shouldPreventAutoplayFromResume() ||
-            this.isAutoplayDisabledForDebug())
+    startAutoplayFlow(video, autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
+        if (!autoplayConfig.enabled || !this.plyr)
             return;
         if (this.deferUntilStartTimeSettles(() => this.startAutoplayFlow(video))) {
             return;
@@ -951,7 +893,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             let playResult;
             try {
                 playResult = this.plyr.play();
-                this.forceIframeAutoplayFallback();
+                this.forceIframeAutoplayFallback(autoplayConfig);
             }
             catch (error) {
                 if (!muted) {
@@ -967,7 +909,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
                     }
                     catch { }
                 }
-                this.scheduleUserInteractionUnmute(media);
+                this.scheduleUserInteractionUnmute(media, autoplayConfig);
                 return;
             }
             if (playResult &&
@@ -986,29 +928,26 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
                         }
                         catch { }
                     }
-                    this.scheduleUserInteractionUnmute(media);
+                    this.scheduleUserInteractionUnmute(media, autoplayConfig);
                 });
                 return;
             }
             if (muted) {
-                this.scheduleUserInteractionUnmute(media);
+                this.scheduleUserInteractionUnmute(media, autoplayConfig);
             }
             else {
                 this.clearAutoplayUnlockListener();
             }
         };
-        if (this.requiresMutedAutoplay()) {
+        if (autoplayConfig.startMuted) {
             tryPlay(true);
         }
         else {
             tryPlay(false);
         }
     }
-    forceIframeAutoplayFallback() {
-        if (!this.shouldAutoplay() ||
-            !this.isIframeProvider() ||
-            this.shouldPreventAutoplayFromResume() ||
-            this.isAutoplayDisabledForDebug()) {
+    forceIframeAutoplayFallback(autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
+        if (!this.isLivePlayback() || !autoplayConfig.enabled || !this.isIframeProvider()) {
             return;
         }
         const embed = this.plyr?.embed;
@@ -1030,71 +969,79 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             return;
         }
         if (this.isTouchDevice()) {
-            const HIDE_DELAY = 2000;
-            let hideTimeout = null;
-            const clearHideTimeout = () => {
-                if (hideTimeout) {
-                    clearTimeout(hideTimeout);
-                    hideTimeout = null;
-                }
-            };
-            const showControls = () => {
-                container.classList.remove("plyr--auto-hide-controls");
-            };
-            const hideControls = () => {
-                if (this.plyr?.playing) {
-                    container.classList.add("plyr--auto-hide-controls");
-                }
-            };
-            const scheduleHide = () => {
-                clearHideTimeout();
-                if (!this.plyr?.playing)
-                    return;
-                hideTimeout = setTimeout(() => hideControls(), HIDE_DELAY);
-            };
-            const onPlay = () => {
-                showControls();
-                this.overlayBlockAll = false;
-            };
-            const onPause = () => {
-                clearHideTimeout();
-                showControls();
-                this.overlayBlockAll = true;
-                this.updateTopClickBlockerSafeZone();
-                this.topClickBlocker?.setAttribute("data-state", "paused");
-                if (this.shouldEmitEndedOnPause()) {
-                    this.endedLoggedOnPause = true;
-                    console.log("event: ended");
-                }
-            };
-            const onEnded = () => {
-                clearHideTimeout();
-                showControls();
-                this.overlayBlockAll = true;
-                this.updateTopClickBlockerSafeZone();
-                this.topClickBlocker?.setAttribute("data-state", "ended");
-            };
-            const onUserInteraction = () => {
-                showControls();
-                scheduleHide();
-            };
-            this.plyr?.on?.("play", onPlay);
-            this.plyr?.on?.("pause", onPause);
-            this.plyr?.on?.("ended", onEnded);
-            container.addEventListener("touchstart", onUserInteraction);
-            container.addEventListener("click", onUserInteraction);
-            this.controlsVisibilityCleanup = () => {
-                clearHideTimeout();
-                this.plyr?.off?.("play", onPlay);
-                this.plyr?.off?.("pause", onPause);
-                this.plyr?.off?.("ended", onEnded);
-                container.removeEventListener("touchstart", onUserInteraction);
-                container.removeEventListener("click", onUserInteraction);
-                container.classList.remove("plyr--auto-hide-controls");
-            };
-            onPlay();
+            this.controlsVisibilityCleanup =
+                this.setupTouchControlsVisibility(container);
             return;
         }
+        this.controlsVisibilityCleanup =
+            this.setupDesktopControlsVisibility(container);
+    }
+    setupTouchControlsVisibility(container) {
+        const HIDE_DELAY = 2000;
+        let hideTimeout = null;
+        const clearHideTimeout = () => {
+            if (hideTimeout) {
+                clearTimeout(hideTimeout);
+                hideTimeout = null;
+            }
+        };
+        const showControls = () => {
+            container.classList.remove("plyr--auto-hide-controls");
+        };
+        const hideControls = () => {
+            if (this.plyr?.playing) {
+                container.classList.add("plyr--auto-hide-controls");
+            }
+        };
+        const scheduleHide = () => {
+            clearHideTimeout();
+            if (!this.plyr?.playing)
+                return;
+            hideTimeout = setTimeout(() => hideControls(), HIDE_DELAY);
+        };
+        const onPlay = () => {
+            showControls();
+            this.overlayBlockAll = false;
+        };
+        const onPause = () => {
+            clearHideTimeout();
+            showControls();
+            this.overlayBlockAll = true;
+            this.updateTopClickBlockerSafeZone();
+            this.topClickBlocker?.setAttribute("data-state", "paused");
+            if (this.shouldEmitEndedOnPause()) {
+                this.endedLoggedOnPause = true;
+                console.log("event: ended");
+            }
+        };
+        const onEnded = () => {
+            clearHideTimeout();
+            showControls();
+            this.overlayBlockAll = true;
+            this.updateTopClickBlockerSafeZone();
+            this.topClickBlocker?.setAttribute("data-state", "ended");
+        };
+        const onUserInteraction = () => {
+            showControls();
+            scheduleHide();
+        };
+        this.plyr?.on?.("play", onPlay);
+        this.plyr?.on?.("pause", onPause);
+        this.plyr?.on?.("ended", onEnded);
+        container.addEventListener("touchstart", onUserInteraction);
+        container.addEventListener("click", onUserInteraction);
+        onPlay();
+        return () => {
+            clearHideTimeout();
+            this.plyr?.off?.("play", onPlay);
+            this.plyr?.off?.("pause", onPause);
+            this.plyr?.off?.("ended", onEnded);
+            container.removeEventListener("touchstart", onUserInteraction);
+            container.removeEventListener("click", onUserInteraction);
+            container.classList.remove("plyr--auto-hide-controls");
+        };
+    }
+    setupDesktopControlsVisibility(container) {
         let hovering = false;
         const toggleClass = () => {
             const playing = !!this.plyr?.playing;
@@ -1132,7 +1079,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         container.addEventListener("focusin", onFocusIn);
         container.addEventListener("focusout", onFocusOut);
         toggleClass();
-        this.controlsVisibilityCleanup = () => {
+        return () => {
             this.plyr?.off?.("play", onPlay);
             this.plyr?.off?.("pause", onPause);
             this.plyr?.off?.("ended", onEnded);
@@ -1171,8 +1118,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         const speedOptions = [1, 1.25, 1.5, 2];
         const locale = this.resolveLocale();
         const captionsLanguage = this.resolveCaptionsLanguage(locale) ?? "pt";
-        const shouldAutoplay = this.shouldAutoplay();
-        const startMuted = this.requiresMutedAutoplay();
+        const autoplayConfig = this.getAutoplayConfig();
+        const { enabled: shouldAutoplay, startMuted } = autoplayConfig;
         try {
             this.videoRef.nativeElement.muted = startMuted;
         }
@@ -1186,7 +1133,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             this.videoRef.nativeElement.autoplay = shouldAutoplay;
         }
         catch { }
-        const isLive = !!this.config?.is_live;
+        const isLive = this.isLivePlayback();
         const youtubePlayerVars = {
             rel: 0,
             modestbranding: 1,
@@ -1264,13 +1211,13 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         window.removeEventListener("resize", this.onResize);
         window.addEventListener("resize", this.onResize);
         this.bindProgressEvents();
-        this.loadSource(this.videoRef.nativeElement).then(() => {
+        this.loadSource(this.videoRef.nativeElement, autoplayConfig).then(() => {
             this.setupStartTime();
         });
         // Dispara o evento ready quando o player estiver pronto
         this.plyr.on("ready", () => {
             this.ensureIframeAutoplayPermissions();
-            this.stopRestrictedIframeAutoplay();
+            this.stopRestrictedIframeAutoplay(autoplayConfig);
             this.ready.emit();
         });
     }
@@ -1362,8 +1309,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             this.toggleRecommendationBlocker(true);
         });
     }
-    unmuteAfterDelay(video, delayMs = 2000, volume = 1) {
-        if (!this.shouldAutoplay())
+    unmuteAfterDelay(video, delayMs = 2000, volume = 1, autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
+        if (!autoplayConfig.enabled)
             return;
         setTimeout(() => {
             try {
@@ -1404,7 +1351,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             catch { }
         }
     }
-    loadSource(video) {
+    loadSource(video, autoplayConfig) {
         return new Promise((resolve) => {
             if (!this.config) {
                 return resolve();
@@ -1414,124 +1361,125 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
                 this.hls = undefined;
             }
             this.resetPlaybackRate(video);
-            if (this.config.video_host === "youtube") {
-                const onReady = () => {
-                    this.plyr.off("ready", onReady);
-                    this.ensureIframeAutoplayPermissions();
-                    const start = this.resolveStartTime(this.config.last_time, this.config.last_percent, this.plyr.duration);
-                    this.requestStartTimeSeek(start);
-                    if (this.shouldAutoplay()) {
-                        this.startAutoplayFlow();
-                    }
-                    else if (this.shouldBlockIframeAutoplay()) {
-                        this.stopRestrictedIframeAutoplay();
-                    }
-                    if (this.shouldPreventAutoplayFromResume() || this.isAutoplayDisabledForDebug()) {
-                        this.stopRestrictedIframeAutoplay();
-                    }
-                    if (this.shouldPreventAutoplayFromResume()) {
-                        this.stopRestrictedIframeAutoplay();
-                    }
-                    parent.postMessage("playerIsReadyToPlay", "*");
-                    parent.postMessage("duration:" + this.plyr.duration, "*");
-                    console.log("event: current_time " + this.plyr.currentTime);
-                    console.log("event: duration " + this.plyr.duration);
-                    console.log("event: ready");
-                    this.postCastEvent({
-                        event: "ready",
-                        duration: this.plyr.duration || 0,
-                        currentTime: this.plyr.currentTime || 0,
-                    });
-                    if (this.config.is_live) {
-                        this.plyr?.on("playing", function () {
-                            console.log("event: playing_live");
-                            parent.postMessage("event: playing_live", "*");
-                        });
-                    }
-                    if (this.config.mirror) {
-                        setTimeout(() => {
-                            document
-                                .querySelector(`.plyr__video-embed iframe`)
-                                ?.classList.add("mirror");
-                        }, 1000);
-                    }
-                };
-                this.plyr.on("ready", onReady);
-            }
-            if (this.config.video_host === "youtube") {
-                this.plyr.source = {
-                    type: "video",
-                    sources: [{ src: this.config.video_id, provider: "youtube" }],
-                };
-            }
-            else if (this.config.video_host === "mp4") {
-                this.plyr.source = {
-                    type: "video",
-                    sources: [{ src: this.config.video_external_id, type: "video/mp4" }],
-                };
-            }
-            else if (this.config.video_host === "hls") {
-                let sourceX = "";
-                try {
-                    sourceX = atob(this.config.video_id || "");
-                }
-                catch (e) {
-                    sourceX = this.config.video_id || "";
-                }
-                const canNative = video.canPlayType("application/vnd.apple.mpegurl");
-                if (canNative) {
-                    this.plyr.source = {
-                        type: "video",
-                        sources: [{ src: sourceX, type: "application/vnd.apple.mpegurl" }],
-                    };
-                    const onLoadedMeta = () => {
-                        const dur = this.plyr.duration || video.duration || 0;
-                        const start = this.resolveStartTime(this.config.last_time, this.config.last_percent, dur);
-                        console.log(start);
-                        this.requestStartTimeSeek(start, { video });
-                        this.startAutoplayFlow(video);
-                        video.removeEventListener("loadedmetadata", onLoadedMeta);
-                    };
-                    video.addEventListener("loadedmetadata", onLoadedMeta);
-                }
-                else if (Hls.isSupported()) {
-                    this.hls = new Hls({ enableWorker: true, lowLatencyMode: true });
-                    this.hls.attachMedia(video);
-                    this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
-                        this.hls.loadSource(sourceX);
-                    });
-                    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
-                        const dur = video.duration || 0;
-                        const start = this.resolveStartTime(this.config.last_time, this.config.last_percent, dur);
-                        this.requestStartTimeSeek(start, { video });
-                        this.startAutoplayFlow(video);
-                    });
-                    this.hls.on(Hls.Events.ERROR, (_evt, data) => {
-                        if (data?.fatal) {
-                            switch (data.type) {
-                                case Hls.ErrorTypes.NETWORK_ERROR:
-                                    this.hls.startLoad();
-                                    break;
-                                case Hls.ErrorTypes.MEDIA_ERROR:
-                                    this.hls.recoverMediaError();
-                                    break;
-                                default:
-                                    try {
-                                        this.hls.destroy();
-                                    }
-                                    catch { }
-                                    break;
-                            }
-                        }
-                    });
-                }
-                else {
-                    this.plyr.source = { type: "video", sources: [{ src: sourceX }] };
-                }
+            const host = this.config.video_host;
+            if (host === "youtube") {
+                this.loadYoutubeSource(autoplayConfig);
+                return resolve();
+            }
+            if (host === "mp4") {
+                this.loadMp4Source();
+                return resolve();
+            }
+            if (host === "hls") {
+                this.loadHlsSource(video, autoplayConfig);
+                return resolve();
             }
             resolve();
         });
     }
+    loadYoutubeSource(autoplayConfig) {
+        const onReady = () => {
+            this.plyr.off("ready", onReady);
+            this.ensureIframeAutoplayPermissions();
+            this.applyStartTimeFromConfig(this.plyr.duration);
+            if (autoplayConfig.enabled) {
+                this.startAutoplayFlow(undefined, autoplayConfig);
+            }
+            else if (autoplayConfig.blockIframe) {
+                this.stopRestrictedIframeAutoplay(autoplayConfig);
+            }
+            parent.postMessage("playerIsReadyToPlay", "*");
+            parent.postMessage("duration:" + this.plyr.duration, "*");
+            console.log("event: current_time " + this.plyr.currentTime);
+            console.log("event: duration " + this.plyr.duration);
+            console.log("event: ready");
+            this.postCastEvent({
+                event: "ready",
+                duration: this.plyr.duration || 0,
+                currentTime: this.plyr.currentTime || 0,
+            });
+            if (this.isLivePlayback()) {
+                this.plyr?.on("playing", function () {
+                    console.log("event: playing_live");
+                    parent.postMessage("event: playing_live", "*");
+                });
+            }
+            if (this.config?.mirror) {
+                setTimeout(() => {
+                    document
+                        .querySelector(`.plyr__video-embed iframe`)
+                        ?.classList.add("mirror");
+                }, 1000);
+            }
+        };
+        this.plyr.on("ready", onReady);
+        this.plyr.source = {
+            type: "video",
+            sources: [{ src: this.config?.video_id, provider: "youtube" }],
+        };
+    }
+    loadMp4Source() {
+        this.plyr.source = {
+            type: "video",
+            sources: [{ src: this.config?.video_external_id, type: "video/mp4" }],
+        };
+    }
+    loadHlsSource(video, autoplayConfig) {
+        let sourceX = "";
+        try {
+            sourceX = atob(this.config?.video_id || "");
+        }
+        catch (e) {
+            sourceX = this.config?.video_id || "";
+        }
+        const canNative = video.canPlayType("application/vnd.apple.mpegurl");
+        if (canNative) {
+            this.plyr.source = {
+                type: "video",
+                sources: [{ src: sourceX, type: "application/vnd.apple.mpegurl" }],
+            };
+            const onLoadedMeta = () => {
+                const dur = this.plyr.duration || video.duration || 0;
+                console.log(this.applyStartTimeFromConfig(dur, video));
+                this.startAutoplayFlow(video, autoplayConfig);
+                video.removeEventListener("loadedmetadata", onLoadedMeta);
+            };
+            video.addEventListener("loadedmetadata", onLoadedMeta);
+            return;
+        }
+        if (Hls.isSupported()) {
+            this.hls = new Hls({ enableWorker: true, lowLatencyMode: true });
+            this.hls.attachMedia(video);
+            this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+                this.hls.loadSource(sourceX);
+            });
+            this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                const dur = video.duration || 0;
+                this.applyStartTimeFromConfig(dur, video);
+                this.startAutoplayFlow(video, autoplayConfig);
+            });
+            this.hls.on(Hls.Events.ERROR, (_evt, data) => {
+                if (data?.fatal) {
+                    switch (data.type) {
+                        case Hls.ErrorTypes.NETWORK_ERROR:
+                            this.hls.startLoad();
+                            break;
+                        case Hls.ErrorTypes.MEDIA_ERROR:
+                            this.hls.recoverMediaError();
+                            break;
+                        default:
+                            try {
+                                this.hls.destroy();
+                            }
+                            catch { }
+                            break;
+                    }
+                }
+            });
+            return;
+        }
+        this.plyr.source = { type: "video", sources: [{ src: sourceX }] };
+    }
     resolveStartTime(last_time, last_percent, duration, opts = {}) {
         if (this.shouldResetProgressToBeginning()) {
             return 0;
@@ -1581,6 +1529,11 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         return 0;
     }
+    applyStartTimeFromConfig(duration, video) {
+        const start = this.resolveStartTime(this.config?.last_time, this.config?.last_percent, duration);
+        this.requestStartTimeSeek(start, { video });
+        return start;
+    }
     postCastEvent(payload) {
         parent.postMessage(JSON.stringify(payload), "*");
     }
@@ -1626,8 +1579,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         if (this.recommendationBlockerActiveZone) {
             try {
-                this.recommendationBlockerActiveZone.removeEventListener("pointerdown", this.onTopBlockerPointerDown);
-                this.recommendationBlockerActiveZone.removeEventListener("click", this.onRecommendationBlockerClick);
+                this.recommendationBlockerActiveZone.removeEventListener("pointerdown", this.consumeEvent);
+                this.recommendationBlockerActiveZone.removeEventListener("click", this.consumeEvent);
             }
             catch { }
         }
@@ -1635,8 +1588,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         this.recommendationBlockerActiveZone = null;
         if (this.topClickBlocker?.parentElement) {
             try {
-                this.topClickBlocker.removeEventListener("pointerdown", this.onTopBlockerPointerDown);
-                this.topClickBlocker.removeEventListener("click", this.onTopBlockerClick);
+                this.topClickBlocker.removeEventListener("pointerdown", this.consumeEvent);
+                this.topClickBlocker.removeEventListener("click", this.consumeEvent);
                 this.topClickBlocker.parentElement.removeChild(this.topClickBlocker);
             }
             catch { }