@gcorevideo/player 2.22.28 → 2.22.30

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/lib/plugins/skip-time/SkipTime.d.ts

@@ -1,7 +1,7 @@
 import { UICorePlugin } from '@clappr/core';
 import '../../../assets/skip-time/style.scss';
 /**
- * `PLUGIN` that adds skip controls to the media control UI.
+ * `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
  * @beta
  */
 export declare class SkipTime extends UICorePlugin {
@@ -10,23 +10,37 @@ export declare class SkipTime extends UICorePlugin {
         min: string;
     };
     get container(): any;
-    get template(): any;
+    private static readonly template;
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
-        'data-skip-time': string;
     };
     private position;
+    /**
+     * @internal
+     */
     get events(): {
-        'click [data-skip-left]': string;
-        'click [data-skip-mid]': string;
-        'click [data-skip-right]': string;
+        'click #mc-skip-left': string;
+        'click #mc-skip-mid': string;
+        'click #mc-skip-right': string;
     };
+    /**
+     * @internal
+     */
     bindEvents(): void;
-    setBack(): void;
-    handleRewindClicks(): void;
-    setMidClick(): void;
-    setForward(): void;
-    toggleFullscreen(): void;
+    private onContainerChanged;
+    private setBack;
+    private handleRewindClicks;
+    private handleSkip;
+    private setMidClick;
+    private setForward;
+    private toggleFullscreen;
+    /**
+     * @internal
+     */
     render(): this;
+    private mount;
 }
 //# sourceMappingURL=SkipTime.d.ts.map

package/lib/plugins/skip-time/SkipTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkipTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/skip-time/SkipTime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAKhF,OAAO,sCAAsC,CAAA;AAI7C;;;GAGG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,SAAS,QAEZ;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,OAAO,CAAC,QAAQ,CAAkB;IAElC,IAAa,MAAM;;;;MAMlB;IAEQ,UAAU;IAYnB,OAAO;IAIP,kBAAkB;IA+BlB,WAAW;IAIX,UAAU;IAIV,gBAAgB;IAMP,MAAM;CAWhB"}
+{"version":3,"file":"SkipTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/skip-time/SkipTime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAMhF,OAAO,sCAAsC,CAAA;AAM7C;;;GAGG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,SAAS,QAEZ;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,OAAO,CAAC,QAAQ,CAAkB;IAElC;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IAKnB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,UAAU;IA0BlB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,gBAAgB;IAOxB;;OAEG;IACM,MAAM;IAOf,OAAO,CAAC,KAAK;CAId"}

package/lib/plugins/skip-time/SkipTime.js

@@ -1,9 +1,11 @@
 import { UICorePlugin, Browser, Playback, Events, template } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
 import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/skip-time/skip-time.ejs';
 import '../../../assets/skip-time/style.scss';
+const T = 'plugins.skip_time';
 /**
- * `PLUGIN` that adds skip controls to the media control UI.
+ * `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
  * @beta
  */
 export class SkipTime extends UICorePlugin {
@@ -16,39 +18,56 @@ export class SkipTime extends UICorePlugin {
     get container() {
         return this.core && this.core.activeContainer;
     }
-    get template() {
-        return template(pluginHtml);
-    }
+    static template = template(pluginHtml);
+    /**
+     * @internal
+     */
     get attributes() {
         return {
-            class: this.name + '_plugin',
-            'data-skip-time': '',
+            class: 'mc-skip-time',
         };
     }
     position = 'mid';
+    /**
+     * @internal
+     */
     get events() {
         return {
-            'click [data-skip-left]': 'setBack',
-            'click [data-skip-mid]': 'setMidClick',
-            'click [data-skip-right]': 'setForward',
+            'click #mc-skip-left': 'setBack',
+            'click #mc-skip-mid': 'setMidClick',
+            'click #mc-skip-right': 'setForward',
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.core, Events.CORE_READY, this.render);
-        if (!this.container) {
-            return;
-        }
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
+    }
+    onContainerChanged() {
         this.listenTo(this.container, Events.CONTAINER_DBLCLICK, this.handleRewindClicks);
+        this.mount();
     }
     setBack() {
+        trace(`${T} setBack`);
         this.position = 'left';
     }
     handleRewindClicks() {
+        trace(`${T} handleRewindClicks`, {
+            position: this.position,
+        });
         if (this.core.getPlaybackType() === Playback.LIVE &&
             !this.container.isDvrEnabled()) {
             this.toggleFullscreen();
             return;
         }
+        this.handleSkip();
+    }
+    handleSkip() {
+        trace(`${T} handleSkip`, {
+            position: this.position,
+        });
         if (Browser.isMobile) {
             if (this.position === 'left') {
                 const seekPos = this.container.getCurrentTime() - 10;
@@ -70,22 +89,29 @@ export class SkipTime extends UICorePlugin {
         }
     }
     setMidClick() {
+        trace(`${T} setMidClick`);
         this.position = 'mid';
     }
     setForward() {
+        trace(`${T} setForward`);
         this.position = 'right';
     }
     toggleFullscreen() {
+        trace(`${T} toggleFullscreen`);
         this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name);
         this.container.fullscreen();
         this.core.toggleFullscreen();
     }
+    /**
+     * @internal
+     */
     render() {
-        this.$el.html(template(pluginHtml));
-        if (this.core.activeContainer) {
-            this.core.activeContainer.$el.append(this.el);
-        }
-        this.bindEvents();
+        trace(`${T} render`);
+        this.$el.html(SkipTime.template());
         return this;
     }
+    mount() {
+        trace(`${T} mount`);
+        this.core.activeContainer.$el.append(this.el);
+    }
 }

package/package.json

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

package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap

@@ -246,7 +246,7 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
                 <span class="drawer-text" data-volume=""></span>
             </div>
             
-    <div class="bar-container" data-volume="">
+    <div class="bar-container volume-bar-hide" data-volume="">
         <div class="bar-background" data-volume="">
             <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>

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
   }