@edm-webplayer/webplayer-angular 0.1.57 → 0.1.59

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

@@ -83,6 +83,7 @@ class PlyrPlayerComponent {
     overlayBlockAll = false;
     endedPosterOverlay;
     interactionUnmuteCleanup;
+    endedLoggedOnPause = false;
     pendingStartTime;
     onResize = () => {
         this.updateRecommendationBlockerSafeZone();
@@ -503,6 +504,20 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         return percent >= 0.8;
     }
+    shouldEmitEndedOnPause() {
+        if (!this.isIOSDevice()) {
+            return false;
+        }
+        if (this.endedLoggedOnPause) {
+            return false;
+        }
+        const duration = this.plyr?.duration;
+        if (!Number.isFinite(duration) || !duration || duration <= 0) {
+            return false;
+        }
+        const current = this.plyr?.currentTime || 0;
+        return current / duration >= 0.8;
+    }
     wantsAutoplay() {
         return !!(this.config?.autoplay || this.config?.is_live);
     }
@@ -888,7 +903,8 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             const onPause = () => {
                 clearHideTimeout();
                 showControls();
-                if (this.isIOSDevice()) {
+                if (this.shouldEmitEndedOnPause()) {
+                    this.endedLoggedOnPause = true;
                     console.log("event: ended");
                 }
             };
@@ -1019,21 +1035,23 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         if (captionsLanguage) {
             youtubePlayerVars.playerVars.cc_load_policy = 1;
         }
+        const defaultControls = [
+            "play-large",
+            "play",
+            "progress",
+            "current-time",
+            "duration",
+            "mute",
+            "volume",
+            "captions",
+            "settings",
+            "pip",
+            "airplay",
+            "fullscreen",
+        ];
+        const liveControls = ["play-large", "play", "mute", "airplay", "fullscreen"];
         const plyrOptions = {
-            controls: [
-                "play-large",
-                "play",
-                "progress",
-                "current-time",
-                "duration",
-                "mute",
-                "volume",
-                "captions",
-                "settings",
-                "pip",
-                "airplay",
-                "fullscreen",
-            ],
+            controls: this.config?.is_live ? liveControls : defaultControls,
             fullscreen: {
                 enabled: true,
                 fallback: true,
@@ -1067,6 +1085,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         this.observeMenuChanges();
         this.playbackEnded = false;
         this.overlayBlockAll = false;
+        this.endedLoggedOnPause = false;
         window.removeEventListener("resize", this.onResize);
         window.addEventListener("resize", this.onResize);
         this.bindProgressEvents();
@@ -1147,6 +1166,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             this.playbackEnded = true;
             this.overlayBlockAll = true;
             this.updateRecommendationBlockerSafeZone();
+            this.endedLoggedOnPause = true;
             console.log("event: ended");
             parent.postMessage("event: ended", "*");
             this.postCastEvent({
@@ -1240,7 +1260,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
                     if (this.config.mirror) {
                         setTimeout(() => {
                             document
-                                .querySelector(`.plyr__video-embed iframe`) // eslint-disable-line
+                                .querySelector(`.plyr__video-embed iframe`)
                                 ?.classList.add("mirror");
                         }, 1000);
                     }
@@ -1463,6 +1483,7 @@ class VimeoPlayerComponent {
     plyr;
     startTimeApplied = false;
     pendingStartTime;
+    endedLoggedOnPause = false;
     onCastMessage = (event) => {
         let data = event.data;
         if (typeof data === 'string') {
@@ -1511,6 +1532,7 @@ class VimeoPlayerComponent {
         this.plyr?.destroy();
         this.startTimeApplied = false;
         this.pendingStartTime = undefined;
+        this.endedLoggedOnPause = false;
         this.endedOverlayVisible = false;
         const shouldAutoplay = !!(this.config?.autoplay && !this.isIOSDevice());
         const startMuted = shouldAutoplay;
@@ -1572,23 +1594,9 @@ class VimeoPlayerComponent {
             return;
         let durationPosted = false;
         const onTimeUpdate = () => {
+            this.tryApplyPendingStartTime();
             const current = this.plyr.currentTime || 0;
             const duration = this.plyr.duration || 0;
-            if (!this.startTimeApplied && typeof this.pendingStartTime === 'number') {
-                const diff = Math.abs(current - this.pendingStartTime);
-                const tolerance = 0.35;
-                if (diff > tolerance) {
-                    try {
-                        this.plyr.currentTime = this.pendingStartTime;
-                    }
-                    catch { }
-                    return;
-                }
-                else {
-                    this.startTimeApplied = true;
-                    this.pendingStartTime = undefined;
-                }
-            }
             if (!durationPosted && duration > 0) {
                 durationPosted = true;
                 console.log('event: duration ' + duration);
@@ -1613,10 +1621,17 @@ class VimeoPlayerComponent {
                 parent.postMessage('duration:' + duration, '*');
             }
             parent.postMessage('playerIsReadyToPlay', '*');
+            this.postCastEvent({
+                event: 'ready',
+                duration,
+                currentTime: this.plyr.currentTime || 0,
+            });
             this.ready.emit();
         });
         const reapplyStartTime = () => {
-            this.applySavedStartTime(true);
+            if (typeof this.pendingStartTime === 'number' || !this.startTimeApplied) {
+                this.applySavedStartTime(true);
+            }
             if (this.startTimeApplied) {
                 this.plyr?.off?.('loadedmetadata', reapplyStartTime);
                 this.plyr?.off?.('durationchange', reapplyStartTime);
@@ -1626,9 +1641,18 @@ class VimeoPlayerComponent {
         this.plyr.on('loadedmetadata', reapplyStartTime);
         this.plyr.on('durationchange', reapplyStartTime);
         this.plyr.on('play', () => {
+            if (this.ensureStartTimeBeforePlayback()) {
+                return;
+            }
+            this.endedLoggedOnPause = false;
+            this.tryApplyPendingStartTime();
             this.endedOverlayVisible = false;
             this.progressService.ended$.next();
             console.log('event: playing_video');
+            if (this.config?.is_live) {
+                console.log('event: playing_live');
+                parent.postMessage('event: playing_live', '*');
+            }
             parent.postMessage('playing_video', '*');
             this.postCastEvent({
                 event: 'play',
@@ -1637,6 +1661,7 @@ class VimeoPlayerComponent {
             onTimeUpdate();
         });
         this.plyr.on('pause', () => {
+            this.endedOverlayVisible = false;
             console.log('event: pause');
             parent.postMessage('paused_video', '*');
             this.postCastEvent({
@@ -1644,17 +1669,13 @@ class VimeoPlayerComponent {
                 currentTime: this.plyr.currentTime || 0,
             });
             onTimeUpdate();
+            if (this.shouldEmitEndedOnPause()) {
+                this.handleEnded(true);
+            }
         });
         this.plyr.on('ended', () => {
-            this.endedOverlayVisible = true;
-            console.log('event: ended');
-            parent.postMessage('event: ended', '*');
-            this.postCastEvent({
-                event: 'ended',
-                currentTime: this.plyr.currentTime || 0,
-            });
             onTimeUpdate();
-            this.progressService.ended$.next();
+            this.handleEnded();
         });
         this.plyr.on('enterfullscreen', () => {
             console.log('event: enterfullscreen');
@@ -1668,6 +1689,9 @@ class VimeoPlayerComponent {
         });
     }
     resolveStartTime(last_time, last_percent, duration) {
+        if (this.shouldResetProgressToBeginning()) {
+            return 0;
+        }
         const dur = Number(duration) || 0;
         if (dur <= 0) {
             if (last_time && Number(last_time) > 0) {
@@ -1687,6 +1711,24 @@ class VimeoPlayerComponent {
         }
         return 0;
     }
+    shouldResetProgressToBeginning() {
+        const seenFlag = this.config?.seen;
+        if (seenFlag === true || seenFlag === 'true' || seenFlag === 1) {
+            return true;
+        }
+        const rawPercent = this.config?.last_percent;
+        if (rawPercent === undefined || rawPercent === null || rawPercent === 0) {
+            return false;
+        }
+        let percent = Number(rawPercent);
+        if (!Number.isFinite(percent)) {
+            return false;
+        }
+        if (percent > 1) {
+            percent = percent / 100;
+        }
+        return percent >= 0.8;
+    }
     isIOSDevice() {
         if (typeof navigator === 'undefined')
             return false;
@@ -1702,19 +1744,19 @@ class VimeoPlayerComponent {
             return;
         const duration = this.plyr.duration || 0;
         const start = this.resolveStartTime(this.config?.last_time, this.config?.last_percent, duration);
-        if (start <= 0) {
+        if (!(start > 0)) {
             this.pendingStartTime = undefined;
             return;
         }
-        this.pendingStartTime = start;
-        try {
-            this.plyr.currentTime = start;
-        }
-        catch { }
         if (duration > 0) {
+            this.seekTo(start);
             this.startTimeApplied = true;
             this.pendingStartTime = undefined;
         }
+        else {
+            this.pendingStartTime = start;
+            this.startTimeApplied = false;
+        }
     }
     ngOnDestroy() {
         this.plyr?.destroy();
@@ -1753,6 +1795,134 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
 }`;
         styleEl.textContent = cssRule;
     }
+    seekTo(time) {
+        if (!this.plyr)
+            return;
+        const target = Math.max(0, Number(time) || 0);
+        try {
+            this.plyr.currentTime = target;
+        }
+        catch { }
+    }
+    tryApplyPendingStartTime() {
+        if (this.startTimeApplied)
+            return;
+        if (!this.plyr)
+            return;
+        const pending = this.pendingStartTime;
+        if (typeof pending !== 'number' || !(pending > 0)) {
+            return;
+        }
+        const duration = this.plyr.duration || 0;
+        if (!(duration > 0)) {
+            return;
+        }
+        const current = this.plyr.currentTime || 0;
+        const tolerance = 0.35;
+        const nearingTarget = Math.abs(current - pending) <= tolerance;
+        if (nearingTarget && (this.plyr.duration || 0) > 0) {
+            this.startTimeApplied = true;
+            this.pendingStartTime = undefined;
+            return;
+        }
+        this.pendingStartTime = undefined;
+        this.startTimeApplied = true;
+        this.seekTo(pending);
+        try {
+            const maybePromise = this.plyr.play?.();
+            if (maybePromise && typeof maybePromise.then === 'function') {
+                maybePromise.catch(() => { });
+            }
+        }
+        catch { }
+    }
+    ensureStartTimeBeforePlayback() {
+        if (this.startTimeApplied)
+            return false;
+        if (!this.plyr)
+            return false;
+        const pending = this.pendingStartTime;
+        if (typeof pending !== 'number' || !(pending > 0)) {
+            return false;
+        }
+        const duration = this.plyr.duration || 0;
+        if (!(duration > 0)) {
+            return false;
+        }
+        const current = this.plyr.currentTime || 0;
+        const tolerance = 0.35;
+        if (Math.abs(current - pending) <= tolerance) {
+            this.startTimeApplied = true;
+            this.pendingStartTime = undefined;
+            return false;
+        }
+        const resumeAfterSeek = () => {
+            this.plyr?.off?.('seeked', resumeAfterSeek);
+            this.startTimeApplied = true;
+            this.pendingStartTime = undefined;
+            try {
+                const maybePromise = this.plyr?.play?.();
+                if (maybePromise && typeof maybePromise.then === 'function') {
+                    maybePromise.catch(() => { });
+                }
+            }
+            catch { }
+        };
+        this.plyr?.on?.('seeked', resumeAfterSeek);
+        try {
+            this.plyr?.pause?.();
+        }
+        catch { }
+        this.seekTo(pending);
+        return true;
+    }
+    shouldEmitEndedOnPause() {
+        if (!this.isIOSContext()) {
+            return false;
+        }
+        if (this.endedLoggedOnPause) {
+            return false;
+        }
+        const duration = this.plyr?.duration;
+        if (!Number.isFinite(duration) || !duration || duration <= 0) {
+            return false;
+        }
+        const current = this.plyr?.currentTime || 0;
+        return duration - current < 1;
+    }
+    handleEnded(triggeredByPause = false) {
+        if (triggeredByPause && this.endedLoggedOnPause) {
+            return;
+        }
+        if (!triggeredByPause) {
+            this.endedOverlayVisible = true;
+        }
+        console.log('event: ended');
+        parent.postMessage('event: ended', '*');
+        this.postCastEvent({
+            event: 'ended',
+            currentTime: this.plyr?.currentTime || 0,
+        });
+        this.progressService.ended$.next();
+        this.endedLoggedOnPause = true;
+    }
+    isIOSContext() {
+        if (this.isIOSDevice()) {
+            return true;
+        }
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        try {
+            const params = new URLSearchParams(window.location.search);
+            const os = params.get('os');
+            if (os && os.toLowerCase() === 'ios') {
+                return true;
+            }
+        }
+        catch { }
+        return false;
+    }
     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" }, host: { properties: { "class.overlay-visible": "endedOverlayVisible" } }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="vimeo-wrapper">