@gcorevideo/player 2.18.3 → 2.19.0

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

@@ -0,0 +1,294 @@
+import { UICorePlugin, Events, template } from '@clappr/core';
+import { reportError } from '@gcorevideo/utils';
+import Mousetrap from 'mousetrap';
+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';
+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.clappr_nerd_stats';
+export class ClapprNerdStats extends UICorePlugin {
+    container = null;
+    customMetrics = {
+        connectionSpeed: 0,
+        ping: 0,
+        jitter: 0,
+    };
+    metrics = newMetrics();
+    showing = false;
+    shortcut;
+    iconPosition;
+    get name() {
+        return 'clappr_nerd_stats';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    get template() {
+        return template(pluginHtml);
+    }
+    get attributes() {
+        return {
+            'data-clappr-nerd-stats': '',
+            'class': 'clappr-nerd-stats'
+        };
+    }
+    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 ?? []);
+    }
+    bindEvents() {
+        this.listenToOnce(this.core, Events.CORE_READY, this.init);
+        this.listenTo(this.core, 'gear:rendered', this.addToBottomGear);
+    }
+    init() {
+        this.container = this.core.activeContainer;
+        const clapprStats = this.container?.getPlugin('clappr_stats');
+        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.showOrHide());
+            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();
+            // this.$el.find('.speed-test-button').on('click', this.onSpeedTestClick.bind(this));
+            // this.$el.find('.close-speed-test').on('click', this.closeSpeedTest.bind(this));
+            // this.$el.find('.speed-test').hide();
+        }
+    }
+    showOrHide(event) {
+        if (this.showing) {
+            this.hide(event);
+        }
+        else {
+            this.show(event);
+        }
+    }
+    show(event) {
+        this.core.$el.find(this.statsBoxElem).show();
+        this.showing = true;
+        if (event) {
+            event.stopPropagation();
+        }
+        this.refreshSpeedTest();
+        initSpeedTest(this.customMetrics).then(() => {
+            startSpeedtest();
+        }).catch(e => {
+            reportError(e);
+            this.disable();
+        });
+    }
+    hide(event) {
+        this.core.$el.find(this.statsBoxElem).hide();
+        this.showing = false;
+        if (event) {
+            event.stopPropagation();
+        }
+        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(this.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');
+        }
+    }
+    render() {
+        this.core.$el.append(this.$el[0]);
+        this.hide();
+        return this;
+    }
+    addToBottomGear() {
+        this.core.mediaControl.$el?.find('.gear-options-list [data-nerd]').html(buttonHtml);
+        // this.core.$el.append(optionsList);
+        const $button = this.core.$el.find('.nerd-button');
+        $button.find('.stats-icon').html(statsIcon);
+        $button.on('click', () => {
+            // $optionsList.remove();
+            this.showOrHide();
+        });
+    }
+    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-nerd-stats/formatter.d.ts

@@ -0,0 +1,8 @@
+import type { MetricsKind, MetricsType } from './types';
+type MetricsValue = number | string;
+type Metrics = Partial<Record<MetricsKind, Partial<Record<MetricsType, MetricsValue>>>>;
+export default class Formatter {
+    static format(metrics: Metrics): Metrics;
+}
+export {};
+//# sourceMappingURL=formatter.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,91 @@
+import humanFormat from 'human-format';
+const timeScale = new humanFormat.Scale({
+    ms: 1,
+    sec: 1000,
+    min: 60000,
+    hours: 3600000
+});
+const percentScale = new humanFormat.Scale({
+    '%': 1
+});
+const formattingTemplate = {
+    general: {
+        volume: {
+            scale: percentScale
+        }
+    },
+    timers: {
+        startup: {
+            scale: timeScale
+        },
+        watch: {
+            scale: timeScale
+        },
+        pause: {
+            scale: timeScale
+        },
+        buffering: {
+            scale: timeScale
+        },
+        session: {
+            scale: timeScale
+        },
+        latency: {
+            scale: timeScale
+        }
+    },
+    extra: {
+        buffersize: {
+            scale: timeScale
+        },
+        duration: {
+            scale: timeScale
+        },
+        currentTime: {
+            scale: timeScale
+        },
+        bitrateWeightedMean: {
+            unit: 'bps'
+        },
+        bitrateMostUsed: {
+            unit: 'bps'
+        },
+        bandwidth: {
+            unit: 'bps'
+        },
+        watchedPercentage: {
+            scale: percentScale
+        },
+        bufferingPercentage: {
+            scale: percentScale
+        }
+    }
+};
+export default class Formatter {
+    static format(metrics) {
+        const formattedMetrics = {};
+        Object.entries(metrics).forEach(([type, mm]) => {
+            const fmt = {};
+            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)) {
+                    // @ts-ignore
+                    const templateScale = typeTemplate[name].scale || 'SI';
+                    // @ts-ignore
+                    const templateUnit = typeTemplate[name].unit || '';
+                    fmt[name] = humanFormat(value, {
+                        scale: templateScale,
+                        unit: templateUnit,
+                        decimals: 2
+                    });
+                }
+                else {
+                    fmt[name] = value;
+                }
+            });
+        });
+        return formattedMetrics;
+    }
+}

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

@@ -0,0 +1,54 @@
+export type Server = {
+    id: number;
+    country: string;
+    name: string;
+    server: string;
+    dlURL: string;
+    ulURL: string;
+    pingT: number;
+    pingURL: string;
+    getIpURL: string;
+};
+type EndHandler = (success: boolean) => void;
+export type TestStatusInfo = {
+    testState: -1 | 0 | 1 | 2 | 3 | 4 | 5;
+    dlStatus: number | 'Fail';
+    ulStatus: number;
+    pingStatus: string;
+    clientIp: string;
+    serverHostName: string;
+    jitterStatus: string;
+    dlProgress: 0 | 1;
+    ulProgress: 0 | 1;
+    pingProgress: 0 | 1;
+    testId: string | null;
+};
+type UpdateHandler = (data: TestStatusInfo) => void;
+type SelectCallback = (server: Server | null) => void;
+export declare class Speedtest {
+    private worker;
+    private workerUrl;
+    private _selectServerCalled;
+    private _selectedServer;
+    private _serverList;
+    private _settings;
+    private _state;
+    private updater;
+    private _prevData;
+    private _originalExtra;
+    onend: EndHandler | null;
+    onupdate: UpdateHandler | null;
+    getState(): number;
+    setParameter(parameter: string, value: unknown): void;
+    _checkServerDefinition(server: Server): void;
+    addTestPoint(server: Server): void;
+    addTestPoints(list: Server[]): void;
+    getSelectedServer(): Server;
+    setSelectedServer(server: Server): void;
+    selectServer(result: SelectCallback): void;
+    start(): void;
+    abort(): void;
+    private initWorker;
+}
+export {};
+//# sourceMappingURL=Speedtest.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Speedtest.d.ts","sourceRoot":"","sources":["../../../../src/plugins/clappr-nerd-stats/speedtest/Speedtest.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,MAAM,GAAG;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAA;AAID,KAAK,UAAU,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACtC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,CAAC,GAAG,CAAC,CAAC;IAClB,UAAU,EAAE,CAAC,GAAG,CAAC,CAAC;IAClB,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,aAAa,GAAG,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;AAEpD,KAAK,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;AAItD,qBAAa,SAAS;IACpB,OAAO,CAAC,MAAM,CAAuB;IAErC,OAAO,CAAC,SAAS,CAAuB;IAExC,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,eAAe,CAAuB;IAE9C,OAAO,CAAC,WAAW,CAAgB;IAEnC,OAAO,CAAC,SAAS,CAAW;IAE5B,OAAO,CAAC,MAAM,CAAK;IAEnB,OAAO,CAAC,OAAO,CAAwB;IAEvC,OAAO,CAAC,SAAS,CAA+B;IAEhD,OAAO,CAAC,cAAc,CAAM;IAE5B,KAAK,EAAE,UAAU,GAAG,IAAI,CAAQ;IAEhC,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAQ;IAEtC,QAAQ;IAIR,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO;IAU9C,sBAAsB,CAAC,MAAM,EAAE,MAAM;IAiCrC,YAAY,CAAC,MAAM,EAAE,MAAM;IAY3B,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE;IAM5B,iBAAiB;IAQjB,iBAAiB,CAAC,MAAM,EAAE,MAAM;IAShC,YAAY,CAAC,MAAM,EAAE,cAAc;IA8KnC,KAAK;IAyEL,KAAK;IASL,OAAO,CAAC,UAAU;CAQnB"}