@edm-webplayer/webplayer-angular 0.1.99 → 0.2.1

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

@@ -90,13 +90,32 @@ class PlyrPlayerComponent {
     liveInteractionBlocker;
     iosFullscreenCleanup;
     pendingStartTime;
-    autoplayConfig;
     onResize = () => {
         this.updateRecommendationBlockerSafeZone();
     };
-    consumeEvent = (event) => {
-        if (!event)
-            return;
+    onRecommendationBlockerClick = (event) => {
+        if (event) {
+            try {
+                event.preventDefault();
+            }
+            catch { }
+            try {
+                event.stopPropagation();
+            }
+            catch { }
+        }
+    };
+    onTopBlockerPointerDown = (event) => {
+        try {
+            event.preventDefault();
+        }
+        catch { }
+        try {
+            event.stopPropagation();
+        }
+        catch { }
+    };
+    onTopBlockerClick = (event) => {
         try {
             event.preventDefault();
         }
@@ -176,9 +195,6 @@ 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)
@@ -286,32 +302,28 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             return null;
         const blocker = this.document.createElement("div");
         blocker.className = "plyr-recommendation-blocker";
-        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",
-        });
+        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";
         const activeZone = this.document.createElement("div");
         activeZone.className = "plyr-recommendation-blocker__zone";
-        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);
+        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);
         blocker.appendChild(activeZone);
         wrapper.appendChild(blocker);
         this.recommendationBlocker = blocker;
@@ -351,20 +363,18 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         const blocker = this.document.createElement("div");
         blocker.className = "plyr-top-click-blocker";
-        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);
+        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);
         wrapper.appendChild(blocker);
         this.topClickBlocker = blocker;
         this.updateTopClickBlockerSafeZone();
@@ -372,7 +382,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
     updateTopClickBlockerSafeZone() {
         if (!this.topClickBlocker)
             return;
-        this.topClickBlocker.style.height = `${this.getOverlayGuardHeight()}px`;
+        const height = Math.max(48, Math.ceil(this.getOverlaySafeZone()));
+        this.topClickBlocker.style.height = `${height}px`;
         this.topClickBlocker.style.pointerEvents = this.overlayBlockAll
             ? "auto"
             : "none";
@@ -398,15 +409,9 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         if (typeof navigator === "undefined")
             return false;
         const ua = navigator.userAgent || "";
-        const uaDataPlatform = navigator?.userAgentData?.platform || "";
-        const uaDataBrands = navigator?.userAgentData?.brands || [];
-        const hasIOSBrand = Array.isArray(uaDataBrands)
-            ? uaDataBrands.some((b) => String(b?.brand || "").toLowerCase().includes("ios"))
-            : false;
         const iOS = /iPad|iPhone|iPod/.test(ua);
-        const iPadOS = (navigator.platform === "MacIntel" || uaDataPlatform === "macOS") &&
-            navigator.maxTouchPoints > 1;
-        return iOS || iPadOS || hasIOSBrand;
+        const iPadOS = navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+        return iOS || iPadOS;
     }
     isIOSContext() {
         if (this.isIOSDevice()) {
@@ -490,6 +495,12 @@ ${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.isIOSDevice();
+    }
     shouldResetProgressToBeginning() {
         const host = this.config?.video_host;
         if (host !== "youtube") {
@@ -577,53 +588,32 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         this.liveInteractionBlocker = null;
     }
-    isLivePlayback() {
-        return !!this.config?.is_live;
-    }
-    getAutoplayConfig() {
-        const isLive = this.isLivePlayback();
-        const enabled = isLive;
-        const startMuted = enabled;
-        const blockIframe = !isLive;
-        this.autoplayConfig = { enabled, startMuted, blockIframe };
-        return this.autoplayConfig;
+    wantsAutoplay() {
+        return !!(this.config?.autoplay || this.config?.is_live);
     }
-    enforceInitialPause(autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
-        if (autoplayConfig.enabled)
-            return;
-        const media = this.videoRef?.nativeElement ?? null;
-        if (media) {
-            try {
-                media.autoplay = false;
-                media.pause();
-            }
-            catch { }
+    shouldAutoplay() {
+        if (this.config?.is_live) {
+            return true;
         }
-        if (this.plyr) {
-            try {
-                this.plyr.autoplay = false;
-                this.plyr.pause();
-            }
-            catch { }
+        if (this.shouldDisableAutoplayForIOS()) {
+            return false;
         }
-        const embed = this.plyr?.embed;
-        if (embed) {
-            try {
-                if (typeof embed.pause === "function") {
-                    embed.pause();
-                }
-            }
-            catch { }
-            try {
-                if (typeof embed.setMuted === "function") {
-                    embed.setMuted(false);
-                }
-            }
-            catch { }
+        return this.wantsAutoplay();
+    }
+    requiresMutedAutoplay() {
+        if (this.config?.is_live && this.isIOSDevice()) {
+            return true;
         }
+        if (!this.isIOSDevice() || this.shouldDisableAutoplayForIOS()) {
+            return false;
+        }
+        return this.wantsAutoplay();
+    }
+    shouldBlockIframeAutoplay() {
+        return this.shouldDisableAutoplayForIOS();
     }
-    stopRestrictedIframeAutoplay(autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
-        if (!autoplayConfig.blockIframe) {
+    stopRestrictedIframeAutoplay() {
+        if (!this.shouldBlockIframeAutoplay()) {
             return;
         }
         this.clearAutoplayUnlockListener();
@@ -702,8 +692,7 @@ ${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 autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig();
-        const shouldForceUnmute = !autoplayConfig.enabled;
+        const shouldForceUnmute = !this.shouldAutoplay();
         try {
             if (media) {
                 media.muted = true;
@@ -743,11 +732,10 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             this.interactionUnmuteCleanup = undefined;
         }
     }
-    ensureAutoplayUnlockListener(autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
-        if (typeof window === "undefined" || this.interactionUnmuteCleanup) {
-            return;
-        }
-        if (!autoplayConfig.enabled) {
+    ensureAutoplayUnlockListener() {
+        if (typeof window === "undefined" ||
+            this.interactionUnmuteCleanup ||
+            !this.shouldAutoplay()) {
             return;
         }
         const capture = true;
@@ -755,7 +743,6 @@ ${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();
@@ -771,7 +758,6 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         };
     }
     ensureIframeAutoplayPermissions() {
-        // Só ajusta permissões quando há iframe (ex.: YouTube)
         if (!this.isIframeProvider()) {
             return;
         }
@@ -781,11 +767,19 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         const iframe = container.querySelector("iframe") ?? null;
         if (!iframe)
             return;
-        // Define somente o necessário para evitar avisos de Permissions Policy
-        const allowValue = ["autoplay", "fullscreen", "picture-in-picture"]
-            .map((rule) => `${rule}`)
-            .join("; ");
-        iframe.setAttribute("allow", allowValue);
+        const allowRaw = iframe.getAttribute("allow") || "";
+        const tokens = new Set(allowRaw
+            .split(";")
+            .map((token) => token.trim())
+            .filter(Boolean));
+        [
+            "autoplay",
+            "fullscreen",
+            "encrypted-media",
+            "picture-in-picture",
+            "gyroscope",
+        ].forEach((rule) => tokens.add(rule));
+        iframe.setAttribute("allow", Array.from(tokens).join("; "));
         if (this.config.video_host === "youtube") {
             iframe.setAttribute("playsinline", "1");
             iframe.setAttribute("webkit-playsinline", "1");
@@ -793,11 +787,9 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         iframe.setAttribute("allowfullscreen", "true");
         iframe.setAttribute("data-keepplaying", "true");
     }
-    scheduleUserInteractionUnmute(video, autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
-        if (!autoplayConfig.enabled)
-            return;
-        this.unmuteAfterDelay(video || undefined, undefined, 1, autoplayConfig);
-        this.ensureAutoplayUnlockListener(autoplayConfig);
+    scheduleUserInteractionUnmute(video) {
+        this.unmuteAfterDelay(video || undefined);
+        this.ensureAutoplayUnlockListener();
     }
     requestStartTimeSeek(start, opts = {}) {
         if (!(start > 0)) {
@@ -909,8 +901,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         return null;
     }
-    startAutoplayFlow(video, autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
-        if (!autoplayConfig.enabled || !this.plyr)
+    startAutoplayFlow(video) {
+        if (!this.shouldAutoplay() || !this.plyr)
             return;
         if (this.deferUntilStartTimeSettles(() => this.startAutoplayFlow(video))) {
             return;
@@ -921,7 +913,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             let playResult;
             try {
                 playResult = this.plyr.play();
-                this.forceIframeAutoplayFallback(autoplayConfig);
+                this.forceIframeAutoplayFallback();
             }
             catch (error) {
                 if (!muted) {
@@ -937,7 +929,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
                     }
                     catch { }
                 }
-                this.scheduleUserInteractionUnmute(media, autoplayConfig);
+                this.scheduleUserInteractionUnmute(media);
                 return;
             }
             if (playResult &&
@@ -956,26 +948,26 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
                         }
                         catch { }
                     }
-                    this.scheduleUserInteractionUnmute(media, autoplayConfig);
+                    this.scheduleUserInteractionUnmute(media);
                 });
                 return;
             }
             if (muted) {
-                this.scheduleUserInteractionUnmute(media, autoplayConfig);
+                this.scheduleUserInteractionUnmute(media);
             }
             else {
                 this.clearAutoplayUnlockListener();
             }
         };
-        if (autoplayConfig.startMuted) {
+        if (this.requiresMutedAutoplay()) {
             tryPlay(true);
         }
         else {
             tryPlay(false);
         }
     }
-    forceIframeAutoplayFallback(autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
-        if (!this.isLivePlayback()) {
+    forceIframeAutoplayFallback() {
+        if (!this.shouldAutoplay() || !this.isIframeProvider()) {
             return;
         }
         const embed = this.plyr?.embed;
@@ -997,79 +989,71 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             return;
         }
         if (this.isTouchDevice()) {
-            this.controlsVisibilityCleanup =
-                this.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);
+            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();
             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;
@@ -1107,7 +1091,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         container.addEventListener("focusin", onFocusIn);
         container.addEventListener("focusout", onFocusOut);
         toggleClass();
-        return () => {
+        this.controlsVisibilityCleanup = () => {
             this.plyr?.off?.("play", onPlay);
             this.plyr?.off?.("pause", onPause);
             this.plyr?.off?.("ended", onEnded);
@@ -1146,8 +1130,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 autoplayConfig = this.getAutoplayConfig();
-        const { enabled: shouldAutoplay, startMuted } = autoplayConfig;
+        const shouldAutoplay = this.shouldAutoplay();
+        const startMuted = this.requiresMutedAutoplay();
         try {
             this.videoRef.nativeElement.muted = startMuted;
         }
@@ -1161,7 +1145,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             this.videoRef.nativeElement.autoplay = shouldAutoplay;
         }
         catch { }
-        const isLive = this.isLivePlayback();
+        const isLive = !!this.config?.is_live;
         const youtubePlayerVars = {
             rel: 0,
             modestbranding: 1,
@@ -1224,7 +1208,6 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             plyrOptions.youtube = youtubePlayerVars;
         }
         this.plyr = new Plyr.default(this.videoRef.nativeElement, plyrOptions);
-        this.enforceInitialPause(autoplayConfig);
         if (typeof this.plyr?.toggleControls === "function") {
             this.plyr.toggleControls(!isLive);
         }
@@ -1240,13 +1223,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, autoplayConfig).then(() => {
+        this.loadSource(this.videoRef.nativeElement).then(() => {
             this.setupStartTime();
         });
+        // Dispara o evento ready quando o player estiver pronto
         this.plyr.on("ready", () => {
-            if (isLive) {
-                this.ensureIframeAutoplayPermissions();
-            }
+            this.ensureIframeAutoplayPermissions();
+            this.stopRestrictedIframeAutoplay();
             this.ready.emit();
         });
     }
@@ -1338,8 +1321,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             this.toggleRecommendationBlocker(true);
         });
     }
-    unmuteAfterDelay(video, delayMs = 2000, volume = 1, autoplayConfig = this.autoplayConfig ?? this.getAutoplayConfig()) {
-        if (!autoplayConfig.enabled)
+    unmuteAfterDelay(video, delayMs = 2000, volume = 1) {
+        if (!this.shouldAutoplay())
             return;
         setTimeout(() => {
             try {
@@ -1380,7 +1363,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             catch { }
         }
     }
-    loadSource(video, autoplayConfig) {
+    loadSource(video) {
         return new Promise((resolve) => {
             if (!this.config) {
                 return resolve();
@@ -1390,125 +1373,118 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
                 this.hls = undefined;
             }
             this.resetPlaybackRate(video);
-            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();
+            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();
+                    }
+                    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 }] };
+                }
             }
             resolve();
         });
     }
-    loadYoutubeSource(autoplayConfig) {
-        const onReady = () => {
-            this.plyr.off("ready", onReady);
-            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.ensureIframeAutoplayPermissions();
-                this.applyStartTimeFromConfig(this.plyr.duration);
-                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;
@@ -1558,11 +1534,6 @@ ${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), "*");
     }
@@ -1608,8 +1579,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         if (this.recommendationBlockerActiveZone) {
             try {
-                this.recommendationBlockerActiveZone.removeEventListener("pointerdown", this.consumeEvent);
-                this.recommendationBlockerActiveZone.removeEventListener("click", this.consumeEvent);
+                this.recommendationBlockerActiveZone.removeEventListener("pointerdown", this.onTopBlockerPointerDown);
+                this.recommendationBlockerActiveZone.removeEventListener("click", this.onRecommendationBlockerClick);
             }
             catch { }
         }
@@ -1617,8 +1588,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         this.recommendationBlockerActiveZone = null;
         if (this.topClickBlocker?.parentElement) {
             try {
-                this.topClickBlocker.removeEventListener("pointerdown", this.consumeEvent);
-                this.topClickBlocker.removeEventListener("click", this.consumeEvent);
+                this.topClickBlocker.removeEventListener("pointerdown", this.onTopBlockerPointerDown);
+                this.topClickBlocker.removeEventListener("click", this.onTopBlockerClick);
                 this.topClickBlocker.parentElement.removeChild(this.topClickBlocker);
             }
             catch { }