@gcorevideo/player 2.22.16 → 2.22.18

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

@@ -0,0 +1,390 @@
+import { UICorePlugin, Events, template, Playback, } 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';
+import { drawSummary, getPingQuality } from './utils.js';
+import { getDownloadQuality } from './utils.js';
+const PLAYBACK_NAMES = {
+    dash: 'DASH.js',
+    hls: 'HLS.js',
+    html5_video: 'Native',
+};
+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;
+    speedtestMetrics = {
+        connectionSpeed: 0,
+        ping: 0,
+        jitter: 0,
+    };
+    metrics = newMetrics();
+    open = 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 {
+            class: 'clappr-nerd-stats',
+        };
+    }
+    /**
+     * @internal
+     */
+    get events() {
+        return {
+            click: 'clicked',
+            'click #nerd-stats-close': 'hide',
+            'click #nerd-stats-refresh': 'refreshSpeedTest',
+        };
+    }
+    clicked(e) {
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    get statsBoxElem() {
+        return this.$el.find('#nerd-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.speedtestMetrics = {
+            connectionSpeed: 0,
+            ping: 0,
+            jitter: 0,
+        };
+        configureSpeedTest(core.options.clapprNerdStats?.speedTestServers ?? []);
+    }
+    /**
+     * @internal
+     */
+    bindEvents() {
+        this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events.CORE_RESIZE, this.onPlayerResize);
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
+    }
+    onCoreReady() {
+        const bottomGear = this.core.getPlugin('bottom_gear');
+        assert(bottomGear, 'bottom_gear plugin is required');
+        this.listenTo(bottomGear, GearEvents.RENDERED, this.attach);
+        Mousetrap.bind(this.shortcut, this.toggle);
+        this.updateResolution();
+    }
+    onActiveContainerChanged() {
+        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.');
+        this.listenTo(clapprStats, ClapprStatsEvents.REPORT, this.updateMetrics);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_VOLUME, () => {
+            this.metrics.general.volume = this.container?.volume ?? 0;
+            this.$el
+                .find('#nerd-stats-volume')
+                .text(Formatter.formatVolume(this.metrics.general.volume));
+        });
+        this.listenTo(this.core.activePlayback, Events.PLAYBACK_LOADEDMETADATA, () => {
+            this.$el
+                .find('#nerd-stats-playback-type')
+                .text(this.formatPlaybackName(this.core.activePlayback.getPlaybackType()));
+        });
+        this.updateMetrics(clapprStats.exportMetrics());
+        this.$el
+            .find('#nerd-stats-playback-name')
+            .text(PLAYBACK_NAMES[this.core.activePlayback.name] ?? '-');
+        this.core.activeContainer.$el.append(this.$el);
+    }
+    /**
+     * @internal
+     */
+    destroy() {
+        Mousetrap.unbind(this.shortcut);
+        return super.destroy();
+    }
+    toggle = () => {
+        if (this.open) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    };
+    show() {
+        this.$el.show();
+        this.statsBoxElem.scrollTop(this.statsBoxElem.scrollTop());
+        this.open = true;
+        this.refreshSpeedTest();
+        initSpeedTest(this.speedtestMetrics)
+            .then(() => {
+            startSpeedtest();
+        })
+            .catch((e) => {
+            reportError(e);
+            this.disable();
+        });
+    }
+    hide() {
+        this.$el.hide();
+        this.open = false;
+        stopSpeedtest();
+    }
+    onPlayerResize() {
+        this.setStatsBoxSize();
+        this.updateResolution();
+    }
+    updateResolution() {
+        this.metrics.general.resolution = {
+            width: this.playerWidth,
+            height: this.playerHeight,
+        };
+        this.$el
+            .find('#nerd-stats-resolution-width')
+            .text(this.metrics.general.resolution.width);
+        this.$el
+            .find('#nerd-stats-resolution-height')
+            .text(this.metrics.general.resolution.height);
+    }
+    estimateQuality() {
+        trace(`${T} estimateQuality`);
+        const videoQualityNames = [
+            'SD (480p)',
+            'HD (720p)',
+            'Full HD (1080p)',
+            '2K (1440p)',
+            '4K (2160p)',
+        ];
+        const { connectionSpeed, ping } = this.speedtestMetrics;
+        if (!connectionSpeed || !ping) {
+            const calculatingText = this.core.i18n.t('stats.calculating');
+            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) {
+        trace(`${T} updateMetrics`, { custom: this.speedtestMetrics });
+        Object.assign(this.metrics, metrics);
+        this.updateEstimatedQuality();
+        this.$el
+            .find('#nerd-stats-current-time')
+            .text(Formatter.formatTime(this.metrics.extra.currentTime));
+        this.$el
+            .find('#nerd-stats-video-duration')
+            .text(Formatter.formatTime(this.metrics.extra.duration));
+        this.$el
+            .find('#nerd-stats-buffer-size')
+            .text(Formatter.formatTime(this.metrics.extra.buffersize));
+        this.$el
+            .find('#nerd-stats-bitrate-weighted-mean')
+            .text(Formatter.formatBitrate(this.metrics.extra.bitrateWeightedMean));
+        this.$el
+            .find('#nerd-stats-bitrate-most-used')
+            .text(Formatter.formatBitrate(this.metrics.extra.bitrateMostUsed));
+        this.$el
+            .find('#nerd-stats-watched-percentage')
+            .text(Formatter.formatPercentage(this.metrics.extra.watchedPercentage));
+        this.$el
+            .find('#nerd-stats-buffering-percentage')
+            .text(Formatter.formatPercentage(this.metrics.extra.bufferingPercentage));
+        this.$el
+            .find('#nerd-stats-startup-time')
+            .text(Formatter.formatTime(this.metrics.chrono.startup));
+        this.$el
+            .find('#nerd-stats-watch-time')
+            .text(Formatter.formatTime(this.metrics.chrono.watch));
+        this.$el
+            .find('#nerd-stats-pause-time')
+            .text(Formatter.formatTime(this.metrics.chrono.pause));
+        this.$el
+            .find('#nerd-stats-buffering-time')
+            .text(Formatter.formatTime(this.metrics.chrono.buffering));
+        this.$el
+            .find('#nerd-stats-session-time')
+            .text(Formatter.formatTime(this.metrics.chrono.session));
+        this.$el.find('#nerd-stats-plays').text(this.metrics.counters.play);
+        this.$el.find('#nerd-stats-pauses').text(this.metrics.counters.pause);
+        this.$el.find('#nerd-stats-errors').text(this.metrics.counters.error);
+        this.$el
+            .find('#nerd-stats-bufferings')
+            .text(this.metrics.counters.buffering);
+        this.$el
+            .find('#nerd-stats-decoded-frames')
+            .text(this.metrics.counters.decodedFrames);
+        this.$el
+            .find('#nerd-stats-dropped-frames')
+            .text(this.metrics.counters.droppedFrames);
+        this.$el
+            .find('#nerd-stats-bitrate-changes')
+            .text(this.metrics.counters.changeLevel);
+        this.$el.find('#nerd-stats-seeks').text(this.metrics.counters.seek);
+        this.$el
+            .find('#nerd-stats-fullscreen')
+            .text(this.metrics.counters.fullscreen);
+        this.$el.find('#nerd-stats-dvr-usage').text(this.metrics.counters.dvrUsage);
+        this.$el
+            .find('#nerd-stats-fps')
+            .text(Formatter.formatFps(this.metrics.counters.fps));
+        this.setStatsBoxSize();
+        drawSpeedTestResults();
+        drawSummary(this.speedtestMetrics, this.$el.find('#nerd-stats-quality-vod'), this.$el.find('#nerd-stats-quality-live'));
+        if (!this.open) {
+            this.hide();
+        }
+    }
+    updateEstimatedQuality() {
+        this.estimateQuality();
+        this.$el
+            .find('#nerd-stats-quality-vod-text')
+            .html(this.metrics.custom.vodQuality);
+        this.$el
+            .find('#nerd-stats-quality-live-text')
+            .html(this.metrics.custom.liveQuality);
+    }
+    setStatsBoxSize() {
+        if (this.playerWidth >= this.statsBoxWidthThreshold) {
+            this.statsBoxElem.addClass('wide');
+            this.statsBoxElem.removeClass('narrow');
+        }
+        else {
+            this.statsBoxElem.removeClass('wide');
+            this.statsBoxElem.addClass('narrow');
+        }
+    }
+    /**
+     * @internal
+     */
+    render() {
+        this.$el
+            .html(NerdStats.template({
+            metrics: Formatter.format(this.metrics ?? newMetrics()),
+            iconPosition: this.iconPosition,
+            i18n: this.core.i18n,
+        }))
+            .hide();
+        return this;
+    }
+    attach() {
+        trace(`${T} attach`);
+        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();
+        });
+    }
+    clearSpeedtestMetrics() {
+        const clapprStats = this.container?.getPlugin('clappr_stats');
+        this.speedtestMetrics.connectionSpeed = 0;
+        this.speedtestMetrics.ping = 0;
+        this.speedtestMetrics.jitter = 0;
+        if (clapprStats) {
+            this.updateMetrics(clapprStats.exportMetrics());
+        }
+    }
+    refreshSpeedTest() {
+        stopSpeedtest();
+        setTimeout(() => {
+            this.clearSpeedtestMetrics();
+            clearSpeedTestResults();
+            drawSpeedTestResults();
+        }, 200);
+        setTimeout(() => {
+            startSpeedtest();
+        }, 800);
+    }
+    formatPlaybackName(playbackType) {
+        switch (playbackType) {
+            case Playback.VOD:
+                return this.core.i18n.t('vod');
+            case Playback.LIVE:
+                return this.core.i18n.t('live');
+            default:
+                return '-';
+        }
+    }
+}
+function newMetrics() {
+    return {
+        ...newBaseMetrics(),
+        general: {
+            displayResolution: '',
+            resolution: {
+                width: 0,
+                height: 0,
+            },
+            volume: 0,
+        },
+        custom: {
+            connectionSpeed: 0,
+            ping: 0,
+            jitter: 0,
+        },
+    };
+}

package/lib/plugins/clappr-nerd-stats/formatter.d.ts

@@ -3,6 +3,11 @@ type MetricsValue = number | string;
 type Metrics = Partial<Record<MetricsKind, Partial<Record<MetricsType, MetricsValue>>>>;
 export default class Formatter {
     static format(metrics: Metrics): Metrics;
+    static formatVolume(volume: number): string;
+    static formatTime(time: number): string;
+    static formatFps(fps: number): string;
+    static formatPercentage(percentage: number): string;
+    static formatBitrate(bitrate: number): string;
 }
 export {};
 //# sourceMappingURL=formatter.d.ts.map

package/lib/plugins/clappr-nerd-stats/formatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatter.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-nerd-stats/formatter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAyExD,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AACpC,KAAK,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAExF,MAAM,CAAC,OAAO,OAAO,SAAS;IAC5B,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO;CA8BzC"}
+{"version":3,"file":"formatter.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-nerd-stats/formatter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAsFnE,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,CAAA;AACnC,KAAK,OAAO,GAAG,OAAO,CACpB,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC,CAChE,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,SAAS;IAC5B,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO;IAkCxC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAI3C,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAMvC,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAIrC,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM;IAMnD,MAAM,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;CAK9C"}

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

@@ -3,63 +3,72 @@ const timeScale = new humanFormat.Scale({
     ms: 1,
     sec: 1000,
     min: 60000,
-    hours: 3600000
+    hours: 3600000,
 });
 const percentScale = new humanFormat.Scale({
-    '%': 1
+    '%': 1,
 });
+const metricTemplates = {
+    fps: {
+        scale: 'SI',
+        decimals: 0,
+    },
+    volume: {
+        scale: percentScale,
+    },
+};
 const formattingTemplate = {
     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,
+        },
+    },
 };
 export default class Formatter {
     static format(metrics) {
@@ -69,8 +78,10 @@ export default class Formatter {
             formattedMetrics[type] = fmt;
             const typeTemplate = formattingTemplate[type];
             Object.entries(mm).forEach(([name, value]) => {
-                // const value = mm[name];
-                if (typeTemplate && typeTemplate[name] && (typeof value === 'number') && !isNaN(value)) {
+                if (typeTemplate &&
+                    typeTemplate[name] &&
+                    typeof value === 'number' &&
+                    !isNaN(value)) {
                     // @ts-ignore
                     const templateScale = typeTemplate[name].scale || 'SI';
                     // @ts-ignore
@@ -78,7 +89,7 @@ export default class Formatter {
                     fmt[name] = humanFormat(value, {
                         scale: templateScale,
                         unit: templateUnit,
-                        decimals: 2
+                        decimals: 2,
                     });
                 }
                 else {
@@ -88,4 +99,25 @@ export default class Formatter {
         });
         return formattedMetrics;
     }
+    static formatVolume(volume) {
+        return humanFormat(volume, metricTemplates.volume);
+    }
+    static formatTime(time) {
+        return humanFormat(time, {
+            scale: timeScale,
+        });
+    }
+    static formatFps(fps) {
+        return humanFormat(fps, metricTemplates.fps);
+    }
+    static formatPercentage(percentage) {
+        return humanFormat(percentage, {
+            scale: percentScale,
+        });
+    }
+    static formatBitrate(bitrate) {
+        return humanFormat(bitrate, {
+            unit: 'bps',
+        });
+    }
 }

package/lib/plugins/clappr-nerd-stats/speedtest/index.d.ts

@@ -1,7 +1,7 @@
 import { type Server } from './Speedtest.js';
-import { CustomMetrics } from './types.js';
+import { SpeedtestMetrics } from './types.js';
 export declare function drawSpeedTestResults(): void;
-export declare const initSpeedTest: (customMetrics: CustomMetrics) => Promise<void>;
+export declare const initSpeedTest: (customMetrics: SpeedtestMetrics) => Promise<void>;
 export declare const stopSpeedtest: () => void;
 export declare const startSpeedtest: () => void;
 export declare const clearSpeedTestResults: () => void;

package/lib/plugins/clappr-nerd-stats/speedtest/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/plugins/clappr-nerd-stats/speedtest/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAkC,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAqC3C,wBAAgB,oBAAoB,SAmBnC;AAID,eAAO,MAAM,aAAa,kBAAmB,aAAa,KAAG,OAAO,CAAC,IAAI,CA+ExE,CAAC;AAEF,eAAO,MAAM,aAAa,YAIzB,CAAC;AAEF,eAAO,MAAM,cAAc,YAI1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,YAEjC,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,EAAE,QAGnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/plugins/clappr-nerd-stats/speedtest/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAkC,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAqC9C,wBAAgB,oBAAoB,SAmBnC;AAID,eAAO,MAAM,aAAa,kBAAmB,gBAAgB,KAAG,OAAO,CAAC,IAAI,CA+E3E,CAAC;AAEF,eAAO,MAAM,aAAa,YAIzB,CAAC;AAEF,eAAO,MAAM,cAAc,YAI1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,YAEjC,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,EAAE,QAGnD"}

package/lib/plugins/clappr-nerd-stats/speedtest/types.d.ts

@@ -1,4 +1,4 @@
-export type CustomMetrics = {
+export type SpeedtestMetrics = {
     ping: number;
     jitter: number;
     connectionSpeed: number;

package/lib/plugins/clappr-nerd-stats/speedtest/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/plugins/clappr-nerd-stats/speedtest/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;CACzB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/plugins/clappr-nerd-stats/speedtest/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;CACzB,CAAA"}

package/lib/plugins/clappr-nerd-stats/types.d.ts

@@ -1,4 +1,7 @@
 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;
 //# sourceMappingURL=types.d.ts.map

package/lib/plugins/clappr-nerd-stats/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-nerd-stats/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,aAAa,GAAG,qBAAqB,GAAG,iBAAiB,GAAG,WAAW,GAAG,mBAAmB,GAAG,qBAAqB,CAAC;AAC7P,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-nerd-stats/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AACxD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AACvD,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,OAAO,GACP,WAAW,GACX,SAAS,GACT,SAAS,GACT,YAAY,GACZ,UAAU,GACV,aAAa,GACb,qBAAqB,GACrB,iBAAiB,GACjB,WAAW,GACX,mBAAmB,GACnB,qBAAqB,CAAA;AACzB,MAAM,MAAM,UAAU,GAClB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,OAAO,GACP,WAAW,GACX,SAAS,GACT,SAAS,GACT,YAAY,GACZ,UAAU,GACV,aAAa,GACb,qBAAqB,GACrB,iBAAiB,GACjB,WAAW,GACX,mBAAmB,GACnB,qBAAqB,GACrB,KAAK,CAAA;AACT,MAAM,MAAM,UAAU,GAClB,QAAQ,GACR,MAAM,GACN,aAAa,GACb,YAAY,GACZ,SAAS,GACT,WAAW,CAAA;AACf,MAAM,MAAM,YAAY,GAAG,MAAM,CAAA"}

package/lib/plugins/clappr-nerd-stats/utils.d.ts

@@ -0,0 +1,7 @@
+import { ZeptoResult } from "../../types";
+import { SpeedtestMetrics } from "./speedtest/types";
+export declare const getDownloadQuality: (speedValue: number) => number;
+export declare const getPingQuality: (pingValue: number) => number;
+export declare const generateQualityHtml: (quality: number) => string;
+export declare const drawSummary: (customMetrics: SpeedtestMetrics, vodContainer: ZeptoResult, liveContainer: ZeptoResult) => void;
+//# sourceMappingURL=utils.d.ts.map

package/lib/plugins/clappr-nerd-stats/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-nerd-stats/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAUpD,eAAO,MAAM,kBAAkB,eAAgB,MAAM,KAAG,MAYvD,CAAA;AAED,eAAO,MAAM,cAAc,cAAe,MAAM,KAAG,MAYlD,CAAA;AAED,eAAO,MAAM,mBAAmB,YAAa,MAAM,KAAG,MAerD,CAAA;AAED,eAAO,MAAM,WAAW,kBACP,gBAAgB,gBACjB,WAAW,iBACV,WAAW,SAe3B,CAAA"}

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

@@ -0,0 +1,67 @@
+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) => {
+    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) => {
+    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) => {
+    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, 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);
+};