@gcorevideo/player 2.19.15 → 2.20.1

package/lib/plugins/telemetry/Telemetry.js

@@ -0,0 +1,180 @@
+// An example implementation of client side performancestatistics
+import { ContainerPlugin, Events } from '@clappr/core';
+import { reportError, trace } from '@gcorevideo/utils';
+import assert from 'assert';
+import { CLAPPR_VERSION } from '../../build.js';
+const WATCH_CUTOFF = 5;
+const STALL_MEASURE_PERIOD = 10;
+const T = 'plugins.telemetry';
+/**
+ * Telemetry event type
+ */
+export var TelemetryEvent;
+(function (TelemetryEvent) {
+    TelemetryEvent[TelemetryEvent["Init"] = 1] = "Init";
+    TelemetryEvent[TelemetryEvent["Start"] = 2] = "Start";
+    TelemetryEvent[TelemetryEvent["Watch"] = 3] = "Watch";
+    TelemetryEvent[TelemetryEvent["Stall"] = 4] = "Stall";
+})(TelemetryEvent || (TelemetryEvent = {}));
+/**
+ * Collects and reports the performance statistics.
+ * @beta
+ * @remarks
+ * This plugin is experimental and its API is likely to change.
+ *
+ * Configuration options {@link TelemetryPluginSettings}
+ *
+ * @example
+ * ```ts
+ * import { Statistics } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(Statistics)
+ *
+ * const player = new Player({
+ *   statistics: {
+ *     send: (data) => {
+ *        fetch('/stats', {
+ *          method: 'POST',
+ *          body: JSON.stringify(data),
+ *          headers: { 'content-type': 'application/json' },
+ *        })
+ *     },
+ *   },
+ *   ...
+ * })
+ * ```
+ */
+export class Telemetry extends ContainerPlugin {
+    /**
+     * The name of the plugin.
+     */
+    get name() {
+        return 'telemetry';
+    }
+    /**
+     * The supported version of the plugin.
+     */
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    started = false;
+    timeStart = 0;
+    stallSent = false;
+    stallLastTime = 0;
+    watchSent = false;
+    bufTracking = false;
+    numStalls = 0;
+    /**
+     * The time when buffering last started.
+     */
+    bufLastStarted = 0;
+    /**
+     * The accumulated buffering duration.
+     */
+    stallAcc = 0;
+    constructor(container) {
+        super(container);
+        assert(this.options.telemetry &&
+            typeof this.options.telemetry.send === 'function', 'Telemetry plugin configuration is invalid: `send` option is required');
+    }
+    /**
+     * @internal
+     */
+    bindEvents() {
+        // TODO remove this
+        // this.listenToOnce(
+        //   this.container,
+        //   CUSTOM_EVENTS_CONTAINER_START,
+        //   this.onStart,
+        // )
+        this.listenToOnce(this.container, Events.CONTAINER_READY, this.onReady);
+        this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERING, this.onBuffering);
+        this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERFULL, this.onBufferFull);
+        this.listenTo(this.container.playback, Events.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
+        this.listenTo(this.container.playback, Events.PLAYBACK_LEVEL_SWITCH_START, this.startLevelSwitch);
+        this.listenTo(this.container.playback, Events.PLAYBACK_LEVEL_SWITCH_END, this.endLevelSwitch);
+    }
+    startLevelSwitch() {
+        this.bufTracking = false;
+    }
+    endLevelSwitch() {
+        this.bufTracking = true;
+    }
+    onBuffering() {
+        if (this.bufTracking) {
+            this.bufLastStarted = performance.now();
+        }
+    }
+    onBufferFull() {
+        if (this.bufTracking && this.bufLastStarted) {
+            this.stallAcc += performance.now() - this.bufLastStarted;
+            this.numStalls++;
+        }
+        this.bufTracking = true;
+    }
+    onReady() {
+        this.sendInit();
+        trace(`${T} onReady`, {
+            autoPlay: this.options.autoPlay,
+        });
+        if (this.options.autoPlay) {
+            this.onStart();
+        }
+        else {
+            this.listenToOnce(this.container.playback, Events.PLAYBACK_PLAY_INTENT, this.onStart);
+        }
+    }
+    sendInit() {
+        this.send({ event: TelemetryEvent.Init });
+    }
+    send(event) {
+        this.options.telemetry.send({
+            type: this.container.getPlaybackType(),
+            ...event,
+        });
+    }
+    sendStall(time) {
+        // TODO don't send if no stalls?
+        const res = {
+            event: TelemetryEvent.Stall,
+            count: this.numStalls,
+            time,
+            total_ms: Math.round(this.stallAcc * 1000),
+        };
+        this.stallAcc = 0;
+        this.numStalls = 0;
+        this.send(res);
+        this.stallSent = true;
+        this.stallLastTime = time;
+    }
+    onTimeUpdate({ current }) {
+        if (!this.timeStart) {
+            this.timeStart = current;
+        }
+        try {
+            const elapsed = current - this.timeStart;
+            const stallElapsed = current - this.stallLastTime;
+            if (!this.stallSent || stallElapsed >= STALL_MEASURE_PERIOD) {
+                this.sendStall(current);
+            }
+            if (!this.watchSent && elapsed >= WATCH_CUTOFF) {
+                this.watchSent = true;
+                this.send({
+                    event: TelemetryEvent.Watch,
+                });
+            }
+        }
+        catch (error) {
+            reportError(error);
+        }
+    }
+    onStart() {
+        if (this.started) {
+            return;
+        }
+        this.started = true;
+        this.send({
+            event: TelemetryEvent.Start,
+        });
+    }
+}

package/lib/plugins/volume-fade/VolumeFade.d.ts

@@ -10,9 +10,15 @@ export declare class VolumeFade extends UICorePlugin {
     private container;
     private delay;
     private interval;
+    /**
+     * @internal
+     */
     get name(): string;
+    /**
+     * @internal
+     */
     bindEvents(): void;
-    unBindEvents(): void;
+    private unBindEvents;
     private _onUserChangeVolume;
     private _onVolumeConfig;
     private onCoreReady;

package/lib/plugins/volume-fade/VolumeFade.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VolumeFade.d.ts","sourceRoot":"","sources":["../../../src/plugins/volume-fade/VolumeFade.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAiC,MAAM,cAAc,CAAC;AAK3E,oBAAY,gBAAgB;IAC1B,IAAI,qBAAqB;CAC1B;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,kBAAkB,CAAK;IAE/B,OAAO,CAAC,SAAS,CAA0B;IAE3C,OAAO,CAAC,KAAK,CAAK;IAElB,OAAO,CAAC,QAAQ,CAAwB;IAExC,IAAI,IAAI,WAEP;IAEQ,UAAU;IAQnB,YAAY;IAKZ,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,WAAW;IAwBnB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,QAAQ;IA0BhB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,OAAO;CAGhB"}
+{"version":3,"file":"VolumeFade.d.ts","sourceRoot":"","sources":["../../../src/plugins/volume-fade/VolumeFade.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAiC,MAAM,cAAc,CAAC;AAK3E,oBAAY,gBAAgB;IAC1B,IAAI,qBAAqB;CAC1B;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,kBAAkB,CAAK;IAE/B,OAAO,CAAC,SAAS,CAA0B;IAE3C,OAAO,CAAC,KAAK,CAAK;IAElB,OAAO,CAAC,QAAQ,CAAwB;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,WAAW;IAwBnB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,QAAQ;IA0BhB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,OAAO;CAGhB"}

package/lib/plugins/volume-fade/VolumeFade.js

@@ -12,15 +12,22 @@ export class VolumeFade extends UICorePlugin {
     container = null;
     delay = 0;
     interval = null;
+    /**
+     * @internal
+     */
     get name() {
         return 'volume_fade';
     }
+    /**
+     * @internal
+     */
     bindEvents() {
+        // TODO on container changed
         this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
         if (this.core.mediaControl) {
             this.listenTo(this.core.mediaControl, 'mediacontrol:volume:user', this._onUserChangeVolume);
         }
-        this.listenTo(this.core, 'core:volume:config', this._onVolumeConfig);
+        // this.listenTo(this.core, 'core:volume:config', this._onVolumeConfig);
     }
     unBindEvents() {
         this.core.$el.off('mouseleave.volume');

package/package.json

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

package/src/index.plugins.ts

@@ -26,10 +26,10 @@ export * from "./plugins/seek-time/SeekTime.js";
 export * from "./plugins/share/Share.js";
 export * from "./plugins/skip-time/SkipTime.js";
 export * from "./plugins/spinner-three-bounce/SpinnerThreeBounce.js";
-export * from "./plugins/statistics/Statistics.js";
+export * from "./plugins/source-controller/SourceController.js";
 export * from "./plugins/subtitles/Subtitles.js";
+export * from "./plugins/telemetry/Telemetry.js";
 export * from "./plugins/thumbnails/Thumbnails.js";
-export * from "./plugins/source-controller/SourceController.js";
 // _ vast-ads
 // _ video360
 export * from "./plugins/volume-fade/VolumeFade.js";

package/src/playback/hls-playback/HlsPlayback.ts

@@ -821,9 +821,9 @@ export default class HlsPlayback extends HTML5Video {
 
   play() {
     !this._hls && this._setup()
-    assert.ok(this._hls, 'Hls.js instance is not available')
     !this._manifestParsed &&
       !this.options.hlsPlayback.preload &&
+      // @ts-expect-error
       this._hls.loadSource(this.options.src)
     super.play()
     this._startTimeUpdateTimer()