@gcorevideo/player 2.22.18 → 2.22.20

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

@@ -8,8 +8,13 @@ import type {
 
 import { CLAPPR_VERSION } from '../../build.js'
 import { TimerId } from '../../utils/types.js'
-import type { Metrics } from './types.js'
-import { ClapprStatsEvents, Chronograph, Counter } from './types.js'
+import type { ClapprStatsMetrics } from './types.js'
+import {
+  ClapprStatsEvents,
+  ClapprStatsChronograph,
+  ClapprStatsCounter,
+} from './types.js'
+export * from './types.js'
 import { newMetrics } from './utils.js'
 
 export type ClapprStatsSettings = {
@@ -26,6 +31,8 @@ export type ClapprStatsSettings = {
  * @remarks
  * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.
  *
+ * @see {@link NerdStats} - a plugin that visualises the playback metrics
+ *
  * Configuration options - {@link ClapprStatsSettings}
  *
  * Events - {@link ClapprStatsEvents}
@@ -35,14 +42,14 @@ export class ClapprStats extends ContainerPlugin {
 
   private lastDecodedFramesCount = 0
 
-  private metrics: Metrics = newMetrics()
+  private metrics: ClapprStatsMetrics = newMetrics()
 
-  private timers: Record<Chronograph, number> = {
-    [Chronograph.Startup]: 0,
-    [Chronograph.Watch]: 0,
-    [Chronograph.Pause]: 0,
-    [Chronograph.Buffering]: 0,
-    [Chronograph.Session]: 0,
+  private timers: Record<ClapprStatsChronograph, number> = {
+    [ClapprStatsChronograph.Startup]: 0,
+    [ClapprStatsChronograph.Watch]: 0,
+    [ClapprStatsChronograph.Pause]: 0,
+    [ClapprStatsChronograph.Buffering]: 0,
+    [ClapprStatsChronograph.Session]: 0,
   }
 
   private runEach: number
@@ -78,21 +85,15 @@ export class ClapprStats extends ContainerPlugin {
       : new Date().getTime()
   }
 
-  private inc(counter: Counter) {
+  private inc(counter: ClapprStatsCounter) {
     this.metrics.counters[counter] += 1
   }
 
-  // _timerHasStarted(timer) {
-  //   return this[`_start${timer}`] !== undefined;
-  // }
-
-  private start(timer: Chronograph) {
-    // this[`_start${timer}`] = this._now();
+  private start(timer: ClapprStatsChronograph) {
     this.timers[timer] = this.now()
   }
 
-  private stop(timer: Chronograph) {
-    // this._metrics.timers[timer] += this._now() - this[`_start${timer}`];
+  private stop(timer: ClapprStatsChronograph) {
     this.metrics.chrono[timer] += this.now() - this.timers[timer]
   }
 
@@ -131,16 +132,16 @@ export class ClapprStats extends ContainerPlugin {
     )
     this.listenTo(this.container, CoreEvents.CONTAINER_SEEK, this.onSeek)
     this.listenTo(this.container, CoreEvents.CONTAINER_ERROR, () =>
-      this.inc(Counter.Error),
+      this.inc(ClapprStatsCounter.Error),
     )
     this.listenTo(this.container, CoreEvents.CONTAINER_FULLSCREEN, () =>
-      this.inc(Counter.Fullscreen),
+      this.inc(ClapprStatsCounter.Fullscreen),
     )
     this.listenTo(
       this.container,
       CoreEvents.CONTAINER_PLAYBACKDVRSTATECHANGED,
       (dvrInUse: boolean) => {
-        dvrInUse && this.inc(Counter.DvrUsage)
+        dvrInUse && this.inc(ClapprStatsCounter.DvrUsage)
       },
     )
     this.listenTo(
@@ -186,7 +187,7 @@ export class ClapprStats extends ContainerPlugin {
 
     this.metrics.extra.bitratesHistory.push({ start: this.now(), bitrate })
 
-    this.inc(Counter.ChangeLevel)
+    this.inc(ClapprStatsCounter.ChangeLevel)
   }
 
   private stopReporting() {
@@ -200,8 +201,8 @@ export class ClapprStats extends ContainerPlugin {
 
   private startTimers() {
     this.timerId = setInterval(this.buildReport.bind(this), this.runEach)
-    this.start(Chronograph.Session)
-    this.start(Chronograph.Startup)
+    this.start(ClapprStatsChronograph.Session)
+    this.start(ClapprStatsChronograph.Startup)
   }
 
   private onFirstPlaying() {
@@ -211,8 +212,8 @@ export class ClapprStats extends ContainerPlugin {
       this.onContainerUpdateWhilePlaying,
     )
 
-    this.start(Chronograph.Watch)
-    this.stop(Chronograph.Startup)
+    this.start(ClapprStatsChronograph.Watch)
+    this.stop(ClapprStatsChronograph.Startup)
   }
 
   private playAfterPause() {
@@ -221,18 +222,18 @@ export class ClapprStats extends ContainerPlugin {
       CoreEvents.CONTAINER_TIMEUPDATE,
       this.onContainerUpdateWhilePlaying,
     )
-    this.stop(Chronograph.Pause)
-    this.start(Chronograph.Watch)
+    this.stop(ClapprStatsChronograph.Pause)
+    this.start(ClapprStatsChronograph.Watch)
   }
 
   private onPlay() {
-    this.inc(Counter.Play)
+    this.inc(ClapprStatsCounter.Play)
   }
 
   private onPause() {
-    this.stop(Chronograph.Watch)
-    this.start(Chronograph.Pause)
-    this.inc(Counter.Pause)
+    this.stop(ClapprStatsChronograph.Watch)
+    this.start(ClapprStatsChronograph.Pause)
+    this.inc(ClapprStatsCounter.Pause)
     this.listenToOnce(
       this.container,
       CoreEvents.CONTAINER_PLAY,
@@ -246,7 +247,7 @@ export class ClapprStats extends ContainerPlugin {
   }
 
   private onSeek(e: number) {
-    this.inc(Counter.Seek)
+    this.inc(ClapprStatsCounter.Seek)
     this.metrics.extra.watchHistory.push([e * 1000, e * 1000])
   }
 
@@ -282,14 +283,14 @@ export class ClapprStats extends ContainerPlugin {
 
   private onContainerUpdateWhilePlaying() {
     if (this.container.playback.isPlaying()) {
-      this.stop(Chronograph.Watch)
-      this.start(Chronograph.Watch)
+      this.stop(ClapprStatsChronograph.Watch)
+      this.start(ClapprStatsChronograph.Watch)
     }
   }
 
   private onBuffering() {
-    this.inc(Counter.Buffering)
-    this.start(Chronograph.Buffering)
+    this.inc(ClapprStatsCounter.Buffering)
+    this.start(ClapprStatsChronograph.Buffering)
     this.listenToOnce(
       this.container,
       CoreEvents.CONTAINER_STATE_BUFFERFULL,
@@ -298,7 +299,7 @@ export class ClapprStats extends ContainerPlugin {
   }
 
   private onBufferfull() {
-    this.stop(Chronograph.Buffering)
+    this.stop(ClapprStatsChronograph.Buffering)
     this.listenToOnce(
       this.container,
       CoreEvents.CONTAINER_STATE_BUFFERING,
@@ -317,8 +318,8 @@ export class ClapprStats extends ContainerPlugin {
   }
 
   private buildReport() {
-    this.stop(Chronograph.Session)
-    this.start(Chronograph.Session)
+    this.stop(ClapprStatsChronograph.Session)
+    this.start(ClapprStatsChronograph.Session)
 
     this.metrics.extra.playbackName = this.playbackName
     this.metrics.extra.playbackType = this.playbackType

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

@@ -4,7 +4,7 @@ import FakeTimers from '@sinonjs/fake-timers'
 
 import { ClapprStats } from '../ClapprStats'
 import { createMockCore } from '../../../testUtils'
-import { Chronograph, ClapprStatsEvents, Counter } from '../types'
+import { ClapprStatsChronograph, ClapprStatsCounter, ClapprStatsEvents } from '../types'
 
 describe('ClapprStats', () => {
   let core: any
@@ -29,7 +29,7 @@ describe('ClapprStats', () => {
       })
       it('should measure', () => {
         const metrics = stats.exportMetrics()
-        expect(metrics.chrono[Chronograph.Startup]).toBe(155)
+        expect(metrics.chrono[ClapprStatsChronograph.Startup]).toBe(155)
         // expect(metrics.times[Chronograph.Session]).toBe(155)
       })
     })
@@ -50,8 +50,8 @@ describe('ClapprStats', () => {
       })
       it('should measure cumulative play and pause durations', () => {
         const metrics = stats.exportMetrics()
-        expect(metrics.chrono[Chronograph.Watch]).toBe(3850)
-        expect(metrics.chrono[Chronograph.Pause]).toBe(2900)
+        expect(metrics.chrono[ClapprStatsChronograph.Watch]).toBe(3850)
+        expect(metrics.chrono[ClapprStatsChronograph.Pause]).toBe(2900)
       })
     })
     describe('buffering', () => {
@@ -71,7 +71,7 @@ describe('ClapprStats', () => {
       })
       it('should measure cumulative buffering durations', () => {
         const metrics = stats.exportMetrics()
-        expect(metrics.chrono[Chronograph.Buffering]).toBe(200)
+        expect(metrics.chrono[ClapprStatsChronograph.Buffering]).toBe(200)
       })
     })
     describe('session', () => {
@@ -88,7 +88,7 @@ describe('ClapprStats', () => {
       it('should measure', () => {
         expect(onReport).toHaveBeenCalledWith(expect.objectContaining({
           chrono: expect.objectContaining({
-            [Chronograph.Session]: 60200,
+            [ClapprStatsChronograph.Session]: 60200,
           }),
         }))
       })
@@ -116,16 +116,16 @@ describe('ClapprStats', () => {
     it('should measure fps', () => {
       expect(onReport).toHaveBeenNthCalledWith(1, expect.objectContaining({
         counters: expect.objectContaining({
-          [Counter.DecodedFrames]: 126,
-          [Counter.DroppedFrames]: 3,
-          [Counter.Fps]: expect.closeTo(25, 0),
+          [ClapprStatsCounter.DecodedFrames]: 126,
+          [ClapprStatsCounter.DroppedFrames]: 3,
+          [ClapprStatsCounter.Fps]: expect.closeTo(25, 0),
         }),
       }))
       expect(onReport).toHaveBeenNthCalledWith(2, expect.objectContaining({
         counters: expect.objectContaining({
-          [Counter.DecodedFrames]: 275,
-          [Counter.DroppedFrames]: 4,
-          [Counter.Fps]: expect.closeTo(30, 0),
+          [ClapprStatsCounter.DecodedFrames]: 275,
+          [ClapprStatsCounter.DroppedFrames]: 4,
+          [ClapprStatsCounter.Fps]: expect.closeTo(30, 0),
         }),
       }))
     })

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

@@ -1,7 +1,7 @@
 /**
  * @beta
  */
-export enum Chronograph {
+export enum ClapprStatsChronograph {
   Startup = 'startup',
   Watch = 'watch',
   Pause = 'pause',
@@ -13,7 +13,7 @@ export enum Chronograph {
 /**
  * @beta
  */
-export enum Counter {
+export enum ClapprStatsCounter {
   Play = 'play',
   Pause = 'pause',
   Error = 'error',
@@ -30,7 +30,7 @@ export enum Counter {
 /**
  * @beta
  */
-export type Metrics = {
+export type ClapprStatsMetrics = {
   /**
    * Events count counters
    */
@@ -38,17 +38,17 @@ export type Metrics = {
     /**
      *
      */
-    [Counter.Play]: number
-    [Counter.Pause]: number
-    [Counter.Error]: number
-    [Counter.Buffering]: number
-    [Counter.DecodedFrames]: number
-    [Counter.DroppedFrames]: number
-    [Counter.Fps]: number
-    [Counter.ChangeLevel]: number
-    [Counter.Seek]: number
-    [Counter.Fullscreen]: number
-    [Counter.DvrUsage]: number
+    [ClapprStatsCounter.Play]: number
+    [ClapprStatsCounter.Pause]: number
+    [ClapprStatsCounter.Error]: number
+    [ClapprStatsCounter.Buffering]: number
+    [ClapprStatsCounter.DecodedFrames]: number
+    [ClapprStatsCounter.DroppedFrames]: number
+    [ClapprStatsCounter.Fps]: number
+    [ClapprStatsCounter.ChangeLevel]: number
+    [ClapprStatsCounter.Seek]: number
+    [ClapprStatsCounter.Fullscreen]: number
+    [ClapprStatsCounter.DvrUsage]: number
   }
   /**
    * Time measurements - accumulated duration of time-based activities
@@ -57,23 +57,23 @@ export type Metrics = {
     /**
      * Time spent in the startup phase
      */
-    [Chronograph.Startup]: number
+    [ClapprStatsChronograph.Startup]: number
     /**
      * Total time spent in the watch phase
      */
-    [Chronograph.Watch]: number
+    [ClapprStatsChronograph.Watch]: number
     /**
      *
      */
-    [Chronograph.Pause]: number
-    [Chronograph.Buffering]: number
-    [Chronograph.Session]: number
+    [ClapprStatsChronograph.Pause]: number
+    [ClapprStatsChronograph.Buffering]: number
+    [ClapprStatsChronograph.Session]: number
     // [Chronograph.Latency]: number;
   }
   extra: {
     playbackName: string
     playbackType: string
-    bitratesHistory: BitrateTrackRecord[]
+    bitratesHistory: ClapprStatsBitrateTrack[]
     bitrateWeightedMean: number
     bitrateMostUsed: number
     buffersize: number
@@ -89,7 +89,7 @@ export type Metrics = {
 /**
  * @beta
  */
-export type BitrateTrackRecord = {
+export type ClapprStatsBitrateTrack = {
   start: number
   end?: number
   time?: number

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

@@ -1,6 +1,6 @@
-import type { Metrics } from './types'
+import type { ClapprStatsMetrics } from './types'
 
-export function newMetrics(): Metrics {
+export function newMetrics(): ClapprStatsMetrics {
   return {
     counters: {
       play: 0,

package/src/plugins/click-to-pause/ClickToPause.ts

@@ -25,7 +25,7 @@ export class ClickToPause extends ContainerPlugin {
    * @internal
    */
   get name() {
-    return 'click_to_pause_custom'
+    return 'click_to_pause'
   }
 
   /**

package/src/plugins/clips/Clips.ts

@@ -12,7 +12,7 @@ import clipsHTML from '../../../assets/clips/clips.ejs'
 const T = 'plugins.clips'
 
 /**
- * Configuration options for the {@link ClipsPlugin} plugin.
+ * Configuration options for the {@link Clips} plugin.
  * @beta
  */
 export interface ClipsPluginSettings {

package/src/plugins/clips/__tests__/Clips.test.ts

@@ -8,7 +8,7 @@ import { Events } from '@clappr/core'
 // Logger.enable('*')
 // setTracer(new LogTracer('Clips.text'))
 
-describe('ClipsPlugin', () => {
+describe('Clips', () => {
   let core: any
   let mediaControl: any
   let clips: Clips

package/src/plugins/clips/__tests__/__snapshots__/Clips.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ClipsPlugin > should render indicator 1`] = `
+exports[`Clips > should render indicator 1`] = `
 "<div class="media-clip-text" id="clips-text">Introduction</div><svg width="0" height="0">
 <defs>
 <clipPath id="myClip">

package/src/plugins/dvr-controls/DvrControls.ts

@@ -1,14 +1,14 @@
-import { Core, Events, Playback, UICorePlugin, template } from '@clappr/core'
+import { Events, Playback, UICorePlugin, template } from '@clappr/core'
 import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
 import dvrHTML from '../../../assets/dvr-controls/index.ejs'
 import '../../../assets/dvr-controls/dvr_controls.scss'
-import { trace } from '@gcorevideo/utils'
+// import { trace } from '@gcorevideo/utils'
 import { MediaControl } from '../media-control/MediaControl.js'
 
-const T = 'plugins.dvr_controls'
+// const T = 'plugins.dvr_controls'
 
 /**
  * `PLUGIN` that adds the DVR controls to the media control UI
@@ -63,11 +63,11 @@ export class DvrControls extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
+    this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady)
     this.listenTo(
       this.core,
       Events.CORE_ACTIVE_CONTAINER_CHANGED,
-      this.bindContainerEvents,
+      this.onActiveContainerChanged,
     )
   }
 
@@ -75,21 +75,19 @@ export class DvrControls extends UICorePlugin {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
 
-    this.listenTo(
-      mediaControl,
-      Events.MEDIACONTROL_RENDERED,
-      this.render,
-    )
-    // MediaControl has been rendered
-    this.render()
+    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.mount)
   }
 
-  private bindContainerEvents() {
-    trace(`${T} bindContainerEvents`)
-    this.listenToOnce(
+  private onActiveContainerChanged() {
+    this.listenTo(
       this.core.activeContainer,
-      Events.CONTAINER_TIMEUPDATE,
-      this.render,
+      Events.CONTAINER_LOADEDMETADATA,
+      this.onMetadataLoaded,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+      this.onDvrStateChanged,
     )
   }
 
@@ -101,36 +99,52 @@ export class DvrControls extends UICorePlugin {
     container.seek(container.getDuration())
   }
 
-  private shouldRender() {
-    return this.core.getPlaybackType() === Playback.LIVE
-  }
-
   /**
    * @internal
    */
   override render() {
-    trace(`${T} render`, {
-      dvrEnabled: this.core.activePlayback?.dvrEnabled,
-      playbackType: this.core.getPlaybackType(),
-    })
-    const mediaControl = this.core.getPlugin('media_control') as MediaControl
-    if (!mediaControl) {
-      return this
-    }
-    if (!this.shouldRender()) {
-      return this
-    }
-
-    mediaControl.toggleElement('duration', false)
-    mediaControl.toggleElement('position', false)
-
     this.$el.html(
       DvrControls.template({
         i18n: this.core.i18n,
       }),
     )
-    mediaControl.putElement('dvr', this.$el)
 
     return this
   }
+
+  private onMediacontrolRendered() {
+    this.render()
+  }
+
+  private onMetadataLoaded() {
+    this.mount()
+    this.toggleState(this.core.activeContainer.isDvrInUse())
+  }
+
+  private mount() {
+    // TODO move mount point management logic to MediaControl
+    if (this.core.getPlaybackType() !== Playback.LIVE) {
+      return
+    }
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
+    assert(mediaControl, 'media_control plugin is required')
+    // TODO -> to MediaControl
+    mediaControl.toggleElement('duration', false)
+    mediaControl.toggleElement('position', false)
+    mediaControl.mount('dvr', this.$el)
+  }
+
+  private onDvrStateChanged(dvrInUse: boolean) {
+    this.toggleState(dvrInUse)
+  }
+
+  private toggleState(dvrInUse: boolean) {
+    if (dvrInUse) {
+      this.$el.find('#media-control-back-to-live').show()
+      this.$el.find('#media-control-live').hide()
+    } else {
+      this.$el.find('#media-control-back-to-live').hide()
+      this.$el.find('#media-control-live').show()
+    }
+  }
 }