@gcorevideo/player 2.18.3 → 2.19.0

package/lib/plugins/vast-ads/roll.js

@@ -0,0 +1,415 @@
+// import LogManager from '../../utils/LogManager';
+import { $, Events, Log } from '@clappr/core';
+import { reportError } from '@gcorevideo/utils';
+import assert from 'assert';
+export default class Roll extends Events {
+    mute;
+    core;
+    container;
+    $skipAd;
+    $muteIcon;
+    $areaClick;
+    _playback;
+    _volume;
+    _prevValueVolume;
+    _useDummyMp4Video = false;
+    firstRemaininTime = 0;
+    intervalTimer = null;
+    _isAdStartedTriggered;
+    extension;
+    _adsManager;
+    url = '';
+    // _events: Record<string, Function>;
+    constructor({ core, $skipAd, $muteIcon, $areaClick, mute, volume, prevVolume }) {
+        super();
+        this.mute = mute;
+        this.core = core;
+        this.container = this.core.activeContainer;
+        this.$skipAd = $skipAd;
+        this.$muteIcon = $muteIcon;
+        this.$areaClick = $areaClick;
+        this._playback = this.core.activePlayback;
+        this._volume = volume;
+        this._prevValueVolume = prevVolume;
+        this._isAdStartedTriggered = false;
+        // this._events = {};
+    }
+    static _adContainer;
+    static _adDisplayContainer;
+    static _imaContainer;
+    static _contentElement = null;
+    static createAdDisplayContainer() {
+        Roll.createImaContainer();
+        assert('google' in window, 'Google IMA SDK not found');
+        Roll._adDisplayContainer = new window.google.ima.AdDisplayContainer(Roll._imaContainer, Roll._contentElement);
+    }
+    static createImaContainer() {
+        Roll.destroyImaContainer();
+        // IMA does not clean ad container when finished
+        // For the sake of simplicity, wrap into a <div> element
+        if (Roll._adContainer) {
+            Roll._imaContainer = document.createElement('div');
+            Roll._adContainer.appendChild(Roll._imaContainer);
+        }
+    }
+    static destroyImaContainer() {
+        if (Roll._imaContainer && Roll._adContainer) {
+            Roll._adContainer.removeChild(Roll._imaContainer);
+            delete Roll._imaContainer;
+        }
+    }
+    _onAdError(adErrorEvent) {
+        try {
+            const googleError = adErrorEvent.getError();
+            const error = new Error(googleError.getMessage() + ' ' + googleError.getErrorCode());
+            error.name = googleError.getType();
+            // LogManager.exception(error);
+            reportError(error);
+        }
+        catch (error) {
+            // LogManager.exception(error);
+            reportError(error);
+        }
+        Log.debug('Advertisement', 'advertisement error');
+        this._cleverContinueAd(true);
+    }
+    async _playAds() {
+        await Roll._adDisplayContainer.initialize();
+        try {
+            assert('google' in window, 'Google IMA SDK not found');
+            assert(Roll._contentElement, 'content element not found');
+            this._adsManager.init(Roll._contentElement.offsetWidth, Roll._contentElement.offsetHeight, window.google.ima.ViewMode.NORMAL);
+            this._adsManager.start();
+        }
+        catch (error) {
+            // LogManager.exception(error);
+            reportError(error);
+            this._imaEvent('error', error);
+            this._playVideoContent();
+        }
+    }
+    _setVolume(volume) {
+        try {
+            if (this._adsManager) {
+                this._adsManager.setVolume(volume / 100);
+            }
+            if (typeof this.core.mediaControl.setVolume === 'function') {
+                this.core.options.mute = !volume;
+                this.trigger('volume', {
+                    volume,
+                    mute: this.core.options.mute
+                });
+                if (this.container.advertisement.type !== 'scteroll') {
+                    this.core.mediaControl.setVolume(volume, true);
+                }
+                else {
+                    if (volume) {
+                        this.container.advertisement.isMuted = true;
+                    }
+                    else {
+                        this.core.mediaControl.setVolume(volume, true);
+                        this.container.advertisement.isMuted = false;
+                    }
+                }
+            }
+            this._volume = volume;
+        }
+        catch (error) {
+            // LogManager.exception(error);
+            reportError(error);
+        }
+    }
+    _playVideoContent() {
+        this.destroy();
+        this.trigger('advertisement_finish');
+    }
+    _hideControls() {
+        if (this.extension && this.extension.controls === '0') {
+            this.$skipAd.css({ opacity: 0, visibility: 'hidden' });
+            this.$muteIcon.css({ opacity: 0, visibility: 'hidden' });
+        }
+        else {
+            this.$skipAd.css({ opacity: 1, visibility: 'visible' });
+            this.$muteIcon.css({ opacity: 1, visibility: 'visible' });
+        }
+    }
+    _requestAd({ xml, url, extension }) {
+        this.extension = extension;
+        assert('google' in window, 'Google IMA SDK not found');
+        const adsLoader = new window.google.ima.AdsLoader(Roll._adDisplayContainer);
+        adsLoader.addEventListener(window.google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, (e) => {
+            this._onAdsManagerLoaded(e);
+        });
+        adsLoader.addEventListener(window.google.ima.AdErrorEvent.Type.AD_ERROR, (e) => {
+            this._onAdError(e);
+        });
+        const adsRequest = new window.google.ima.AdsRequest();
+        if (xml) {
+            adsRequest.adTagUrl = '';
+            adsRequest.adsResponse = xml;
+        }
+        else {
+            if (url) {
+                adsRequest.adTagUrl = url;
+            }
+            else {
+                throw 'no ad url';
+            }
+        }
+        this.url = url;
+        assert(Roll._contentElement, 'content element not found');
+        adsRequest.linearAdSlotWidth = Roll._contentElement.offsetWidth;
+        adsRequest.linearAdSlotHeight = Roll._contentElement.offsetHeight;
+        adsRequest.nonLinearAdSlotWidth = Roll._contentElement.offsetWidth;
+        adsRequest.nonLinearAdSlotHeight = Roll._contentElement.offsetHeight;
+        adsLoader.requestAds(adsRequest);
+    }
+    playerResize() {
+        assert(Roll._contentElement, 'content element not found');
+        assert('google' in window, 'Google IMA SDK not found');
+        this._adsManager && this._adsManager.resize(Roll._contentElement.offsetWidth, Roll._contentElement.offsetHeight, window.google.ima.ViewMode.NORMAL);
+    }
+    _onAdsManagerLoaded(adsManagerLoadedEvent) {
+        assert('google' in window, 'Google IMA SDK not found');
+        const adsRenderingSettings = new window.google.ima.AdsRenderingSettings();
+        adsRenderingSettings.loadVideoTimeout = process.env.MINIMIZE ? 4000 : 8000;
+        adsRenderingSettings.bitrate = 100000;
+        // Plugin will handle playback state when ad has completed
+        this._adsManager = adsManagerLoadedEvent.getAdsManager(Roll._contentElement, adsRenderingSettings);
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.LOADED, () => {
+            if (this.mute) {
+                this._setVolume(0);
+            }
+            else {
+                this._setVolume(this._volume);
+            }
+            this.changeIconVolume();
+        });
+        this._adsManager.addEventListener(window.google.ima.AdErrorEvent.Type.AD_ERROR, (e) => {
+            const adType = this.container.advertisement.type;
+            if (!((adType === 'middleroll' || adType === 'repeatableroll') && !this._playback.isPlaying())) {
+                this._onAdError(e);
+            }
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, () => {
+            this._imaEvent('content_resume_requested');
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, () => {
+            this._imaEvent('content_pause_requested');
+            this._triggerStartAd(this.url);
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.CLICK, () => {
+            this._imaEvent('click');
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.IMPRESSION, () => {
+            this._imaEvent('impression');
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.STARTED, (adEvent) => {
+            this._triggerStartAd(this.url);
+            this.trigger('advertisement_played');
+            const ad = adEvent.getAd();
+            try {
+                assert(Roll._contentElement, 'content element not found');
+                assert('google' in window, 'Google IMA SDK not found');
+                this._adsManager && this._adsManager.resize(Roll._contentElement.offsetWidth, Roll._contentElement.offsetHeight, window.google.ima.ViewMode.NORMAL);
+            }
+            catch (error) {
+                // LogManager.exception(error);
+                reportError(error);
+            }
+            if (this.mute) {
+                this._setVolume(0);
+            }
+            else {
+                this._setVolume(this._volume);
+            }
+            if (ad.isLinear()) {
+                // For a linear ad, a timer can be started to poll for
+                // the remaining time.
+                this.intervalTimer = setInterval(() => {
+                    this._remainingTime(ad);
+                }, 300); // every 300ms
+            }
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.FIRST_QUARTILE, () => {
+            this._imaEvent('first_quartile');
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.MIDPOINT, () => {
+            this._imaEvent('midpoint');
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.THIRD_QUARTILE, () => {
+            this._imaEvent('third_quartile');
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.COMPLETE, () => {
+            this._imaEvent('complete');
+            this._useDummyMp4Video = false;
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED, () => {
+            this._imaEvent('all_ads_completed');
+            this._cleverContinueAd();
+            this._useDummyMp4Video = false;
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.PAUSED, () => {
+            this._imaEvent('paused');
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.RESUMED, () => {
+            this._imaEvent('resumed');
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.SKIPPED, () => {
+            this._imaEvent('skipped');
+            if (this.extension && this.extension.skipAd) {
+                this._trackUrl(this.extension.skipAd);
+            }
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.VOLUME_CHANGED, () => {
+            this._imaEvent('volume_change');
+            this.changeIconVolume();
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.VOLUME_MUTED, () => {
+            this._imaEvent('volume_muted');
+            this.changeIconVolume();
+        });
+        this._adsManager.addEventListener(window.google.ima.AdEvent.Type.USER_CLOSE, () => {
+            this._imaEvent('user_close');
+        });
+        if (this.mute) {
+            this._setVolume(0);
+        }
+        else {
+            this._setVolume(this._volume);
+        }
+        this._setupOverlay();
+    }
+    _triggerStartAd(url) {
+        if (!this._isAdStartedTriggered) {
+            this._isAdStartedTriggered = true;
+            this.trigger('advertisement_started', {
+                url
+            });
+        }
+    }
+    _remainingTime(ad) {
+        if (!ad || !this._adsManager) {
+            return;
+        }
+        const remainingTime = Math.abs(this._adsManager.getRemainingTime());
+        const duration = ad.getDuration() || ad.getMinSuggestedDuration();
+        if (!this.firstRemaininTime) {
+            this.firstRemaininTime = this._adsManager.getRemainingTime();
+        }
+        const shouldShowSkip = remainingTime < this.firstRemaininTime &&
+            this.extension.timeOffset > -1 &&
+            this.firstRemaininTime > this.extension.timeOffset &&
+            !(duration > 0 && Math.abs(duration) < this.extension.timeOffset);
+        if (!shouldShowSkip) {
+            return;
+        }
+        this.$skipAd.show();
+        const offset = Math.round(this.extension.timeOffset - Math.abs(this.firstRemaininTime - remainingTime));
+        if (offset > 0) {
+            this.$skipAd.addClass('skip-ad-time');
+            this.$skipAd.text(this.core.i18n.t('you_can_skip_ad') + ' ' + offset);
+        }
+        else {
+            this.$skipAd.removeClass('skip-ad-time');
+            this.$skipAd.text(this.core.i18n.t('skip_ad'));
+        }
+    }
+    _cleverContinueAd(error) {
+        try {
+            this.destroy();
+        }
+        catch (error) {
+            // LogManager.exception(error);
+            reportError(error);
+        }
+        this.trigger('continue_ad', { error });
+    }
+    _imaEvent(eventName, e) {
+        $.isFunction(this._events[eventName]) && this._events[eventName](e);
+    }
+    changeIconVolume() {
+        if (!this._adsManager) {
+            return;
+        }
+        this.$muteIcon.show();
+        if (this._adsManager.getVolume() === 0) {
+            if (!this._volume && this._adsManager.getVolume()) {
+                this._volume = this._adsManager.getVolume() * 100;
+            }
+            this.$muteIcon.find('.mute-off-ad-icon').show();
+            this.$muteIcon.find('.mute-on-ad-icon').hide();
+        }
+        else {
+            this._volume = this._adsManager.getVolume() * 100;
+            this.$muteIcon.find('.mute-on-ad-icon').show();
+            this.$muteIcon.find('.mute-off-ad-icon').hide();
+        }
+    }
+    _setupOverlay() {
+        this.$muteIcon.off('click');
+        this.$skipAd.off('click');
+        this.$areaClick.off('click');
+        this.$muteIcon.off();
+        this.$skipAd.off();
+        this.$areaClick.off();
+        this.$muteIcon.on('click', () => {
+            if (this._adsManager) {
+                if (this._adsManager.getVolume() === 0) {
+                    this._setVolume((this._prevValueVolume ? this._prevValueVolume : this._volume));
+                }
+                else {
+                    this._setVolume(0);
+                }
+                this.changeIconVolume();
+            }
+        });
+        this.$skipAd.on('click', () => {
+            if (this.extension.skipEvents) {
+                this._trackUrls(this.extension.skipEvents);
+            }
+            if (this.extension.progressEvents) {
+                this._trackUrls(this.extension.progressEvents);
+            }
+            if (this.extension && this.extension.skipAd) {
+                this._trackUrl(this.extension.skipAd);
+            }
+            this._adsManager.stop();
+            console.warn('skip ad');
+        });
+        if (this.extension.clickThrough) {
+            this.$areaClick.show();
+            this.$areaClick.on('click', () => {
+                window.open(this.extension.clickThrough, '_blank');
+                console.warn(this.extension.clickTrackings);
+                if (this.extension.clickTrackings.length) {
+                    this._trackUrls(this.extension.clickTrackings);
+                }
+            });
+        }
+        this._hideControls();
+        this._playAds();
+    }
+    _trackUrls(urls) {
+        for (let i = 0; i < urls.length; i++) {
+            this._trackUrl(urls[i]);
+        }
+    }
+    _trackUrl(url) {
+        if (url) {
+            const i = new Image();
+            i.src = url;
+        }
+    }
+    destroy() {
+        if (this.intervalTimer) {
+            clearInterval(this.intervalTimer);
+            this.intervalTimer = null;
+        }
+        if (Roll._adDisplayContainer) {
+            if (this._adsManager) {
+                this._adsManager.destroy();
+            }
+        }
+    }
+}

package/lib/plugins/vast-ads/rollmanager.d.ts

@@ -0,0 +1,62 @@
+import { Core, Events } from '@clappr/core';
+import { ZeptoResult } from '../types.js';
+import { AdRollDesc, AdRollType } from './types.js';
+type CoreOptions = Record<string, unknown>;
+export default class RollManager extends Events {
+    private core;
+    private options;
+    private $skipAd;
+    private $muteIcon;
+    private $areaClick;
+    private _adContainer;
+    private type;
+    private countRoll;
+    private volume;
+    private prevVolume;
+    private _allURLRequest;
+    private _container;
+    private container;
+    private _options;
+    private vastAdsOptions;
+    private _playback;
+    private _contentElement;
+    private _posterPlugin;
+    private _clickToPausePlugin;
+    private adTemplates;
+    private extension;
+    private firstRemaininTime;
+    private _imaContainer;
+    private isPlaying;
+    private loadXML;
+    private _pr;
+    private roll;
+    constructor(core: Core, options: CoreOptions, $skipAd: ZeptoResult, $muteIcon: ZeptoResult, $areaClick: ZeptoResult, _adContainer: HTMLElement, type: AdRollType, countRoll: number, volume: number, prevVolume: number);
+    private initializeRoll;
+    playerResize(_: {
+        width: number;
+        height: number;
+    }): void;
+    private onAdStarted;
+    onAdPlayed(): void;
+    private removeContainer;
+    private changeVolume;
+    _createImaContainer(): void;
+    _destroyImaContainer(): void;
+    setupRoll(): Promise<void>;
+    startAd(type: AdRollType, roll: AdRollDesc): Promise<void>;
+    _disableControls(): void;
+    private parseAdUrl;
+    paramsUrl(url: string): string;
+    loadAd(url: string): Promise<void>;
+    _onAdError(adErrorEvent: any): void;
+    _imaEvent(eventName: string, e: any): void;
+    /**
+     * определяет, что дальше будет запускаться реклама или контент
+     *
+     */
+    _cleverContinueAd(data: any): Promise<void>;
+    _playVideoContent(): void;
+    destroyRoll(): void;
+}
+export {};
+//# sourceMappingURL=rollmanager.d.ts.map

package/lib/plugins/vast-ads/rollmanager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rollmanager.d.ts","sourceRoot":"","sources":["../../../src/plugins/vast-ads/rollmanager.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,IAAI,EAAE,MAAM,EAAuD,MAAM,cAAc,CAAC;AAMzI,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAc,UAAU,EAAkB,MAAM,YAAY,CAAC;AAEhF,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAI3C,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,MAAM;IAqC3C,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,UAAU;IAClB,OAAO,CAAC,YAAY;IACpB,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,SAAS;IACjB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,UAAU;IA7CpB,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,UAAU,CAAY;IAC9B,OAAO,CAAC,SAAS,CAAY;IAE7B,OAAO,CAAC,QAAQ,CAAc;IAE9B,OAAO,CAAC,cAAc,CAAiB;IAEvC,OAAO,CAAC,SAAS,CAAW;IAE5B,OAAO,CAAC,eAAe,CAAmB;IAE1C,OAAO,CAAC,aAAa,CAAoB;IAEzC,OAAO,CAAC,mBAAmB,CAAkB;IAE7C,OAAO,CAAC,WAAW,CAA6B;IAIhD,OAAO,CAAC,SAAS,CAA8B;IAE/C,OAAO,CAAC,iBAAiB,CAAK;IAE9B,OAAO,CAAC,aAAa,CAA4B;IAEjD,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO,CAAC,OAAO,CAA0B;IAEzC,OAAO,CAAC,GAAG,CAAS;IAEpB,OAAO,CAAC,IAAI,CAAqB;gBAGvB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,EAAE,WAAW,EACvB,YAAY,EAAE,WAAW,EACzB,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM;IAqB5B,OAAO,CAAC,cAAc;IA6BtB,YAAY,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;IAMjD,OAAO,CAAC,WAAW;IAInB,UAAU;IAIV,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY;IAUpB,mBAAmB;IAUnB,oBAAoB;IAOd,SAAS;IA+BT,OAAO,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU;IAmDhD,gBAAgB;IAOhB,OAAO,CAAC,UAAU;IAQlB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAgCxB,MAAM,CAAC,GAAG,EAAE,MAAM;IAwDxB,UAAU,CAAC,YAAY,EAAE,GAAG;IAiB5B,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG;IAInC;;;OAGG;IACG,iBAAiB,CAAC,IAAI,EAAE,GAAG;IAcjC,iBAAiB;IAejB,WAAW;CASZ"}