@gcorevideo/player 2.22.28 → 2.22.29

package/dist/index.js

@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.28";
+var version$1 = "2.22.29";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -50552,15 +50552,18 @@ function formatLevelLabel(level) {
     return `${h}p`;
 }
 
-const seekTimeHTML = "<span data-seek-time id=\"mc-seek-time\"></span>\n<span data-duration id=\"mc-duration\"></span>\n\n";
+const seekTimeHTML = "<span id=\"mc-seek-time\" class=\"seek-time__pos\"></span>\n<span id=\"mc-duration\" class=\"seek-time__duration\"></span>\n\n";
 
 // 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 at https://github.com/clappr/clappr-plugins/blob/master/LICENSE
 const { formatTime } = Utils;
+// const T = 'plugins.seek_time'
 /**
- * `PLUGIN` that adds a seek time indicator to the media control UI.
+ * `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
  * @beta
+ * @remarks
+ * Configuration options - {@link SeekTimeSettings}
  */
 class SeekTime extends UICorePlugin {
     get name() {
@@ -50573,7 +50576,6 @@ class SeekTime extends UICorePlugin {
     get attributes() {
         return {
             class: 'seek-time',
-            'data-seek-time': '',
         };
     }
     get isLiveStreamWithDvr() {
@@ -50581,23 +50583,21 @@ class SeekTime extends UICorePlugin {
             this.core.activeContainer.getPlaybackType() === Playback.LIVE &&
             this.core.activeContainer.isDvrEnabled());
     }
-    get durationShown() {
-        return !this.isLiveStreamWithDvr;
+    get showDuration() {
+        return (this.core.options.seekTime?.duration === true &&
+            this.core.activeContainer?.getPlaybackType() !== Playback.LIVE);
     }
     hoveringOverSeekBar = false;
     hoverPosition = 0;
     displayedDuration = null;
     displayedSeekTime = null;
     duration = 0;
-    // private firstFragDateTime = 0;
-    rendered = false;
-    $durationEl = null;
-    $seekTimeEl = null;
     /**
      * @internal
      */
     bindEvents() {
         this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
@@ -50605,11 +50605,6 @@ class SeekTime extends UICorePlugin {
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mount);
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this.showTime);
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this.hideTime);
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.onContainerChanged);
-        if (this.core.activeContainer) {
-            this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.update);
-            this.listenTo(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
-        }
     }
     onContainerChanged() {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.update);
@@ -50635,41 +50630,37 @@ class SeekTime extends UICorePlugin {
         this.hoverPosition = Math.min(1, Math.max(offset / mediaControl.$seekBarContainer.width(), 0));
     }
     getSeekTime() {
-        const seekTime = this.isLiveStreamWithDvr
+        return this.isLiveStreamWithDvr
             ? this.duration - this.hoverPosition * this.duration
             : 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%');
             return;
         }
         const seekTime = this.getSeekTime();
-        let currentSeekTime = formatTime(seekTime.seekTime, false);
+        let currentSeekTime = formatTime(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.$el.find('#mc-seek-time').text(currentSeekTime);
             this.displayedSeekTime = currentSeekTime;
         }
-        if (this.durationShown) {
-            this.$durationEl.show();
+        const $durationEl = this.$el.find('#mc-duration');
+        if (this.showDuration) {
+            $durationEl.show();
             const currentDuration = formatTime(this.duration, false);
             if (currentDuration !== this.displayedDuration) {
-                this.$durationEl.text(currentDuration);
+                $durationEl.text(currentDuration);
                 this.displayedDuration = currentDuration;
             }
         }
         else {
-            this.$durationEl.hide();
+            $durationEl.hide();
         }
         // the element must be unhidden before its width is requested, otherwise it's width will be reported as 0
         this.$el.show();
@@ -50692,16 +50683,10 @@ class SeekTime extends UICorePlugin {
      * @internal
      */
     render() {
-        this.rendered = true;
         this.displayedDuration = null;
         this.displayedSeekTime = null;
         this.$el.html(SeekTime.template());
         this.$el.hide();
-        // this.mediaControl.$el.append(this.el);
-        this.$seekTimeEl = this.$el.find('#mc-seek-time');
-        this.$durationEl = this.$el.find('#mc-duration');
-        this.$durationEl.hide();
-        this.update();
         return this;
     }
     mount() {

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

@@ -1,9 +1,22 @@
 import { UICorePlugin } from '@clappr/core';
 import '../../../assets/seek-time/seek-time.scss';
 /**
- * `PLUGIN` that adds a seek time indicator to the media control UI.
+ * Configuration options for the SeekTime plugin.
  * @beta
  */
+export type SeekTimeSettings = {
+    /**
+     * Whether to show the duration of the video. Applies only to the VOD streams.
+     * @beta
+     */
+    duration?: boolean;
+};
+/**
+ * `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
+ * @beta
+ * @remarks
+ * Configuration options - {@link SeekTimeSettings}
+ */
 export declare class SeekTime extends UICorePlugin {
     get name(): string;
     get supportedVersion(): {
@@ -12,18 +25,14 @@ export declare class SeekTime extends UICorePlugin {
     private static readonly template;
     get attributes(): {
         class: string;
-        'data-seek-time': string;
     };
     private get isLiveStreamWithDvr();
-    private get durationShown();
+    private get showDuration();
     private hoveringOverSeekBar;
     private hoverPosition;
     private displayedDuration;
     private displayedSeekTime;
     private duration;
-    private rendered;
-    private $durationEl;
-    private $seekTimeEl;
     /**
      * @internal
      */

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

@@ -1 +1 @@
-{"version":3,"file":"SeekTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/seek-time/SeekTime.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,YAAY,EAAmB,MAAM,cAAc,CAAA;AAM9E,OAAO,0CAA0C,CAAA;AAMjD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD,IAAa,UAAU;;;MAKtB;IAED,OAAO,KAAK,mBAAmB,GAM9B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,mBAAmB,CAAQ;IAEnC,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,OAAO,CAAC,QAAQ,CAAI;IAGpB,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,WAAW,CAA2B;IAE9C,OAAO,CAAC,WAAW,CAA2B;IAE9C;;OAEG;IACM,UAAU;IAInB,OAAO,CAAC,WAAW;IAoCnB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,MAAM;IAgDd,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACM,MAAM;IAcf,OAAO,CAAC,KAAK;CAGd"}
+{"version":3,"file":"SeekTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/seek-time/SeekTime.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,YAAY,EAAmB,MAAM,cAAc,CAAA;AAO9E,OAAO,0CAA0C,CAAA;AAEjD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAMD;;;;;GAKG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD,IAAa,UAAU;;MAItB;IAED,OAAO,KAAK,mBAAmB,GAM9B;IAED,OAAO,KAAK,YAAY,GAKvB;IAED,OAAO,CAAC,mBAAmB,CAAQ;IAEnC,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,OAAO,CAAC,QAAQ,CAAI;IAEpB;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,MAAM;IA6Cd,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACM,MAAM;IAQf,OAAO,CAAC,KAAK;CAGd"}

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

@@ -2,14 +2,17 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE
 import { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core';
+import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
 import seekTimeHTML from '../../../assets/seek-time/seek-time.html';
 import '../../../assets/seek-time/seek-time.scss';
-import assert from 'assert';
 const { formatTime } = Utils;
+// const T = 'plugins.seek_time'
 /**
- * `PLUGIN` that adds a seek time indicator to the media control UI.
+ * `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
  * @beta
+ * @remarks
+ * Configuration options - {@link SeekTimeSettings}
  */
 export class SeekTime extends UICorePlugin {
     get name() {
@@ -22,7 +25,6 @@ export class SeekTime extends UICorePlugin {
     get attributes() {
         return {
             class: 'seek-time',
-            'data-seek-time': '',
         };
     }
     get isLiveStreamWithDvr() {
@@ -30,23 +32,21 @@ export class SeekTime extends UICorePlugin {
             this.core.activeContainer.getPlaybackType() === Playback.LIVE &&
             this.core.activeContainer.isDvrEnabled());
     }
-    get durationShown() {
-        return !this.isLiveStreamWithDvr;
+    get showDuration() {
+        return (this.core.options.seekTime?.duration === true &&
+            this.core.activeContainer?.getPlaybackType() !== Playback.LIVE);
     }
     hoveringOverSeekBar = false;
     hoverPosition = 0;
     displayedDuration = null;
     displayedSeekTime = null;
     duration = 0;
-    // private firstFragDateTime = 0;
-    rendered = false;
-    $durationEl = null;
-    $seekTimeEl = null;
     /**
      * @internal
      */
     bindEvents() {
         this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
@@ -54,11 +54,6 @@ export class SeekTime extends UICorePlugin {
         this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.mount);
         this.listenTo(mediaControl, Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this.showTime);
         this.listenTo(mediaControl, Events.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this.hideTime);
-        this.listenTo(mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.onContainerChanged);
-        if (this.core.activeContainer) {
-            this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.update);
-            this.listenTo(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
-        }
     }
     onContainerChanged() {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.update);
@@ -84,41 +79,37 @@ export class SeekTime extends UICorePlugin {
         this.hoverPosition = Math.min(1, Math.max(offset / mediaControl.$seekBarContainer.width(), 0));
     }
     getSeekTime() {
-        const seekTime = this.isLiveStreamWithDvr
+        return this.isLiveStreamWithDvr
             ? this.duration - this.hoverPosition * this.duration
             : 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%');
             return;
         }
         const seekTime = this.getSeekTime();
-        let currentSeekTime = formatTime(seekTime.seekTime, false);
+        let currentSeekTime = formatTime(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.$el.find('#mc-seek-time').text(currentSeekTime);
             this.displayedSeekTime = currentSeekTime;
         }
-        if (this.durationShown) {
-            this.$durationEl.show();
+        const $durationEl = this.$el.find('#mc-duration');
+        if (this.showDuration) {
+            $durationEl.show();
             const currentDuration = formatTime(this.duration, false);
             if (currentDuration !== this.displayedDuration) {
-                this.$durationEl.text(currentDuration);
+                $durationEl.text(currentDuration);
                 this.displayedDuration = currentDuration;
             }
         }
         else {
-            this.$durationEl.hide();
+            $durationEl.hide();
         }
         // the element must be unhidden before its width is requested, otherwise it's width will be reported as 0
         this.$el.show();
@@ -141,16 +132,10 @@ export class SeekTime extends UICorePlugin {
      * @internal
      */
     render() {
-        this.rendered = true;
         this.displayedDuration = null;
         this.displayedSeekTime = null;
         this.$el.html(SeekTime.template());
         this.$el.hide();
-        // this.mediaControl.$el.append(this.el);
-        this.$seekTimeEl = this.$el.find('#mc-seek-time');
-        this.$durationEl = this.$el.find('#mc-duration');
-        this.$durationEl.hide();
-        this.update();
         return this;
     }
     mount() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.22.28",
+  "version": "2.22.29",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/plugins/seek-time/SeekTime.ts

@@ -3,20 +3,35 @@
 // license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE
 
 import { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core'
-import { TimePosition } from '../../playback.types.js'
+import assert from 'assert'
 
+import { TimePosition } from '../../playback.types.js'
 import { CLAPPR_VERSION } from '../../build.js'
 
 import seekTimeHTML from '../../../assets/seek-time/seek-time.html'
 import '../../../assets/seek-time/seek-time.scss'
-import { ZeptoResult } from '../../types.js'
-import assert from 'assert'
+
+/**
+ * Configuration options for the SeekTime plugin.
+ * @beta
+ */
+export type SeekTimeSettings = {
+  /**
+   * Whether to show the duration of the video. Applies only to the VOD streams.
+   * @beta
+   */
+  duration?: boolean
+}
 
 const { formatTime } = Utils
 
+// const T = 'plugins.seek_time'
+
 /**
- * `PLUGIN` that adds a seek time indicator to the media control UI.
+ * `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
  * @beta
+ * @remarks
+ * Configuration options - {@link SeekTimeSettings}
  */
 export class SeekTime extends UICorePlugin {
   get name() {
@@ -32,7 +47,6 @@ export class SeekTime extends UICorePlugin {
   override get attributes() {
     return {
       class: 'seek-time',
-      'data-seek-time': '',
     }
   }
 
@@ -44,8 +58,11 @@ export class SeekTime extends UICorePlugin {
     )
   }
 
-  private get durationShown() {
-    return !this.isLiveStreamWithDvr
+  private get showDuration() {
+    return (
+      this.core.options.seekTime?.duration === true &&
+      this.core.activeContainer?.getPlaybackType() !== Playback.LIVE
+    )
   }
 
   private hoveringOverSeekBar = false
@@ -57,19 +74,17 @@ export class SeekTime extends UICorePlugin {
   private displayedSeekTime: string | null = null
 
   private duration = 0
-  // private firstFragDateTime = 0;
-
-  private rendered = false
-
-  private $durationEl: ZeptoResult | null = null
-
-  private $seekTimeEl: ZeptoResult | null = null
 
   /**
    * @internal
    */
   override bindEvents() {
     this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.onContainerChanged,
+    )
   }
 
   private onCoreReady() {
@@ -89,23 +104,6 @@ export class SeekTime extends UICorePlugin {
       Events.MEDIACONTROL_MOUSELEAVE_SEEKBAR,
       this.hideTime,
     )
-    this.listenTo(
-      mediaControl,
-      Events.MEDIACONTROL_CONTAINERCHANGED,
-      this.onContainerChanged,
-    )
-    if (this.core.activeContainer) {
-      this.listenTo(
-        this.core.activeContainer,
-        Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
-        this.update,
-      )
-      this.listenTo(
-        this.core.activeContainer,
-        Events.CONTAINER_TIMEUPDATE,
-        this.onTimeUpdate,
-      )
-    }
   }
 
   private onContainerChanged() {
@@ -149,18 +147,12 @@ export class SeekTime extends UICorePlugin {
   }
 
   private getSeekTime() {
-    const seekTime = this.isLiveStreamWithDvr
+    return this.isLiveStreamWithDvr
       ? this.duration - this.hoverPosition * this.duration
       : this.hoverPosition * this.duration
-
-    return { seekTime }
   }
 
   private update() {
-    if (!this.rendered) {
-      // update() is always called after a render
-      return
-    }
     if (!this.shouldBeVisible()) {
       this.$el.hide()
       this.$el.css('left', '-100%')
@@ -168,7 +160,7 @@ export class SeekTime extends UICorePlugin {
     }
 
     const seekTime = this.getSeekTime()
-    let currentSeekTime = formatTime(seekTime.seekTime, false)
+    let currentSeekTime = formatTime(seekTime, false)
 
     if (this.isLiveStreamWithDvr) {
       currentSeekTime = `-${currentSeekTime}`
@@ -176,20 +168,21 @@ export class SeekTime extends UICorePlugin {
 
     // only update dom if necessary, ie time actually changed
     if (currentSeekTime !== this.displayedSeekTime) {
-      this.$seekTimeEl.text(currentSeekTime)
+      this.$el.find('#mc-seek-time').text(currentSeekTime)
       this.displayedSeekTime = currentSeekTime
     }
 
-    if (this.durationShown) {
-      this.$durationEl.show()
+    const $durationEl = this.$el.find('#mc-duration')
+    if (this.showDuration) {
+      $durationEl.show()
       const currentDuration = formatTime(this.duration, false)
 
       if (currentDuration !== this.displayedDuration) {
-        this.$durationEl.text(currentDuration)
+        $durationEl.text(currentDuration)
         this.displayedDuration = currentDuration
       }
     } else {
-      this.$durationEl.hide()
+      $durationEl.hide()
     }
 
     // the element must be unhidden before its width is requested, otherwise it's width will be reported as 0
@@ -218,16 +211,10 @@ export class SeekTime extends UICorePlugin {
    * @internal
    */
   override render() {
-    this.rendered = true
     this.displayedDuration = null
     this.displayedSeekTime = null
     this.$el.html(SeekTime.template())
     this.$el.hide()
-    // this.mediaControl.$el.append(this.el);
-    this.$seekTimeEl = this.$el.find('#mc-seek-time')
-    this.$durationEl = this.$el.find('#mc-duration')
-    this.$durationEl.hide()
-    this.update()
     return this
   }