@gcorevideo/player 2.22.17 → 2.22.20

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

@@ -1,109 +1,153 @@
-import humanFormat, { ScaleLike } from 'human-format';
-import type { MetricsKind, MetricsType } from './types';
+import humanFormat, { ScaleLike } from 'human-format'
+import type { MetricName, MetricsKind, MetricsType } from './types'
 
 const timeScale = new humanFormat.Scale({
   ms: 1,
   sec: 1000,
   min: 60000,
-  hours: 3600000
-});
+  hours: 3600000,
+})
 
 const percentScale = new humanFormat.Scale({
-  '%': 1
-});
+  '%': 1,
+})
 
 type FormatParams = {
-  scale?: ScaleLike;
-  unit?: 'bps';
-  decimals?: number;
+  scale?: ScaleLike
+  unit?: 'bps'
+  decimals?: number
 }
 
-const formattingTemplate: Record<MetricsKind, Partial<Record<MetricsType, FormatParams>>> = {
+const metricTemplates: Partial<Record<MetricName, FormatParams>> = {
+  fps: {
+    scale: 'SI',
+    decimals: 0,
+  },
+  volume: {
+    scale: percentScale,
+  },
+}
+
+const formattingTemplate: Record<
+  MetricsKind,
+  Partial<Record<MetricsType, FormatParams>>
+> = {
   general: {
     volume: {
-      scale: percentScale
-    }
+      scale: percentScale,
+    },
   },
   timers: {
     startup: {
-      scale: timeScale
+      scale: timeScale,
     },
     watch: {
-      scale: timeScale
+      scale: timeScale,
     },
     pause: {
-      scale: timeScale
+      scale: timeScale,
     },
     buffering: {
-      scale: timeScale
+      scale: timeScale,
     },
     session: {
-      scale: timeScale
+      scale: timeScale,
     },
     latency: {
-      scale: timeScale
-    }
+      scale: timeScale,
+    },
   },
   extra: {
     buffersize: {
-      scale: timeScale
+      scale: timeScale,
     },
     duration: {
-      scale: timeScale
+      scale: timeScale,
     },
     currentTime: {
-      scale: timeScale
+      scale: timeScale,
     },
     bitrateWeightedMean: {
-      unit: 'bps'
+      unit: 'bps',
     },
     bitrateMostUsed: {
-      unit: 'bps'
+      unit: 'bps',
     },
     bandwidth: {
-      unit: 'bps'
+      unit: 'bps',
     },
     watchedPercentage: {
-      scale: percentScale
+      scale: percentScale,
     },
     bufferingPercentage: {
-      scale: percentScale
-    }
-  }
-};
+      scale: percentScale,
+    },
+  },
+}
 
-type MetricsValue = number | string;
-type Metrics = Partial<Record<MetricsKind, Partial<Record<MetricsType, MetricsValue>>>>;
+type MetricsValue = number | string
+type Metrics = Partial<
+  Record<MetricsKind, Partial<Record<MetricsType, MetricsValue>>>
+>
 
 export default class Formatter {
   static format(metrics: Metrics): Metrics {
-    const formattedMetrics: Metrics = {};
+    const formattedMetrics: Metrics = {}
 
     Object.entries(metrics).forEach(([type, mm]) => {
-      const fmt: Partial<Record<MetricsType, MetricsValue>> = {};
-      formattedMetrics[type as MetricsKind] = fmt;
-      const typeTemplate = formattingTemplate[type as MetricsKind];
+      const fmt: Partial<Record<MetricsType, MetricsValue>> = {}
+      formattedMetrics[type as MetricsKind] = fmt
+      const typeTemplate = formattingTemplate[type as MetricsKind]
 
       Object.entries(mm).forEach(([name, value]) => {
-        // const value = mm[name];
-
-        if (typeTemplate && typeTemplate[name as MetricsType] && (typeof value === 'number') && !isNaN(value)) {
+        if (
+          typeTemplate &&
+          typeTemplate[name as MetricsType] &&
+          typeof value === 'number' &&
+          !isNaN(value)
+        ) {
           // @ts-ignore
-          const templateScale = typeTemplate[name as MetricsType].scale || 'SI';
+          const templateScale = typeTemplate[name as MetricsType].scale || 'SI'
           // @ts-ignore
-          const templateUnit = typeTemplate[name as MetricsType].unit || '';
+          const templateUnit = typeTemplate[name as MetricsType].unit || ''
 
           fmt[name as MetricsType] = humanFormat(value, {
             scale: templateScale,
             unit: templateUnit,
-            decimals: 2
-          });
+            decimals: 2,
+          })
         } else {
-          fmt[name as MetricsType] = value;
+          fmt[name as MetricsType] = value
         }
-      });
-    });
+      })
+    })
+
+    return formattedMetrics
+  }
+
+  static formatVolume(volume: number): string {
+    return humanFormat(volume, metricTemplates.volume)
+  }
+
+  static formatTime(time: number): string {
+    return humanFormat(time, {
+      scale: timeScale,
+    })
+  }
+
+  static formatFps(fps: number): string {
+    return humanFormat(fps, metricTemplates.fps)
+  }
+
+  static formatPercentage(percentage: number): string {
+    return humanFormat(percentage, {
+      scale: percentScale,
+    })
+  }
 
-    return formattedMetrics;
+  static formatBitrate(bitrate: number): string {
+    return humanFormat(bitrate, {
+      unit: 'bps',
+    })
   }
 }

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

@@ -1,5 +1,5 @@
 import { type Server, type TestStatusInfo, Speedtest } from './Speedtest.js';
-import { CustomMetrics } from './types.js';
+import { SpeedtestMetrics } from './types.js';
 
 const DIGITS_THRESHOLD = 99999;
 const DEFAULT_DOWNLOAD_SPEED = '0.00';
@@ -59,7 +59,7 @@ export function drawSpeedTestResults() {
 
 let inited: Promise<void> | null = null;
 
-export const initSpeedTest = (customMetrics: CustomMetrics): Promise<void> => {
+export const initSpeedTest = (customMetrics: SpeedtestMetrics): Promise<void> => {
   if (inited !== null) {
     return inited;
   }

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

@@ -1,4 +1,4 @@
-export type CustomMetrics = {
+export type SpeedtestMetrics = {
   ping: number;
   jitter: number;
   connectionSpeed: number;

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

@@ -1,3 +1,43 @@
-export type MetricsKind = 'general' | 'timers' | 'extra';
-export type MetricsType = 'volume' | 'startup' | 'watch' | 'pause' | 'buffering' | 'session' | 'latency' | 'buffersize' | 'duration' | 'currentTime' | 'bitrateWeightedMean' | 'bitrateMostUsed' | 'bandwidth' | 'watchedPercentage' | 'bufferingPercentage';
-export type MetricsValue = number;
+export type MetricsKind = 'general' | 'timers' | 'extra'
+export type MetricType = 'general' | 'timers' | 'extra'
+export type MetricsType =
+  | 'volume'
+  | 'startup'
+  | 'watch'
+  | 'pause'
+  | 'buffering'
+  | 'session'
+  | 'latency'
+  | 'buffersize'
+  | 'duration'
+  | 'currentTime'
+  | 'bitrateWeightedMean'
+  | 'bitrateMostUsed'
+  | 'bandwidth'
+  | 'watchedPercentage'
+  | 'bufferingPercentage'
+export type MetricName =
+  | 'volume'
+  | 'startup'
+  | 'watch'
+  | 'pause'
+  | 'buffering'
+  | 'session'
+  | 'latency'
+  | 'buffersize'
+  | 'duration'
+  | 'currentTime'
+  | 'bitrateWeightedMean'
+  | 'bitrateMostUsed'
+  | 'bandwidth'
+  | 'watchedPercentage'
+  | 'bufferingPercentage'
+  | 'fps'
+export type MetricKind =
+  | 'volume'
+  | 'time'
+  | 'precisetime'
+  | 'percentage'
+  | 'bitrate'
+  | 'bandwidth'
+export type MetricsValue = number

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

@@ -0,0 +1,75 @@
+import { ZeptoResult } from "../../types"
+import { SpeedtestMetrics } from "./speedtest/types"
+
+const qualityClasses = [
+  'speedtest-quality-value-1',
+  'speedtest-quality-value-2',
+  'speedtest-quality-value-3',
+  'speedtest-quality-value-4',
+  'speedtest-quality-value-5',
+]
+
+export const getDownloadQuality = (speedValue: number): number => {
+  if (speedValue < 3) {
+    return 1
+  } else if (speedValue < 7) {
+    return 2
+  } else if (speedValue < 13) {
+    return 3
+  } else if (speedValue < 25) {
+    return 4
+  } else {
+    return 5
+  }
+}
+
+export const getPingQuality = (pingValue: number): number => {
+  if (pingValue < 20) {
+    return 5
+  } else if (pingValue < 50) {
+    return 4
+  } else if (pingValue < 100) {
+    return 3
+  } else if (pingValue < 150) {
+    return 2
+  } else {
+    return 1
+  }
+}
+
+export const generateQualityHtml = (quality: number): string => {
+  const html = []
+  const qualityClassName = qualityClasses[quality - 1]
+
+  for (let i = 0; i < qualityClasses.length; i++) {
+    if (i < quality) {
+      html.push(
+        `<div class="speedtest-quality-content-item ${qualityClassName}"></div>`,
+      )
+    } else {
+      html.push('<div class="speedtest-quality-content-item"></div>')
+    }
+  }
+
+  return html.join('')
+}
+
+export const drawSummary = (
+  customMetrics: SpeedtestMetrics,
+  vodContainer: ZeptoResult,
+  liveContainer: ZeptoResult,
+) => {
+  const { connectionSpeed, ping } = customMetrics
+
+  if (!connectionSpeed || !ping) {
+    return
+  }
+  const downloadQuality = getDownloadQuality(connectionSpeed)
+  const pingQuality = getPingQuality(ping)
+  const liveQuality = Math.min(downloadQuality, pingQuality)
+  const vodHtml = generateQualityHtml(downloadQuality)
+  const liveHtml = generateQualityHtml(liveQuality)
+
+  vodContainer.html(vodHtml)
+  liveContainer.html(liveHtml)
+}

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