@edm-webplayer/webplayer-angular 0.1.50 → 0.1.52

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

@@ -172,7 +172,7 @@ class PlyrPlayerComponent {
     }
     getOverlaySafeZone() {
         const host = this.config?.video_host;
-        if (this.overlayBlockAll && (host === "youtube" || host === "vimeo")) {
+        if (this.overlayBlockAll && host === "youtube") {
             if (this.playbackEnded) {
                 return 0;
             }
@@ -270,37 +270,6 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         const code = baseLocale.split("-")[0]?.trim();
         return code ? code.toLowerCase() : null;
     }
-    shouldHideVimeoRecommendations() {
-        const flag = this.config?.disable_vimeo_recommendations;
-        return flag !== false;
-    }
-    clearVimeoEndedState() {
-        if (this.config.video_host !== "vimeo")
-            return;
-        const container = this.plyr?.elements?.container;
-        container?.classList.remove("plyr--vimeo-ended");
-        this.toggleRecommendationBlocker(false);
-    }
-    preventVimeoRecommendations() {
-        if (this.config.video_host !== "vimeo")
-            return;
-        if (!this.shouldHideVimeoRecommendations())
-            return;
-        try {
-            this.plyr?.stop();
-        }
-        catch { }
-        const embed = this.plyr?.embed;
-        if (embed && typeof embed.unload === "function") {
-            try {
-                embed.unload().catch(() => { });
-            }
-            catch { }
-        }
-        const container = this.plyr?.elements?.container;
-        container?.classList.add("plyr--vimeo-ended");
-        this.toggleRecommendationBlocker(true);
-    }
     getVideoWrapper() {
         const container = this.plyr?.elements?.container;
         if (!container)
@@ -348,8 +317,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         return blocker;
     }
     toggleRecommendationBlocker(active) {
-        if (this.config.video_host !== "youtube" &&
-            this.config.video_host !== "vimeo") {
+        if (this.config.video_host !== "youtube") {
             return;
         }
         const blocker = this.ensureRecommendationBlocker();
@@ -438,8 +406,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         catch { }
     }
     ensureTopClickBlocker() {
-        if (this.config.video_host !== "youtube" &&
-            this.config.video_host !== "vimeo") {
+        if (this.config.video_host !== "youtube") {
             return;
         }
         const wrapper = this.getVideoWrapper();
@@ -509,19 +476,14 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         return "ontouchstart" in window;
     }
     isIframeProvider() {
-        return (this.config?.video_host === "youtube" ||
-            this.config?.video_host === "vimeo");
+        return this.config?.video_host === "youtube";
     }
     shouldDisableAutoplayForIOS() {
         return this.isIOSDevice();
     }
-    tryEnterVimeoFullscreen() { }
-    shouldDisableAutoplayForVimeo() {
-        return this.isIOSDevice() && this.config?.video_host === "vimeo";
-    }
     shouldResetProgressToBeginning() {
         const host = this.config?.video_host;
-        if (host !== "youtube" && host !== "vimeo") {
+        if (host !== "youtube") {
             return false;
         }
         const seenFlag = this.config?.seen;
@@ -545,8 +507,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         return !!(this.config?.autoplay || this.config?.is_live);
     }
     shouldAutoplay() {
-        if (this.shouldDisableAutoplayForIOS() ||
-            this.shouldDisableAutoplayForVimeo()) {
+        if (this.shouldDisableAutoplayForIOS()) {
             return false;
         }
         return this.wantsAutoplay();
@@ -558,7 +519,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         return this.wantsAutoplay();
     }
     shouldBlockIframeAutoplay() {
-        return (this.shouldDisableAutoplayForIOS() || this.shouldDisableAutoplayForVimeo());
+        return this.shouldDisableAutoplayForIOS();
     }
     stopRestrictedIframeAutoplay() {
         if (!this.shouldBlockIframeAutoplay()) {
@@ -609,34 +570,6 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             catch { }
         }
     }
-    enforceVimeoVolumeAfterPlay(video) {
-        if (this.config?.video_host !== "vimeo") {
-            return;
-        }
-        const media = video ?? this.videoRef?.nativeElement ?? null;
-        const volumeTarget = 1;
-        const attemptRestore = () => {
-            this.setPlayerMutedState(false, volumeTarget, media);
-            const currentEmbed = this.plyr?.embed;
-            if (currentEmbed) {
-                if (typeof currentEmbed.setMuted === "function") {
-                    try {
-                        currentEmbed.setMuted(false);
-                    }
-                    catch { }
-                }
-                if (typeof currentEmbed.setVolume === "function") {
-                    try {
-                        currentEmbed.setVolume(volumeTarget);
-                    }
-                    catch { }
-                }
-            }
-        };
-        [0, 250, 500, 750].forEach((offset) => {
-            setTimeout(attemptRestore, 500 + offset);
-        });
-    }
     setPlayerMutedState(muted, volume = 1, target) {
         if (this.plyr) {
             try {
@@ -826,17 +759,6 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         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;
@@ -929,14 +851,6 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
                 catch { }
             }
         }
-        else if (this.config.video_host === "vimeo") {
-            if (typeof embed.play === "function") {
-                try {
-                    embed.play();
-                }
-                catch { }
-            }
-        }
     }
     setupControlsVisibility() {
         const container = this.plyr?.elements?.container;
@@ -1075,8 +989,6 @@ ${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 hideVimeoRecommendations = this.shouldHideVimeoRecommendations();
-        const vimeoPremium = Boolean(this.config?.vimeo_premium);
         const shouldAutoplay = this.shouldAutoplay();
         const startMuted = this.requiresMutedAutoplay();
         try {
@@ -1207,13 +1119,10 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         };
         this.plyr?.on?.("play", () => {
             this.retryPendingStartTime();
-            this.clearVimeoEndedState();
             this.playbackEnded = false;
             this.overlayBlockAll = false;
             this.updateRecommendationBlockerSafeZone();
             this.toggleRecommendationBlocker(false);
-            this.tryEnterVimeoFullscreen();
-            this.enforceVimeoVolumeAfterPlay();
             parent.postMessage("playing_video", "*");
             this.postCastEvent({
                 event: "play",
@@ -1245,7 +1154,6 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
                 currentTime: this.plyr.currentTime || 0,
             });
             this.progressService.ended$.next();
-            this.preventVimeoRecommendations();
             this.toggleRecommendationBlocker(true);
         });
     }
@@ -1301,8 +1209,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
                 this.hls = undefined;
             }
             this.resetPlaybackRate(video);
-            if (this.config.video_host === "youtube" ||
-                this.config.video_host === "vimeo") {
+            if (this.config.video_host === "youtube") {
                 const onReady = () => {
                     this.plyr.off("ready", onReady);
                     this.ensureIframeAutoplayPermissions();
@@ -1346,12 +1253,6 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
                     sources: [{ src: this.config.video_id, provider: "youtube" }],
                 };
             }
-            else if (this.config.video_host === "vimeo") {
-                this.plyr.source = {
-                    type: "video",
-                    sources: [{ src: this.config.video_id, provider: "vimeo" }],
-                };
-            }
             else if (this.config.video_host === "mp4") {
                 this.plyr.source = {
                     type: "video",
@@ -1505,7 +1406,6 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         this.controlsVisibilityCleanup = undefined;
         this.clearAutoplayUnlockListener();
         const container = this.plyr?.elements?.container;
-        container?.classList.remove("plyr--vimeo-ended");
         if (this.recommendationBlocker?.parentElement) {
             try {
                 this.recommendationBlocker.parentElement.removeChild(this.recommendationBlocker);
@@ -1537,11 +1437,11 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         window.removeEventListener("message", this.onCastMessage);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlyrPlayerComponent, deps: [{ token: WebplayerProgressService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PlyrPlayerComponent, isStandalone: true, selector: "app-plyr-player", inputs: { config: "config" }, outputs: { ready: "ready" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<video #video playsinline></video>`, isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative;--plyr-color-main: var(--theme-alert, #19a6d9);--plyr-color-hover: var(--theme-alert, #2dbbff);--plyr-progress-buffer-background: var( --theme-progress-view-off, rgba(255, 255, 255, .25) );--plyr-control-background: var(--theme-bg, rgba(0, 0, 0, .8));--plyr-control-color: var(--theme-text-color, #fff);--plyr-control-button-color: var(--theme-font-bt, #fff)}:host ::ng-deep .plyr__controls{color:var(--plyr-control-color)!important;transition:opacity .2s ease,transform .2s ease}:host ::ng-deep .plyr__controls button{color:var(--plyr-control-color)!important}:host ::ng-deep .plyr__progress__buffer{background-color:var(--plyr-progress-buffer-background)!important}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{width:100%!important;height:100%!important;aspect-ratio:auto!important;top:0!important;left:0!important}:host ::ng-deep .mirror{transform:scaleX(-1)!important;-webkit-transform:scaleX(-1)!important}:host ::ng-deep .plyr--video .plyr__control.plyr__tab-focus,:host ::ng-deep .plyr--video .plyr__control:hover,:host ::ng-deep .plyr--video .plyr__control[aria-expanded=true]{background:var(--plyr-color-hover)!important;color:var(--plyr-control-button-color)!important}:host ::ng-deep .plyr--full-ui input[type=range]{color:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container{background:var(--plyr-control-background)!important;z-index:7!important}:host ::ng-deep .plyr--auto-hide-controls .plyr__controls{opacity:0!important;pointer-events:none!important;transform:translateY(12px)}:host ::ng-deep .ytp-more-videos-view .ytp-suggestions{pointer-events:none!important}:host ::ng-deep .plyr--vimeo .plyr__video-wrapper.plyr__video-embed{aspect-ratio:16 / 9!important;width:100%!important;height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PlyrPlayerComponent, isStandalone: true, selector: "app-plyr-player", inputs: { config: "config" }, outputs: { ready: "ready" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<video #video playsinline></video>`, isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative;--plyr-color-main: var(--theme-alert, #19a6d9);--plyr-color-hover: var(--theme-alert, #2dbbff);--plyr-progress-buffer-background: var( --theme-progress-view-off, rgba(255, 255, 255, .25) );--plyr-control-background: var(--theme-bg, rgba(0, 0, 0, .8));--plyr-control-color: var(--theme-text-color, #fff);--plyr-control-button-color: var(--theme-font-bt, #fff)}:host ::ng-deep .plyr__controls{color:var(--plyr-control-color)!important;transition:opacity .2s ease,transform .2s ease}:host ::ng-deep .plyr__controls button{color:var(--plyr-control-color)!important}:host ::ng-deep .plyr__progress__buffer{background-color:var(--plyr-progress-buffer-background)!important}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{width:100%!important;height:100%!important;aspect-ratio:auto!important;top:0!important;left:0!important}:host ::ng-deep .mirror{transform:scaleX(-1)!important;-webkit-transform:scaleX(-1)!important}:host ::ng-deep .plyr--video .plyr__control.plyr__tab-focus,:host ::ng-deep .plyr--video .plyr__control:hover,:host ::ng-deep .plyr--video .plyr__control[aria-expanded=true]{background:var(--plyr-color-hover)!important;color:var(--plyr-control-button-color)!important}:host ::ng-deep .plyr--full-ui input[type=range]{color:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container{background:var(--plyr-control-background)!important;z-index:7!important}:host ::ng-deep .plyr--auto-hide-controls .plyr__controls{opacity:0!important;pointer-events:none!important;transform:translateY(12px)}:host ::ng-deep .ytp-more-videos-view .ytp-suggestions{pointer-events:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlyrPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-plyr-player", template: `<video #video playsinline></video>`, standalone: true, imports: [CommonModule], styles: [":host{display:block;width:100%;height:100%;position:relative;--plyr-color-main: var(--theme-alert, #19a6d9);--plyr-color-hover: var(--theme-alert, #2dbbff);--plyr-progress-buffer-background: var( --theme-progress-view-off, rgba(255, 255, 255, .25) );--plyr-control-background: var(--theme-bg, rgba(0, 0, 0, .8));--plyr-control-color: var(--theme-text-color, #fff);--plyr-control-button-color: var(--theme-font-bt, #fff)}:host ::ng-deep .plyr__controls{color:var(--plyr-control-color)!important;transition:opacity .2s ease,transform .2s ease}:host ::ng-deep .plyr__controls button{color:var(--plyr-control-color)!important}:host ::ng-deep .plyr__progress__buffer{background-color:var(--plyr-progress-buffer-background)!important}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{width:100%!important;height:100%!important;aspect-ratio:auto!important;top:0!important;left:0!important}:host ::ng-deep .mirror{transform:scaleX(-1)!important;-webkit-transform:scaleX(-1)!important}:host ::ng-deep .plyr--video .plyr__control.plyr__tab-focus,:host ::ng-deep .plyr--video .plyr__control:hover,:host ::ng-deep .plyr--video .plyr__control[aria-expanded=true]{background:var(--plyr-color-hover)!important;color:var(--plyr-control-button-color)!important}:host ::ng-deep .plyr--full-ui input[type=range]{color:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container{background:var(--plyr-control-background)!important;z-index:7!important}:host ::ng-deep .plyr--auto-hide-controls .plyr__controls{opacity:0!important;pointer-events:none!important;transform:translateY(12px)}:host ::ng-deep .ytp-more-videos-view .ytp-suggestions{pointer-events:none!important}:host ::ng-deep .plyr--vimeo .plyr__video-wrapper.plyr__video-embed{aspect-ratio:16 / 9!important;width:100%!important;height:auto!important}\n"] }]
+            args: [{ selector: "app-plyr-player", template: `<video #video playsinline></video>`, standalone: true, imports: [CommonModule], styles: [":host{display:block;width:100%;height:100%;position:relative;--plyr-color-main: var(--theme-alert, #19a6d9);--plyr-color-hover: var(--theme-alert, #2dbbff);--plyr-progress-buffer-background: var( --theme-progress-view-off, rgba(255, 255, 255, .25) );--plyr-control-background: var(--theme-bg, rgba(0, 0, 0, .8));--plyr-control-color: var(--theme-text-color, #fff);--plyr-control-button-color: var(--theme-font-bt, #fff)}:host ::ng-deep .plyr__controls{color:var(--plyr-control-color)!important;transition:opacity .2s ease,transform .2s ease}:host ::ng-deep .plyr__controls button{color:var(--plyr-control-color)!important}:host ::ng-deep .plyr__progress__buffer{background-color:var(--plyr-progress-buffer-background)!important}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{width:100%!important;height:100%!important;aspect-ratio:auto!important;top:0!important;left:0!important}:host ::ng-deep .mirror{transform:scaleX(-1)!important;-webkit-transform:scaleX(-1)!important}:host ::ng-deep .plyr--video .plyr__control.plyr__tab-focus,:host ::ng-deep .plyr--video .plyr__control:hover,:host ::ng-deep .plyr--video .plyr__control[aria-expanded=true]{background:var(--plyr-color-hover)!important;color:var(--plyr-control-button-color)!important}:host ::ng-deep .plyr--full-ui input[type=range]{color:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container{background:var(--plyr-control-background)!important;z-index:7!important}:host ::ng-deep .plyr--auto-hide-controls .plyr__controls{opacity:0!important;pointer-events:none!important;transform:translateY(12px)}:host ::ng-deep .ytp-more-videos-view .ytp-suggestions{pointer-events:none!important}\n"] }]
         }], ctorParameters: () => [{ type: WebplayerProgressService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -1554,6 +1454,277 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+class VimeoPlayerComponent {
+    progressService;
+    document;
+    config;
+    ready = new EventEmitter();
+    videoRef;
+    plyr;
+    pendingIOSReload = false;
+    pendingStartOverride;
+    resumeAutoplayAfterSetup = false;
+    onCastMessage = (event) => {
+        let data = event.data;
+        if (typeof data === 'string') {
+            try {
+                data = JSON.parse(data);
+            }
+            catch { }
+        }
+        if (data?.action === 'request-iframe-media-metadata') {
+            this.postCastEvent({
+                event: 'metadata',
+                duration: this.plyr?.duration || 0,
+                currentTime: this.plyr?.currentTime || 0,
+            });
+        }
+        if (data?.action === 'play') {
+            this.plyr?.play?.();
+        }
+        if (data?.action === 'pause') {
+            this.plyr?.pause?.();
+        }
+        if (data?.action === 'seek' && typeof data.time === 'number') {
+            this.plyr && (this.plyr.currentTime = data.time);
+        }
+    };
+    constructor(progressService, document) {
+        this.progressService = progressService;
+        this.document = document;
+    }
+    ngOnInit() {
+        this.applyTheme(this.config?.ui?.colors);
+    }
+    ngAfterViewInit() {
+        this.setupPlayer();
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] && this.plyr) {
+            this.setupPlayer();
+        }
+    }
+    setupPlayer() {
+        if (!this.videoRef) {
+            return;
+        }
+        this.plyr?.destroy();
+        const shouldAutoplay = !!(this.config?.autoplay && !this.isIOSDevice());
+        const startMuted = shouldAutoplay;
+        const speedOptions = [1, 1.25, 1.5, 2];
+        const options = {
+            controls: [
+                'play-large',
+                'play',
+                'progress',
+                'current-time',
+                'duration',
+                'mute',
+                'volume',
+                'captions',
+                'settings',
+                'pip',
+                'airplay',
+                'fullscreen',
+            ],
+            clickToPlay: true,
+            autoplay: shouldAutoplay,
+            muted: startMuted,
+            keyboard: { focused: true, global: false },
+            hideControls: false,
+            i18n: {
+                speed: "Velocidade",
+            },
+            speed: {
+                selected: 1,
+                options: speedOptions,
+            },
+            fullscreen: {
+                enabled: true,
+                fallback: true,
+                iosNative: true,
+                container: null,
+            },
+        };
+        options.vimeo = {
+            autopause: true,
+            autoplay: shouldAutoplay,
+            muted: startMuted,
+            playsinline: !this.isIOSDevice(),
+            byline: false,
+            portrait: false,
+            title: false,
+            pip: false,
+            controls: false,
+        };
+        this.plyr = new Plyr.default(this.videoRef.nativeElement, options);
+        this.plyr.source = {
+            type: 'video',
+            sources: [{ src: this.config.video_id, provider: 'vimeo' }],
+        };
+        this.bindEvents();
+    }
+    bindEvents() {
+        if (!this.plyr)
+            return;
+        let durationPosted = false;
+        const onTimeUpdate = () => {
+            const current = this.plyr.currentTime || 0;
+            const duration = this.plyr.duration || 0;
+            if (!durationPosted && duration > 0) {
+                durationPosted = true;
+                console.log('event: duration ' + duration);
+                parent.postMessage('duration:' + duration, '*');
+            }
+            const percent = duration > 0 ? +((current / duration) * 100).toFixed(2) : 0;
+            this.progressService.progress$.next({ currentTime: current, duration, percent });
+        };
+        this.plyr.on('ready', () => {
+            const duration = this.plyr.duration || 0;
+            const override = this.pendingStartOverride;
+            this.pendingStartOverride = undefined;
+            const start = override ??
+                this.resolveStartTime(this.config.last_time, this.config.last_percent, duration);
+            if (start > 0) {
+                this.plyr.currentTime = start;
+            }
+            console.log('event: ready');
+            if (duration > 0) {
+                parent.postMessage('duration:' + duration, '*');
+            }
+            parent.postMessage('playerIsReadyToPlay', '*');
+            this.ready.emit();
+            if (this.resumeAutoplayAfterSetup) {
+                this.resumeAutoplayAfterSetup = false;
+                try {
+                    this.plyr.play?.();
+                }
+                catch { }
+            }
+        });
+        this.plyr.on('timeupdate', onTimeUpdate);
+        this.plyr.on('play', () => {
+            if (this.pendingIOSReload && this.isIOSDevice()) {
+                this.pendingIOSReload = false;
+                this.resumeAutoplayAfterSetup = true;
+                this.pendingStartOverride = this.plyr.currentTime || 0;
+                this.setupPlayer();
+                return;
+            }
+            this.progressService.ended$.next();
+            console.log('event: playing_video');
+            parent.postMessage('playing_video', '*');
+            this.postCastEvent({
+                event: 'play',
+                currentTime: this.plyr.currentTime || 0,
+            });
+            onTimeUpdate();
+        });
+        this.plyr.on('pause', () => {
+            if (this.isIOSDevice()) {
+                this.pendingIOSReload = true;
+            }
+            console.log('event: pause');
+            parent.postMessage('paused_video', '*');
+            this.postCastEvent({
+                event: 'pause',
+                currentTime: this.plyr.currentTime || 0,
+            });
+            onTimeUpdate();
+        });
+        this.plyr.on('ended', () => {
+            console.log('event: ended');
+            parent.postMessage('event: ended', '*');
+            this.postCastEvent({
+                event: 'ended',
+                currentTime: this.plyr.currentTime || 0,
+            });
+            onTimeUpdate();
+            this.progressService.ended$.next();
+        });
+    }
+    resolveStartTime(last_time, last_percent, duration) {
+        const dur = Number(duration) || 0;
+        if (dur <= 0)
+            return 0;
+        if (last_time && Number(last_time) > 0) {
+            return Math.min(Number(last_time), dur - 2);
+        }
+        if (last_percent && Number(last_percent) > 0) {
+            let percent = Number(last_percent);
+            if (percent > 1) {
+                percent = percent / 100;
+            }
+            return Math.min(percent * dur, dur - 2);
+        }
+        return 0;
+    }
+    isIOSDevice() {
+        if (typeof navigator === 'undefined')
+            return false;
+        const ua = navigator.userAgent || '';
+        const iOS = /iPad|iPhone|iPod/.test(ua);
+        const iPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+        return iOS || iPadOS;
+    }
+    ngOnDestroy() {
+        this.plyr?.destroy();
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('message', this.onCastMessage);
+        }
+        this.pendingIOSReload = false;
+        this.pendingStartOverride = undefined;
+        this.resumeAutoplayAfterSetup = false;
+    }
+    postCastEvent(payload) {
+        parent.postMessage(JSON.stringify(payload), '*');
+    }
+    applyTheme(colors) {
+        if (!colors)
+            return;
+        const STYLE_ID = 'webplayer-theme-vars';
+        let styleEl = this.document.getElementById(STYLE_ID);
+        if (!styleEl) {
+            styleEl = this.document.createElement('style');
+            styleEl.id = STYLE_ID;
+            this.document.head.appendChild(styleEl);
+        }
+        const rootStyle = this.document.documentElement.style;
+        const allPairs = [];
+        for (const key in colors) {
+            if (Object.prototype.hasOwnProperty.call(colors, key)) {
+                const cssVarName = `--theme-${key.replace('progresss-', 'progress-')}`;
+                const cssVarValue = String(colors[key]);
+                allPairs.push([cssVarName, cssVarValue]);
+                try {
+                    rootStyle.setProperty(cssVarName, cssVarValue);
+                }
+                catch { }
+            }
+        }
+        const cssRule = `:root{
+${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
+}`;
+        styleEl.textContent = cssRule;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VimeoPlayerComponent, deps: [{ token: WebplayerProgressService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: VimeoPlayerComponent, isStandalone: true, selector: "app-vimeo-player", inputs: { config: "config" }, outputs: { ready: "ready" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<video #video playsinline></video>`, isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative;--plyr-color-main: var(--theme-alert, #19a6d9);--plyr-color-hover: var(--theme-alert, #2dbbff);--plyr-progress-buffer-background: var( --theme-progress-view-off, rgba(255, 255, 255, .25) );--plyr-control-background: var(--theme-bg, rgba(0, 0, 0, .8));--plyr-control-color: var(--theme-text-color, #fff);--plyr-control-button-color: var(--theme-font-bt, #fff)}:host ::ng-deep .plyr__controls{color:var(--plyr-control-color)!important;transition:opacity .2s ease,transform .2s ease}:host ::ng-deep .plyr__controls button{color:var(--plyr-control-color)!important}:host ::ng-deep .plyr__progress__buffer{background-color:var(--plyr-progress-buffer-background)!important}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe{width:100%!important;height:100%!important;top:0!important;left:0!important;background:#000!important}:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{max-height:100%!important;object-fit:contain!important}:host ::ng-deep .plyr--video .plyr__control.plyr__tab-focus,:host ::ng-deep .plyr--video .plyr__control:hover,:host ::ng-deep .plyr--video .plyr__control[aria-expanded=true]{background:var(--plyr-color-hover)!important;color:var(--plyr-control-button-color)!important}:host ::ng-deep .plyr--full-ui input[type=range]{color:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container{background:var(--plyr-control-background)!important;z-index:7!important}:host ::ng-deep .plyr--auto-hide-controls .plyr__controls{opacity:0!important;pointer-events:none!important;transform:translateY(12px)}:host ::ng-deep .ytp-more-videos-view .ytp-suggestions{pointer-events:none!important}:host ::ng-deep .plyr--vimeo .plyr__video-wrapper.plyr__video-embed{aspect-ratio:16 / 9!important;width:100%!important;height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VimeoPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-vimeo-player', standalone: true, imports: [CommonModule], template: `<video #video playsinline></video>`, styles: [":host{display:block;width:100%;height:100%;position:relative;--plyr-color-main: var(--theme-alert, #19a6d9);--plyr-color-hover: var(--theme-alert, #2dbbff);--plyr-progress-buffer-background: var( --theme-progress-view-off, rgba(255, 255, 255, .25) );--plyr-control-background: var(--theme-bg, rgba(0, 0, 0, .8));--plyr-control-color: var(--theme-text-color, #fff);--plyr-control-button-color: var(--theme-font-bt, #fff)}:host ::ng-deep .plyr__controls{color:var(--plyr-control-color)!important;transition:opacity .2s ease,transform .2s ease}:host ::ng-deep .plyr__controls button{color:var(--plyr-control-color)!important}:host ::ng-deep .plyr__progress__buffer{background-color:var(--plyr-progress-buffer-background)!important}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe{width:100%!important;height:100%!important;top:0!important;left:0!important;background:#000!important}:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{max-height:100%!important;object-fit:contain!important}:host ::ng-deep .plyr--video .plyr__control.plyr__tab-focus,:host ::ng-deep .plyr--video .plyr__control:hover,:host ::ng-deep .plyr--video .plyr__control[aria-expanded=true]{background:var(--plyr-color-hover)!important;color:var(--plyr-control-button-color)!important}:host ::ng-deep .plyr--full-ui input[type=range]{color:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container{background:var(--plyr-control-background)!important;z-index:7!important}:host ::ng-deep .plyr--auto-hide-controls .plyr__controls{opacity:0!important;pointer-events:none!important;transform:translateY(12px)}:host ::ng-deep .ytp-more-videos-view .ytp-suggestions{pointer-events:none!important}:host ::ng-deep .plyr--vimeo .plyr__video-wrapper.plyr__video-embed{aspect-ratio:16 / 9!important;width:100%!important;height:auto!important}\n"] }]
+        }], ctorParameters: () => [{ type: WebplayerProgressService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { config: [{
+                type: Input
+            }], ready: [{
+                type: Output
+            }], videoRef: [{
+                type: ViewChild,
+                args: ['video', { static: true }]
+            }] } });
+
 class PandaPlayerComponent {
     elementRef;
     progressService;
@@ -2043,11 +2214,11 @@ class PlayerLoaderComponent {
           [config]="config"
           (ready)="onPlayerReady()"
         ></app-plyr-player>
-        <app-plyr-player
+        <app-vimeo-player
           *ngSwitchCase="'vimeo'"
           [config]="config"
           (ready)="onPlayerReady()"
-        ></app-plyr-player>
+        ></app-vimeo-player>
         <app-panda-player
           *ngSwitchCase="'panda'"
           [config]="config"
@@ -2063,7 +2234,7 @@ class PlayerLoaderComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: PlyrPlayerComponent, selector: "app-plyr-player", inputs: ["config"], outputs: ["ready"] }, { kind: "component", type: PandaPlayerComponent, selector: "app-panda-player", inputs: ["config"], outputs: ["ready"] }, { kind: "component", type: ScaleupPlayerComponent, selector: "app-scaleup-player", inputs: ["config"], outputs: ["ready"] }] });
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: PlyrPlayerComponent, selector: "app-plyr-player", inputs: ["config"], outputs: ["ready"] }, { kind: "component", type: VimeoPlayerComponent, selector: "app-vimeo-player", inputs: ["config"], outputs: ["ready"] }, { kind: "component", type: PandaPlayerComponent, selector: "app-panda-player", inputs: ["config"], outputs: ["ready"] }, { kind: "component", type: ScaleupPlayerComponent, selector: "app-scaleup-player", inputs: ["config"], outputs: ["ready"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlayerLoaderComponent, decorators: [{
             type: Component,
@@ -2085,11 +2256,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
           [config]="config"
           (ready)="onPlayerReady()"
         ></app-plyr-player>
-        <app-plyr-player
+        <app-vimeo-player
           *ngSwitchCase="'vimeo'"
           [config]="config"
           (ready)="onPlayerReady()"
-        ></app-plyr-player>
+        ></app-vimeo-player>
         <app-panda-player
           *ngSwitchCase="'panda'"
           [config]="config"
@@ -2108,6 +2279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
   `, standalone: true, imports: [
                         CommonModule,
                         PlyrPlayerComponent,
+                        VimeoPlayerComponent,
                         PandaPlayerComponent,
                         ScaleupPlayerComponent,
                     ], styles: [":host{display:block;width:100%;height:100%}\n"] }]