@gcorevideo/player 2.22.15 → 2.22.17

package/lib/plugins/clappr-nerd-stats/NerdStats.js

@@ -0,0 +1,339 @@
+import { UICorePlugin, Events, template } from '@clappr/core';
+import { reportError, trace } from '@gcorevideo/utils';
+import Mousetrap from 'mousetrap';
+import assert from 'assert';
+import { CLAPPR_VERSION } from '../../build.js';
+import { ClapprStatsEvents, } from '../clappr-stats/types.js';
+import { newMetrics as newBaseMetrics } from '../clappr-stats/utils.js';
+import Formatter from './formatter.js';
+import { clearSpeedTestResults, configureSpeedTest, drawSpeedTestResults, initSpeedTest, startSpeedtest, stopSpeedtest, } from './speedtest/index.js';
+import '../../../assets/clappr-nerd-stats/clappr-nerd-stats.scss';
+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 { GearEvents } from '../bottom-gear/BottomGear.js';
+const qualityClasses = [
+    'speedtest-quality-value-1',
+    'speedtest-quality-value-2',
+    'speedtest-quality-value-3',
+    'speedtest-quality-value-4',
+    'speedtest-quality-value-5',
+];
+const getDownloadQuality = (speedValue) => {
+    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;
+    }
+};
+const getPingQuality = (pingValue) => {
+    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;
+    }
+};
+const generateQualityHtml = (quality) => {
+    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('');
+};
+const drawSummary = (customMetrics, vodContainer, liveContainer) => {
+    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);
+};
+const T = 'plugins.nerd_stats';
+/**
+ * `PLUGIN` that displays useful network-related statistics.
+ * @beta
+ *
+ * @remarks
+ * Depends on:
+ *
+ * - {@link BottomGear}
+ *
+ * - {@link ClapprStats}
+ *
+ * The plugin is rendered as an item in the gear menu.
+ *
+ * When clicked, it shows an overlay window with the information about the network speed, latency, etc,
+ * and recommended quality level.
+ */
+export class NerdStats extends UICorePlugin {
+    container = null;
+    customMetrics = {
+        connectionSpeed: 0,
+        ping: 0,
+        jitter: 0,
+    };
+    metrics = newMetrics();
+    showing = false;
+    shortcut;
+    iconPosition;
+    static buttonTemplate = template(buttonHtml);
+    /**
+     * @internal
+     */
+    get name() {
+        return 'nerd_stats';
+    }
+    /**
+     * @internal
+     */
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    static template = template(pluginHtml);
+    /**
+     * @internal
+     */
+    get attributes() {
+        return {
+            'data-clappr-nerd-stats': '',
+            class: 'clappr-nerd-stats',
+        };
+    }
+    /**
+     * @internal
+     */
+    get events() {
+        return {
+            'click [data-show-stats-button]': 'showOrHide',
+            'click [data-close-button]': 'hide',
+            'click [data-refresh-button]': 'refreshSpeedTest',
+        };
+    }
+    get statsBoxElem() {
+        return '.clappr-nerd-stats[data-clappr-nerd-stats] .stats-box';
+    }
+    get statsBoxWidthThreshold() {
+        return 720;
+    }
+    get playerWidth() {
+        return this.core.$el.width();
+    }
+    get playerHeight() {
+        return this.core.$el.height();
+    }
+    constructor(core) {
+        super(core);
+        this.shortcut = core.options.clapprNerdStats?.shortcut ?? [
+            'command+shift+s',
+            'ctrl+shift+s',
+        ];
+        this.iconPosition =
+            core.options.clapprNerdStats?.iconPosition ?? 'bottom-right';
+        this.customMetrics = {
+            connectionSpeed: 0,
+            ping: 0,
+            jitter: 0,
+        };
+        configureSpeedTest(core.options.clapprNerdStats?.speedTestServers ?? []);
+    }
+    /**
+     * @internal
+     */
+    bindEvents() {
+        this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
+    }
+    onCoreReady() {
+        const bottomGear = this.core.getPlugin('bottom_gear');
+        assert(bottomGear, 'bottom_gear plugin is required');
+        this.listenTo(bottomGear, GearEvents.RENDERED, this.addToBottomGear);
+        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();
+    }
+    /**
+     * @internal
+     */
+    destroy() {
+        Mousetrap.unbind(this.shortcut);
+        return super.destroy();
+    }
+    toggle = () => {
+        if (this.showing) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    };
+    show() {
+        this.core.$el.find(this.statsBoxElem).show();
+        this.showing = true;
+        this.refreshSpeedTest();
+        initSpeedTest(this.customMetrics)
+            .then(() => {
+            startSpeedtest();
+        })
+            .catch((e) => {
+            reportError(e);
+            this.disable();
+        });
+    }
+    hide() {
+        this.core.$el.find(this.statsBoxElem).hide();
+        this.showing = false;
+        stopSpeedtest();
+    }
+    onPlayerResize() {
+        this.setStatsBoxSize();
+    }
+    addGeneralMetrics() {
+        this.metrics.general = {
+            displayResolution: this.playerWidth + 'x' + this.playerHeight,
+            volume: this.container?.volume,
+        };
+    }
+    addCustomMetrics() {
+        this.metrics.custom = this.customMetrics;
+        const videoQualityNames = [
+            'SD (480p)',
+            'HD (720p)',
+            'Full HD (1080p)',
+            '2K (1440p)',
+            '4K (2160p)',
+        ];
+        const { connectionSpeed, ping } = this.customMetrics;
+        if (!connectionSpeed || !ping) {
+            const calculatingText = 'Calculating... Please wait.';
+            this.metrics.custom.vodQuality = calculatingText;
+            this.metrics.custom.liveQuality = calculatingText;
+            return;
+        }
+        const downloadQuality = getDownloadQuality(connectionSpeed);
+        const pingQuality = getPingQuality(ping);
+        const liveQuality = Math.min(downloadQuality, pingQuality);
+        const prefix = 'Optimal for ';
+        this.metrics.custom.vodQuality =
+            prefix + videoQualityNames[downloadQuality - 1];
+        this.metrics.custom.liveQuality =
+            prefix + videoQualityNames[liveQuality - 1];
+    }
+    updateMetrics(metrics) {
+        Object.assign(this.metrics, metrics);
+        this.addGeneralMetrics();
+        this.addCustomMetrics();
+        const scrollTop = this.core.$el.find(this.statsBoxElem).scrollTop();
+        this.$el.html(NerdStats.template({
+            metrics: Formatter.format(this.metrics),
+            iconPosition: this.iconPosition,
+        }));
+        this.setStatsBoxSize();
+        drawSpeedTestResults();
+        drawSummary(this.metrics?.custom, this.$el.find('.speedtest-quality-content[data-streaming-type="vod"]'), this.$el.find('.speedtest-quality-content[data-streaming-type="live"]'));
+        this.core.$el.find(this.statsBoxElem).scrollTop(scrollTop);
+        if (!this.showing) {
+            this.hide();
+        }
+    }
+    setStatsBoxSize() {
+        if (this.playerWidth >= this.statsBoxWidthThreshold) {
+            this.$el.find(this.statsBoxElem).addClass('wide');
+            this.$el.find(this.statsBoxElem).removeClass('narrow');
+        }
+        else {
+            this.$el.find(this.statsBoxElem).removeClass('wide');
+            this.$el.find(this.statsBoxElem).addClass('narrow');
+        }
+    }
+    /**
+     * @internal
+     */
+    render() {
+        trace(`${T} render`);
+        // TODO append to the container
+        this.core.$el.append(this.$el[0]);
+        this.hide();
+        return this;
+    }
+    addToBottomGear() {
+        trace(`${T} addToBottomGear`);
+        const gear = this.core.getPlugin('bottom_gear');
+        gear
+            .addItem('nerd_stats')
+            .html(NerdStats.buttonTemplate({
+            icon: statsIcon,
+            i18n: this.core.i18n,
+        }))
+            .on('click', (e) => {
+            e.stopPropagation();
+            this.toggle();
+        });
+    }
+    clearCustomMetrics() {
+        const clapprStats = this.container?.getPlugin('clappr_stats');
+        this.customMetrics.connectionSpeed = 0;
+        this.customMetrics.ping = 0;
+        this.customMetrics.jitter = 0;
+        if (clapprStats) {
+            this.updateMetrics(clapprStats.exportMetrics());
+        }
+    }
+    refreshSpeedTest() {
+        stopSpeedtest();
+        setTimeout(() => {
+            this.clearCustomMetrics();
+            clearSpeedTestResults();
+            drawSpeedTestResults();
+        }, 200);
+        setTimeout(() => {
+            startSpeedtest();
+        }, 800);
+    }
+}
+function newMetrics() {
+    return {
+        ...newBaseMetrics(),
+        general: {},
+        custom: {
+            connectionSpeed: 0,
+            ping: 0,
+            jitter: 0,
+        },
+    };
+}

package/lib/plugins/clappr-stats/ClapprStats.d.ts

@@ -1,24 +1,28 @@
 import { Container, ContainerPlugin } from '@clappr/core';
-import type { Metrics, MetricsUpdateFn } from './types.js';
+import type { Metrics } from './types.js';
+export type ClapprStatsSettings = {
+    /**
+     * The interval in milliseconds of periodic measurements.
+     * The plugin will emit a {@link ClapprStatsEvents.REPORT} event with the collected metrics at the specified interval.
+     */
+    runEach?: number;
+};
 /**
- * `PLUGIN` that collects useful statistics about playback performance.
+ * `PLUGIN` that measures data about playback, which can be useful for analyzing performance and UX.
  * @beta
  * @remarks
  * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.
+ *
+ * Configuration options - {@link ClapprStatsSettings}
+ *
+ * Events - {@link ClapprStatsEvents}
  */
 export declare class ClapprStats extends ContainerPlugin {
-    private bwMeasureCount;
-    private intervalId;
+    private timerId;
     private lastDecodedFramesCount;
     private metrics;
-    private completion;
-    private _onReport;
-    private runBandwidthTestEvery;
-    private runEach;
     private timers;
-    private updateFn;
-    private urisToMeasureBandwidth;
-    private uriToMeasureLatency;
+    private runEach;
     /**
      * @internal
      */
@@ -29,18 +33,12 @@ export declare class ClapprStats extends ContainerPlugin {
     get supportedVersion(): {
         min: string;
     };
-    private get _playbackName();
-    private get _playbackType();
-    private _now;
-    private _inc;
+    private get playbackName();
+    private get playbackType();
+    private now;
+    private inc;
     private start;
-    private _stop;
-    /**
-     * Registers a callback to receive the metrics.
-     * @param updateMetricsFn - The callback to receive the metrics
-     */
-    setUpdateMetrics(updateMetricsFn: MetricsUpdateFn): void;
-    private _defaultReport;
+    private stop;
     constructor(container: Container);
     /**
      * @internal
@@ -52,7 +50,7 @@ export declare class ClapprStats extends ContainerPlugin {
     destroy(): void;
     /**
      * Returns the collected metrics.
-     * @returns Currently collected metrics
+     * @returns Measurements collected so far
      */
     exportMetrics(): Metrics;
     private onBitrate;
@@ -68,14 +66,11 @@ export declare class ClapprStats extends ContainerPlugin {
     private onBuffering;
     private onBufferfull;
     private onProgress;
-    private _newMetrics;
-    private _onCompletion;
-    private _buildReport;
-    private _fetchFPS;
-    private _calculateBitrates;
-    private _calculatePercentages;
-    private _html5FetchFPS;
-    private _measureLatency;
-    private _measureBandwidth;
+    private onCompletion;
+    private buildReport;
+    private fetchFPS;
+    private calcBitrates;
+    private calcBufferingPercentage;
+    private html5FetchFPS;
 }
 //# sourceMappingURL=ClapprStats.d.ts.map

package/lib/plugins/clappr-stats/ClapprStats.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClapprStats.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-stats/ClapprStats.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAA6B,MAAM,cAAc,CAAC;AAMrF,OAAO,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAkB3D;;;;;GAKG;AACH,qBAAa,WAAY,SAAQ,eAAe;IAC9C,OAAO,CAAC,cAAc,CAAK;IAE3B,OAAO,CAAC,UAAU,CAAwB;IAE1C,OAAO,CAAC,sBAAsB,CAAK;IAEnC,OAAO,CAAC,OAAO,CAAyB;IAExC,OAAO,CAAC,UAAU,CAGhB;IAEF,OAAO,CAAC,SAAS,CAA6B;IAE9C,OAAO,CAAC,qBAAqB,CAAS;IAEtC,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,MAAM,CAOZ;IAEF,OAAO,CAAC,QAAQ,CAAkC;IAElD,OAAO,CAAC,sBAAsB,CAA0B;IAExD,OAAO,CAAC,mBAAmB,CAAqB;IAEhD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,IAAI;IAQZ,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,KAAK;IAKb;;;OAGG;IACH,gBAAgB,CAAC,eAAe,EAAE,eAAe;IAKjD,OAAO,CAAC,cAAc;gBAIV,SAAS,EAAE,SAAS;IAchC;;OAEG;IACM,UAAU;IAmBnB;;OAEG;IACM,OAAO;IAKhB;;;OAGG;IACH,aAAa;IAIb,OAAO,CAAC,SAAS;IAgBjB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,6BAA6B;IAOrC,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,SAAS;IAcjB,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,eAAe;IA2BvB,OAAO,CAAC,iBAAiB;CAmD1B"}
+{"version":3,"file":"ClapprStats.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-stats/ClapprStats.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAwB,MAAM,cAAc,CAAA;AAU/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAIzC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED;;;;;;;;;GASG;AACH,qBAAa,WAAY,SAAQ,eAAe;IAC9C,OAAO,CAAC,OAAO,CAAuB;IAEtC,OAAO,CAAC,sBAAsB,CAAI;IAElC,OAAO,CAAC,OAAO,CAAwB;IAEvC,OAAO,CAAC,MAAM,CAMb;IAED,OAAO,CAAC,OAAO,CAAQ;IAEvB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,GAAG;IASX,OAAO,CAAC,GAAG;IAQX,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,IAAI;gBAKA,SAAS,EAAE,SAAS;IAKhC;;OAEG;IACM,UAAU;IAmDnB;;OAEG;IACM,OAAO;IAKhB;;;OAGG;IACH,aAAa;IAIb,OAAO,CAAC,SAAS;IAkBjB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,YAAY;IA8BpB,OAAO,CAAC,6BAA6B;IAOrC,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,QAAQ;IAgBhB,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,aAAa;CA0BtB"}