@edm-webplayer/webplayer-angular 0.1.76 → 0.1.78

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

@@ -88,6 +88,7 @@ class PlyrPlayerComponent {
     interactionUnmuteCleanup;
     endedLoggedOnPause = false;
     liveInteractionBlocker;
+    iosFullscreenCleanup;
     pendingStartTime;
     onResize = () => {
         this.updateRecommendationBlockerSafeZone();
@@ -446,6 +447,51 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         return "ontouchstart" in window;
     }
+    applyInlineAttributes(videoElement, isIOS) {
+        try {
+            videoElement.setAttribute("playsinline", "true");
+            videoElement.setAttribute("webkit-playsinline", "true");
+            if (isIOS) {
+                videoElement.setAttribute("x5-playsinline", "true");
+                videoElement.setAttribute("x5-video-player-type", "h5");
+            }
+        }
+        catch { }
+    }
+    bindIOSFullscreenLogging(videoElement, isIOS) {
+        this.removeIOSFullscreenLogging();
+        if (!isIOS)
+            return;
+        const logEvent = (name) => {
+            console.log(`event: ${name}`);
+            try {
+                parent.postMessage(`event: ${name}`, "*");
+            }
+            catch { }
+        };
+        const onEnter = () => logEvent("webkit_enterfullscreen");
+        const onExit = () => logEvent("webkit_exitfullscreen");
+        try {
+            videoElement.addEventListener("webkitbeginfullscreen", onEnter);
+            videoElement.addEventListener("webkitendfullscreen", onExit);
+            this.iosFullscreenCleanup = () => {
+                try {
+                    videoElement.removeEventListener("webkitbeginfullscreen", onEnter);
+                    videoElement.removeEventListener("webkitendfullscreen", onExit);
+                }
+                catch { }
+                this.iosFullscreenCleanup = undefined;
+            };
+        }
+        catch { }
+    }
+    removeIOSFullscreenLogging() {
+        try {
+            this.iosFullscreenCleanup?.();
+        }
+        catch { }
+        this.iosFullscreenCleanup = undefined;
+    }
     isIframeProvider() {
         return this.config?.video_host === "youtube";
     }
@@ -1071,6 +1117,10 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
     setupPlayer() {
         if (!this.videoRef)
             return;
+        const videoEl = this.videoRef.nativeElement;
+        const isIOS = this.isIOSContext();
+        this.applyInlineAttributes(videoEl, isIOS);
+        this.removeIOSFullscreenLogging();
         this.hls?.destroy();
         this.controlsVisibilityCleanup?.();
         this.controlsVisibilityCleanup = undefined;
@@ -1125,13 +1175,16 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
             "airplay",
             "fullscreen",
         ];
+        const controls = isLive || !isIOS
+            ? defaultControls
+            : defaultControls.filter((c) => c !== "fullscreen");
         const liveControls = [];
         const plyrOptions = {
-            controls: isLive ? liveControls : defaultControls,
+            controls: isLive ? liveControls : controls,
             fullscreen: {
-                enabled: true,
-                fallback: true,
-                iosNative: !isLive,
+                enabled: !isIOS,
+                fallback: !isIOS,
+                iosNative: true,
                 container: null,
             },
             i18n: {
@@ -1160,6 +1213,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         }
         this.updateLiveInteractionBlocker(isLive);
         this.bindFullscreenBehavior();
+        this.bindIOSFullscreenLogging(videoEl, isIOS);
         this.setupControlsVisibility();
         this.ensureTopClickBlocker();
         this.observeMenuChanges();
@@ -1544,6 +1598,7 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join("\n")}
         this.menuObserver?.disconnect();
         this.menuObserver = undefined;
         window.removeEventListener("resize", this.onResize);
+        this.removeIOSFullscreenLogging();
         this.plyr?.destroy();
         window.removeEventListener("message", this.onCastMessage);
     }
@@ -1578,6 +1633,7 @@ class VimeoPlayerComponent {
     startTimeApplied = false;
     pendingStartTime;
     endedLoggedOnPause = false;
+    iosFullscreenCleanup;
     onCastMessage = (event) => {
         let data = event.data;
         if (typeof data === 'string') {
@@ -1623,6 +1679,9 @@ class VimeoPlayerComponent {
         if (!this.videoRef) {
             return;
         }
+        const videoElement = this.videoRef.nativeElement;
+        const isIOS = this.isIOSContext();
+        this.applyInlineAttributes(videoElement, isIOS);
         this.plyr?.destroy();
         this.startTimeApplied = false;
         this.pendingStartTime = undefined;
@@ -1631,21 +1690,22 @@ class VimeoPlayerComponent {
         const shouldAutoplay = false;
         const startMuted = shouldAutoplay;
         const speedOptions = [1, 1.25, 1.5, 2];
+        const baseControls = [
+            'play-large',
+            'play',
+            'progress',
+            'current-time',
+            'duration',
+            'mute',
+            'volume',
+            'captions',
+            'settings',
+            'pip',
+            'airplay',
+            'fullscreen',
+        ];
         const options = {
-            controls: [
-                'play-large',
-                'play',
-                'progress',
-                'current-time',
-                'duration',
-                'mute',
-                'volume',
-                'captions',
-                'settings',
-                'pip',
-                'airplay',
-                'fullscreen',
-            ],
+            controls: isIOS ? baseControls.filter((c) => c !== 'fullscreen') : baseControls,
             clickToPlay: true,
             autoplay: shouldAutoplay,
             muted: startMuted,
@@ -1659,8 +1719,8 @@ class VimeoPlayerComponent {
                 options: speedOptions,
             },
             fullscreen: {
-                enabled: true,
-                fallback: true,
+                enabled: !isIOS,
+                fallback: !isIOS,
                 iosNative: true,
                 container: null,
             },
@@ -1669,18 +1729,19 @@ class VimeoPlayerComponent {
             autopause: true,
             autoplay: shouldAutoplay,
             muted: startMuted,
-            playsinline: !this.isIOSDevice(),
+            playsinline: true,
             byline: false,
             portrait: false,
             title: false,
             pip: false,
             controls: false,
         };
-        this.plyr = new Plyr.default(this.videoRef.nativeElement, options);
+        this.plyr = new Plyr.default(videoElement, options);
         this.plyr.source = {
             type: 'video',
             sources: [{ src: this.config.video_id, provider: 'vimeo' }],
         };
+        this.bindIOSFullscreenLogging(videoElement, isIOS);
         this.bindEvents();
     }
     bindEvents() {
@@ -1856,6 +1917,7 @@ class VimeoPlayerComponent {
     }
     ngOnDestroy() {
         this.plyr?.destroy();
+        this.removeIOSFullscreenLogging();
         if (typeof window !== 'undefined') {
             window.removeEventListener('message', this.onCastMessage);
         }
@@ -2036,6 +2098,51 @@ ${allPairs.map(([n, v]) => `  ${n}: ${v};`).join('\n')}
             this.unlockPlayerInteraction();
         };
     }
+    applyInlineAttributes(videoElement, isIOS) {
+        try {
+            videoElement.setAttribute('playsinline', 'true');
+            videoElement.setAttribute('webkit-playsinline', 'true');
+            if (isIOS) {
+                videoElement.setAttribute('x5-playsinline', 'true');
+                videoElement.setAttribute('x5-video-player-type', 'h5');
+            }
+        }
+        catch { }
+    }
+    bindIOSFullscreenLogging(videoElement, isIOS) {
+        this.removeIOSFullscreenLogging();
+        if (!isIOS)
+            return;
+        const logEvent = (name) => {
+            console.log(`event: ${name}`);
+            try {
+                parent.postMessage(`event: ${name}`, '*');
+            }
+            catch { }
+        };
+        const onEnter = () => logEvent('webkit_enterfullscreen');
+        const onExit = () => logEvent('webkit_exitfullscreen');
+        try {
+            videoElement.addEventListener('webkitbeginfullscreen', onEnter);
+            videoElement.addEventListener('webkitendfullscreen', onExit);
+            this.iosFullscreenCleanup = () => {
+                try {
+                    videoElement.removeEventListener('webkitbeginfullscreen', onEnter);
+                    videoElement.removeEventListener('webkitendfullscreen', onExit);
+                }
+                catch { }
+                this.iosFullscreenCleanup = undefined;
+            };
+        }
+        catch { }
+    }
+    removeIOSFullscreenLogging() {
+        try {
+            this.iosFullscreenCleanup?.();
+        }
+        catch { }
+        this.iosFullscreenCleanup = undefined;
+    }
     unlockPlayerInteraction() {
         try {
             const controls = this.plyr?.elements?.controls;
@@ -2386,8 +2493,19 @@ class ScaleupPlayerComponent {
     loadScaleupPlayer() {
         const videoId = this.config.video_id;
         const lastTime = Math.max(0, Math.floor(Number(this.config.last_time) || 0));
+        const isIOS = this.isIOSContext();
         const eventsList = "controlsdisabled,controlsenabled,dispose,durationchange,ended,enterFullWindow,enterpictureinpicture,error,exitFullWindow,firstplay,fullscreenchange,leavepictureinpicture,loadedmetadata,loadstart,pause,play,playerreset,playerresize,playing,posterchange,progress,ratechange,ready,resize,seeked,seeking,textdata,timeupdate,useractive,userinactive,volumechange,waiting";
-        const scaleupSrc = `https://player.scaleup.com.br/embed/${videoId}?seekTo=${lastTime}&events=${eventsList}&autoplay=${this.config.autoplay}`;
+        const params = new URLSearchParams({
+            seekTo: String(lastTime),
+            events: eventsList,
+            autoplay: String(!!this.config.autoplay),
+        });
+        if (isIOS) {
+            params.set("iosNativeFullscreen", "1");
+            params.set("disableFullscreenControls", "1");
+            params.set("playsinline", "1");
+        }
+        const scaleupSrc = `https://player.scaleup.com.br/embed/${videoId}?${params.toString()}`;
         const host = this.elementRef.nativeElement;
         if (this.scaleupIframe) {
             this.scaleupIframe.remove();
@@ -2439,6 +2557,12 @@ class ScaleupPlayerComponent {
                     .toLowerCase();
                 if (!type)
                     return;
+                if (type.includes("fullscreen") || type.includes("fullwindow")) {
+                    try {
+                        console.log(`scaleup event: ${type}`);
+                    }
+                    catch { }
+                }
                 const t = Number((data.currentTime ?? data.time ?? data.position) || 0);
                 const d = Number((data.duration ?? data.totalDuration) || 0);
                 const p = d > 0 ? +((t / d) * 100).toFixed(2) : 0;
@@ -2474,6 +2598,31 @@ class ScaleupPlayerComponent {
             this.scaleupMessageHandler = undefined;
         }
     }
+    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;
+    }
+    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: ScaleupPlayerComponent, deps: [{ token: i0.ElementRef }, { token: WebplayerProgressService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ScaleupPlayerComponent, isStandalone: true, selector: "app-scaleup-player", inputs: { config: "config" }, outputs: { ready: "ready" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative}:host ::ng-deep iframe[src*=\"scaleup.com.br\"]{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;border:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }