@gcorevideo/player 2.22.27 → 2.22.29

package/src/plugins/clappr-nerd-stats/speedtest/index.ts

@@ -1,4 +1,3 @@
-import { trace } from '@gcorevideo/utils';
 import { type Server, type TestStatusInfo, Speedtest } from './Speedtest.js';
 import { SpeedtestMetrics } from './types.js';
 
@@ -7,7 +6,7 @@ const DEFAULT_DOWNLOAD_SPEED = '0.00';
 
 const DRAW_SIZE = 5;
 
-const T = 'plugins.clappr_nerd_stats.speedtest';
+// const T = 'plugins.clappr_nerd_stats.speedtest';
 
 function limitDigits(value: number): string {
   return value > DIGITS_THRESHOLD ? '> ' + DIGITS_THRESHOLD : value.toFixed(2);
@@ -38,7 +37,6 @@ const getColor = (speedValue: number): string => {
 };
 
 export function drawSpeedTestResults() {
-  trace(`${T} drawSpeedTestResults`);
   const canvas = document.getElementById('nerd-stats-speed-test-canvas');
   if (!canvas) {
     return;
@@ -66,7 +64,6 @@ export const initSpeedTest = (customMetrics: SpeedtestMetrics): Promise<void> =>
     return inited;
   }
   inited = (async () => {
-    trace(`${T} initSpeedTest run`);
     // TODO: fix server selection
     // const response = await fetch('https://iam.gcdn.co/info/json');
     // const data = await response.json();
@@ -130,8 +127,6 @@ export const initSpeedTest = (customMetrics: SpeedtestMetrics): Promise<void> =>
     await fetch('https://iam.gcdn.co/info/json')
       .then(r => r.json())
       .then(data => {
-        trace(`${T} initSpeedTest fetched`);
-
         const country = data['Server Country code'].toLowerCase();
         const server = serversList.find(s => s.country === country) || serversList[0];
         if (!server) {
@@ -139,7 +134,6 @@ export const initSpeedTest = (customMetrics: SpeedtestMetrics): Promise<void> =>
         }
         speedTest.addTestPoint(server);
         speedTest.setSelectedServer(server);
-        trace(`${T} initSpeedTest done`);
       });
   })();
 
@@ -153,14 +147,12 @@ export const stopSpeedtest = () => {
 };
 
 export const startSpeedtest = () =>  {
-  trace(`${T} startSpeedtest`);
   if (speedTest.getState() !== 3) {
     speedTest.start();
   }
 };
 
 export const clearSpeedTestResults = () => {
-  trace(`${T} clearSpeedTestResults`);
   speedtestResults.splice(0, speedtestResults.length);
 };
 

package/src/plugins/clappr-stats/ClapprStats.ts

@@ -16,6 +16,9 @@ import {
 } from './types.js'
 export * from './types.js'
 import { newMetrics } from './utils.js'
+import { isFullscreen } from '../utils/fullscreen.js'
+
+// const T = 'plugins.clappr_stats'
 
 export type ClapprStatsSettings = {
   /**
@@ -134,9 +137,11 @@ export class ClapprStats extends ContainerPlugin {
     this.listenTo(this.container, CoreEvents.CONTAINER_ERROR, () =>
       this.inc(ClapprStatsCounter.Error),
     )
-    this.listenTo(this.container, CoreEvents.CONTAINER_FULLSCREEN, () =>
-      this.inc(ClapprStatsCounter.Fullscreen),
-    )
+    this.listenTo(this.container, CoreEvents.CONTAINER_FULLSCREEN, () => {
+      if (isFullscreen(this.container.el)) {
+        this.inc(ClapprStatsCounter.Fullscreen)
+      }
+    })
     this.listenTo(
       this.container,
       CoreEvents.CONTAINER_PLAYBACKDVRSTATECHANGED,
@@ -251,8 +256,9 @@ export class ClapprStats extends ContainerPlugin {
   }
 
   private onSeek(e: number) {
+    const ms = e * 1000
     this.inc(ClapprStatsCounter.Seek)
-    this.metrics.extra.watchHistory.push([e * 1000, e * 1000])
+    this.metrics.extra.watchHistory.push([ms, ms])
   }
 
   private onTimeUpdate(e: TimePosition) {

package/src/plugins/media-control/MediaControl.ts

@@ -315,7 +315,7 @@ export class MediaControl extends UICorePlugin {
       'click [data-stop]': 'stop',
       'click [data-playstop]': 'togglePlayStop',
       'click [data-fullscreen]': 'handleFullScreenOnBtn',
-      'click .bar-container[data-seekbar]': 'seek',
+      // 'click .bar-container[data-seekbar]': 'seek', // This together with global window.bind causes duplicate seeks events
       'click .bar-container[data-volume]': 'onVolumeClick',
       'click .drawer-icon[data-volume]': 'toggleMute',
       'mouseenter .drawer-container[data-volume]': 'showVolumeBar',
@@ -731,12 +731,14 @@ export class MediaControl extends UICorePlugin {
   }
 
   private stopDrag = (event: MouseEvent) => {
-    this.draggingSeekBar && this.seek(event)
+    if (this.draggingSeekBar) {
+      this.draggingSeekBar = false
+      this.seek(event)
+    }
     this.$el.removeClass('dragging')
     this.$seekBarLoaded?.removeClass('media-control-notransition')
     this.$seekBarPosition?.removeClass('media-control-notransition')
     this.$seekBarScrubber?.removeClass('media-control-notransition dragging')
-    this.draggingSeekBar = false
     this.draggingVolumeBar = false
   }
 
@@ -752,7 +754,9 @@ export class MediaControl extends UICorePlugin {
       pos = Math.min(100, Math.max(pos, 0))
 
       this.setSeekPercentage(pos)
-    } else if (this.draggingVolumeBar) {
+      return
+    }
+    if (this.draggingVolumeBar) {
       event.preventDefault()
       this.setVolume(this.getVolumeFromUIEvent(event))
     }
@@ -966,6 +970,7 @@ export class MediaControl extends UICorePlugin {
     if (!this.settings.seekEnabled) {
       return
     }
+    // TODO prevent double seek
 
     assert.ok(this.$seekBarContainer, 'seek bar container must be present')
     const offsetX =
@@ -976,8 +981,6 @@ export class MediaControl extends UICorePlugin {
     this.core.activeContainer && this.core.activeContainer.seekPercentage(pos)
 
     this.setSeekPercentage(pos)
-
-    return false
   }
 
   private setUserKeepVisible() {
@@ -1010,7 +1013,10 @@ export class MediaControl extends UICorePlugin {
       }
       this.$el.show()
       this.trigger(Events.MEDIACONTROL_SHOW, this.name)
-      this.core.activeContainer?.trigger(Events.CONTAINER_MEDIACONTROL_SHOW, this.name)
+      this.core.activeContainer?.trigger(
+        Events.CONTAINER_MEDIACONTROL_SHOW,
+        this.name,
+      )
       this.$el.removeClass('media-control-hide')
       this.hideId = setTimeout(() => this.hide(), timeout)
       if (event) {
@@ -1067,7 +1073,6 @@ export class MediaControl extends UICorePlugin {
   }
 
   private updateSettings() {
-    trace(`${T} updateSettings`, { settings: this.settings })
     const newSettings = $.extend(
       true,
       {
@@ -1077,7 +1082,6 @@ export class MediaControl extends UICorePlugin {
       },
       this.core.activeContainer.settings,
     )
-    trace(`${T} updateSettings`, { newSettings })
 
     newSettings.left.push('clips') // TODO settings
     // TODO make order controlled via CSS
@@ -1099,11 +1103,6 @@ export class MediaControl extends UICorePlugin {
       (!this.fullScreenOnVideoTagSupported && !fullscreenEnabled()) ||
       this.options.fullscreenDisable
     ) {
-      trace(`${T} updateSettings removing fullscreen`, {
-        supported: this.fullScreenOnVideoTagSupported,
-        enabled: Fullscreen.fullscreenEnabled(),
-        optionsDisable: this.options.fullscreenDisable,
-      })
       // remove fullscreen from settings if it is not available
       removeArrayItem(newSettings.default, 'fullscreen')
       removeArrayItem(newSettings.left, 'fullscreen')
@@ -1183,7 +1182,6 @@ export class MediaControl extends UICorePlugin {
    */
   mount(name: MediaControlElement, element: ZeptoResult) {
     const panel = this.getElementLocation(name)
-    trace(`${T} mount`, { name, panel: !!panel })
     if (panel) {
       const current = panel.find(`[data-${name}]`)
       element.attr(`data-${name}`, '')
@@ -1415,15 +1413,12 @@ export class MediaControl extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`, {
-      needsUpdate: this.hasUpdate,
-      metadataLoaded: this.metadataLoaded,
-    })
     if (!this.hasUpdate || !this.metadataLoaded) {
       return this
     }
     const timeout = this.options.hideMediaControlDelay || 2000
 
+    trace(`${T} render`, { settings: this.settings })
     this.$el.html(MediaControl.template({ settings: this.settings }))
     // const style = Styler.getStyleFor(mediaControlStyle, { baseUrl: this.options.baseUrl });
     // this.$el.append(style[0]);
@@ -1575,12 +1570,6 @@ export class MediaControl extends UICorePlugin {
   }
 
   private getElementLocation(name: MediaControlElement) {
-    trace(`${T} getElementLocation`, {
-      name,
-      right: this.settings.right,
-      left: this.settings.left,
-      default: this.settings.default,
-    })
     if (this.settings.right?.includes(name as MediaControlRightElement)) {
       return this.getRightPanel()
     }

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

@@ -298,6 +298,22 @@ describe('MediaControl', () => {
       })
     })
   })
+  describe('seekbar', () => {
+    beforeEach(async () => {
+      mediaControl = new MediaControl(core)
+      core.emit(Events.CORE_READY)
+      core.activeContainer.settings = {
+        seekEnabled: true,
+        default: ['seekbar'],
+      }
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+      await runMetadataLoaded(core)
+      core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE)
+    })
+    it('should render', () => {
+      expect(mediaControl.el.innerHTML).toMatchSnapshot()
+    })
+  })
 })
 
 function arraySubtract<T extends string>(arr1: T[], arr2: T[]) {

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

@@ -296,6 +296,76 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
 <style>:root {}</style>"
 `;
 
+exports[`MediaControl > seekbar > should render 1`] = `
+"<div class="media-control-background" data-background=""></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <div class="drawer-container" data-volume="">
+            <div class="drawer-icon-container" data-volume="">
+                <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+        <div class="media-control-indicator gcore-skin-text-color" data-clips=""></div>
+    
+        </div>
+    
+    
+        <div class="media-control-center-panel" data-media-control="">
+            
+        <div class="bar-container" data-seekbar="">
+            <div class="bar-background" data-seekbar="">
+                <div class="bar-fill-1" data-seekbar=""></div>
+                <div class="bar-fill-2 gcore-skin-main-color" data-seekbar="" style="width: 0%;"></div>
+                <div class="bar-hover" data-seekbar=""></div>
+            </div>
+        </div>
+        <div class="bar-scrubber" data-seekbar="" style="left: 0%;">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-seekbar=""></div>
+        </div>
+    
+        </div>
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-fullscreen="" aria-label="fullscreen">/assets/icons/new/fullscreen-off.svg</button>
+    
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        </div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
 exports[`MediaControl > updateSettings > dvr > when disabled > should disable DVR controls 1`] = `
 "<div class="media-control-background" data-background=""></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
   }
 

package/src/testUtils.ts

@@ -176,6 +176,7 @@ export function createMockContainer(
     isPlaying: vi.fn().mockReturnValue(false),
     play: vi.fn(),
     seek: vi.fn(),
+    seekPercentage: vi.fn(),
     switchAudioTrack: vi.fn(),
     trigger: emitter.emit,
   })