@gcorevideo/player 2.22.15 → 2.22.17

package/lib/plugins/vast-ads/loaderxml.js

@@ -2,7 +2,7 @@ import { reportError } from '@gcorevideo/utils';
 import assert from 'assert';
 import URLHandler from './urlhandler.js';
 import MergeVast from './xmlmerge.js';
-import { strtimeToMiliseconds } from '../utils.js';
+import { parseClipTime } from '../utils.js';
 export default class LoaderXML {
     url;
     config = '';
@@ -91,7 +91,7 @@ export default class LoaderXML {
             this.removeTag('Tracking', 'event="progress"');
         }
         if (linearSkipOffset && linearSkipOffset.length > 1) {
-            timeOffset = strtimeToMiliseconds(linearSkipOffset[1]);
+            timeOffset = parseClipTime(linearSkipOffset[1]);
             this.config = this.config.replace(/<Linear skipoffset="(\d+:\d+:\d+)".*?>/g, '<Linear>');
         }
         return { skipEvents, progressEvents, timeOffset };

package/lib/testUtils.d.ts

@@ -94,9 +94,10 @@ export declare function createMockPlayback(name?: string): Events<string | symbo
     switchAudioTrack: import("vitest").Mock<(...args: any[]) => any>;
     trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };
-export declare function createMockContainer(playback?: any): Events<string | symbol, any> & {
+export declare function createMockContainer(options?: Record<string, unknown>, playback?: any): Events<string | symbol, any> & {
     el: any;
     playback: any;
+    options: Record<string, unknown>;
     $el: any;
     getDuration: import("vitest").Mock<(...args: any[]) => any>;
     getPlugin: import("vitest").Mock<(...args: any[]) => any>;

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;;;EAqBvC;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC/C;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;EAkBvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAY7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC/C;AAED,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EAAE,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;EAmB9G;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAc/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAY7C"}

package/lib/testUtils.js

@@ -60,7 +60,7 @@ export class _MockPlayback extends Events {
         this.emit(event, ...args);
     }
 }
-export function createMockCore(options = {}, container = createMockContainer()) {
+export function createMockCore(options = {}, container = createMockContainer(options)) {
     const el = document.createElement('div');
     const emitter = new Events();
     return Object.assign(emitter, {
@@ -128,12 +128,13 @@ export function createMockPlayback(name = 'mock') {
         trigger: emitter.emit,
     });
 }
-export function createMockContainer(playback = createMockPlayback()) {
+export function createMockContainer(options = {}, playback = 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(),
@@ -152,14 +153,11 @@ export function createMockMediaControl(core) {
     mediaControl.$el.html(`<div class="media-control-left-panel" data-media-control></div>
     <div class="media-control-right-panel" data-media-control></div>
     <div class="media-control-center-panel" data-media-control></div>`);
-    const elements = {
-        gear: $(document.createElement('div')),
-    };
-    // @ts-ignore
-    mediaControl.getElement = vi.fn().mockImplementation((name) => elements[name]);
     // @ts-ignore
     mediaControl.putElement = vi.fn();
     // @ts-ignore
+    mediaControl.mount = vi.fn();
+    // @ts-ignore
     mediaControl.toggleElement = vi.fn();
     return mediaControl;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.22.15",
+  "version": "2.22.17",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/index.plugins.ts

@@ -4,8 +4,9 @@ export * from "./plugins/audio-selector/AudioSelector.js";
 export { AudioTracks as AudioSelector } from "./plugins/audio-selector/AudioSelector.js";
 export * from "./plugins/big-mute-button/BigMuteButton.js";
 export * from "./plugins/bottom-gear/BottomGear.js";
-export * from "./plugins/clappr-nerd-stats/ClapprNerdStats.js";
 export * from "./plugins/clappr-stats/ClapprStats.js";
+export * from "./plugins/clappr-nerd-stats/NerdStats.js";
+export { NerdStats as ClapprNerdStats } from "./plugins/clappr-nerd-stats/NerdStats.js";
 export * from "./plugins/click-to-pause/ClickToPause.js";
 export * from "./plugins/clips/Clips.js";
 export * from "./plugins/context-menu/ContextMenu.js";

package/src/playback/dash-playback/DashPlayback.ts

@@ -543,15 +543,12 @@ export default class DashPlayback extends BasePlayback {
   }
 
   override _onProgress() {
-    if (!this._dash) {
-      return
-    }
-
-    let buffer = this._dash.getDashMetrics().getCurrentBufferLevel('video')
+    const buffer =
+      // @ts-expect-error
+      this._dash.getDashMetrics().getCurrentBufferLevel('video') ||
+      // @ts-expect-error
+      this._dash.getDashMetrics().getCurrentBufferLevel('audio')
 
-    if (!buffer) {
-      buffer = this._dash.getDashMetrics().getCurrentBufferLevel('audio')
-    }
     const progress = {
       start: this.getCurrentTime(),
       current: this.getCurrentTime() + buffer,

package/src/playback.types.ts

@@ -1,5 +1,6 @@
 /**
- * Playback time in seconds since the beginning of the stream (or a segment for the live streams)
+ * Playback time position in seconds since the beginning of the stream.
+ * For the live streams this is limited to the length of a segment. When DVR is enabled, this refers to the 
  * @public
  */
 export type TimeValue = number
@@ -10,20 +11,33 @@ export type TimeValue = number
  */
 export interface TimePosition {
   /**
-   * Current playback time, 0..duration, seconds.
+   * Current playback time, 0..duration
    */
   current: TimeValue
   /**
-   * Total duration of the media, seconds.
+   * Total duration of the media content (or DVR window size or segment duration for live streams)
    */
   total: TimeValue
 }
 
 /**
- * For the plugin development
+ * Time progress information indicated by Clappr CONTAINER_PROGRESS and PLAYBACK_PROGRESS events.
  * @beta
  */
-export type TimeProgress = TimePosition & { start: number }
+export type TimeProgress = {
+  /**
+   * Current playback time
+   */
+  start: TimeValue
+  /**
+   * Current buffer length beginning from the start (=current) time
+   */
+  current: TimeValue
+  /**
+   * Total duration of the media content
+   */
+  total: TimeValue
+}
 
 /**
  * For the plugin development
@@ -34,20 +48,21 @@ export type TimeUpdate = TimePosition & {
 }
 
 /**
- * A level of quality within a media source.
+ * A level of quality within a media source/representation.
  * @public
  */
 export interface QualityLevel {
   /**
    * Zero-based index of the quality level.
+   * Quality levels go from low to high
    */
   level: number
   /**
-   * Width of the video, pixels.
+   * Width of the video frame, pixels.
    */
   width: number
   /**
-   * Height of the video, pixels.
+   * Height of the video frame, pixels.
    */
   height: number
   /**

package/src/plugins/clappr-nerd-stats/{ClapprNerdStats.ts → NerdStats.ts}

@@ -1,6 +1,7 @@
 import { UICorePlugin, Events, template, Core, Container } from '@clappr/core'
 import { reportError, trace } from '@gcorevideo/utils'
 import Mousetrap from 'mousetrap'
+import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
 import {
@@ -25,7 +26,6 @@ import pluginHtml from '../../../assets/clappr-nerd-stats/clappr-nerd-stats.ejs'
 import buttonHtml from '../../../assets/clappr-nerd-stats/button.ejs'
 import statsIcon from '../../../assets/icons/new/stats.svg'
 import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js'
-import assert from 'assert'
 
 const qualityClasses = [
   'speedtest-quality-value-1',
@@ -113,7 +113,7 @@ type Metrics = BaseMetrics & {
   }
 }
 
-const T = 'plugins.clappr_nerd_stats'
+const T = 'plugins.nerd_stats'
 
 /**
  * `PLUGIN` that displays useful network-related statistics.
@@ -131,7 +131,7 @@ const T = 'plugins.clappr_nerd_stats'
  * When clicked, it shows an overlay window with the information about the network speed, latency, etc,
  * and recommended quality level.
  */
-export class ClapprNerdStats extends UICorePlugin {
+export class NerdStats extends UICorePlugin {
   private container: Container | null = null
 
   private customMetrics: CustomMetrics = {
@@ -234,32 +234,27 @@ export class ClapprNerdStats extends UICorePlugin {
 
     this.container = this.core.activeContainer
     const clapprStats = this.container?.getPlugin('clappr_stats')
+    assert(
+      clapprStats,
+      'clappr-stats not available. Please, include it as a plugin of your Clappr instance.\n' +
+        'For more info, visit: https://github.com/clappr/clappr-stats.',
+    )
+    Mousetrap.bind(this.shortcut, this.toggle)
+    this.listenTo(this.core, Events.CORE_RESIZE, this.onPlayerResize)
+    this.listenTo(clapprStats, ClapprStatsEvents.REPORT, this.updateMetrics)
+    this.updateMetrics(clapprStats.exportMetrics())
+    this.render()
+  }
 
-    if (!clapprStats) {
-      reportError({
-        message: 'clappr_stats plugin is not available',
-      })
-      console.error(
-        'clappr-stats not available. Please, include it as a plugin of your Clappr instance.\n' +
-          'For more info, visit: https://github.com/clappr/clappr-stats.',
-      )
-      this.disable()
-    } else {
-      Mousetrap.bind(this.shortcut, () => this.toggle())
-      this.listenTo(this.core, Events.CORE_RESIZE, this.onPlayerResize)
-      // TODO: fix
-      this.listenTo(
-        clapprStats,
-        ClapprStatsEvents.REPORT_EVENT,
-        this.updateMetrics,
-      )
-      clapprStats.setUpdateMetrics(this.updateMetrics.bind(this))
-      this.updateMetrics(clapprStats.exportMetrics())
-      this.render()
-    }
+  /**
+   * @internal
+   */
+  override destroy() {
+    Mousetrap.unbind(this.shortcut)
+    return super.destroy()
   }
 
-  private toggle() {
+  private toggle = () => {
     if (this.showing) {
       this.hide()
     } else {
@@ -338,7 +333,7 @@ export class ClapprNerdStats extends UICorePlugin {
     const scrollTop = this.core.$el.find(this.statsBoxElem).scrollTop()
 
     this.$el.html(
-      ClapprNerdStats.template({
+      NerdStats.template({
         metrics: Formatter.format(this.metrics),
         iconPosition: this.iconPosition,
       }),
@@ -383,10 +378,10 @@ export class ClapprNerdStats extends UICorePlugin {
   private addToBottomGear() {
     trace(`${T} addToBottomGear`)
     const gear = this.core.getPlugin('bottom_gear') as BottomGear
-    const $button = gear
-      .addItem('nerd')
+    gear
+      .addItem('nerd_stats')
       .html(
-        ClapprNerdStats.buttonTemplate({
+        NerdStats.buttonTemplate({
           icon: statsIcon,
           i18n: this.core.i18n,
         }),