@gcorevideo/player 2.19.15 → 2.20.3

package/lib/plugins/telemetry/Telemetry.js

@@ -0,0 +1,181 @@
+// 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
+ * @beta
+ */
+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/thumbnails/Thumbnails.d.ts

@@ -1,6 +1,39 @@
 import { UICorePlugin } from '@clappr/core';
-import { TimeValue } from '../../playback.types.js';
 import '../../../assets/thumbnails/style.scss';
+/**
+ * Plugin configuration options for the thumbnails plugin.
+ * @beta
+ */
+export type ThumbnailsPluginSettings = {
+    backdropHeight: number;
+    backdropMaxOpacity: number;
+    backdropMinOpacity: number;
+    spotlightHeight: number;
+    sprite: string;
+    vtt: string;
+};
+/**
+ * Displays the thumbnails of the video when available.
+ * @beta
+ * @example
+ * ```ts
+ * import { Thumbnails } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(Thumbnails)
+ *
+ * new Player({
+ *   thumbnails: {
+ *     backdropHeight: 200,
+ *     backdropMinOpacity: 0.9,
+ *     backdropMaxOpacity: 0.99,
+ *     spotlightHeight: 100,
+ *     vtt: '1\n00:00:00,000 --> 00:00:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,0,100,56\n\n2\n00:00:10,000 --> 00:00:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,0,100,56\n\n3\n00:00:20,000 --> 00:00:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,0,100,56\n\n4\n00:00:30,000 --> 00:00:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,0,100,56\n\n5\n00:00:40,000 --> 00:00:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,0,100,56\n\n6\n00:00:50,000 --> 00:01:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,0,100,56\n\n7\n00:01:00,000 --> 00:01:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,0,100,56\n\n8\n00:01:10,000 --> 00:01:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,56,100,56\n\n9\n00:01:20,000 --> 00:01:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,56,100,56\n\n10\n00:01:30,000 --> 00:01:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,56,100,56\n\n11\n00:01:40,000 --> 00:01:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,56,100,56\n\n12\n00:01:50,000 --> 00:02:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,56,100,56\n\n13\n00:02:00,000 --> 00:02:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,56,100,56\n\n14\n00:02:10,000 --> 00:02:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,56,100,56\n\n15\n00:02:20,000 --> 00:02:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,112,100,56\n\n16\n00:02:30,000 --> 00:02:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,112,100,56\n\n17\n00:02:40,000 --> 00:02:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,112,100,56\n\n18\n00:02:50,000 --> 00:03:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,112,100,56\n\n19\n00:03:00,000 --> 00:03:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,112,100,56\n\n20\n00:03:10,000 --> 00:03:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,112,100,56\n\n21\n00:03:20,000 --> 00:03:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,112,100,56\n\n22\n00:03:30,000 --> 00:03:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,168,100,56\n\n23\n00:03:40,000 --> 00:03:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,168,100,56\n\n24\n00:03:50,000 --> 00:04:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,168,100,56\n\n25\n00:04:00,000 --> 00:04:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,168,100,56\n\n26\n00:04:10,000 --> 00:04:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,168,100,56\n\n27\n00:04:20,000 --> 00:04:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,168,100,56\n\n28\n00:04:30,000 --> 00:04:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,168,100,56\n\n29\n00:04:40,000 --> 00:04:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,224,100,56\n\n30\n00:04:50,000 --> 00:05:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,224,100,56\n\n31\n00:05:00,000 --> 00:05:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,224,100,56\n\n32\n00:05:10,000 --> 00:05:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,224,100,56\n\n33\n00:05:20,000 --> 00:05:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,224,100,56\n\n34\n00:05:30,000 --> 00:05:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,224,100,56\n\n35\n00:05:40,000 --> 00:05:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,224,100,56\n\n36\n00:05:50,000 --> 00:06:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,280,100,56\n\n37\n00:06:00,000 --> 00:06:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,280,100,56\n\n38\n00:06:10,000 --> 00:06:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,280,100,56\n\n39\n00:06:20,000 --> 00:06:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,280,100,56\n\n40\n00:06:30,000 --> 00:06:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,280,100,56\n\n41\n00:06:40,000 --> 00:06:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,280,100,56\n\n42\n00:06:50,000 --> 00:07:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,280,100,56\n\n43\n00:07:00,000 --> 00:07:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,336,100,56\n\n44\n00:07:10,000 --> 00:07:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,336,100,56\n\n45\n00:07:20,000 --> 00:07:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,336,100,56\n\n46\n00:07:30,000 --> 00:07:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,336,100,56\n\n47\n00:07:40,000 --> 00:07:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,336,100,56\n\n48\n00:07:50,000 --> 00:08:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,336,100,56\n\n49\n00:08:00,000 --> 00:08:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,336,100,56\n',
+ *     sprite:
+ *      'https://static.gvideo.co/videoplatform/sprites/2675/2452164_3dk4NsRt6vWsffEr.mp4_sprite.jpg',
+ *   },
+ * })
+ * ```
+ */
 export declare class Thumbnails extends UICorePlugin {
     private _$spotlight;
     private _$backdrop;
@@ -15,15 +48,27 @@ export declare class Thumbnails extends UICorePlugin {
     private _thumbsLoaded;
     private _oldContainer;
     private _thumbs;
+    /**
+     * @internal
+     */
     get name(): string;
+    /**
+     * @internal
+     */
     get supportedVersion(): {
         min: string;
     };
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
     };
-    get template(): any;
+    private static readonly template;
     private buildSpriteConfig;
+    /**
+     * @internal
+     */
     bindEvents(): void;
     private _bindContainerEvents;
     private _onCoreReady;
@@ -37,7 +82,7 @@ export declare class Thumbnails extends UICorePlugin {
     private _calculateHoverPosition;
     private _buildImg;
     private _loadBackdrop;
-    setText(time: TimeValue): void;
+    private setText;
     private _updateCarousel;
     private _updateSpotlightThumb;
     private _getThumbIndexForTime;

package/lib/plugins/thumbnails/Thumbnails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnails.d.ts","sourceRoot":"","sources":["../../../src/plugins/thumbnails/Thumbnails.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAkC,MAAM,cAAc,CAAC;AAI5E,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAKpD,OAAO,uCAAuC,CAAC;AA0B/C,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,UAAU,CAA4B;IAE9C,OAAO,CAAC,UAAU,CAA4B;IAE9C,OAAO,CAAC,IAAI,CAA4B;IAExC,OAAO,CAAC,UAAU,CAA4B;IAE9C,OAAO,CAAC,cAAc,CAA4B;IAElD,OAAO,CAAC,sBAAsB,CAAqB;IAEnD,OAAO,CAAC,iBAAiB,CAAa;IAEtC,OAAO,CAAC,cAAc,CAAK;IAE3B,OAAO,CAAC,KAAK,CAAS;IAEtB,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,CAAC,aAAa,CAA0B;IAE/C,OAAO,CAAC,OAAO,CAAe;IAE9B,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAa,UAAU;;MAItB;IAED,IAAI,QAAQ,QAEX;IAcD,OAAO,CAAC,iBAAiB;IAmChB,UAAU;IAQnB,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,YAAY;YA0BN,eAAe;IAY7B,OAAO,CAAC,+BAA+B;IAIvC,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,uBAAuB;IA4E/B,OAAO,CAAC,SAAS;IA2BjB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,IAAI,EAAE,SAAS;IAUvB,OAAO,CAAC,eAAe;IAwEvB,OAAO,CAAC,qBAAqB;IA6C7B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,eAAe;CAkBxB"}
+{"version":3,"file":"Thumbnails.d.ts","sourceRoot":"","sources":["../../../src/plugins/thumbnails/Thumbnails.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAkC,MAAM,cAAc,CAAA;AAS3E,OAAO,uCAAuC,CAAA;AAI9C;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,EAAE,MAAM,CAAA;IACtB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAeD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,WAAW,CAA2B;IAE9C,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,IAAI,CAA2B;IAEvC,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,cAAc,CAA2B;IAEjD,OAAO,CAAC,sBAAsB,CAAoB;IAElD,OAAO,CAAC,iBAAiB,CAAY;IAErC,OAAO,CAAC,cAAc,CAAI;IAE1B,OAAO,CAAC,KAAK,CAAQ;IAErB,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,aAAa,CAAyB;IAE9C,OAAO,CAAC,OAAO,CAAc;IAE7B;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAcvD,OAAO,CAAC,iBAAiB;IAmCzB;;OAEG;IACM,UAAU;IAwBnB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,YAAY;YAiCN,eAAe;IAY7B,OAAO,CAAC,+BAA+B;IAIvC,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,uBAAuB;IAgF/B,OAAO,CAAC,SAAS;IA2BjB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,eAAe;IA4EvB,OAAO,CAAC,qBAAqB;IA8C7B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,eAAe;CAgBxB"}

package/lib/plugins/thumbnails/Thumbnails.js

@@ -5,7 +5,29 @@ import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/thumbnails/scrub-thumbnails.ejs';
 import '../../../assets/thumbnails/style.scss';
 import { getPageX } from '../utils.js';
-const T = 'plugins.media_control_thumbnails';
+const T = 'plugins.thumbnails';
+/**
+ * Displays the thumbnails of the video when available.
+ * @beta
+ * @example
+ * ```ts
+ * import { Thumbnails } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(Thumbnails)
+ *
+ * new Player({
+ *   thumbnails: {
+ *     backdropHeight: 200,
+ *     backdropMinOpacity: 0.9,
+ *     backdropMaxOpacity: 0.99,
+ *     spotlightHeight: 100,
+ *     vtt: '1\n00:00:00,000 --> 00:00:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,0,100,56\n\n2\n00:00:10,000 --> 00:00:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,0,100,56\n\n3\n00:00:20,000 --> 00:00:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,0,100,56\n\n4\n00:00:30,000 --> 00:00:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,0,100,56\n\n5\n00:00:40,000 --> 00:00:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,0,100,56\n\n6\n00:00:50,000 --> 00:01:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,0,100,56\n\n7\n00:01:00,000 --> 00:01:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,0,100,56\n\n8\n00:01:10,000 --> 00:01:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,56,100,56\n\n9\n00:01:20,000 --> 00:01:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,56,100,56\n\n10\n00:01:30,000 --> 00:01:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,56,100,56\n\n11\n00:01:40,000 --> 00:01:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,56,100,56\n\n12\n00:01:50,000 --> 00:02:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,56,100,56\n\n13\n00:02:00,000 --> 00:02:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,56,100,56\n\n14\n00:02:10,000 --> 00:02:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,56,100,56\n\n15\n00:02:20,000 --> 00:02:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,112,100,56\n\n16\n00:02:30,000 --> 00:02:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,112,100,56\n\n17\n00:02:40,000 --> 00:02:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,112,100,56\n\n18\n00:02:50,000 --> 00:03:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,112,100,56\n\n19\n00:03:00,000 --> 00:03:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,112,100,56\n\n20\n00:03:10,000 --> 00:03:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,112,100,56\n\n21\n00:03:20,000 --> 00:03:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,112,100,56\n\n22\n00:03:30,000 --> 00:03:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,168,100,56\n\n23\n00:03:40,000 --> 00:03:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,168,100,56\n\n24\n00:03:50,000 --> 00:04:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,168,100,56\n\n25\n00:04:00,000 --> 00:04:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,168,100,56\n\n26\n00:04:10,000 --> 00:04:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,168,100,56\n\n27\n00:04:20,000 --> 00:04:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,168,100,56\n\n28\n00:04:30,000 --> 00:04:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,168,100,56\n\n29\n00:04:40,000 --> 00:04:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,224,100,56\n\n30\n00:04:50,000 --> 00:05:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,224,100,56\n\n31\n00:05:00,000 --> 00:05:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,224,100,56\n\n32\n00:05:10,000 --> 00:05:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,224,100,56\n\n33\n00:05:20,000 --> 00:05:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,224,100,56\n\n34\n00:05:30,000 --> 00:05:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,224,100,56\n\n35\n00:05:40,000 --> 00:05:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,224,100,56\n\n36\n00:05:50,000 --> 00:06:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,280,100,56\n\n37\n00:06:00,000 --> 00:06:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,280,100,56\n\n38\n00:06:10,000 --> 00:06:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,280,100,56\n\n39\n00:06:20,000 --> 00:06:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,280,100,56\n\n40\n00:06:30,000 --> 00:06:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,280,100,56\n\n41\n00:06:40,000 --> 00:06:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,280,100,56\n\n42\n00:06:50,000 --> 00:07:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,280,100,56\n\n43\n00:07:00,000 --> 00:07:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,336,100,56\n\n44\n00:07:10,000 --> 00:07:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,336,100,56\n\n45\n00:07:20,000 --> 00:07:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,336,100,56\n\n46\n00:07:30,000 --> 00:07:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,336,100,56\n\n47\n00:07:40,000 --> 00:07:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,336,100,56\n\n48\n00:07:50,000 --> 00:08:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,336,100,56\n\n49\n00:08:00,000 --> 00:08:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,336,100,56\n',
+ *     sprite:
+ *      'https://static.gvideo.co/videoplatform/sprites/2675/2452164_3dk4NsRt6vWsffEr.mp4_sprite.jpg',
+ *   },
+ * })
+ * ```
+ */
 export class Thumbnails extends UICorePlugin {
     _$spotlight = null;
     _$backdrop = null;
@@ -20,20 +42,27 @@ export class Thumbnails extends UICorePlugin {
     _thumbsLoaded = false;
     _oldContainer = null;
     _thumbs = [];
+    /**
+     * @internal
+     */
     get name() {
-        return 'media_control_thumbnails';
+        return 'thumbnails';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
+    /**
+     * @internal
+     */
     get attributes() {
         return {
-            'class': this.name
+            class: this.name,
         };
     }
-    get template() {
-        return template(pluginHtml);
-    }
+    static template = template(pluginHtml);
     /*
      * Helper to build the "thumbs" property for a sprite sheet.
      *
@@ -77,6 +106,9 @@ export class Thumbnails extends UICorePlugin {
         return thumbs;
     }
     // TODO check if seek enabled
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenToOnce(this.core, Events.CORE_READY, this._onCoreReady);
         this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this._onMouseMove);
@@ -93,7 +125,9 @@ export class Thumbnails extends UICorePlugin {
     }
     _onCoreReady() {
         try {
-            if (!this.options.thumbnails || !this.options.thumbnails.sprite || !this.options.thumbnails.vtt) {
+            if (!this.options.thumbnails ||
+                !this.options.thumbnails.sprite ||
+                !this.options.thumbnails.vtt) {
                 this.destroy();
                 return;
             }
@@ -144,7 +178,7 @@ export class Thumbnails extends UICorePlugin {
     }
     _getOptions() {
         if (!('thumbnails' in this.core.options)) {
-            throw '\'thumbnail property missing from options object.';
+            throw "'thumbnail property missing from options object.";
         }
         return this.core.options.thumbnails;
     }
@@ -245,7 +279,7 @@ export class Thumbnails extends UICorePlugin {
         this.$img.css({
             height: this.spriteSheetHeight * scaleFactor,
             left: -1 * thumb.x * scaleFactor,
-            top: -1 * thumb.y * scaleFactor
+            top: -1 * thumb.y * scaleFactor,
         });
         if (this.$container.find(this.$img).length === 0) {
             this.$container.append(this.$img);
@@ -287,7 +321,7 @@ export class Thumbnails extends UICorePlugin {
         const videoDuration = this.core.mediaControl.container.getDuration();
         const startTimeOffset = this.core.mediaControl.container.getStartTimeOffset();
         // the time into the video at the current hover position
-        const hoverTime = startTimeOffset + (videoDuration * hoverPosition);
+        const hoverTime = startTimeOffset + videoDuration * hoverPosition;
         const backdropWidth = this._$backdrop.width();
         const $carousel = this._$carousel;
         const carouselWidth = $carousel.width();
@@ -312,9 +346,9 @@ export class Thumbnails extends UICorePlugin {
         const positionInThumb = timeIntoThumb / thumbDuration;
         const xCoordInThumb = thumbWidth * positionInThumb;
         // now calculate the position along carousel that we want to be above the hover position
-        const xCoordInCarousel = (thumbIndex * thumbWidth) + xCoordInThumb;
+        const xCoordInCarousel = thumbIndex * thumbWidth + xCoordInThumb;
         // and finally the position of the carousel when the hover position is taken in to consideration
-        const carouselXCoord = xCoordInCarousel - (hoverPosition * backdropWidth);
+        const carouselXCoord = xCoordInCarousel - hoverPosition * backdropWidth;
         $carousel.css('left', -carouselXCoord);
         const maxOpacity = this._getOptions().backdropMaxOpacity || 0.6;
         const minOpacity = this._getOptions().backdropMinOpacity || 0.08;
@@ -330,7 +364,7 @@ export class Thumbnails extends UICorePlugin {
                 distance = Math.min(0, distance + thumbWidth);
             }
             // fade over the width of 2 thumbnails
-            const opacity = Math.max(maxOpacity - (Math.abs(distance) / (2 * thumbWidth)), minOpacity);
+            const opacity = Math.max(maxOpacity - Math.abs(distance) / (2 * thumbWidth), minOpacity);
             this._$backdropCarouselImgs[i].css('opacity', opacity);
         }
     }
@@ -346,7 +380,7 @@ export class Thumbnails extends UICorePlugin {
         const videoDuration = this.core.mediaControl.container.getDuration();
         // the time into the video at the current hover position
         const startTimeOffset = this.core.mediaControl.container.getStartTimeOffset();
-        const hoverTime = startTimeOffset + (videoDuration * hoverPosition);
+        const hoverTime = startTimeOffset + videoDuration * hoverPosition;
         this.setText(hoverTime);
         // determine which thumbnail applies to the current time
         const thumbIndex = this._getThumbIndexForTime(hoverTime);
@@ -358,7 +392,7 @@ export class Thumbnails extends UICorePlugin {
         const elWidth = this.$el.width();
         const thumbWidth = $spotlight.width();
         const thumbHeight = $spotlight.height();
-        let spotlightXPos = (elWidth * hoverPosition) - (thumbWidth / 2);
+        let spotlightXPos = elWidth * hoverPosition - thumbWidth / 2;
         // adjust so the entire thumbnail is always visible
         spotlightXPos = Math.max(Math.min(spotlightXPos, elWidth - thumbWidth), 0);
         $spotlight.css('left', spotlightXPos);
@@ -399,9 +433,9 @@ export class Thumbnails extends UICorePlugin {
     }
     _createElements() {
         trace(`${T} _createElements`);
-        this.$el.html(this.template({
-            'backdropHeight': this._getOptions().backdropHeight,
-            'spotlightHeight': this._getOptions().spotlightHeight
+        this.$el.html(Thumbnails.template({
+            backdropHeight: this._getOptions().backdropHeight,
+            spotlightHeight: this._getOptions().spotlightHeight,
         }));
         // cache dom references
         this._$spotlight = this.$el.find('.spotlight');

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

@@ -3,6 +3,7 @@ export declare enum VolumeFadeEvents {
     FADE = "core:volume:fade"
 }
 /**
+ * Applies fade effect to the player's volume change.
  * @beta
  */
 export declare class VolumeFade extends UICorePlugin {
@@ -10,9 +11,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;;;GAGG;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

@@ -5,6 +5,7 @@ export var VolumeFadeEvents;
     VolumeFadeEvents["FADE"] = "core:volume:fade";
 })(VolumeFadeEvents || (VolumeFadeEvents = {}));
 /**
+ * Applies fade effect to the player's volume change.
  * @beta
  */
 export class VolumeFade extends UICorePlugin {
@@ -12,15 +13,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.3",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/index.plugins.ts

@@ -8,7 +8,6 @@ export * from "./plugins/clappr-stats/ClapprStats.js";
 export * from "./plugins/click-to-pause/ClickToPause.js";
 export * from "./plugins/clips/Clips.js";
 export * from "./plugins/context-menu/ContextMenu.js";
-export * from "./plugins/disable-controls/DisableControls.js";
 export * from "./plugins/dvr-controls/DvrControls.js";
 export * from "./plugins/error-screen/ErrorScreen.js";
 export * from "./plugins/favicon/Favicon.js";
@@ -26,10 +25,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()