@gcorevideo/player 2.18.3 → 2.19.0

package/lib/plugins/multi-camera/MultiCamera.js

@@ -0,0 +1,353 @@
+import { Browser, Events, Playback, template, UICorePlugin } from '@clappr/core';
+import { reportError, trace } from '@gcorevideo/utils';
+import { CLAPPR_VERSION } from '../build.js';
+import pluginHtml from '../../../assets/multi-camera/multicamera.ejs';
+import '../../../assets/multi-camera/style.scss';
+import streamsIcon from '../../../assets/icons/old/streams.svg';
+import streamsMomentoIcon from '../../../assets/icons/old/language.svg';
+import streamsWhiteNightsIcon from '../../../assets/icons/old/wn.svg';
+const VERSION = '0.0.1';
+const T = 'plugins.multicamera';
+export class MultiCamera extends UICorePlugin {
+    currentCamera = null;
+    currentTime = 0;
+    playing = false;
+    multicamera = [];
+    noActiveStreams = false;
+    get name() {
+        return 'multicamera';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    static get version() {
+        return VERSION;
+    }
+    get template() {
+        return template(pluginHtml);
+    }
+    get attributes() {
+        return {
+            'class': this.name,
+            'data-multicamera': ''
+        };
+    }
+    get events() {
+        return {
+            'click [data-multicamera-selector-select]': 'onCameraSelect',
+            'click [data-multicamera-button]': 'onShowLevelSelectMenu'
+        };
+    }
+    constructor(core) {
+        super(core);
+        if (!this.options.multisources || !Array.isArray(this.options.multisources)) {
+            this.destroy();
+            return;
+        }
+        this.playing = this.options.multicameraPlay;
+        // Don't mutate the options, TODO check if some plugin observes the options.multicamera
+        this.multicamera = this.options.multisources.map((item) => ({ ...item }));
+        this.noActiveStreams = this.multicamera.every((item) => !item.live);
+    }
+    bindEvents() {
+        this.listenTo(this.core, Events.CORE_READY, this.bindPlaybackEvents);
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
+    }
+    unBindEvents() {
+        // @ts-ignore
+        this.stopListening(this.core, Events.CORE_READY);
+        // @ts-ignore
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
+        // @ts-ignore
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED);
+        // @ts-ignore
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE);
+        // @ts-ignore
+        this.stopListening(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay);
+    }
+    onPlay() {
+        this.playing = true;
+    }
+    bindPlaybackEvents() {
+        const currentPlayback = this.core.activePlayback;
+        this.listenToOnce(currentPlayback, Events.PLAYBACK_PLAY, this.onPlay);
+    }
+    reload() {
+        this.unBindEvents();
+        this.bindEvents();
+        this.bindPlaybackEvents();
+    }
+    shouldRender() {
+        if (!this.core.activeContainer || this.noActiveStreams) {
+            return false;
+        }
+        if (!this.core.activePlayback) {
+            return false;
+        }
+        return this.multicamera.length >= 2;
+    }
+    render() {
+        if (this.shouldRender()) {
+            let numActiveSources = 0;
+            // const currentSource = this.core.options.source
+            const currentSource = this.core.activePlayback?.sourceMedia;
+            for (const item of this.multicamera) {
+                if (item.live) {
+                    numActiveSources++;
+                }
+                if (!this.currentCamera && item.source === currentSource) {
+                    this.currentCamera = item;
+                }
+            }
+            // const mediaControl = this.core.getPlugin('media_control')
+            if (this.currentTime &&
+                // TODO check the last active playback type instead
+                // !mediaControl.$el.hasClass('live') &&
+                this.core.getPlaybackType() !== Playback.LIVE) {
+                if (this.currentTime < this.core.activePlayback.getDuration()) {
+                    this.core.activePlayback.seek(this.currentTime);
+                }
+                this.currentTime = 0;
+                // if (mediaControl.$el.hasClass('dvr')) {
+                //   this.core.activeContainer.dvrInUse = true;
+                // }
+            }
+            // TODO current source
+            this.$el
+                .html(this.template({ 'streams': this.multicamera, 'multisources_mode': this.options.multisourcesMode }));
+            if ((numActiveSources <= 1 && this.options.multisourcesMode !== "show_all") ||
+                this.options.multisourcesMode === "one_first") {
+                this.$el.hide();
+            }
+            else {
+                this.$el.show();
+            }
+            if (this.core.mediaControl.$multiCameraSelector &&
+                this.core.mediaControl.$multiCameraSelector.length > 0) {
+                this.core.mediaControl.$multiCameraSelector.append(this.el);
+            }
+            else {
+                this.core.mediaControl.$('.media-control-right-panel').append(this.el);
+            }
+            if (Object.prototype.hasOwnProperty.call(this.core.mediaControl, '$multiCameraSelector') &&
+                this.core.mediaControl.$multiCameraSelector.find('span.multicamera-icon').length > 0) {
+                if (~window.location.href.indexOf('whitenights.gcdn.co')) {
+                    this.core.mediaControl.$multiCameraSelector.find('span.multicamera-icon').append(streamsWhiteNightsIcon);
+                }
+                else if (~window.location.href.indexOf('momentosolutions.gcdn.co')) {
+                    this.core.mediaControl.$multiCameraSelector.find('span.multicamera-icon').append(streamsMomentoIcon);
+                }
+                else {
+                    this.core.mediaControl.$multiCameraSelector.find('span.multicamera-icon').append(streamsIcon);
+                }
+            }
+            this.highlightCurrentLevel();
+        }
+        return this;
+    }
+    onCameraSelect(event) {
+        const value = event.currentTarget.dataset.multicameraSelectorSelect;
+        trace(`${T} onCameraSelect`, { value });
+        if (value !== undefined) {
+            this.changeById(parseInt(value, 10));
+        }
+        event.stopPropagation();
+        return false;
+    }
+    activeById(id, active) {
+        this.setLiveStatus(id, active);
+        if (!this.currentCamera && !this.noActiveStreams) {
+            return;
+        }
+        if (this.noActiveStreams && !active) {
+            return;
+        }
+        if (this.currentCamera) {
+            if (this.options.multisourcesMode === "only_live") {
+                this.behaviorLive(id, active);
+            }
+            if (this.options.multisourcesMode === "one_first") {
+                this.behaviorOne(id, active);
+            }
+            if (this.options.multisourcesMode === "show_all") {
+                this.behaviorAll(id, active);
+            }
+        }
+        else {
+            if (this.noActiveStreams && active) {
+                this.changeById(id);
+                this.noActiveStreams = false;
+            }
+        }
+        this.render();
+    }
+    setLiveStatus(id, active) {
+        try {
+            const index = this.findIndexById(id);
+            if (index < 0) {
+                return;
+            }
+            this.multicamera[index].live = active;
+            if (this.levelElement(id).length) {
+                this.levelElement(id)[0].dataset.multicameraSelectorLive = active;
+            }
+        }
+        catch (error) {
+            reportError(error);
+        }
+    }
+    behaviorLive(id, active) {
+        try {
+            if (active) {
+                this.levelElement(id).parent().show();
+            }
+            else {
+                this.levelElement(id).parent().hide();
+            }
+        }
+        catch (error) {
+            reportError(error);
+            return;
+        }
+        this.findAndInitNextStream(id, active);
+    }
+    behaviorOne(id, active) {
+        this.$el.hide();
+        this.findAndInitNextStream(id, active);
+    }
+    behaviorAll(id, active) {
+        if (this.currentCamera?.id === id) {
+            if (active) {
+                this.hideError();
+                this.changeById(id);
+            }
+            else {
+                this.showError();
+            }
+        }
+    }
+    findAndInitNextStream(id, active) {
+        if (active || this.currentCamera?.id !== id) {
+            return;
+        }
+        const current = this.findIndexById(id);
+        let counter = 1;
+        while (counter < this.multicamera.length) {
+            const changeIndex = (counter + current) % this.multicamera.length;
+            if (this.multicamera[changeIndex].live) {
+                this.changeById(this.multicamera[changeIndex].id);
+                return;
+            }
+            counter++;
+        }
+        this.currentCamera = null;
+        this.noActiveStreams = true;
+        this.core.trigger('core:multicamera:no_active_translation');
+        // this.changeById(this.multicamera[nextIndex].id);
+    }
+    showError() {
+        this.core.activePlayback.pause();
+        setTimeout(() => {
+            this.core.activePlayback.destroy();
+        }, 0);
+        try {
+            this.core.mediaControl.disabledControlButton();
+        }
+        catch (error) {
+            reportError(error);
+        }
+        // TODO figure out
+        this.core.getPlugin('error_gplayer')?.show({
+            title: this.core.i18n.t('source_offline'),
+            message: '',
+            code: '',
+            icon: '',
+            reloadIcon: '',
+        });
+    }
+    hideError() {
+        try {
+            this.core.mediaControl.enableControlButton();
+        }
+        catch (error) {
+            reportError(error);
+        }
+    }
+    changeById(id) {
+        trace(`${T} changeById`, { id });
+        queueMicrotask(() => {
+            const playbackOptions = this.core.options.playback || {};
+            // TODO figure out what this does
+            playbackOptions.recycleVideo = Browser.isMobile;
+            this.currentCamera = this.findElementById(id) ?? null;
+            trace(`${T} changeById`, { id, currentCamera: this.currentCamera, multicamera: this.multicamera });
+            if (!this.currentCamera) {
+                return;
+            }
+            this.currentTime = 0;
+            try {
+                this.currentTime = this.core.activePlayback.getCurrentTime();
+                this.highlightCurrentLevel();
+                this.core.activePlayback.destroy();
+            }
+            catch (error) {
+                reportError(error);
+            }
+            const fullscreenDisable = !!(Browser.isiOS && this.currentCamera.projection);
+            // TODO remove?
+            // for html5 playback:
+            this.options.dvrEnabled = this.currentCamera.dvr;
+            trace(`${T} changeById`, { currentCamera: this.currentCamera });
+            // TODO
+            this.core.configure({
+                playback: playbackOptions,
+                source: this.currentCamera.source, // TODO ensure that the preferred transport is used
+                video360: {
+                    projection: this.currentCamera.projection,
+                },
+                fullscreenDisable,
+                autoPlay: this.playing,
+                disableCanAutoPlay: true
+            });
+            this.core.activeContainer.mediaControlDisabled = false;
+        });
+        this.toggleContextMenu();
+    }
+    getCamerasList() {
+        return this.multicamera;
+    }
+    getCurrentCamera() {
+        return this.currentCamera;
+    }
+    findElementById(id) {
+        return this.multicamera.find((element) => element.id === id);
+    }
+    findIndexById(id) {
+        return this.multicamera.findIndex((element) => element.id === id);
+    }
+    onShowLevelSelectMenu() {
+        this.toggleContextMenu();
+    }
+    hideSelectLevelMenu() {
+        this.$('.multicamera ul').hide();
+    }
+    toggleContextMenu() {
+        this.$('.multicamera ul').toggle();
+    }
+    // private buttonElement(): ZeptoResult {
+    //   return this.$('.multicamera button');
+    // }
+    // private buttonElementText(): ZeptoResult {
+    //   return this.$('.multicamera button .quality-text');
+    // }
+    levelElement(id) {
+        return this.$('.multicamera ul li > div' + (id !== undefined ? '[data-multicamera-selector-select="' + id + '"]' : ''));
+    }
+    highlightCurrentLevel() {
+        this.levelElement().removeClass('current');
+        this.levelElement().removeClass('multicamera-active');
+        this.currentCamera && this.levelElement(this.currentCamera.id).addClass('multicamera-active');
+    }
+}

package/lib/plugins/picture-in-picture/PictureInPicture.d.ts

@@ -0,0 +1,20 @@
+import { UICorePlugin } from '@clappr/core';
+import '../../../assets/picture-in-picture/button.scss';
+export declare class PictureInPicture extends UICorePlugin {
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    static get version(): string;
+    get events(): {
+        'click button': string;
+    };
+    get videoElement(): any;
+    bindEvents(): void;
+    private isPiPSupported;
+    render(): this;
+    togglePictureInPicture(): void;
+    requestPictureInPicture(): void;
+    exitPictureInPicture(): void;
+}
+//# sourceMappingURL=PictureInPicture.d.ts.map

package/lib/plugins/picture-in-picture/PictureInPicture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictureInPicture.d.ts","sourceRoot":"","sources":["../../../src/plugins/picture-in-picture/PictureInPicture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoB,MAAM,cAAc,CAAC;AAO9D,OAAO,gDAAgD,CAAC;AAMxD,qBAAa,gBAAiB,SAAQ,YAAY;IAChD,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,MAAM,KAAK,OAAO,WAEjB;IAED,IAAa,MAAM;;MAIlB;IAED,IAAI,YAAY,QAEf;IAEQ,UAAU;IAInB,OAAO,CAAC,cAAc;IASb,MAAM;IAiBf,sBAAsB;IAStB,uBAAuB;IAOvB,oBAAoB;CAIrB"}

package/lib/plugins/picture-in-picture/PictureInPicture.js

@@ -0,0 +1,68 @@
+import { UICorePlugin, template, Events } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
+import { CLAPPR_VERSION } from '../build.js';
+import pipIcon from '../../../assets/icons/new/pip.svg';
+import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
+import '../../../assets/picture-in-picture/button.scss';
+const VERSION = '0.0.1';
+const T = `plugins.picture_in_picture`;
+export class PictureInPicture extends UICorePlugin {
+    get name() {
+        return 'picture_in_picture';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    static get version() {
+        return VERSION;
+    }
+    get events() {
+        return {
+            'click button': 'togglePictureInPicture',
+        };
+    }
+    get videoElement() {
+        return this.core.activePlayback.el;
+    }
+    bindEvents() {
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+    }
+    isPiPSupported() {
+        trace(`${T} isPiPSupported`, {
+            pictureInPictureEnabled: document.pictureInPictureEnabled,
+            requestPictureInPicture: HTMLVideoElement.prototype.requestPictureInPicture,
+        });
+        return document.pictureInPictureEnabled && !!HTMLVideoElement.prototype.requestPictureInPicture;
+    }
+    render() {
+        if (!this.isPiPSupported()) {
+            return this;
+        }
+        const t = template(buttonHtml);
+        this.$el.html(t({ pipIcon }));
+        const mediaControl = this.core.getPlugin('media_control');
+        if (mediaControl) {
+            mediaControl.getElement('pip')?.html(this.el);
+        }
+        return this;
+    }
+    togglePictureInPicture() {
+        trace(`${T} togglePictureInPicture`);
+        if (this.videoElement !== document.pictureInPictureElement) {
+            this.requestPictureInPicture();
+        }
+        else {
+            this.exitPictureInPicture();
+        }
+    }
+    requestPictureInPicture() {
+        trace(`${T} requestPictureInPicture`, {
+            videoElement: !!this.videoElement,
+        });
+        this.videoElement.requestPictureInPicture();
+    }
+    exitPictureInPicture() {
+        trace(`${T} exitPictureInPicture`);
+        document.exitPictureInPicture();
+    }
+}

package/lib/plugins/playback-rate/PlaybackRate.d.ts

@@ -0,0 +1,42 @@
+import { UICorePlugin } from '@clappr/core';
+export declare class PlaybackRate extends UICorePlugin {
+    private currentPlayback;
+    private playbackRates;
+    private prevSelectedRate;
+    private selectedRate;
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    get template(): any;
+    get attributes(): {
+        class: string;
+        'data-playback-rate-select': string;
+    };
+    get events(): {
+        'click .gear-sub-menu_btn': string;
+        'click .gear-option': string;
+        'click .go-back': string;
+    };
+    bindEvents(): void;
+    unBindEvents(): void;
+    private allRateElements;
+    private rateElement;
+    private onDashRateChange;
+    private updateLiveStatus;
+    reload(): void;
+    private shouldRender;
+    render(): this;
+    onStartAd(): void;
+    onFinishAd(): void;
+    onPlay(): void;
+    onStop(): void;
+    onRateSelect(event: MouseEvent): boolean;
+    onShowMenu(): void;
+    goBack(): void;
+    updatePlaybackRate(rate: string): void;
+    setSelectedRate(rate: string): void;
+    getTitle(): string;
+    highlightCurrentRate(): void;
+}
+//# sourceMappingURL=PlaybackRate.d.ts.map

package/lib/plugins/playback-rate/PlaybackRate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,MAAM,cAAc,CAAC;AAgCxE,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,eAAe,CAAyB;IAEhD,OAAO,CAAC,aAAa,CAAgD;IAErE,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,YAAY,CAAiC;IAErD,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;;;MAMlB;IAEQ,UAAU;IAoBnB,YAAY;IAOZ,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,gBAAgB;IAcxB,MAAM;IAKN,OAAO,CAAC,YAAY;IAUX,MAAM;IAyCf,SAAS;IAMT,UAAU;IAMV,MAAM;IAWN,MAAM;IAIN,YAAY,CAAC,KAAK,EAAE,UAAU;IAW9B,UAAU;IAaV,MAAM;IAIN,kBAAkB,CAAC,IAAI,EAAE,MAAM;IAI/B,eAAe,CAAC,IAAI,EAAE,MAAM;IAQ5B,QAAQ;IAYR,oBAAoB;CASrB"}