@gcorevideo/player 2.22.16 → 2.22.18

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,65 +1,111 @@
+/**
+ * @beta
+ */
+export enum Chronograph {
+  Startup = 'startup',
+  Watch = 'watch',
+  Pause = 'pause',
+  Buffering = 'buffering',
+  Session = 'session',
+  // Latency = 'latency',
+}
 
 /**
  * @beta
  */
-export type Metrics = {
-  counters: {
-    play: number;
-    pause: number;
-    error: number;
-    buffering: number;
-    decodedFrames: number;
-    droppedFrames: number;
-    fps: number;
-    changeLevel: number;
-    seek: number;
-    fullscreen: number;
-    dvrUsage: number;
-  };
-  timers: {
-    startup: number;
-    watch: number;
-    pause: number;
-    buffering: number;
-    session: number;
-    latency: number;
-  };
-  extra: {
-    playbackName: string;
-    playbackType: string;
-    bitratesHistory: BitrateTrackRecord[];
-    bitrateWeightedMean: number;
-    bitrateMostUsed: number;
-    buffersize: number;
-    watchHistory: Array<[number, number]>;
-    watchedPercentage: number;
-    bufferingPercentage: number;
-    bandwidth: number;
-    duration: number;
-    currentTime: number;
-  };
-  custom: Record<string, unknown>;
-};
+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 BitrateTrackRecord = {
-  start: number;
-  end?: number;
-  time?: number;
-  bitrate: number;
+export type Metrics = {
+  /**
+   * Events count counters
+   */
+  counters: {
+    /**
+     *
+     */
+    [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
+  }
+  /**
+   * 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
+    playbackType: string
+    bitratesHistory: BitrateTrackRecord[]
+    bitrateWeightedMean: number
+    bitrateMostUsed: number
+    buffersize: number
+    watchHistory: Array<[number, number]>
+    watchedPercentage: number
+    bufferingPercentage: number
+    bandwidth: number
+    duration: number
+    currentTime: number
+  }
 }
 
 /**
  * @beta
  */
-export type MetricsUpdateFn = (metrics: Metrics) => void;
+export type BitrateTrackRecord = {
+  start: number
+  end?: number
+  time?: number
+  bitrate: number
+}
 
 /**
  * @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

@@ -1,4 +1,4 @@
-import type { Metrics } from "./types";
+import type { Metrics } from './types'
 
 export function newMetrics(): Metrics {
   return {
@@ -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: '',
@@ -37,6 +36,5 @@ export function newMetrics(): Metrics {
       duration: 0,
       currentTime: 0,
     },
-    custom: {},
-  };
-}
+  }
+}

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/seek-time/SeekTime.ts

@@ -3,7 +3,7 @@
 // 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 { TimeUpdate } from '../../playback.types.js';
+import { TimePosition } from '../../playback.types.js';
 
 import { CLAPPR_VERSION } from '../../build.js';
 
@@ -79,7 +79,7 @@ export class SeekTime extends UICorePlugin {
     this.listenTo(this.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.onContainerChanged);
     if (this.mediaControlContainer) {
       this.listenTo(this.mediaControlContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.update);
-      this.listenTo(this.mediaControlContainer, Events.CONTAINER_TIMEUPDATE, this.updateDuration);
+      this.listenTo(this.mediaControlContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
     }
   }
 
@@ -89,9 +89,8 @@ export class SeekTime extends UICorePlugin {
     this.bindEvents();
   }
 
-  private updateDuration(timeProgress: TimeUpdate) {
-    this.duration = timeProgress.total;
-    // this.firstFragDateTime = timeProgress.firstFragDateTime;
+  private onTimeUpdate({ total }: TimePosition) {
+    this.duration = total;
     this.update();
   }
 

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(),