@edm-webplayer/webplayer-angular 0.1.0

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

@@ -0,0 +1,974 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Optional, Inject, Injectable, Input, ViewChild, Component, EventEmitter, Output, Pipe, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { BehaviorSubject, Subject, Subscription } from 'rxjs';
+import Plyr from 'plyr';
+import 'plyr/dist/plyr.css';
+import Hls from 'hls.js';
+
+const WEPLAYER_CONFIG = new InjectionToken('webplayer.config');
+
+class WebplayerConfigService {
+    configSubject;
+    get config$() {
+        return this.configSubject.asObservable();
+    }
+    constructor(providedConfig) {
+        this.configSubject = new BehaviorSubject(providedConfig);
+    }
+    setConfig(config) {
+        const currentConfig = this.configSubject.getValue();
+        const newConfig = { ...(currentConfig || {}), ...config };
+        this.configSubject.next(newConfig);
+    }
+    getConfig() {
+        return this.configSubject.getValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebplayerConfigService, deps: [{ token: WEPLAYER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebplayerConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebplayerConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [WEPLAYER_CONFIG]
+                }] }] });
+
+class WebplayerProgressService {
+    progress$ = new Subject();
+    ended$ = new Subject();
+    key(videoKey) { return `webplayer:${videoKey}`; }
+    saveProgress(videoKey, time) {
+        try {
+            localStorage.setItem(this.key(videoKey), String(Math.floor(time)));
+        }
+        catch { }
+    }
+    getProgress(videoKey) {
+        try {
+            return Number(localStorage.getItem(this.key(videoKey)) || 0);
+        }
+        catch {
+            return 0;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebplayerProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebplayerProgressService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebplayerProgressService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const PlyrPlayer = Plyr;
+class PlyrPlayerComponent {
+    progressService;
+    document;
+    videoRef;
+    config;
+    plyr;
+    hls;
+    constructor(progressService, document) {
+        this.progressService = progressService;
+        this.document = document;
+    }
+    ngOnInit() {
+        console.log(this.config);
+        if (this.config?.ui?.colors) {
+            this.applyTheme(this.config.ui.colors);
+        }
+    }
+    ngAfterViewInit() {
+        this.setupPlayer();
+    }
+    ngOnChanges(changes) {
+        if (changes["config"] && this.plyr) {
+            this.setupPlayer();
+        }
+    }
+    applyTheme(colors) {
+        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;
+    }
+    setupPlayer() {
+        if (!this.videoRef)
+            return;
+        this.hls?.destroy();
+        this.plyr?.destroy();
+        this.plyr = new PlyrPlayer(this.videoRef.nativeElement, {
+            controls: [
+                "play-large",
+                "play",
+                "progress",
+                "current-time",
+                "duration",
+                "mute",
+                "volume",
+                "captions",
+                "settings",
+                "pip",
+                "airplay",
+                "fullscreen",
+            ],
+            youtube: { rel: 0, modestbranding: 1, noCookie: true },
+            vimeo: { byline: false, portrait: false, title: false },
+        });
+        this.bindProgressEvents();
+        this.loadSource(this.videoRef.nativeElement).then(() => this.setupStartTime());
+    }
+    setupStartTime() {
+        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.plyr.off("ready", apply);
+        };
+        this.plyr.on("ready", apply);
+    }
+    bindProgressEvents() {
+        const THROTTLE_MS = 300;
+        let lastEmit = 0;
+        const emitProgress = () => {
+            const t = this.plyr.currentTime || 0;
+            const d = this.plyr.duration || 0;
+            const p = d > 0 ? +((t / d) * 100).toFixed(2) : 0;
+            this.progressService.progress$.next({ currentTime: t, duration: d, percent: p });
+        };
+        const onTimeUpdate = () => {
+            const now = performance.now();
+            if (now - lastEmit >= THROTTLE_MS) {
+                lastEmit = now;
+                emitProgress();
+            }
+        };
+        this.plyr?.on?.("timeupdate", onTimeUpdate);
+        this.plyr?.on?.("pause", emitProgress);
+        this.plyr?.on?.("ended", () => {
+            emitProgress();
+            this.progressService.ended$.next();
+        });
+    }
+    unmuteAfterDelay(video, delayMs = 2000, volume = 1) {
+        if (!this.config.autoPlay)
+            return;
+        setTimeout(() => {
+            try {
+                if (this.plyr) {
+                    this.plyr.muted = false;
+                    this.plyr.volume = volume;
+                }
+            }
+            catch { }
+            try {
+                if (video) {
+                    video.muted = false;
+                    if (typeof video.volume === "number")
+                        video.volume = volume;
+                }
+            }
+            catch { }
+        }, delayMs);
+    }
+    loadSource(video) {
+        const setDisabledTopPageClick = () => {
+            setTimeout(() => {
+                const wrapper = document.querySelector(".plyr__video-wrapper");
+                if (wrapper) {
+                    const blocker = document.createElement("div");
+                    blocker.style.position = "absolute";
+                    blocker.style.top = "0";
+                    blocker.style.left = "0";
+                    blocker.style.width = "100%";
+                    blocker.style.height = "200px";
+                    blocker.style.zIndex = "5";
+                    blocker.style.background = "transparent";
+                    blocker.style.pointerEvents = "auto";
+                    wrapper.appendChild(blocker);
+                    const blocker2 = document.createElement("div");
+                    blocker2.style.position = "absolute";
+                    blocker2.style.bottom = "80px";
+                    blocker2.style.left = "0";
+                    blocker2.style.width = "100%";
+                    blocker2.style.height = "100px";
+                    blocker2.style.zIndex = "5";
+                    blocker2.style.background = "transparent";
+                    blocker2.style.pointerEvents = "auto";
+                    wrapper.appendChild(blocker2);
+                }
+            }, 2500);
+        };
+        return new Promise((resolve) => {
+            if (!this.config) {
+                return resolve();
+            }
+            if (this.hls) {
+                this.hls.destroy();
+                this.hls = undefined;
+            }
+            setDisabledTopPageClick();
+            if (this.config.video_host === "youtube" || this.config.video_host === "vimeo") {
+                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) {
+                        setTimeout(() => {
+                            this.plyr.play();
+                        }, 1000);
+                    }
+                    if (this.config.mirror) {
+                        setTimeout(() => {
+                            document
+                                .querySelector(`.plyr__video-embed iframe`) // eslint-disable-line
+                                ?.classList.add("mirror");
+                        }, 1000);
+                    }
+                };
+                this.plyr.on("ready", onReady);
+            }
+            if (this.config.video_host === "youtube") {
+                this.plyr.source = {
+                    type: "video",
+                    sources: [{ src: this.config.video_id, provider: "youtube" }],
+                };
+            }
+            else if (this.config.video_host === "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",
+                    sources: [{ src: this.config.video_external_id, type: "video/mp4" }],
+                };
+            }
+            else if (this.config.video_host === "hls") {
+                let sourceX = "";
+                try {
+                    sourceX = atob(this.config.video_id);
+                }
+                catch (e) {
+                    sourceX = this.config.video_id;
+                }
+                const canNative = video.canPlayType("application/vnd.apple.mpegurl");
+                if (canNative) {
+                    this.plyr.source = {
+                        type: "video",
+                        sources: [{ src: sourceX, type: "application/vnd.apple.mpegurl" }],
+                    };
+                    const onLoadedMeta = () => {
+                        const dur = this.plyr.duration || video.duration || 0;
+                        const start = this.resolveStartTime(this.config.last_time, this.config.last_percent, dur);
+                        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);
+                        }
+                        video.removeEventListener("loadedmetadata", onLoadedMeta);
+                    };
+                    video.addEventListener("loadedmetadata", onLoadedMeta);
+                }
+                else if (Hls.isSupported()) {
+                    this.hls = new Hls({ enableWorker: true, lowLatencyMode: true });
+                    this.hls.attachMedia(video);
+                    this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+                        this.hls.loadSource(sourceX);
+                    });
+                    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                        const dur = video.duration || 0;
+                        const start = this.resolveStartTime(this.config.last_time, this.config.last_percent, dur);
+                        if (start > 0) {
+                            try {
+                                video.currentTime = start;
+                            }
+                            catch { }
+                        }
+                        if (this.config.autoPlay) {
+                            video.muted = true;
+                            video.play().catch(() => { });
+                            this.unmuteAfterDelay(video);
+                        }
+                    });
+                    this.hls.on(Hls.Events.ERROR, (_evt, data) => {
+                        if (data?.fatal) {
+                            switch (data.type) {
+                                case Hls.ErrorTypes.NETWORK_ERROR:
+                                    this.hls.startLoad();
+                                    break;
+                                case Hls.ErrorTypes.MEDIA_ERROR:
+                                    this.hls.recoverMediaError();
+                                    break;
+                                default:
+                                    try {
+                                        this.hls.destroy();
+                                    }
+                                    catch { }
+                                    break;
+                            }
+                        }
+                    });
+                }
+                else {
+                    this.plyr.source = { type: "video", sources: [{ src: sourceX }] };
+                }
+            }
+            resolve();
+        });
+    }
+    resolveStartTime(last_time, last_percent, duration, opts = {}) {
+        const minStartSec = opts.minStartSec ?? 3;
+        const endGuardSec = opts.endGuardSec ?? 2;
+        const dur = Number(duration) || 0;
+        if (dur <= 0)
+            return 0;
+        const hasTime = last_time !== undefined && last_time !== null && last_time !== "";
+        if (hasTime) {
+            let t = Number(last_time);
+            if (!isFinite(t) || t < 0)
+                t = 0;
+            if (t < minStartSec)
+                return 0;
+            return Math.min(dur - endGuardSec, t);
+        }
+        const hasPercent = last_percent !== undefined && last_percent !== null && last_percent !== "";
+        if (hasPercent) {
+            let p = Number(last_percent);
+            if (!isFinite(p) || p < 0)
+                p = 0;
+            if (p > 1)
+                p = p / 100;
+            let t = dur * p;
+            if (t < minStartSec)
+                return 0;
+            return Math.min(dur - endGuardSec, t);
+        }
+        return 0;
+    }
+    ngOnDestroy() {
+        this.hls?.destroy();
+        this.plyr?.destroy();
+    }
+    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" }, 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-progress-view-on, #19a6d9);--plyr-color-hover: var(--theme-progress-view-on, #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{background:var(--plyr-control-background)!important;color:var(--plyr-control-color)!important}: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}: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-progress-view-on, #19a6d9);--plyr-color-hover: var(--theme-progress-view-on, #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{background:var(--plyr-control-background)!important;color:var(--plyr-control-color)!important}: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}:host ::ng-deep .ytp-more-videos-view .ytp-suggestions{pointer-events:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: WebplayerProgressService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { videoRef: [{
+                type: ViewChild,
+                args: ["video", { static: true }]
+            }], config: [{
+                type: Input
+            }] } });
+
+class PandaPlayerComponent {
+    elementRef;
+    progressService;
+    config;
+    pandaPlayer;
+    pandaContainer;
+    pandaProgressThrottle = 0;
+    primaryColor;
+    controlsColor;
+    constructor(elementRef, progressService) {
+        this.elementRef = elementRef;
+        this.progressService = progressService;
+    }
+    ngOnInit() {
+        if (this.config?.video_host !== 'panda') {
+            return;
+        }
+        this.applyTheme();
+        this.loadPandaPlayer();
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] && this.pandaPlayer) {
+            this.loadPandaPlayer();
+        }
+    }
+    applyTheme() {
+        if (this.config?.ui?.colors) {
+            this.primaryColor = this.config.ui.colors['progress-view-off'];
+            this.controlsColor = this.config.ui.colors['text-color'];
+        }
+    }
+    loadPandaPlayer() {
+        if (!this.config.embed) {
+            return;
+        }
+        this.ensurePandaScript().then(() => {
+            const host = this.elementRef.nativeElement;
+            if (!this.pandaContainer) {
+                this.pandaContainer = document.createElement("div");
+                this.pandaContainer.style.width = "100%";
+                this.pandaContainer.style.height = "100%";
+                this.pandaContainer.id = `panda-${this.config.video_id || Math.random().toString(36).slice(2)}`;
+                host.appendChild(this.pandaContainer);
+            }
+            try {
+                this.pandaPlayer?.destroy?.();
+            }
+            catch { }
+            const videoId = this.config.video_id || (this.config.embed ? this.extractPandaVideoId(this.config.embed) : undefined);
+            const libraryId = this.config.library_id || (this.config.embed ? this.extractPandaLibraryId(this.config.embed) : undefined);
+            window.pandascripttag = window.pandascripttag || [];
+            window.pandascripttag.push(() => {
+                this.pandaPlayer = new window.PandaPlayer(this.pandaContainer.id, {
+                    video_external_id: videoId,
+                    library_id: libraryId,
+                    onReady: () => {
+                        if (this.primaryColor) {
+                            try {
+                                this.pandaPlayer.setColor('primary', this.primaryColor);
+                            }
+                            catch { }
+                        }
+                        if (this.controlsColor) {
+                            try {
+                                this.pandaPlayer.setColor('secondary', this.controlsColor);
+                            }
+                            catch { }
+                        }
+                        const dur = this.pandaPlayer?.getDuration?.() || 0;
+                        const start = this.resolveStartTime(this.config.last_time, this.config.last_percent, dur);
+                        if (start > 0) {
+                            try {
+                                this.pandaPlayer.setCurrentTime(start);
+                            }
+                            catch { }
+                        }
+                        if (this.config.autoPlay) {
+                            try {
+                                this.pandaPlayer.play();
+                            }
+                            catch { }
+                        }
+                    },
+                    playerConfigs: {
+                        autoplay: !!this.config.autoPlay,
+                        smartAutoplay: !!this.config.autoPlay,
+                    },
+                });
+                this.pandaPlayer.onEvent((event) => {
+                    this.handlePandaEvent(event);
+                });
+            });
+        });
+    }
+    ngOnDestroy() {
+        try {
+            this.pandaPlayer?.destroy?.();
+        }
+        catch { }
+        try {
+            this.pandaContainer?.remove?.();
+        }
+        catch { }
+    }
+    async ensurePandaScript() {
+        return new Promise((resolve) => {
+            if (window.PandaPlayer)
+                return resolve();
+            const existing = document.querySelector('script[src^="https://player.pandavideo.com.br/api.v2.js"]');
+            if (existing) {
+                existing.addEventListener("load", () => resolve());
+                if (existing.readyState === "complete")
+                    resolve();
+                return;
+            }
+            const script = document.createElement("script");
+            script.src = "https://player.pandavideo.com.br/api.v2.js";
+            script.async = true;
+            script.onload = () => resolve();
+            document.head.appendChild(script);
+        });
+    }
+    extractPandaVideoId(url) {
+        let u;
+        try {
+            u = new URL(url);
+        }
+        catch {
+            try {
+                u = new URL(decodeURIComponent(url));
+            }
+            catch {
+                return undefined;
+            }
+        }
+        try {
+            const v = u.searchParams.get("v") || undefined;
+            return v || undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    extractPandaLibraryId(url) {
+        let u;
+        try {
+            u = new URL(url);
+        }
+        catch {
+            try {
+                u = new URL(decodeURIComponent(url));
+            }
+            catch {
+                return undefined;
+            }
+        }
+        try {
+            const { hostname } = u;
+            const firstLabel = hostname.split(".")[0] || "";
+            const maybeLib = firstLabel.startsWith("player-")
+                ? firstLabel.slice("player-".length)
+                : firstLabel;
+            return maybeLib || undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    handlePandaEvent(evt) {
+        const type = evt?.message || evt?.type;
+        const THROTTLE_MS = 300;
+        const now = performance.now();
+        if (type === "panda_timeupdate") {
+            if (now - this.pandaProgressThrottle >= THROTTLE_MS) {
+                this.pandaProgressThrottle = now;
+                try {
+                    const t = this.pandaPlayer?.getCurrentTime?.() || 0;
+                    const d = this.pandaPlayer?.getDuration?.() || 0;
+                    const p = d > 0 ? +((t / d) * 100).toFixed(2) : 0;
+                    this.progressService.progress$.next({ currentTime: t, duration: d, percent: p });
+                }
+                catch { }
+            }
+        }
+        if (type === "panda_pause") {
+            try {
+                const t = this.pandaPlayer?.getCurrentTime?.() || 0;
+                const d = this.pandaPlayer?.getDuration?.() || 0;
+                const p = d > 0 ? +((t / d) * 100).toFixed(2) : 0;
+                this.progressService.progress$.next({ currentTime: t, duration: d, percent: p });
+            }
+            catch { }
+        }
+        if (type === "panda_ended") {
+            try {
+                const t = this.pandaPlayer?.getCurrentTime?.() || 0;
+                const d = this.pandaPlayer?.getDuration?.() || 0;
+                const p = d > 0 ? +((t / d) * 100).toFixed(2) : 0;
+                this.progressService.progress$.next({ currentTime: t, duration: d, percent: p });
+            }
+            catch { }
+            this.progressService.ended$.next();
+        }
+    }
+    resolveStartTime(last_time, last_percent, duration, opts = {}) {
+        const minStartSec = opts.minStartSec ?? 3;
+        const endGuardSec = opts.endGuardSec ?? 2;
+        const dur = Number(duration) || 0;
+        if (dur <= 0)
+            return 0;
+        const hasTime = last_time !== undefined && last_time !== null && last_time !== "";
+        if (hasTime) {
+            let t = Number(last_time);
+            if (!isFinite(t) || t < 0)
+                t = 0;
+            if (t < minStartSec)
+                return 0;
+            return Math.min(dur - endGuardSec, t);
+        }
+        const hasPercent = last_percent !== undefined &&
+            last_percent !== null &&
+            last_percent !== "";
+        if (hasPercent) {
+            let p = Number(last_percent);
+            if (!isFinite(p) || p < 0)
+                p = 0;
+            if (p > 1)
+                p = p / 100;
+            let t = dur * p;
+            if (t < minStartSec)
+                return 0;
+            return Math.min(dur - endGuardSec, t);
+        }
+        return 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PandaPlayerComponent, deps: [{ token: i0.ElementRef }, { token: WebplayerProgressService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PandaPlayerComponent, isStandalone: true, selector: "app-panda-player", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative}:host ::ng-deep .panda-player,:host ::ng-deep iframe[src*=\"pandavideo.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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PandaPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-panda-player', template: '', standalone: true, imports: [CommonModule], styles: [":host{display:block;width:100%;height:100%;position:relative}:host ::ng-deep .panda-player,:host ::ng-deep iframe[src*=\"pandavideo.com.br\"]{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;border:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: WebplayerProgressService }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class ScaleupPlayerComponent {
+    elementRef;
+    progressService;
+    config;
+    scaleupIframe;
+    scaleupMessageHandler;
+    scaleupProgressThrottle = 0;
+    constructor(elementRef, progressService) {
+        this.elementRef = elementRef;
+        this.progressService = progressService;
+    }
+    ngOnInit() {
+        if (this.config?.video_host !== 'scaleup') {
+            return;
+        }
+        this.loadScaleupPlayer();
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] && this.scaleupIframe) {
+            this.loadScaleupPlayer();
+        }
+    }
+    loadScaleupPlayer() {
+        const videoId = this.config.video_id;
+        const lastTime = Math.max(0, Math.floor(Number(this.config.last_time) || 0));
+        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 host = this.elementRef.nativeElement;
+        if (this.scaleupIframe) {
+            this.scaleupIframe.remove();
+        }
+        const iframe = document.createElement("iframe");
+        iframe.src = scaleupSrc;
+        iframe.allow = "autoplay; fullscreen; encrypted-media; picture-in-picture";
+        iframe.referrerPolicy = "origin-when-cross-origin";
+        iframe.frameBorder = "0";
+        iframe.style.width = "100%";
+        iframe.style.height = "100%";
+        iframe.style.position = "absolute";
+        iframe.style.top = "0";
+        iframe.style.left = "0";
+        host.appendChild(iframe);
+        this.scaleupIframe = iframe;
+        if (this.scaleupMessageHandler) {
+            window.removeEventListener("message", this.scaleupMessageHandler);
+        }
+        this.scaleupMessageHandler = (e) => {
+            try {
+                const originOk = typeof e.origin === "string" &&
+                    e.origin.includes("scaleup.com.br");
+                if (!originOk)
+                    return;
+                const data = typeof e.data === "string"
+                    ? (() => {
+                        try {
+                            return JSON.parse(e.data);
+                        }
+                        catch {
+                            return undefined;
+                        }
+                    })()
+                    : e.data;
+                if (!data || typeof data !== "object")
+                    return;
+                const type = (data.event ||
+                    data.type ||
+                    data.message ||
+                    data.eventName ||
+                    "")
+                    .toString()
+                    .toLowerCase();
+                if (!type)
+                    return;
+                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;
+                const THROTTLE_MS = 300;
+                const now = performance.now();
+                if (type.includes("timeupdate") ||
+                    type === "playing" ||
+                    type === "progress") {
+                    if (now - this.scaleupProgressThrottle >= THROTTLE_MS) {
+                        this.scaleupProgressThrottle = now;
+                        this.progressService.progress$.next({ currentTime: t, duration: d, percent: p });
+                    }
+                }
+                if (type === "pause" || type === "paused") {
+                    this.progressService.progress$.next({ currentTime: t, duration: d, percent: p });
+                }
+                if (type === "ended" || type === "end" || type === "complete") {
+                    this.progressService.progress$.next({ currentTime: t, duration: d, percent: p });
+                    this.progressService.ended$.next();
+                }
+            }
+            catch { }
+        };
+        window.addEventListener("message", this.scaleupMessageHandler);
+    }
+    ngOnDestroy() {
+        try {
+            this.scaleupIframe?.remove();
+        }
+        catch { }
+        if (this.scaleupMessageHandler) {
+            window.removeEventListener("message", this.scaleupMessageHandler);
+            this.scaleupMessageHandler = undefined;
+        }
+    }
+    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" }, 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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScaleupPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-scaleup-player', template: '', standalone: true, imports: [CommonModule], 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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: WebplayerProgressService }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class PlayerLoaderComponent {
+    config;
+    ngOnInit() {
+        console.log(this.config);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlayerLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PlayerLoaderComponent, isStandalone: true, selector: "app-player-loader", inputs: { config: "config" }, ngImport: i0, template: `
+    <div [ngSwitch]="config?.video_host" style="width: 100%; height: 100%;">
+      <app-plyr-player
+        *ngSwitchCase="'hls'"
+        [config]="config"
+      ></app-plyr-player>
+      <app-plyr-player
+        *ngSwitchCase="'mp4'"
+        [config]="config"
+      ></app-plyr-player>
+      <app-plyr-player
+        *ngSwitchCase="'youtube'"
+        [config]="config"
+      ></app-plyr-player>
+      <app-plyr-player
+        *ngSwitchCase="'vimeo'"
+        [config]="config"
+      ></app-plyr-player>
+      <app-panda-player
+        *ngSwitchCase="'panda'"
+        [config]="config"
+      ></app-panda-player>
+      <app-scaleup-player
+        *ngSwitchCase="'scaleup'"
+        [config]="config"
+      ></app-scaleup-player>
+      <div *ngSwitchDefault>
+        <p>Player not supported or config not provided.</p>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: PlyrPlayerComponent, selector: "app-plyr-player", inputs: ["config"] }, { kind: "component", type: PandaPlayerComponent, selector: "app-panda-player", inputs: ["config"] }, { kind: "component", type: ScaleupPlayerComponent, selector: "app-scaleup-player", inputs: ["config"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlayerLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-player-loader', template: `
+    <div [ngSwitch]="config?.video_host" style="width: 100%; height: 100%;">
+      <app-plyr-player
+        *ngSwitchCase="'hls'"
+        [config]="config"
+      ></app-plyr-player>
+      <app-plyr-player
+        *ngSwitchCase="'mp4'"
+        [config]="config"
+      ></app-plyr-player>
+      <app-plyr-player
+        *ngSwitchCase="'youtube'"
+        [config]="config"
+      ></app-plyr-player>
+      <app-plyr-player
+        *ngSwitchCase="'vimeo'"
+        [config]="config"
+      ></app-plyr-player>
+      <app-panda-player
+        *ngSwitchCase="'panda'"
+        [config]="config"
+      ></app-panda-player>
+      <app-scaleup-player
+        *ngSwitchCase="'scaleup'"
+        [config]="config"
+      ></app-scaleup-player>
+      <div *ngSwitchDefault>
+        <p>Player not supported or config not provided.</p>
+      </div>
+    </div>
+  `, standalone: true, imports: [
+                        CommonModule,
+                        PlyrPlayerComponent,
+                        PandaPlayerComponent,
+                        ScaleupPlayerComponent,
+                    ], styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class WebplayerComponent {
+    configService;
+    progressService;
+    progress = new EventEmitter();
+    ended = new EventEmitter();
+    config = null;
+    subscriptions = new Subscription();
+    constructor(configService, progressService) {
+        this.configService = configService;
+        this.progressService = progressService;
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.configService.config$.subscribe(config => {
+            this.config = config;
+        }));
+        this.subscriptions.add(this.progressService.progress$.subscribe(p => this.progress.emit(p)));
+        this.subscriptions.add(this.progressService.ended$.subscribe(() => this.ended.emit()));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebplayerComponent, deps: [{ token: WebplayerConfigService }, { token: WebplayerProgressService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WebplayerComponent, isStandalone: true, selector: "edm-webplayer", outputs: { progress: "playProgress", ended: "playEnded" }, ngImport: i0, template: `
+    <app-player-loader [config]="config" *ngIf="config"></app-player-loader>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PlayerLoaderComponent, selector: "app-player-loader", inputs: ["config"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebplayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edm-webplayer', template: `
+    <app-player-loader [config]="config" *ngIf="config"></app-player-loader>
+  `, standalone: true, imports: [CommonModule, PlayerLoaderComponent], styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: WebplayerConfigService }, { type: WebplayerProgressService }], propDecorators: { progress: [{
+                type: Output,
+                args: ['playProgress']
+            }], ended: [{
+                type: Output,
+                args: ['playEnded']
+            }] } });
+
+class TimeFormatPipe {
+    transform(seconds) {
+        const val = typeof seconds === 'number' && isFinite(seconds) ? seconds : 0;
+        const sec = Math.floor(val % 60).toString().padStart(2, '0');
+        const min = Math.floor(val / 60).toString().padStart(2, '0');
+        const hrs = Math.floor(val / 3600);
+        if (hrs > 0) {
+            const mm = Math.floor((val % 3600) / 60).toString().padStart(2, '0');
+            return `${hrs}:${mm}:${sec}`;
+        }
+        return `${min}:${sec}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TimeFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: TimeFormatPipe, isStandalone: true, name: "timeFormat" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TimeFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'timeFormat', standalone: true }]
+        }] });
+
+class WebplayerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebplayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: WebplayerModule, imports: [CommonModule,
+            WebplayerComponent,
+            PlayerLoaderComponent,
+            PlyrPlayerComponent,
+            PandaPlayerComponent,
+            ScaleupPlayerComponent,
+            TimeFormatPipe], exports: [WebplayerComponent,
+            PlayerLoaderComponent,
+            PlyrPlayerComponent,
+            PandaPlayerComponent,
+            ScaleupPlayerComponent,
+            TimeFormatPipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebplayerModule, imports: [CommonModule,
+            WebplayerComponent,
+            PlayerLoaderComponent,
+            PlyrPlayerComponent,
+            PandaPlayerComponent,
+            ScaleupPlayerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebplayerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        WebplayerComponent,
+                        PlayerLoaderComponent,
+                        PlyrPlayerComponent,
+                        PandaPlayerComponent,
+                        ScaleupPlayerComponent,
+                        TimeFormatPipe,
+                    ],
+                    exports: [
+                        WebplayerComponent,
+                        PlayerLoaderComponent,
+                        PlyrPlayerComponent,
+                        PandaPlayerComponent,
+                        ScaleupPlayerComponent,
+                        TimeFormatPipe,
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PandaPlayerComponent, PlayerLoaderComponent, PlyrPlayerComponent, ScaleupPlayerComponent, TimeFormatPipe, WEPLAYER_CONFIG, WebplayerComponent, WebplayerConfigService, WebplayerModule, WebplayerProgressService };
+//# sourceMappingURL=edm-webplayer-webplayer-angular.mjs.map