@gcorevideo/player 2.22.18 → 2.22.21

package/src/plugins/audio-selector/AudioSelector.ts

@@ -9,6 +9,7 @@ import '../../../assets/audio-selector/style.scss'
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg'
 import { ZeptoResult } from '../../types.js'
 import { MediaControl } from '../media-control/MediaControl.js'
+// import { trace } from '@gcorevideo/utils'
 
 const VERSION: string = '2.22.4'
 
@@ -87,7 +88,7 @@ export class AudioTracks extends UICorePlugin {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
     this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
-      mediaControl.putElement('audiotracks', this.$el)
+      mediaControl.mount('audiotracks', this.$el)
     })
     this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
   }
@@ -130,12 +131,12 @@ export class AudioTracks extends UICorePlugin {
       return this
     }
 
-    const mediaControl = this.core.getPlugin('media_control') as MediaControl
     this.$el.html(
       AudioTracks.template({
         tracks: this.tracks,
         title: this.getTitle(),
         icon: audioArrow,
+        current: this.currentTrack?.id,
       }),
     )
     this.updateText()
@@ -145,7 +146,7 @@ export class AudioTracks extends UICorePlugin {
   }
 
   private onTrackSelect(event: MouseEvent) {
-    const id = (event.target as HTMLElement)?.dataset?.audiotracksSelect
+    const id = (event.currentTarget as HTMLElement)?.dataset?.audiotracksSelect
     if (id) {
       this.selectAudioTrack(id)
     }
@@ -155,7 +156,7 @@ export class AudioTracks extends UICorePlugin {
   }
 
   private selectAudioTrack(id: string) {
-    this.startTrackSwitch()
+    this.startTrackSwitching()
     this.core.activeContainer.switchAudioTrack(id)
     this.updateText()
   }
@@ -165,7 +166,9 @@ export class AudioTracks extends UICorePlugin {
   }
 
   private toggleContextMenu() {
-    this.$el.find('#audiotracks-select').toggleClass('hidden')
+    this.$el.find('#audiotracks-select').toggleClass('hidden') // TODO use plain CSS display: none
+    const open = !this.$el.find('#audiotracks-select').hasClass('hidden') // TODO hold state
+    this.$el.find('#audiotracks-button').attr('aria-expanded', open)
   }
 
   private buttonElement(): ZeptoResult {
@@ -192,7 +195,7 @@ export class AudioTracks extends UICorePlugin {
     return this.currentTrack.label || this.currentTrack.language
   }
 
-  private startTrackSwitch() {
+  private startTrackSwitching() {
     this.buttonElement().addClass('changing')
   }
 
@@ -205,13 +208,17 @@ export class AudioTracks extends UICorePlugin {
 
   private highlightCurrentTrack() {
     this.trackElement().removeClass('current')
-    this.trackElement().find('a').removeClass('gcore-skin-active')
+    this.trackElement()
+      .find('a')
+      .removeClass('gcore-skin-active')
+      .attr('aria-checked', 'false')
 
     if (this.currentTrack) {
       this.trackElement(this.currentTrack.id)
         .addClass('current')
         .find('a')
         .addClass('gcore-skin-active')
+        .attr('aria-checked', 'true')
     }
   }
 }

package/src/plugins/audio-selector/__tests__/AudioSelector.test.ts

@@ -34,7 +34,7 @@ describe('AudioSelector', () => {
       emitTracksAvailable(core, TRACKS)
     })
     it('should not attach to the media control', () => {
-      expect(mediaControl.putElement).not.toHaveBeenCalledWith(
+      expect(mediaControl.mount).not.toHaveBeenCalledWith(
         'audiotracks',
         expect.anything(),
       )
@@ -45,20 +45,20 @@ describe('AudioSelector', () => {
       mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
     })
     it('should attach to the media control', () => {
-      expect(mediaControl.putElement).toHaveBeenCalledWith(
+      expect(mediaControl.mount).toHaveBeenCalledWith(
         'audiotracks',
         audioSelector.$el,
       )
     })
   })
-  describe('when audio tracks are available', () => {
+  describe('given that audio tracks are available', () => {
     beforeEach(() => {
       emitTracksAvailable(core, TRACKS)
     })
-    it('should render the button', () => {
+    it('should render button', () => {
       expect(audioSelector.$el.find('#audiotracks-button').length).toBe(1)
     })
-    it('should render the menu hidden', () => {
+    it('should render menu hidden', () => {
       expect(audioSelector.el.innerHTML).toMatchSnapshot()
       expect(
         audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
@@ -68,17 +68,17 @@ describe('AudioSelector', () => {
       expect(trackItems.eq(0).text().trim()).toBe('English')
       expect(trackItems.eq(1).text().trim()).toBe('Spanish')
     })
-    describe('when the button is clicked', () => {
+    describe('when button is clicked', () => {
       beforeEach(() => {
         audioSelector.$el.find('#audiotracks-button').click()
       })
-      it('should show the menu', () => {
+      it('should show menu', () => {
         expect(audioSelector.$el.html()).toMatchSnapshot()
         expect(
           audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
         ).toBe(false)
       })
-      describe('when an audio track is selected', () => {
+      describe('when audio track is selected', () => {
         beforeEach(() => {
           audioSelector.$el
             .find('#audiotracks-select [data-audiotracks-select="2"]')

package/src/plugins/audio-selector/__tests__/__snapshots__/AudioSelector.test.ts.snap

@@ -1,19 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AudioSelector > when audio tracks are available > should render the menu hidden 1`] = `
-"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button">
+exports[`AudioSelector > given that audio tracks are available > should render menu hidden 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="false">
     <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
 </button>
-<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select">
+<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
                 English
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>
@@ -22,20 +22,20 @@ exports[`AudioSelector > when audio tracks are available > should render the men
 "
 `;
 
-exports[`AudioSelector > when audio tracks are available > when the button is clicked > should show the menu 1`] = `
-"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button">
+exports[`AudioSelector > given that audio tracks are available > when button is clicked > should show menu 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
     <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
 </button>
-<ul class="gcore-skin-bg-color menu" id="audiotracks-select">
+<ul class="gcore-skin-bg-color menu" id="audiotracks-select" role="menu">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
                 English
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>
@@ -44,20 +44,20 @@ exports[`AudioSelector > when audio tracks are available > when the button is cl
 "
 `;
 
-exports[`AudioSelector > when audio tracks are available > when the button is clicked > when an audio track is selected > should hide the menu 1`] = `
-"<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button">
+exports[`AudioSelector > given that audio tracks are available > when button is clicked > when audio track is selected > should hide the menu 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
     <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
 </button>
-<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select">
+<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
                 English
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>

package/src/plugins/bottom-gear/BottomGear.ts

@@ -21,7 +21,7 @@ const T = 'plugins.bottom_gear'
  */
 export enum GearEvents {
   /**
-   * Use this event to accurately attach an item to the gear menu
+   * Subscribe to this event to accurately attach an item to the gear menu
    */
   RENDERED = 'rendered',
 }
@@ -276,6 +276,6 @@ export class BottomGear extends UICorePlugin {
   private onMediaControlRendered() {
     trace(`${T} onMediaControlRendered`)
     const mediaControl = this.core.getPlugin('media_control')
-    mediaControl.putElement('gear', this.$el)
+    mediaControl.mount('gear', this.$el)
   }
 }

package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts

@@ -38,7 +38,10 @@ describe('BottomGear', () => {
   })
   describe('until media control is rendered', () => {
     it('should not attach to media control', () => {
-      expect(mediaControl.putElement).not.toHaveBeenCalledWith('gear', expect.anything())
+      expect(mediaControl.mount).not.toHaveBeenCalledWith(
+        'gear',
+        expect.anything(),
+      )
     })
   })
   describe('when media control is rendered', () => {
@@ -46,7 +49,7 @@ describe('BottomGear', () => {
       mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
     })
     it('should attach to media control', () => {
-      expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.$el)
+      expect(mediaControl.mount).toHaveBeenCalledWith('gear', bottomGear.$el)
     })
   })
   describe('when clicked', () => {
@@ -54,9 +57,9 @@ describe('BottomGear', () => {
       bottomGear.$el.find('#gear-button').click()
     })
     it('should toggle the gear menu', () => {
-      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-        'block',
-      )
+      expect(
+        bottomGear.$el.find('#gear-options-wrapper').css('display'),
+      ).not.toBe('none')
     })
   })
 })

package/src/plugins/bottom-gear/__tests__/__snapshots__/BottomGear.test.ts.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BottomGear > should render 1`] = `
-"<button type="button" class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button">
+"<button class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button">
     /assets/icons/new/gear.svg
 </button>
-<div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display: none;">
-    <ul class="gear-options-list" id="gear-options"></ul>
+<div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display:none">
+    <ul class="gear-options-list" id="gear-options" role="menu"></ul>
 </div>
 "
 `;

package/src/plugins/clappr-nerd-stats/NerdStats.ts

@@ -13,7 +13,7 @@ import assert from 'assert'
 import { CLAPPR_VERSION } from '../../build.js'
 import {
   ClapprStatsEvents,
-  Metrics as PerfMetrics,
+  ClapprStatsMetrics as PerfMetrics,
 } from '../clappr-stats/types.js'
 import { newMetrics as newBaseMetrics } from '../clappr-stats/utils.js'
 import Formatter from './formatter.js'
@@ -62,16 +62,16 @@ type Metrics = PerfMetrics & {
 const T = 'plugins.nerd_stats'
 
 /**
- * `PLUGIN` that displays useful network-related statistics.
+ * `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
  * @beta
  *
  * @remarks
  * Depends on:
  *
- * - {@link BottomGear}
- *
- * - {@link ClapprStats}
+ * - {@link BottomGear} - where the button is attached
  *
+ * - {@link ClapprStats} - to get the metrics from
+*
  * The plugin is rendered as an item in the gear menu.
  *
  * When clicked, it shows an overlay window with the information about the network speed, latency, etc,

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