@gcorevideo/player 2.18.3 → 2.19.0

package/lib/plugins/playback-rate/PlaybackRate.js

@@ -0,0 +1,205 @@
+import { Events, UICorePlugin, Playback, template } from '@clappr/core';
+import { CLAPPR_VERSION } from '../build.js';
+import pluginHtml from '../../../assets/playback-rate/playback-rate-selector.ejs';
+import buttonHtml from '../../../assets/playback-rate/button.ejs';
+import listHtml from '../../../assets/playback-rate/list.ejs';
+import speedIcon from '../../../assets/icons/new/speed.svg';
+import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg';
+import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg';
+import checkIcon from '../../../assets/icons/new/check.svg';
+const DEFAULT_PLAYBACK_RATES = [
+    { value: '0.5', label: '0.5x' },
+    { value: '0.75', label: '0.75x' },
+    { value: '1.0', label: '1x' },
+    { value: '1.25', label: '1.25x' },
+    { value: '1.5', label: '1.5x' },
+    { value: '1.75', label: '1.75x' },
+    { value: '2.0', label: '2x' }
+];
+const DEFAULT_PLAYBACK_RATE = '1.0';
+const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
+export class PlaybackRate extends UICorePlugin {
+    currentPlayback = null;
+    playbackRates = DEFAULT_PLAYBACK_RATES;
+    prevSelectedRate;
+    selectedRate = DEFAULT_PLAYBACK_RATE;
+    get name() {
+        return 'playback_rate';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    get template() {
+        return template(pluginHtml);
+    }
+    get attributes() {
+        return {
+            'class': this.name,
+            'data-playback-rate-select': ''
+        };
+    }
+    get events() {
+        return {
+            'click .gear-sub-menu_btn': 'onRateSelect',
+            'click .gear-option': 'onShowMenu',
+            'click .go-back': 'goBack',
+        };
+    }
+    bindEvents() {
+        this.listenTo(this.core, 'gear:rendered', this.render);
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+        this.listenTo(this.core.mediaControl, MEDIACONTROL_PLAYBACKRATE, this.updatePlaybackRate);
+        this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
+        this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
+        if (this.core.activeContainer) {
+            this.listenTo(this.core.activePlayback, Events.PLAYBACK_BUFFERFULL, this.updateLiveStatus);
+        }
+        if (this.currentPlayback) {
+            this.listenTo(this.currentPlayback, Events.PLAYBACK_STOP, this.onStop);
+            this.listenTo(this.currentPlayback, Events.PLAYBACK_PLAY, this.onPlay);
+            // TODO import dash playback events
+            this.listenTo(this.currentPlayback, 'dash:playback-rate-changed', this.onDashRateChange);
+        }
+    }
+    unBindEvents() {
+        this.stopListening(this.core, 'gear:rendered', this.render);
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+        this.stopListening(this.core, 'core:advertisement:start', this.onStartAd);
+        this.stopListening(this.core, 'core:advertisement:finish', this.onFinishAd);
+    }
+    allRateElements() {
+        return this.$('ul.gear-sub-menu li');
+    }
+    rateElement(rate = "1") {
+        return this.$(`ul.gear-sub-menu a[data-rate="${rate}"]`).parent();
+    }
+    onDashRateChange() {
+        // TODO consider removing
+        this.currentPlayback._dash?.setPlaybackRate(this.selectedRate);
+    }
+    updateLiveStatus() {
+        if (this.core.getPlaybackType() === Playback.LIVE) {
+            if (this.core.mediaControl.currentSeekBarPercentage <= 98.9) {
+                this.core.mediaControl.$playbackRate.removeClass('playbackrate-enable');
+                this.core.mediaControl.$el.addClass('dvr');
+                return;
+            }
+            this.updatePlaybackRate(DEFAULT_PLAYBACK_RATE);
+            this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
+            this.core.mediaControl.$el.removeClass('dvr');
+        }
+    }
+    reload() {
+        this.unBindEvents();
+        this.bindEvents();
+    }
+    shouldRender() {
+        if (!this.core.activeContainer) {
+            return false;
+        }
+        this.currentPlayback = this.core.activePlayback;
+        return !(this.currentPlayback?.tagName !== 'video' && this.currentPlayback?.tagName !== 'audio');
+    }
+    render() {
+        const container = this.core.activeContainer;
+        if (this.core.getPlaybackType() === Playback.LIVE && !container.isDvrEnabled()) {
+            return this;
+        }
+        const cfg = this.core.options.playbackRateConfig || {};
+        if (!this.playbackRates) {
+            this.playbackRates = cfg.options || DEFAULT_PLAYBACK_RATES;
+        }
+        if (!this.selectedRate) {
+            this.selectedRate = cfg.defaultValue || DEFAULT_PLAYBACK_RATE;
+        }
+        if (this.shouldRender()) {
+            const t = template(buttonHtml);
+            // const html = t({ playbackRates: this.playbackRates, title: this.getTitle() });
+            const button = t({
+                title: this.getTitle(),
+                speedIcon,
+                arrowRightIcon,
+            });
+            this.$el.html(button);
+            // if (this.core.getPlaybackType() === Playback.LIVE) {
+            //   this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
+            // }
+            // this.core.mediaControl.$playbackRate.append(this.el);
+            this.core.mediaControl.$el?.find('.gear-options-list [data-rate]').html(this.el);
+            // this.updateText();
+        }
+        return this;
+    }
+    onStartAd() {
+        this.prevSelectedRate = this.selectedRate;
+        this.setSelectedRate('1.0');
+        this.listenToOnce(this.currentPlayback, Events.PLAYBACK_PLAY, this.onFinishAd);
+    }
+    onFinishAd() {
+        if (this.prevSelectedRate) {
+            this.setSelectedRate(this.prevSelectedRate);
+        }
+    }
+    onPlay() {
+        if (!this.core.mediaControl.$el.hasClass('dvr')) {
+            if (this.core.getPlaybackType() === Playback.LIVE) {
+                this.updatePlaybackRate(DEFAULT_PLAYBACK_RATE);
+                this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
+            }
+        }
+        else {
+            this.setSelectedRate(this.selectedRate);
+        }
+    }
+    onStop() {
+    }
+    onRateSelect(event) {
+        event.stopPropagation();
+        const rate = event.currentTarget.dataset.rate;
+        if (rate) {
+            this.setSelectedRate(rate);
+            this.highlightCurrentRate();
+        }
+        return false;
+    }
+    onShowMenu() {
+        const t = template(listHtml);
+        this.$el.html(t({
+            playbackRates: this.playbackRates,
+            arrowLeftIcon,
+            checkIcon,
+        }));
+        this.core.mediaControl.$el?.find('.gear-wrapper').html(this.el);
+        this.highlightCurrentRate();
+    }
+    goBack() {
+        this.core.trigger('gear:refresh');
+    }
+    updatePlaybackRate(rate) {
+        this.setSelectedRate(rate);
+    }
+    setSelectedRate(rate) {
+        // Set <video playbackRate="..."
+        this.core.$el.find('video,audio').get(0).playbackRate = rate;
+        this.selectedRate = rate;
+        // TODO
+        // Player.player.trigger('playbackRateChanged', rate);
+    }
+    getTitle() {
+        let title = this.selectedRate;
+        this.playbackRates.forEach((r) => {
+            if (r.value === this.selectedRate) {
+                title = r.label;
+            }
+        });
+        return title;
+    }
+    highlightCurrentRate() {
+        this.allRateElements().removeClass('current');
+        this.allRateElements().find('a').removeClass('gcore-skin-active');
+        const currentLevelElement = this.rateElement(this.selectedRate);
+        currentLevelElement.addClass('current');
+        currentLevelElement.find('a').addClass('gcore-skin-active');
+    }
+}
+// PlaybackRate.MEDIACONTROL_PLAYBACKRATE = 'playbackRate';

package/lib/plugins/poster/Poster.d.ts

@@ -1,6 +1,6 @@
-import { UIContainerPlugin, Container } from '@clappr/core';
-import '../../../assets/plugins/poster/poster.scss';
-export default class Poster extends UIContainerPlugin {
+import { UIContainerPlugin } from '@clappr/core';
+import '../../../assets/poster/poster.scss';
+export declare class Poster extends UIContainerPlugin {
     private hasFatalError;
     private hasStartedPlaying;
     private playRequested;
@@ -19,23 +19,24 @@ export default class Poster extends UIContainerPlugin {
     get events(): {
         click: string;
     };
-    get showOnVideoEnd(): any;
-    constructor(container: Container);
+    get showOnVideoEnd(): boolean;
     bindEvents(): void;
+    enable(): void;
+    disable(): void;
     private onError;
-    onPlay(): void;
-    onStop(): void;
-    updatePlayButton(show: boolean): void;
-    showPlayButton(): void;
-    hidePlayButton(): void;
-    clicked(): boolean;
-    shouldHideOnPlay(): boolean;
-    update(): void;
-    updatePoster(): void;
-    showPoster(): void;
-    hidePoster(): void;
+    private onPlay;
+    private onPlayIntent;
+    private onStop;
+    private updatePlayButton;
+    private showPlayButton;
+    private hidePlayButton;
+    private clicked;
+    private shouldHideOnPlay;
+    private update;
+    private updatePoster;
+    private showPoster;
+    private hidePoster;
     render(): this;
-    removeVideoElementPoster(): void;
     destroy(): this;
 }
 //# sourceMappingURL=Poster.d.ts.map

package/lib/plugins/poster/Poster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Poster.d.ts","sourceRoot":"","sources":["../../../src/plugins/poster/Poster.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiC,iBAAiB,EAAe,SAAS,EAAE,MAAM,cAAc,CAAC;AAExG,OAAO,4CAA4C,CAAC;AAapD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,iBAAiB;IACnD,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,CAAC,iBAAiB,CAAS;IAElC,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,YAAY,CAA4B;IAEhD,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAI,YAAY,YAIf;IAED,IAAI,UAAU;;;MAKb;IAED,IAAI,MAAM;;MAIT;IAED,IAAI,cAAc,QAEjB;gBAEW,SAAS,EAAE,SAAS;IAOhC,UAAU;IAWV,OAAO,CAAC,OAAO;IAWf,MAAM;IAKN,MAAM;IAMN,gBAAgB,CAAC,IAAI,EAAE,OAAO;IAQ9B,cAAc;IAad,cAAc;IAKd,OAAO;IAiBP,gBAAgB;IAKhB,MAAM;IAWN,YAAY;IAQZ,UAAU;IAKV,UAAU;IASV,MAAM;IAoCN,wBAAwB;IAQxB,OAAO;CAIR"}
+{"version":3,"file":"Poster.d.ts","sourceRoot":"","sources":["../../../src/plugins/poster/Poster.ts"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EAIlB,MAAM,cAAc,CAAA;AAMrB,OAAO,oCAAoC,CAAA;AAO3C,qBAAa,MAAO,SAAQ,iBAAiB;IAC3C,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,WAAW,CAA2B;IAE9C,OAAO,CAAC,YAAY,CAA2B;IAE/C,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAI,YAAY,YAef;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;MAIlB;IAED,IAAI,cAAc,YAEjB;IAEQ,UAAU;IAiBV,MAAM;IAMN,OAAO;IAOhB,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,MAAM;IAiBd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,UAAU;IAYT,MAAM;IAuCN,OAAO;CAIjB"}

package/lib/plugins/poster/Poster.js

@@ -1,15 +1,14 @@
 //Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
-import { Events, Playback, PlayerError, UIContainerPlugin, template, $ } from '@clappr/core';
-import '../../../assets/plugins/poster/poster.scss';
-import posterHTML from '../../../assets/plugins/poster/poster.ejs';
+import { Events, Playback, PlayerError, UIContainerPlugin, template, $, } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
+import { CLAPPR_VERSION } from '../build.js';
+import '../../../assets/poster/poster.scss';
+import posterHTML from '../../../assets/poster/poster.ejs';
 import playIcon from '../../../assets/icons/new/play.svg';
-import assert from 'assert';
 const T = 'plugins.poster_custom';
-assert(process.env.CLAPPR_VERSION, 'CLAPPR_VERSION is required');
-const CLAPPR_VERSION = process.env.CLAPPR_VERSION;
-export default class Poster extends UIContainerPlugin {
+export class Poster extends UIContainerPlugin {
     hasFatalError = false;
     hasStartedPlaying = false;
     playRequested = false;
@@ -25,27 +24,31 @@ export default class Poster extends UIContainerPlugin {
         return template(posterHTML);
     }
     get shouldRender() {
-        const showForNoOp = !!(this.options.poster && this.options.poster.showForNoOp);
-        return this.container.playback.name !== 'html_img' && (this.container.playback.getPlaybackType() !== Playback.NO_OP || showForNoOp);
+        if (!this.enabled) {
+            return false;
+        }
+        // const showOnError = this.options.poster?.showOnError !== false
+        trace(`${T} shouldRender`, {
+            hasFatalError: this.hasFatalError,
+        });
+        const showForNoOp = !!this.options.poster?.showForNoOp;
+        return (this.container.playback.name !== 'html_img' &&
+            (this.container.playback.getPlaybackType() !== Playback.NO_OP ||
+                showForNoOp));
     }
     get attributes() {
         return {
-            'class': 'player-poster',
-            'data-poster': ''
+            class: 'player-poster',
+            'data-poster': '',
         };
     }
     get events() {
         return {
-            'click': 'clicked'
+            click: 'clicked',
         };
     }
     get showOnVideoEnd() {
-        return !this.options.poster || this.options.poster.showOnVideoEnd || this.options.poster.showOnVideoEnd === undefined;
-    }
-    constructor(container) {
-        super(container);
-        this.render();
-        setTimeout(() => this.update(), 0);
+        return this.options.poster?.showOnVideoEnd !== false;
     }
     bindEvents() {
         this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
@@ -54,29 +57,62 @@ export default class Poster extends UIContainerPlugin {
         this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERFULL, this.update);
         this.listenTo(this.container, Events.CONTAINER_OPTIONS_CHANGE, this.render);
         this.listenTo(this.container, Events.CONTAINER_ERROR, this.onError);
-        this.showOnVideoEnd && this.listenTo(this.container, Events.CONTAINER_ENDED, this.onStop);
+        this.showOnVideoEnd &&
+            this.listenTo(this.container, Events.CONTAINER_ENDED, this.onStop);
         this.listenTo(this.container, Events.CONTAINER_READY, this.render);
+        this.listenTo(this.container, Events.PLAYBACK_PLAY_INTENT, this.onPlayIntent);
+    }
+    enable() {
+        super.enable();
+        this.hasStartedPlaying = this.container.playback.isPlaying();
+        this.update();
+    }
+    disable() {
+        trace(`${T} disable`);
+        this.hasStartedPlaying = false;
+        this.playRequested = false;
+        super.disable();
     }
     onError(error) {
-        // @ts-ignore
+        trace(`${T} onError`, {
+            error,
+            enabled: this.enabled,
+        });
         this.hasFatalError = error.level === PlayerError.Levels.FATAL;
         if (this.hasFatalError) {
             this.hasStartedPlaying = false;
-            this.playRequested = false;
-            this.showPlayButton();
+            if (!this.playRequested) {
+                this.showPlayButton();
+            }
         }
     }
     onPlay() {
+        trace(`${T} onPlay`);
         this.hasStartedPlaying = true;
+        this.playRequested = false;
+        this.update();
+    }
+    onPlayIntent() {
+        trace(`${T} onPlayIntent`);
+        this.playRequested = true;
         this.update();
     }
     onStop() {
+        trace(`${T} onStop`, {
+            enabled: this.enabled,
+        });
         this.hasStartedPlaying = false;
         this.playRequested = false;
         this.update();
     }
     updatePlayButton(show) {
-        if (show && (!this.options.chromeless || this.options.allowUserInteraction)) {
+        trace(`${T} updatePlayButton`, {
+            show,
+            chromeless: this.options.chromeless,
+            allowUserInteraction: this.options.allowUserInteraction,
+        });
+        if (show &&
+            (!this.options.chromeless || this.options.allowUserInteraction)) {
             this.showPlayButton();
         }
         else {
@@ -99,17 +135,23 @@ export default class Poster extends UIContainerPlugin {
         this.$el.removeClass('clickable');
     }
     clicked() {
+        trace(`${T} clicked`, {
+            hasStartedPlaying: this.hasStartedPlaying,
+            chromeless: this.options.chromeless,
+            allowUserInteraction: this.options.allowUserInteraction,
+        });
         // Let "click_to_pause" plugin handle click event if media has started playing
         if (!this.hasStartedPlaying) {
             if (!this.options.chromeless || this.options.allowUserInteraction) {
                 this.playRequested = true;
                 this.update();
-                this.container.playback && (this.container.playback._consented = true);
-                this.container.play();
+                this.container.playback.consent();
+                this.container.playback.play();
             }
-            return false;
         }
-        this.container.trigger('container:start');
+        else {
+            this.container.trigger('container:start');
+        }
         return false;
     }
     shouldHideOnPlay() {
@@ -117,14 +159,22 @@ export default class Poster extends UIContainerPlugin {
         return !this.container.playback.isAudioOnly;
     }
     update() {
+        trace(`${T} update`, {
+            shouldRender: this.shouldRender,
+        });
         if (!this.shouldRender) {
             return;
         }
-        const showPlayButton = !this.playRequested && !this.hasStartedPlaying && !this.container.buffering;
+        const showPlayButton = !this.playRequested &&
+            !this.hasStartedPlaying &&
+            !this.container.buffering;
         this.updatePlayButton(showPlayButton);
         this.updatePoster();
     }
     updatePoster() {
+        trace(`${T} updatePoster`, {
+            hasStartedPlaying: this.hasStartedPlaying,
+        });
         if (!this.hasStartedPlaying) {
             this.showPoster();
         }
@@ -137,6 +187,9 @@ export default class Poster extends UIContainerPlugin {
         this.$el.show();
     }
     hidePoster() {
+        trace(`${T} hidePoster`, {
+            shouldHideOnPlay: this.shouldHideOnPlay(),
+        });
         if (!this.options.disableMediaControl) {
             this.container.enableMediaControl();
         }
@@ -155,13 +208,13 @@ export default class Poster extends UIContainerPlugin {
             this.$el.css({ 'background-image': 'url(' + posterUrl + ')' });
         }
         else if (this.options.poster) {
-            this.$el.css({ 'background': this.options.poster.custom });
+            this.$el.css({ background: this.options.poster.custom });
         }
         this.container.$el.removeClass('container-with-poster-clickable');
         this.container.$el.append(this.el);
         this.$playWrapper = this.$el.find('.play-wrapper');
         this.$playWrapper.addClass('control-need-disable');
-        this.$playButton = $('<div class=\'circle-poster gcore-skin-button-color gcore-skin-border-color\'></div>');
+        this.$playButton = $("<div class='circle-poster gcore-skin-button-color gcore-skin-border-color'></div>");
         this.$playWrapper.append(this.$playButton);
         this.$playButton.append(playIcon);
         if (this.options.autoPlay) {
@@ -172,13 +225,6 @@ export default class Poster extends UIContainerPlugin {
         this.update();
         return this;
     }
-    removeVideoElementPoster() {
-        this.container.playback &&
-            this.container.playback.$el &&
-            this.container.playback.$el[0] &&
-            this.container.playback.$el[0].removeAttribute &&
-            this.container.playback.$el[0].removeAttribute('poster');
-    }
     destroy() {
         this.container.$el.removeClass('container-with-poster-clickable');
         return this;

package/lib/plugins/seek-time/SeekTime.d.ts

@@ -0,0 +1,38 @@
+import { UICorePlugin } from '@clappr/core';
+import '../../../assets/seek-time/seek-time.scss';
+export declare class SeekTime extends UICorePlugin {
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    get template(): any;
+    get attributes(): {
+        class: string;
+        'data-seek-time': string;
+    };
+    get mediaControl(): any;
+    get mediaControlContainer(): any;
+    get isLiveStreamWithDvr(): any;
+    get durationShown(): boolean;
+    private hoveringOverSeekBar;
+    private hoverPosition;
+    private displayedDuration;
+    private displayedSeekTime;
+    private duration;
+    private rendered;
+    private $durationEl;
+    private $seekTimeEl;
+    bindEvents(): void;
+    private onContainerChanged;
+    private updateDuration;
+    private showTime;
+    private hideTime;
+    private calculateHoverPosition;
+    getSeekTime(): {
+        seekTime: number;
+    };
+    update(): void;
+    shouldBeVisible(): any;
+    render(): this;
+}
+//# sourceMappingURL=SeekTime.d.ts.map

package/lib/plugins/seek-time/SeekTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeekTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/seek-time/SeekTime.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,YAAY,EAAmB,MAAM,cAAc,CAAC;AAM/E,OAAO,0CAA0C,CAAC;AAKlD,qBAAa,QAAS,SAAQ,YAAY;IACxC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAI,YAAY,QAEf;IAED,IAAI,qBAAqB,QAExB;IAED,IAAI,mBAAmB,QAItB;IAED,IAAI,aAAa,YAEhB;IAED,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,iBAAiB,CAAuB;IAEhD,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,OAAO,CAAC,QAAQ,CAAK;IAGrB,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,WAAW,CAA4B;IAEtC,UAAU;IAWnB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,sBAAsB;IAO9B,WAAW;;;IAYX,MAAM;IA8CN,eAAe;IAQN,MAAM;CAahB"}

package/lib/plugins/seek-time/SeekTime.js

@@ -0,0 +1,153 @@
+// Copyright 2014 Globo.com Player authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+import { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core';
+import { CLAPPR_VERSION } from '../build.js';
+import seekTimeHTML from '../../../assets/seek-time/seek-time.html';
+import '../../../assets/seek-time/seek-time.scss';
+const { formatTime } = Utils;
+export class SeekTime extends UICorePlugin {
+    get name() {
+        return 'seek_time';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    get template() {
+        return template(seekTimeHTML);
+    }
+    get attributes() {
+        return {
+            'class': 'seek-time',
+            'data-seek-time': ''
+        };
+    }
+    get mediaControl() {
+        return this.core.mediaControl;
+    }
+    get mediaControlContainer() {
+        return this.mediaControl.container;
+    }
+    get isLiveStreamWithDvr() {
+        return this.mediaControlContainer &&
+            this.mediaControlContainer.getPlaybackType() === Playback.LIVE &&
+            this.mediaControlContainer.isDvrEnabled();
+    }
+    get durationShown() {
+        return !this.isLiveStreamWithDvr;
+    }
+    hoveringOverSeekBar = false;
+    hoverPosition = 0;
+    displayedDuration = null;
+    displayedSeekTime = null;
+    duration = 0;
+    // private firstFragDateTime = 0;
+    rendered = false;
+    $durationEl = null;
+    $seekTimeEl = null;
+    bindEvents() {
+        this.listenTo(this.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        this.listenTo(this.mediaControl, Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this.showTime);
+        this.listenTo(this.mediaControl, Events.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this.hideTime);
+        this.listenTo(this.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.onContainerChanged);
+        if (this.mediaControlContainer) {
+            this.listenTo(this.mediaControlContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.update);
+            this.listenTo(this.mediaControlContainer, Events.CONTAINER_TIMEUPDATE, this.updateDuration);
+        }
+    }
+    onContainerChanged() {
+        // @ts-ignore
+        this.stopListening();
+        this.bindEvents();
+    }
+    updateDuration(timeProgress) {
+        this.duration = timeProgress.total;
+        // this.firstFragDateTime = timeProgress.firstFragDateTime;
+        this.update();
+    }
+    showTime(event) {
+        this.hoveringOverSeekBar = true;
+        this.calculateHoverPosition(event);
+        this.update();
+    }
+    hideTime() {
+        this.hoveringOverSeekBar = false;
+        this.update();
+    }
+    calculateHoverPosition(event) {
+        const offset = event.pageX - this.mediaControl.$seekBarContainer.offset().left;
+        // proportion into the seek bar that the mouse is hovered over 0-1
+        this.hoverPosition = Math.min(1, Math.max(offset / this.mediaControl.$seekBarContainer.width(), 0));
+    }
+    getSeekTime() {
+        let seekTime;
+        if (this.isLiveStreamWithDvr) {
+            seekTime = this.duration - this.hoverPosition * this.duration;
+        }
+        else {
+            seekTime = this.hoverPosition * this.duration;
+        }
+        return { seekTime };
+    }
+    update() {
+        if (!this.rendered) {
+            // update() is always called after a render
+            return;
+        }
+        if (!this.shouldBeVisible()) {
+            this.$el.hide();
+            this.$el.css('left', '-100%');
+        }
+        else {
+            const seekTime = this.getSeekTime();
+            let currentSeekTime = formatTime(seekTime.seekTime, false);
+            if (this.isLiveStreamWithDvr) {
+                currentSeekTime = `-${currentSeekTime}`;
+            }
+            // only update dom if necessary, ie time actually changed
+            if (currentSeekTime !== this.displayedSeekTime) {
+                this.$seekTimeEl.text(currentSeekTime);
+                this.displayedSeekTime = currentSeekTime;
+            }
+            if (this.durationShown) {
+                this.$durationEl.show();
+                const currentDuration = formatTime(this.duration, false);
+                if (currentDuration !== this.displayedDuration) {
+                    this.$durationEl.text(currentDuration);
+                    this.displayedDuration = currentDuration;
+                }
+            }
+            else {
+                this.$durationEl.hide();
+            }
+            // the element must be unhidden before its width is requested, otherwise it's width will be reported as 0
+            this.$el.show();
+            const containerWidth = this.mediaControl.$seekBarContainer.width();
+            const elWidth = this.$el.width();
+            let elLeftPos = this.hoverPosition * containerWidth;
+            elLeftPos -= elWidth / 2;
+            elLeftPos = Math.max(0, Math.min(elLeftPos, containerWidth - elWidth));
+            this.$el.css('left', elLeftPos);
+        }
+    }
+    shouldBeVisible() {
+        return this.mediaControlContainer &&
+            this.mediaControlContainer.settings.seekEnabled &&
+            this.hoveringOverSeekBar &&
+            this.hoverPosition !== null &&
+            this.duration !== null;
+    }
+    render() {
+        this.rendered = true;
+        this.displayedDuration = null;
+        this.displayedSeekTime = null;
+        this.$el.html(this.template());
+        this.$el.hide();
+        this.mediaControl.$el.append(this.el);
+        this.$seekTimeEl = this.$el.find('[data-seek-time]');
+        this.$durationEl = this.$el.find('[data-duration]');
+        this.$durationEl.hide();
+        this.update();
+        return this;
+    }
+}