@gcorevideo/player 2.22.16 → 2.22.17

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

@@ -0,0 +1,133 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Events as CoreEvents } from '@clappr/core'
+import FakeTimers from '@sinonjs/fake-timers'
+
+import { ClapprStats } from '../ClapprStats'
+import { createMockCore } from '../../../testUtils'
+import { Chronograph, ClapprStatsEvents, Counter } from '../types'
+
+describe('ClapprStats', () => {
+  let core: any
+  let stats: ClapprStats
+  let onReport: any
+  let clock: FakeTimers.InstalledClock
+  beforeEach(() => {
+    core = createMockCore()
+    stats = new ClapprStats(core.activeContainer)
+    clock = FakeTimers.install()
+  })
+  afterEach(() => {
+    clock.uninstall()
+  })
+  describe('time measurements', () => {
+    describe('startup', () => {
+      beforeEach(() => {
+        vi.spyOn(performance, 'now').mockReturnValue(100)
+        core.activeContainer.playback.emit(CoreEvents.PLAYBACK_PLAY_INTENT)
+        vi.spyOn(performance, 'now').mockReturnValue(255)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+      })
+      it('should measure', () => {
+        const metrics = stats.exportMetrics()
+        expect(metrics.chrono[Chronograph.Startup]).toBe(155)
+        // expect(metrics.times[Chronograph.Session]).toBe(155)
+      })
+    })
+    describe('watch', () => {
+      beforeEach(() => {
+        vi.spyOn(performance, 'now').mockReturnValue(100)
+        core.activeContainer.playback.emit(CoreEvents.PLAYBACK_PLAY_INTENT)
+        vi.spyOn(performance, 'now').mockReturnValue(150)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+        vi.spyOn(performance, 'now').mockReturnValue(3000)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PAUSE)
+        vi.spyOn(performance, 'now').mockReturnValue(4900)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+        vi.spyOn(performance, 'now').mockReturnValue(5900)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PAUSE)
+        vi.spyOn(performance, 'now').mockReturnValue(6900)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+      })
+      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)
+      })
+    })
+    describe('buffering', () => {
+      beforeEach(() => {
+        vi.spyOn(performance, 'now').mockReturnValue(100)
+        core.activeContainer.playback.emit(CoreEvents.PLAYBACK_PLAY_INTENT)
+        vi.spyOn(performance, 'now').mockReturnValue(150)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+        vi.spyOn(performance, 'now').mockReturnValue(250)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_STATE_BUFFERING)
+        vi.spyOn(performance, 'now').mockReturnValue(350)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_STATE_BUFFERFULL)
+        vi.spyOn(performance, 'now').mockReturnValue(450)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_STATE_BUFFERING)
+        vi.spyOn(performance, 'now').mockReturnValue(550)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_STATE_BUFFERFULL)
+      })
+      it('should measure cumulative buffering durations', () => {
+        const metrics = stats.exportMetrics()
+        expect(metrics.chrono[Chronograph.Buffering]).toBe(200)
+      })
+    })
+    describe('session', () => {
+      beforeEach(() => {
+        onReport = vi.fn()
+        stats.on(ClapprStatsEvents.REPORT, onReport, null)
+        vi.spyOn(performance, 'now').mockReturnValue(100)
+        core.activeContainer.playback.emit(CoreEvents.PLAYBACK_PLAY_INTENT)
+        vi.spyOn(performance, 'now').mockReturnValue(200)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+        vi.spyOn(performance, 'now').mockReturnValue(60300)
+        core.activeContainer.trigger(CoreEvents.CONTAINER_STOP)
+      })
+      it('should measure', () => {
+        expect(onReport).toHaveBeenCalledWith(expect.objectContaining({
+          chrono: expect.objectContaining({
+            [Chronograph.Session]: 60200,
+          }),
+        }))
+      })
+    })  
+  })
+  describe('fps measurements', () => {
+    beforeEach(async () => {
+      onReport = vi.fn()
+      core.activePlayback.name = 'html5_video'
+      stats.on(ClapprStatsEvents.REPORT, onReport, null)
+      vi.spyOn(performance, 'now').mockReturnValue(100)
+      core.activeContainer.playback.emit(CoreEvents.PLAYBACK_PLAY_INTENT)
+      vi.spyOn(performance, 'now').mockReturnValue(200)
+      vi.spyOn(performance, 'now').mockReturnValue(200)
+      core.activeContainer.trigger(CoreEvents.CONTAINER_PLAY)
+      core.activeContainer.playback.el.webkitDecodedFrameCount = 126
+      core.activeContainer.playback.el.webkitDroppedFrameCount = 3
+      vi.spyOn(performance, 'now').mockReturnValue(5225)
+      await clock.tickAsync(5000)
+      core.activeContainer.playback.el.webkitDecodedFrameCount = 275
+      core.activeContainer.playback.el.webkitDroppedFrameCount = 4
+      vi.spyOn(performance, 'now').mockReturnValue(10225)
+      core.activeContainer.trigger(CoreEvents.CONTAINER_STOP)
+    })
+    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),
+        }),
+      }))
+      expect(onReport).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        counters: expect.objectContaining({
+          [Counter.DecodedFrames]: 275,
+          [Counter.DroppedFrames]: 4,
+          [Counter.Fps]: expect.closeTo(30, 0),
+        }),
+      }))
+    })
+  })
+})

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

@@ -1,28 +1,74 @@
+/**
+ * @beta
+ */
+export enum Chronograph {
+  Startup = 'startup',
+  Watch = 'watch',
+  Pause = 'pause',
+  Buffering = 'buffering',
+  Session = 'session',
+  // Latency = 'latency',
+}
+
+/**
+ * @beta
+ */
+export enum Counter {
+  Play = 'play',
+  Pause = 'pause',
+  Error = 'error',
+  Buffering = 'buffering',
+  DecodedFrames = 'decodedFrames',
+  DroppedFrames = 'droppedFrames',
+  Fps = 'fps',
+  ChangeLevel = 'changeLevel',
+  Seek = 'seek',
+  Fullscreen = 'fullscreen',
+  DvrUsage = 'dvrUsage',
+}
 
 /**
  * @beta
  */
 export type Metrics = {
+  /**
+   * Events count counters
+   */
   counters: {
-    play: number;
-    pause: number;
-    error: number;
-    buffering: number;
-    decodedFrames: number;
-    droppedFrames: number;
-    fps: number;
-    changeLevel: number;
-    seek: number;
-    fullscreen: number;
-    dvrUsage: number;
+    /**
+     * 
+     */
+    [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;
   };
-  timers: {
-    startup: number;
-    watch: number;
-    pause: number;
-    buffering: number;
-    session: number;
-    latency: number;
+  /**
+   * Time measurements - accumulated duration of time-based activities
+   */
+  chrono: {
+    /**
+     * Time spent in the startup phase
+     */
+    [Chronograph.Startup]: number;
+    /**
+     * Total time spent in the watch phase
+     */
+    [Chronograph.Watch]: number;
+    /**
+     * 
+     */
+    [Chronograph.Pause]: number;
+    [Chronograph.Buffering]: number;
+    [Chronograph.Session]: number;
+    // [Chronograph.Latency]: number;
   };
   extra: {
     playbackName: string;
@@ -51,15 +97,16 @@ export type BitrateTrackRecord = {
   bitrate: number;
 }
 
-/**
- * @beta
- */
-export type MetricsUpdateFn = (metrics: Metrics) => void;
-
 /**
  * @beta
  */
 export enum ClapprStatsEvents {
-  REPORT_EVENT = 'clappr:stats:report',
-  PERCENTAGE_EVENT = 'clappr:stats:percentage',
+  /**
+   * Emitted periodically with current measurements.
+   */
+  REPORT = 'clappr:stats:report',
+  /**
+   * Emitted when the playback reaches a certain percentage of the total duration.
+   */
+  // PERCENTAGE = 'clappr:stats:percentage',
 }

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

@@ -15,13 +15,12 @@ export function newMetrics(): Metrics {
       fullscreen: 0,
       dvrUsage: 0,
     },
-    timers: {
+    chrono: {
       startup: 0,
       watch: 0,
       pause: 0,
       buffering: 0,
       session: 0,
-      latency: 0,
     },
     extra: {
       playbackName: '',

package/src/plugins/error-screen/__tests__/ErrorScreen.test.ts

@@ -1,4 +1,4 @@
-import { createMockContainer, createMockCore, createMockPlayback } from '../../../testUtils'
+import { createMockCore } from '../../../testUtils'
 import { ErrorScreen } from '../ErrorScreen'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -9,9 +9,8 @@ describe('ErrorScreen', () => {
   let errorScreen: ErrorScreen
   beforeEach(() => {
     core = createMockCore()
-    container = createMockContainer()
-    playback = createMockPlayback()
-    container.playback = playback
+    container = core.activeContainer
+    playback = container.playback
     core.activeContainer = container
   })
   describe('on error', () => {

package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { ClosedCaptions } from '../ClosedCaptions.js'
 import { createMockCore, createMockMediaControl } from '../../../testUtils.js';
 

package/src/testUtils.ts

@@ -84,7 +84,7 @@ export class _MockPlayback extends Events {
 
 export function createMockCore(
   options: Record<string, unknown> = {},
-  container: any = createMockContainer(),
+  container: any = createMockContainer(options),
 ) {
   const el = document.createElement('div')
   const emitter = new Events()
@@ -157,12 +157,13 @@ export function createMockPlayback(name = 'mock') {
   })
 }
 
-export function createMockContainer(playback: any = createMockPlayback()) {
+export function createMockContainer(options: Record<string, unknown> = {}, playback: any = createMockPlayback()) {
   const el = playback.el
   const emitter = new Events()
   return Object.assign(emitter, {
     el,
     playback,
+    options,
     $el: $(el),
     getDuration: vi.fn().mockReturnValue(0),
     getPlugin: vi.fn(),