@edm-webplayer/webplayer-angular 0.1.31 → 0.1.33

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

@@ -78,12 +78,19 @@ class PlyrPlayerComponent {
     recommendationBlocker;
     recommendationBlockerActiveZone;
     topClickBlocker;
+    gestureOverlay;
     menuObserver;
     playbackEnded = false;
     overlayBlockAll = false;
     endedPosterOverlay;
     fullscreenCleanup;
-    onResize = () => this.updateRecommendationBlockerSafeZone();
+    interactionUnmuteCleanup;
+    pendingStartTime;
+    pendingGesturePlay = false;
+    onResize = () => {
+        this.updateRecommendationBlockerSafeZone();
+        this.updateGestureOverlaySafeZone();
+    };
     onTopBlockerPointerDown = (event) => {
         try {
             event.preventDefault();
@@ -119,6 +126,30 @@ class PlyrPlayerComponent {
             this.applyTheme(this.config.ui.colors);
         }
     }
+    flushPendingStartTime(target, success) {
+        const pending = this.pendingStartTime;
+        if (!pending) {
+            return;
+        }
+        const tolerance = 0.35;
+        if (Math.abs(pending.value - target) > tolerance) {
+            return;
+        }
+        const callbacks = pending.queue.slice();
+        pending.queue.length = 0;
+        if (success) {
+            this.pendingStartTime = undefined;
+        }
+        else {
+            pending.blockPlayback = false;
+        }
+        callbacks.forEach((cb) => {
+            try {
+                cb();
+            }
+            catch { }
+        });
+    }
     getControlsSafeZone() {
         const controls = (this.plyr?.elements?.controls ?? null);
         const menuHeight = this.getOpenMenuHeight();
@@ -143,7 +174,9 @@ class PlyrPlayerComponent {
         const host = this.config?.video_host;
         if (this.overlayBlockAll &&
             (host === 'youtube' || host === 'vimeo')) {
-            return 0;
+            if (this.playbackEnded) {
+                return 0;
+            }
         }
         return this.getControlsSafeZone();
     }
@@ -340,13 +373,12 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
         this.updateTopClickBlockerSafeZone();
     }
     updateRecommendationBlockerSafeZone() {
-        if (!this.recommendationBlockerActiveZone && !this.topClickBlocker)
-            return;
-        const safeZone = this.getOverlaySafeZone();
+        const overlaySafeZone = this.getOverlaySafeZone();
         if (this.recommendationBlockerActiveZone) {
-            this.recommendationBlockerActiveZone.style.bottom = `${safeZone}px`;
+            this.recommendationBlockerActiveZone.style.bottom = `${overlaySafeZone}px`;
         }
-        this.updateTopClickBlockerSafeZone(safeZone);
+        this.updateTopClickBlockerSafeZone(overlaySafeZone);
+        this.updateGestureOverlaySafeZone(this.getControlsSafeZone());
     }
     updateTopClickBlockerSafeZone(precomputed) {
         if (!this.topClickBlocker)
@@ -355,6 +387,13 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
         const safeZone = Math.max(0, safeZoneRaw);
         this.topClickBlocker.style.bottom = `${safeZone}px`;
     }
+    updateGestureOverlaySafeZone(precomputed) {
+        if (!this.gestureOverlay)
+            return;
+        const safeZoneRaw = typeof precomputed === 'number' ? precomputed : this.getControlsSafeZone();
+        const safeZone = Math.max(0, safeZoneRaw);
+        this.gestureOverlay.style.bottom = `${safeZone}px`;
+    }
     togglePlayback(force) {
         if (!this.plyr)
             return;
@@ -372,6 +411,9 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
         }
         const shouldPlay = typeof force === 'boolean' ? !!force : !this.plyr.playing;
         if (shouldPlay) {
+            if (this.deferUntilStartTimeSettles(() => this.togglePlayback(true))) {
+                return;
+            }
             if (ended) {
                 try {
                     if (typeof this.plyr.restart === 'function') {
@@ -386,6 +428,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
             this.playbackEnded = false;
             this.overlayBlockAll = false;
             this.updateRecommendationBlockerSafeZone();
+            this.hideGestureOverlay();
             try {
                 const result = this.plyr.play?.();
                 if (result && typeof result.catch === 'function') {
@@ -477,6 +520,380 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
         }
         return 'ontouchstart' in window;
     }
+    isIframeProvider() {
+        return this.config?.video_host === 'youtube' || this.config?.video_host === 'vimeo';
+    }
+    shouldAutoplay() {
+        return !!(this.config?.autoplay || this.config?.is_live);
+    }
+    requiresMutedAutoplay() {
+        return this.isIOSDevice();
+    }
+    setPlayerMutedState(muted, volume = 1, target) {
+        if (this.plyr) {
+            try {
+                this.plyr.muted = muted;
+            }
+            catch { }
+            if (!muted) {
+                try {
+                    this.plyr.volume = volume;
+                }
+                catch { }
+            }
+        }
+        const media = target ?? this.videoRef?.nativeElement ?? null;
+        if (media) {
+            try {
+                media.muted = muted;
+            }
+            catch { }
+            if (!muted && typeof media.volume === 'number') {
+                try {
+                    media.volume = volume;
+                }
+                catch { }
+            }
+        }
+    }
+    clearAutoplayUnlockListener() {
+        if (this.interactionUnmuteCleanup) {
+            try {
+                this.interactionUnmuteCleanup();
+            }
+            catch { }
+            this.interactionUnmuteCleanup = undefined;
+        }
+    }
+    ensureAutoplayUnlockListener() {
+        if (typeof window === 'undefined' ||
+            this.interactionUnmuteCleanup ||
+            !this.shouldAutoplay()) {
+            return;
+        }
+        const capture = true;
+        const handler = () => {
+            this.setPlayerMutedState(false);
+            try {
+                this.plyr?.play();
+            }
+            catch { }
+            this.clearAutoplayUnlockListener();
+        };
+        window.addEventListener('touchend', handler, capture);
+        window.addEventListener('pointerup', handler, capture);
+        window.addEventListener('click', handler, capture);
+        this.interactionUnmuteCleanup = () => {
+            window.removeEventListener('touchend', handler, capture);
+            window.removeEventListener('pointerup', handler, capture);
+            window.removeEventListener('click', handler, capture);
+            this.interactionUnmuteCleanup = undefined;
+        };
+    }
+    scheduleUserInteractionUnmute(video) {
+        this.unmuteAfterDelay(video || undefined);
+        this.ensureAutoplayUnlockListener();
+    }
+    requestStartTimeSeek(start, opts = {}) {
+        if (!(start > 0)) {
+            this.pendingStartTime = undefined;
+            return;
+        }
+        const video = opts.video ?? this.videoRef?.nativeElement ?? null;
+        const normalized = Math.max(0, start);
+        const tolerance = 0.35;
+        const pending = this.pendingStartTime;
+        if (pending && Math.abs(pending.value - normalized) <= tolerance) {
+            pending.video = video ?? pending.video;
+            pending.blockPlayback = true;
+        }
+        else {
+            const carryQueue = this.pendingStartTime?.queue ?? [];
+            this.pendingStartTime = {
+                value: normalized,
+                video,
+                queue: carryQueue,
+                blockPlayback: true,
+            };
+        }
+        this.applyStartTimeToCurrentSource(normalized, { video });
+    }
+    deferUntilStartTimeSettles(callback) {
+        if (!this.pendingStartTime || !this.pendingStartTime.blockPlayback)
+            return false;
+        this.pendingStartTime.queue.push(callback);
+        return true;
+    }
+    retryPendingStartTime() {
+        if (!this.pendingStartTime) {
+            return;
+        }
+        const { value, video } = this.pendingStartTime;
+        this.applyStartTimeToCurrentSource(value, {
+            video: video ?? this.videoRef?.nativeElement ?? null,
+            attempts: 3,
+            delayMs: 150,
+        });
+    }
+    applyStartTimeToCurrentSource(start, opts = {}) {
+        if (!this.plyr || !(start > 0)) {
+            return;
+        }
+        const video = opts.video ?? this.videoRef?.nativeElement ?? null;
+        let attempts = Math.max(1, opts.attempts ?? 6);
+        const delayMs = opts.delayMs ?? 250;
+        const tolerance = 0.35;
+        const scheduleRetry = () => {
+            attempts -= 1;
+            if (attempts > 0) {
+                setTimeout(trySeek, delayMs);
+                return;
+            }
+            this.flushPendingStartTime(start, false);
+        };
+        const verifyAfterAttempt = () => {
+            const current = this.plyr?.currentTime || 0;
+            if (Math.abs(current - start) <= tolerance) {
+                attempts = 0;
+                this.flushPendingStartTime(start, true);
+                return;
+            }
+            scheduleRetry();
+        };
+        const trySeek = () => {
+            if (!this.plyr)
+                return;
+            let maybePromise = null;
+            try {
+                const result = this.seekUsingHostAPI(start, video);
+                if (result && typeof result.then === 'function') {
+                    maybePromise = result;
+                }
+            }
+            catch {
+                scheduleRetry();
+                return;
+            }
+            if (maybePromise) {
+                maybePromise
+                    .then(() => verifyAfterAttempt())
+                    .catch(() => scheduleRetry());
+                return;
+            }
+            verifyAfterAttempt();
+        };
+        trySeek();
+    }
+    seekUsingHostAPI(target, video) {
+        if (!Number.isFinite(target) || target < 0) {
+            return null;
+        }
+        if (this.config.video_host === 'vimeo') {
+            const embed = this.plyr?.embed;
+            if (embed && typeof embed.setCurrentTime === 'function') {
+                try {
+                    return embed.setCurrentTime(target);
+                }
+                catch {
+                    return null;
+                }
+            }
+        }
+        if (video) {
+            try {
+                video.currentTime = target;
+            }
+            catch { }
+        }
+        try {
+            this.plyr.currentTime = target;
+        }
+        catch { }
+        return null;
+    }
+    ensureGestureOverlay() {
+        if (this.gestureOverlay && this.gestureOverlay.isConnected) {
+            return this.gestureOverlay;
+        }
+        const wrapper = this.getVideoWrapper();
+        if (!wrapper) {
+            return null;
+        }
+        const overlay = this.document.createElement('button');
+        overlay.type = 'button';
+        overlay.className = 'plyr-gesture-overlay';
+        overlay.style.position = 'absolute';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.right = '0';
+        overlay.style.bottom = '0';
+        overlay.style.width = '100%';
+        overlay.style.height = '100%';
+        overlay.style.display = 'none';
+        overlay.style.alignItems = 'center';
+        overlay.style.justifyContent = 'center';
+        overlay.style.padding = '0 16px';
+        overlay.style.background = 'rgba(0,0,0,0.35)';
+        overlay.style.backdropFilter = 'blur(1px)';
+        overlay.style.border = '0';
+        overlay.style.zIndex = '16';
+        overlay.style.color = 'var(--theme-text-color, #fff)';
+        overlay.style.fontSize = '14px';
+        overlay.style.fontWeight = '600';
+        overlay.style.textAlign = 'center';
+        overlay.style.cursor = 'pointer';
+        overlay.style.touchAction = 'manipulation';
+        overlay.style.pointerEvents = 'none';
+        overlay.textContent = 'Toque para reproduzir';
+        wrapper.appendChild(overlay);
+        this.gestureOverlay = overlay;
+        this.updateGestureOverlaySafeZone();
+        return overlay;
+    }
+    hideGestureOverlay() {
+        if (this.gestureOverlay) {
+            this.gestureOverlay.style.display = 'none';
+            this.gestureOverlay.style.pointerEvents = 'none';
+        }
+        this.pendingGesturePlay = false;
+    }
+    requestGestureToPlay(video) {
+        if (!this.isIframeProvider()) {
+            return;
+        }
+        if (this.pendingGesturePlay) {
+            return;
+        }
+        const overlay = this.ensureGestureOverlay();
+        if (!overlay) {
+            return;
+        }
+        this.pendingGesturePlay = true;
+        const media = video ?? this.videoRef?.nativeElement ?? null;
+        const onInteraction = (event) => {
+            try {
+                event.preventDefault();
+            }
+            catch { }
+            try {
+                event.stopPropagation();
+            }
+            catch { }
+            overlay.removeEventListener('click', onInteraction);
+            overlay.removeEventListener('touchend', onInteraction);
+            overlay.style.display = 'none';
+            this.pendingGesturePlay = false;
+            this.clearAutoplayUnlockListener();
+            this.setPlayerMutedState(this.requiresMutedAutoplay(), 1, media);
+            try {
+                const result = this.plyr?.play();
+                if (result && typeof result.catch === 'function') {
+                    result.catch(() => {
+                        this.requestGestureToPlay(media);
+                    });
+                }
+            }
+            catch {
+                this.requestGestureToPlay(media);
+            }
+        };
+        overlay.addEventListener('click', onInteraction, { once: true });
+        overlay.addEventListener('touchend', onInteraction, { once: true });
+        this.updateGestureOverlaySafeZone();
+        overlay.style.pointerEvents = 'auto';
+        overlay.style.display = 'flex';
+    }
+    shouldShowGestureOverlayForError(error) {
+        if (!this.isIframeProvider()) {
+            return false;
+        }
+        if (!error) {
+            return true;
+        }
+        const err = error;
+        const name = typeof err.name === 'string' ? err.name.toLowerCase() : '';
+        const message = typeof err.message === 'string' ? err.message.toLowerCase() : '';
+        if (!name && !message) {
+            return true;
+        }
+        return (name.includes('notallowed') ||
+            name.includes('notallowederror') ||
+            name.includes('gesture') ||
+            message.includes('gesture') ||
+            message.includes('user interaction') ||
+            message.includes('user activation') ||
+            message.includes('without user') ||
+            message.includes('play() failed'));
+    }
+    startAutoplayFlow(video) {
+        if (!this.shouldAutoplay() || !this.plyr)
+            return;
+        if (this.deferUntilStartTimeSettles(() => this.startAutoplayFlow(video))) {
+            return;
+        }
+        const media = video ?? this.videoRef?.nativeElement ?? null;
+        const tryPlay = (muted) => {
+            this.setPlayerMutedState(muted, 1, media);
+            let playResult;
+            try {
+                playResult = this.plyr.play();
+            }
+            catch (error) {
+                if (!muted) {
+                    tryPlay(true);
+                    return;
+                }
+                if (media) {
+                    try {
+                        const nativePlay = media.play();
+                        if (nativePlay && typeof nativePlay.catch === 'function') {
+                            nativePlay.catch(() => { });
+                        }
+                    }
+                    catch { }
+                }
+                this.scheduleUserInteractionUnmute(media);
+                if (this.shouldShowGestureOverlayForError(error)) {
+                    this.requestGestureToPlay(media);
+                }
+                return;
+            }
+            if (playResult && typeof playResult.catch === 'function') {
+                playResult.catch((error) => {
+                    if (!muted) {
+                        tryPlay(true);
+                        return;
+                    }
+                    if (media) {
+                        try {
+                            const nativePlay = media.play();
+                            if (nativePlay && typeof nativePlay.catch === 'function') {
+                                nativePlay.catch(() => { });
+                            }
+                        }
+                        catch { }
+                    }
+                    this.scheduleUserInteractionUnmute(media);
+                    if (this.shouldShowGestureOverlayForError(error)) {
+                        this.requestGestureToPlay(media);
+                    }
+                });
+                return;
+            }
+            if (muted) {
+                this.scheduleUserInteractionUnmute(media);
+            }
+            else {
+                this.clearAutoplayUnlockListener();
+            }
+        };
+        if (this.requiresMutedAutoplay()) {
+            tryPlay(true);
+        }
+        else {
+            tryPlay(false);
+        }
+    }
     setupControlsVisibility() {
         const container = this.plyr?.elements?.container;
         if (!container) {
@@ -632,11 +1049,13 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
             orientationLocked = false;
         };
         const onEnterFullscreen = () => {
+            console.log('event: enterfullscreen');
             if (isPortrait()) {
                 lockLandscape();
             }
         };
         const onExitFullscreen = () => {
+            console.log('event: exitfullscreen');
             unlockOrientation();
         };
         const onOrientationChange = () => {
@@ -663,12 +1082,28 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
         this.fullscreenCleanup?.();
         this.fullscreenCleanup = undefined;
         this.plyr?.destroy();
+        this.clearAutoplayUnlockListener();
+        this.hideGestureOverlay();
         this.recommendationBlocker = null;
         const speedOptions = [1, 1.25, 1.5, 2];
         const locale = this.resolveLocale();
         const captionsLanguage = this.resolveCaptionsLanguage(locale) ?? 'pt';
         const hideVimeoRecommendations = this.shouldHideVimeoRecommendations();
         const vimeoPremium = Boolean(this.config?.vimeo_premium);
+        const shouldAutoplay = this.shouldAutoplay();
+        const startMuted = this.requiresMutedAutoplay();
+        try {
+            this.videoRef.nativeElement.muted = startMuted;
+        }
+        catch { }
+        try {
+            this.videoRef.nativeElement.playsInline = true;
+        }
+        catch { }
+        try {
+            this.videoRef.nativeElement.autoplay = shouldAutoplay;
+        }
+        catch { }
         const vimeoOptions = {
             byline: false,
             portrait: false,
@@ -680,6 +1115,9 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
             quality: "auto",
             transparent: false,
         };
+        vimeoOptions.autoplay = shouldAutoplay;
+        vimeoOptions.muted = startMuted;
+        vimeoOptions.playsinline = true;
         if (hideVimeoRecommendations) {
             vimeoOptions.controls = false;
             vimeoOptions.sidedock = 0;
@@ -695,6 +1133,9 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
         youtubePlayerVars.playerVars = {
             hl: locale,
             cc_lang_pref: captionsLanguage || locale.split('-')[0]?.toLowerCase(),
+            autoplay: shouldAutoplay ? 1 : 0,
+            mute: startMuted ? 1 : 0,
+            playsinline: 1,
         };
         if (captionsLanguage) {
             youtubePlayerVars.playerVars.cc_load_policy = 1;
@@ -732,7 +1173,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
             clickToPlay: true,
             hideControls: false,
             keyboard: { focused: true, global: false },
-            muted: false,
+            autoplay: shouldAutoplay,
+            muted: startMuted,
         };
         plyrOptions.hl = locale;
         if (captionsLanguage) {
@@ -760,8 +1202,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
         const apply = () => {
             const dur = this.plyr.duration || 0;
             const start = this.resolveStartTime(this.config.last_time, this.config.last_percent, dur);
-            if (start > 0)
-                this.plyr.currentTime = start;
+            this.requestStartTimeSeek(start);
             this.plyr.off("ready", apply);
         };
         this.plyr.on("ready", apply);
@@ -790,12 +1231,15 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
             });
         };
         this.plyr?.on?.("play", () => {
+            this.retryPendingStartTime();
+            this.hideGestureOverlay();
             this.clearVimeoEndedState();
             this.playbackEnded = false;
             this.overlayBlockAll = false;
             this.updateRecommendationBlockerSafeZone();
             this.toggleRecommendationBlocker(false);
             parent.postMessage('playing_video', "*");
+            console.log('event: playing_video');
             this.postCastEvent({ event: 'play', currentTime: this.plyr.currentTime || 0 });
         });
         this.plyr?.on?.("timeupdate", onTimeUpdate);
@@ -813,6 +1257,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
             this.playbackEnded = true;
             this.overlayBlockAll = true;
             this.updateRecommendationBlockerSafeZone();
+            console.log('event: ended');
             parent.postMessage('event: ended', "*");
             this.postCastEvent({ event: 'ended', currentTime: this.plyr.currentTime || 0 });
             this.progressService.ended$.next();
@@ -821,7 +1266,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
         });
     }
     unmuteAfterDelay(video, delayMs = 2000, volume = 1) {
-        if (!this.config.autoplay)
+        if (!this.shouldAutoplay())
             return;
         setTimeout(() => {
             try {
@@ -876,13 +1321,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
                 const onReady = () => {
                     this.plyr.off("ready", onReady);
                     const start = this.resolveStartTime(this.config.last_time, this.config.last_percent, this.plyr.duration);
-                    if (start > 0)
-                        this.plyr.currentTime = start;
-                    if (this.config.autoplay || this.config.is_live) {
-                        setTimeout(() => {
-                            this.plyr.play();
-                        }, 1500);
-                    }
+                    this.requestStartTimeSeek(start);
+                    this.startAutoplayFlow();
                     parent.postMessage('playerIsReadyToPlay', "*");
                     parent.postMessage('duration:' + this.plyr.duration, "*");
                     console.log('event: current_time ' + this.plyr.currentTime);
@@ -944,35 +1384,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
                     const onLoadedMeta = () => {
                         const dur = this.plyr.duration || video.duration || 0;
                         const start = this.resolveStartTime(this.config.last_time, this.config.last_percent, dur);
-                        if (start > 0) {
-                            try {
-                                this.plyr.currentTime = start;
-                            }
-                            catch {
-                                try {
-                                    video.currentTime = start;
-                                }
-                                catch { }
-                            }
-                        }
-                        if (this.config.autoplay) {
-                            try {
-                                video.muted = true;
-                            }
-                            catch { }
-                            setTimeout(() => {
-                                try {
-                                    this.plyr.play();
-                                }
-                                catch {
-                                    try {
-                                        video.play();
-                                    }
-                                    catch { }
-                                }
-                                this.unmuteAfterDelay(video);
-                            }, 250);
-                        }
+                        this.requestStartTimeSeek(start, { video });
+                        this.startAutoplayFlow(video);
                         video.removeEventListener("loadedmetadata", onLoadedMeta);
                     };
                     video.addEventListener("loadedmetadata", onLoadedMeta);
@@ -986,17 +1399,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
                     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);
-                        if (start > 0) {
-                            try {
-                                video.currentTime = start;
-                            }
-                            catch { }
-                        }
-                        if (this.config.autoplay) {
-                            video.muted = true;
-                            video.play().catch(() => { });
-                            this.unmuteAfterDelay(video);
-                        }
+                        this.requestStartTimeSeek(start, { video });
+                        this.startAutoplayFlow(video);
                     });
                     this.hls.on(Hls.Events.ERROR, (_evt, data) => {
                         if (data?.fatal) {
@@ -1085,6 +1489,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
         this.hls?.destroy();
         this.controlsVisibilityCleanup?.();
         this.controlsVisibilityCleanup = undefined;
+        this.clearAutoplayUnlockListener();
         const container = this.plyr?.elements?.container;
         container?.classList.remove("plyr--vimeo-ended");
         if (this.recommendationBlocker?.parentElement) {
@@ -1111,6 +1516,14 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
             catch { }
         }
         this.topClickBlocker = null;
+        if (this.gestureOverlay?.parentElement) {
+            try {
+                this.gestureOverlay.parentElement.removeChild(this.gestureOverlay);
+            }
+            catch { }
+        }
+        this.gestureOverlay = null;
+        this.pendingGesturePlay = false;
         this.menuObserver?.disconnect();
         this.menuObserver = undefined;
         window.removeEventListener('resize', this.onResize);