@gcorevideo/player 2.22.17 → 2.22.18

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/types.ts

@@ -36,20 +36,20 @@ export type Metrics = {
    */
   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;
-  };
+    [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
    */
@@ -57,44 +57,43 @@ export type Metrics = {
     /**
      * Time spent in the startup phase
      */
-    [Chronograph.Startup]: number;
+    [Chronograph.Startup]: number
     /**
      * Total time spent in the watch phase
      */
-    [Chronograph.Watch]: number;
+    [Chronograph.Watch]: number
     /**
-     * 
+     *
      */
-    [Chronograph.Pause]: number;
-    [Chronograph.Buffering]: number;
-    [Chronograph.Session]: 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;
-  };
-  custom: Record<string, unknown>;
-};
+    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 BitrateTrackRecord = {
-  start: number;
-  end?: number;
-  time?: number;
-  bitrate: number;
+  start: number
+  end?: number
+  time?: number
+  bitrate: number
 }
 
 /**
@@ -109,4 +108,4 @@ export enum ClapprStatsEvents {
    * 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 {
@@ -36,6 +36,5 @@ export function newMetrics(): Metrics {
       duration: 0,
       currentTime: 0,
     },
-    custom: {},
-  };
-}
+  }
+}

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();
   }