@gcorevideo/player 2.18.3 → 2.19.1

package/lib/plugins/clappr-stats/ClapprStats.js

@@ -0,0 +1,332 @@
+import { ContainerPlugin, Events as CoreEvents, Log } from '@clappr/core';
+import assert from 'assert';
+import { CLAPPR_VERSION } from '../build.js';
+import { ClapprStatsEvents } from './types.js';
+import { newMetrics } from './utils.js';
+// TODO: fix
+const updateMetrics = () => { };
+export class ClapprStats extends ContainerPlugin {
+    bwMeasureCount = 0;
+    intervalId = null;
+    lastDecodedFramesCount = 0;
+    metrics = newMetrics();
+    completion;
+    _onReport;
+    runBandwidthTestEvery;
+    runEach;
+    timers = {
+        startup: 0,
+        watch: 0,
+        pause: 0,
+        buffering: 0,
+        session: 0,
+        latency: 0,
+    };
+    updateFn = updateMetrics;
+    urisToMeasureBandwidth;
+    uriToMeasureLatency;
+    get name() {
+        return 'clappr_stats';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    get _playbackName() {
+        return String(this.container.playback.name || '');
+    }
+    get _playbackType() {
+        return this.container.getPlaybackType();
+    }
+    _now() {
+        const hasPerformanceSupport = window.performance && typeof (window.performance.now) === 'function';
+        return (hasPerformanceSupport) ? window.performance.now() : new Date().getTime();
+    }
+    _inc(counter) {
+        this.metrics.counters[counter] += 1;
+    }
+    // _timerHasStarted(timer) {
+    //   return this[`_start${timer}`] !== undefined;
+    // }
+    start(timer) {
+        // this[`_start${timer}`] = this._now();
+        this.timers[timer] = this._now();
+    }
+    _stop(timer) {
+        // this._metrics.timers[timer] += this._now() - this[`_start${timer}`];
+        this.metrics.timers[timer] += this._now() - this.timers[timer];
+    }
+    setUpdateMetrics(updateMetricsFn) {
+        this.updateFn = updateMetricsFn;
+    }
+    _defaultReport(metrics) {
+        this.updateFn(metrics);
+    }
+    constructor(container) {
+        super(container);
+        this.runEach = container.options.clapprStats?.runEach ?? 5000;
+        this._onReport = container.options.clapprStats?.onReport ?? this._defaultReport;
+        this.uriToMeasureLatency = container.options.clapprStats?.uriToMeasureLatency;
+        this.urisToMeasureBandwidth = container.options.clapprStats?.urisToMeasureBandwidth;
+        this.runBandwidthTestEvery = container.options.clapprStats?.runBandwidthTestEvery ?? 10;
+        this.completion = {
+            watch: container.options.clapprStats?.onCompletion ?? [],
+            calls: []
+        };
+    }
+    bindEvents() {
+        this.listenTo(this.container, CoreEvents.CONTAINER_BITRATE, this.onBitrate);
+        this.listenTo(this.container, CoreEvents.CONTAINER_STOP, this.stopReporting);
+        this.listenTo(this.container, CoreEvents.CONTAINER_ENDED, this.stopReporting);
+        this.listenToOnce(this.container.playback, CoreEvents.PLAYBACK_PLAY_INTENT, this.startTimers);
+        this.listenToOnce(this.container, CoreEvents.CONTAINER_PLAY, this.onFirstPlaying);
+        this.listenTo(this.container, CoreEvents.CONTAINER_PLAY, this.onPlay);
+        this.listenTo(this.container, CoreEvents.CONTAINER_PAUSE, this.onPause);
+        this.listenToOnce(this.container, CoreEvents.CONTAINER_STATE_BUFFERING, this.onBuffering);
+        this.listenTo(this.container, CoreEvents.CONTAINER_SEEK, this.onSeek);
+        this.listenTo(this.container, CoreEvents.CONTAINER_ERROR, () => this._inc('error'));
+        this.listenTo(this.container, CoreEvents.CONTAINER_FULLSCREEN, () => this._inc('fullscreen'));
+        this.listenTo(this.container, CoreEvents.CONTAINER_PLAYBACKDVRSTATECHANGED, (dvrInUse) => {
+            dvrInUse && this._inc('dvrUsage');
+        });
+        this.listenTo(this.container.playback, CoreEvents.PLAYBACK_PROGRESS, this.onProgress);
+        this.listenTo(this.container.playback, CoreEvents.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
+    }
+    destroy() {
+        this.stopReporting();
+        super.destroy();
+    }
+    exportMetrics() {
+        return structuredClone(this.metrics);
+    }
+    onBitrate(newBitrate) {
+        const bitrate = newBitrate.bitrate;
+        const now = this._now();
+        if (this.metrics.extra.bitratesHistory.length > 0) {
+            const beforeLast = this.metrics.extra.bitratesHistory[this.metrics.extra.bitratesHistory.length - 1];
+            beforeLast.end = now;
+            beforeLast.time = now - beforeLast.start;
+        }
+        this.metrics.extra.bitratesHistory.push({ start: this._now(), bitrate: bitrate });
+        this._inc('changeLevel');
+    }
+    stopReporting() {
+        this._buildReport();
+        if (this.intervalId !== null) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+        this._newMetrics();
+        // @ts-ignore
+        this.stopListening();
+        this.bindEvents();
+    }
+    startTimers() {
+        this.intervalId = setInterval(this._buildReport.bind(this), this.runEach);
+        this.start('session');
+        this.start('startup');
+    }
+    onFirstPlaying() {
+        this.listenTo(this.container, CoreEvents.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
+        this.start('watch');
+        this._stop('startup');
+    }
+    playAfterPause() {
+        this.listenTo(this.container, CoreEvents.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
+        this._stop('pause');
+        this.start('watch');
+    }
+    onPlay() {
+        this._inc('play');
+    }
+    onPause() {
+        this._stop('watch');
+        this.start('pause');
+        this._inc('pause');
+        this.listenToOnce(this.container, CoreEvents.CONTAINER_PLAY, this.playAfterPause);
+        this.stopListening(this.container, CoreEvents.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
+    }
+    onSeek(e) {
+        this._inc('seek');
+        this.metrics.extra.watchHistory.push([e * 1000, e * 1000]);
+    }
+    onTimeUpdate(e) {
+        const current = e.current * 1000, total = e.total * 1000, l = this.metrics.extra.watchHistory.length;
+        this.metrics.extra.duration = total;
+        this.metrics.extra.currentTime = current;
+        this.metrics.extra.watchedPercentage = (current / total) * 100;
+        if (l === 0) {
+            this.metrics.extra.watchHistory.push([current, current]);
+        }
+        else {
+            this.metrics.extra.watchHistory[l - 1][1] = current;
+        }
+        if (this.metrics.extra.bitratesHistory.length > 0) {
+            const lastBitrate = this.metrics.extra.bitratesHistory[this.metrics.extra.bitratesHistory.length - 1];
+            if (!lastBitrate.end) {
+                lastBitrate.time = this._now() - lastBitrate.start;
+            }
+        }
+        this._onCompletion();
+    }
+    onContainerUpdateWhilePlaying() {
+        if (this.container.playback.isPlaying()) {
+            this._stop('watch');
+            this.start('watch');
+        }
+    }
+    onBuffering() {
+        this._inc('buffering');
+        this.start('buffering');
+        this.listenToOnce(this.container, CoreEvents.CONTAINER_STATE_BUFFERFULL, this.onBufferfull);
+    }
+    onBufferfull() {
+        this._stop('buffering');
+        this.listenToOnce(this.container, CoreEvents.CONTAINER_STATE_BUFFERING, this.onBuffering);
+    }
+    onProgress(progress) {
+        this.metrics.extra.buffersize = progress.current * 1000;
+    }
+    _newMetrics() {
+        this.metrics = newMetrics();
+    }
+    _onCompletion() {
+        const currentPercentage = this.metrics.extra.watchedPercentage;
+        const allPercentages = this.completion.watch;
+        const isCalled = this.completion.calls.indexOf(currentPercentage) !== -1;
+        if (allPercentages.indexOf(currentPercentage) !== -1 && !isCalled) {
+            Log.info(this.name + ' PERCENTAGE_EVENT: ' + currentPercentage);
+            this.completion.calls.push(currentPercentage);
+            this.trigger(ClapprStatsEvents.PERCENTAGE_EVENT, currentPercentage);
+        }
+    }
+    _buildReport() {
+        this._stop('session');
+        this.start('session');
+        this.metrics.extra.playbackName = this._playbackName;
+        this.metrics.extra.playbackType = this._playbackType;
+        this._calculateBitrates();
+        this._calculatePercentages();
+        this._fetchFPS();
+        this._measureLatency();
+        this._measureBandwidth();
+        this._onReport(this.metrics);
+        this.trigger(ClapprStatsEvents.REPORT_EVENT, structuredClone(this.metrics));
+    }
+    _fetchFPS() {
+        // flashls ??? - hls.droppedFramesl hls.stream.bufferLength (seconds)
+        // hls ??? (use the same?)
+        const fetchFPS = {
+            'html5_video': this._html5FetchFPS,
+            'hls': this._html5FetchFPS,
+            'dash_shaka_playback': this._html5FetchFPS
+        };
+        if (this._playbackName in fetchFPS) {
+            fetchFPS[this._playbackName].call(this);
+        }
+    }
+    _calculateBitrates() {
+        const { bitratesHistory } = this.metrics.extra;
+        if (bitratesHistory.length === 0) {
+            return;
+        }
+        let totalTime = 0;
+        let weightedTotal = 0;
+        for (const { bitrate, time = 0 } of bitratesHistory) {
+            totalTime += time;
+            weightedTotal += bitrate * time;
+        }
+        this.metrics.extra.bitrateWeightedMean = weightedTotal / totalTime;
+        this.metrics.extra.bitrateMostUsed = bitratesHistory.reduce((mostUsed, current) => (current.time || 0) > (mostUsed.time || 0) ? current : mostUsed, { time: 0, bitrate: 0, start: 0, end: 0 }).bitrate;
+    }
+    _calculatePercentages() {
+        if (this.metrics.extra.duration > 0) {
+            this.metrics.extra.bufferingPercentage = (this.metrics.timers.buffering / this.metrics.extra.duration) * 100;
+        }
+    }
+    _html5FetchFPS() {
+        const videoTag = this.container.playback.el;
+        const getFirstValidValue = (...args) => args.find(val => val !== undefined);
+        const decodedFrames = getFirstValidValue(videoTag.webkitDecodedFrameCount, videoTag.mozDecodedFrames, 0);
+        const droppedFrames = getFirstValidValue(videoTag.webkitDroppedFrameCount, videoTag.mozParsedFrames && videoTag.mozDecodedFrames ? videoTag.mozParsedFrames - videoTag.mozDecodedFrames : 0, 0);
+        const decodedFramesLastTime = decodedFrames - (this.lastDecodedFramesCount || 0);
+        this.metrics.counters.decodedFrames = decodedFrames;
+        this.metrics.counters.droppedFrames = droppedFrames;
+        this.metrics.counters.fps = decodedFramesLastTime / (this.runEach / 1000);
+        this.lastDecodedFramesCount = decodedFrames;
+    }
+    // originally from https://www.smashingmagazine.com/2011/11/analyzing-network-characteristics-using-javascript-and-the-dom-part-1/
+    _measureLatency() {
+        if (this.uriToMeasureLatency) {
+            const t = [];
+            const n = 2;
+            let rtt;
+            const ld = () => {
+                t.push(this._now());
+                if (t.length > n) {
+                    done();
+                }
+                else {
+                    const img = new Image;
+                    img.onload = ld;
+                    img.src = this.uriToMeasureLatency + '?' + Math.random()
+                        + '=' + this._now();
+                }
+            };
+            const done = () => {
+                rtt = t[2] - t[1];
+                this.metrics.timers.latency = rtt;
+            };
+            ld();
+        }
+    }
+    // originally from https://www.smashingmagazine.com/2011/11/analyzing-network-characteristics-using-javascript-and-the-dom-part-1/
+    _measureBandwidth() {
+        if (this.urisToMeasureBandwidth && (this.bwMeasureCount % this.runBandwidthTestEvery === 0)) {
+            let i = 0;
+            const ld = (e) => {
+                if (i > 0) {
+                    const prev = this.urisToMeasureBandwidth[i - 1];
+                    prev.end = this._now();
+                    if (prev.timer !== null) {
+                        clearTimeout(prev.timer);
+                    }
+                }
+                if (i >= this.urisToMeasureBandwidth.length || (i > 0 && this.urisToMeasureBandwidth[i - 1].expired)) {
+                    assert(e, 'incorrect invocation in _measureBandwidth');
+                    done(e);
+                }
+                else {
+                    const xhr = new XMLHttpRequest();
+                    xhr.open('GET', this.urisToMeasureBandwidth[i].url, true);
+                    xhr.responseType = 'arraybuffer';
+                    xhr.onload = xhr.onabort = ld;
+                    this.urisToMeasureBandwidth[i].start = this._now();
+                    this.urisToMeasureBandwidth[i].timer = setTimeout((j) => {
+                        this.urisToMeasureBandwidth[j].expired = true;
+                        xhr.abort();
+                    }, this.urisToMeasureBandwidth[i].timeout, i);
+                    xhr.send();
+                }
+                i++;
+            };
+            const done = (e) => {
+                const timeSpent = (this.urisToMeasureBandwidth[i - 1].end - this.urisToMeasureBandwidth[i - 1].start) / 1000;
+                const bandwidthBps = (e.loaded * 8) / timeSpent;
+                this.metrics.extra.bandwidth = bandwidthBps;
+                this.urisToMeasureBandwidth.forEach((x) => {
+                    x.start = 0;
+                    x.end = 0;
+                    x.expired = false;
+                    if (x.timer !== null) {
+                        clearTimeout(x.timer);
+                        x.timer = null;
+                    }
+                });
+            };
+            ld();
+        }
+        this.bwMeasureCount++;
+    }
+}
+// ClapprStats.REPORT_EVENT = 'clappr:stats:report';
+// ClapprStats.PERCENTAGE_EVENT = 'clappr:stats:percentage';

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

@@ -0,0 +1,50 @@
+export type Metrics = {
+    counters: {
+        play: number;
+        pause: number;
+        error: number;
+        buffering: number;
+        decodedFrames: number;
+        droppedFrames: number;
+        fps: number;
+        changeLevel: number;
+        seek: number;
+        fullscreen: number;
+        dvrUsage: number;
+    };
+    timers: {
+        startup: number;
+        watch: number;
+        pause: number;
+        buffering: number;
+        session: number;
+        latency: number;
+    };
+    extra: {
+        playbackName: string;
+        playbackType: string;
+        bitratesHistory: BitrateTrackRecord[];
+        bitrateWeightedMean: number;
+        bitrateMostUsed: number;
+        buffersize: number;
+        watchHistory: Array<[number, number]>;
+        watchedPercentage: number;
+        bufferingPercentage: number;
+        bandwidth: number;
+        duration: number;
+        currentTime: number;
+    };
+    custom: Record<string, unknown>;
+};
+export type BitrateTrackRecord = {
+    start: number;
+    end?: number;
+    time?: number;
+    bitrate: number;
+};
+export type MetricsUpdateFn = (metrics: Metrics) => void;
+export declare enum ClapprStatsEvents {
+    REPORT_EVENT = "clappr:stats:report",
+    PERCENTAGE_EVENT = "clappr:stats:percentage"
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-stats/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG;IACpB,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,aAAa,EAAE,MAAM,CAAC;QACtB,aAAa,EAAE,MAAM,CAAC;QACtB,GAAG,EAAE,MAAM,CAAC;QACZ,WAAW,EAAE,MAAM,CAAC;QACpB,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE;QACL,YAAY,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;QACrB,eAAe,EAAE,kBAAkB,EAAE,CAAC;QACtC,mBAAmB,EAAE,MAAM,CAAC;QAC5B,eAAe,EAAE,MAAM,CAAC;QACxB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;QACtC,iBAAiB,EAAE,MAAM,CAAC;QAC1B,mBAAmB,EAAE,MAAM,CAAC;QAC5B,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAEzD,oBAAY,iBAAiB;IAC3B,YAAY,wBAAwB;IACpC,gBAAgB,4BAA4B;CAC7C"}

package/lib/plugins/clappr-stats/types.js

@@ -0,0 +1,5 @@
+export var ClapprStatsEvents;
+(function (ClapprStatsEvents) {
+    ClapprStatsEvents["REPORT_EVENT"] = "clappr:stats:report";
+    ClapprStatsEvents["PERCENTAGE_EVENT"] = "clappr:stats:percentage";
+})(ClapprStatsEvents || (ClapprStatsEvents = {}));

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

@@ -0,0 +1,3 @@
+import type { Metrics } from "./types";
+export declare function newMetrics(): Metrics;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-stats/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC,wBAAgB,UAAU,IAAI,OAAO,CAuCpC"}

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

@@ -0,0 +1,40 @@
+export function newMetrics() {
+    return {
+        counters: {
+            play: 0,
+            pause: 0,
+            error: 0,
+            buffering: 0,
+            decodedFrames: 0,
+            droppedFrames: 0,
+            fps: 0,
+            changeLevel: 0,
+            seek: 0,
+            fullscreen: 0,
+            dvrUsage: 0,
+        },
+        timers: {
+            startup: 0,
+            watch: 0,
+            pause: 0,
+            buffering: 0,
+            session: 0,
+            latency: 0,
+        },
+        extra: {
+            playbackName: '',
+            playbackType: '',
+            bitratesHistory: [],
+            bitrateWeightedMean: 0,
+            bitrateMostUsed: 0,
+            buffersize: 0,
+            watchHistory: [],
+            watchedPercentage: 0,
+            bufferingPercentage: 0,
+            bandwidth: 0,
+            duration: 0,
+            currentTime: 0,
+        },
+        custom: {},
+    };
+}

package/lib/plugins/click-to-pause/ClickToPause.d.ts

@@ -1,10 +1,10 @@
 import { ContainerPlugin } from '@clappr/core';
-export default class ClickToPause extends ContainerPlugin {
+export declare class ClickToPause extends ContainerPlugin {
     private pointerEnabled;
     private timer;
     get name(): string;
     get supportedVersion(): {
-        min: string | undefined;
+        min: string;
     };
     get config(): any;
     bindEvents(): void;

package/lib/plugins/click-to-pause/ClickToPause.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClickToPause.d.ts","sourceRoot":"","sources":["../../../src/plugins/click-to-pause/ClickToPause.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAOjE,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,eAAe;IACvD,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,KAAK,CAAsB;IAEnC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,MAAM,QAET;IAMD,UAAU;IAKV,OAAO,CAAC,KAAK;IAoBb,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,UAAU;CAMnB"}
+{"version":3,"file":"ClickToPause.d.ts","sourceRoot":"","sources":["../../../src/plugins/click-to-pause/ClickToPause.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAWjE,qBAAa,YAAa,SAAQ,eAAe;IAC/C,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,KAAK,CAAsB;IAEnC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,MAAM,QAET;IAEQ,UAAU;IAKnB,OAAO,CAAC,KAAK;IAoBb,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,UAAU;CAMnB"}

package/lib/plugins/click-to-pause/ClickToPause.js

@@ -2,23 +2,21 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 import { ContainerPlugin, Events, Playback } from '@clappr/core';
-import { trace } from '../../trace/index.js';
+import { trace } from '@gcorevideo/utils';
+import { CLAPPR_VERSION } from '../build.js';
 const T = 'plugins.click_to_pause_custom';
-export default class ClickToPause extends ContainerPlugin {
+export class ClickToPause extends ContainerPlugin {
     pointerEnabled = false;
     timer = null;
     get name() {
         return 'click_to_pause_custom';
     }
     get supportedVersion() {
-        return { min: process.env.CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION };
     }
     get config() {
         return this.container.options.clickToPauseConfig || {};
     }
-    //   constructor(container) {
-    //     super(container);
-    //   }
     bindEvents() {
         this.listenTo(this.container, Events.CONTAINER_CLICK, this.click);
         this.listenTo(this.container, Events.CONTAINER_SETTINGSUPDATE, this.settingsUpdate);

package/lib/plugins/clips/Clips.d.ts

@@ -0,0 +1,23 @@
+import { UICorePlugin } from '@clappr/core';
+import '../../../assets/clips/clips.scss';
+export declare class ClipsPlugin extends UICorePlugin {
+    private clips;
+    private duration;
+    private durationGetting;
+    private _oldContainer;
+    get name(): string;
+    get attributes(): {
+        class: string;
+    };
+    bindEvents(): void;
+    private _onCoreReady;
+    unbindEvents(): void;
+    private _onMediaControlContainerChanged;
+    private playerResize;
+    private _bindContainerEvents;
+    private onTimeUpdate;
+    private parseClips;
+    getText(time: number): string;
+    makeSvg(duration: number): void;
+}
+//# sourceMappingURL=Clips.d.ts.map

package/lib/plugins/clips/Clips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clips.d.ts","sourceRoot":"","sources":["../../../src/plugins/clips/Clips.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAE,MAAM,cAAc,CAAC;AAI/D,OAAO,kCAAkC,CAAC;AAc1C,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,KAAK,CAAmC;IAEhD,OAAO,CAAC,QAAQ,CAAa;IAE7B,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,aAAa,CAAwB;IAE7C,IAAI,IAAI,WAEP;IAED,IAAa,UAAU;;MAItB;IAEQ,UAAU;IAMnB,OAAO,CAAC,YAAY;IAUpB,YAAY;IAOZ,OAAO,CAAC,+BAA+B;IAIvC,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,IAAI,EAAE,MAAM;IASpB,OAAO,CAAC,QAAQ,EAAE,MAAM;CAsBzB"}

package/lib/plugins/clips/Clips.js

@@ -0,0 +1,109 @@
+import { Events, UICorePlugin } from '@clappr/core';
+import { strtimeToMiliseconds } from '../utils.js';
+import '../../../assets/clips/clips.scss';
+export class ClipsPlugin extends UICorePlugin {
+    clips = new Map();
+    duration = 0;
+    durationGetting = false;
+    _oldContainer;
+    get name() {
+        return 'clips';
+    }
+    get attributes() {
+        return {
+            'class': this.name
+        };
+    }
+    bindEvents() {
+        this.listenToOnce(this.core, Events.CORE_READY, this._onCoreReady);
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged);
+        this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
+    }
+    _onCoreReady() {
+        if (!this.options.clips) {
+            this.destroy();
+            return;
+        }
+        this.parseClips();
+    }
+    unbindEvents() {
+        // @ts-ignore
+        this.stopListening(this.core, Events.CORE_READY);
+        // @ts-ignore
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
+    }
+    _onMediaControlContainerChanged() {
+        this._bindContainerEvents();
+    }
+    playerResize() {
+        this.durationGetting = false;
+        if (this.durationGetting) {
+            this.makeSvg(this.duration);
+        }
+    }
+    _bindContainerEvents() {
+        if (this._oldContainer) {
+            this.stopListening(this._oldContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+        }
+        this._oldContainer = this.core.mediaControl.container;
+        this.durationGetting = false;
+        this.listenTo(this.core.mediaControl.container, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+    }
+    onTimeUpdate(event) {
+        if (!this.durationGetting) {
+            this.duration = event.total;
+            this.makeSvg(event.total);
+            this.durationGetting = true;
+        }
+        for (const value of this.clips.values()) {
+            if (event.current >= value.start && event.current < value.end) {
+                this.core.mediaControl.setClipText(value.text);
+                break;
+            }
+        }
+    }
+    parseClips() {
+        const textArr = this.options.clips.text.split('\n');
+        const clipsArr = textArr.map((val) => {
+            const matchRes = val.match(/(\d+:\d+|:\d+) (.+)/i);
+            return matchRes ? {
+                start: strtimeToMiliseconds(matchRes[1]),
+                text: matchRes[2],
+            } : null;
+        }).filter((clip) => clip !== null);
+        clipsArr.sort((a, b) => a.start - b.start);
+        clipsArr.forEach((clip, index) => {
+            this.clips.set(clip.start, {
+                index,
+                start: clip.start,
+                text: clip.text,
+                end: clipsArr[index + 1] ? clipsArr[index + 1].start : null,
+            });
+        });
+    }
+    getText(time) {
+        for (const [key, value] of this.clips.entries()) {
+            if (time >= value.start && time < value.end) {
+                return value.text;
+            }
+        }
+        return '';
+    }
+    makeSvg(duration) {
+        let svg = '<svg width="0" height="0">\n' + '<defs>\n' + '<clipPath id="myClip">\n';
+        const widthOfSeek = this.core.mediaControl.container.$el.width();
+        let finishValue = 0;
+        this.clips.forEach(val => {
+            let end = val.end;
+            if (!end) {
+                end = val.end = duration;
+            }
+            const widthChunk = (end - val.start) * widthOfSeek / duration;
+            svg += `<rect x="${finishValue}" y="0" width="${widthChunk - 2}" height="30"/>\n`;
+            finishValue += widthChunk;
+        });
+        svg += `<rect x="${finishValue}" y="0" width="${widthOfSeek - finishValue}" height="30"/>\n`;
+        svg += '</clipPath>' + '</defs>' + '</svg>';
+        this.core.mediaControl.setSVGMask(svg);
+    }
+}

package/lib/plugins/context-menu/ContextMenu.d.ts

@@ -0,0 +1,36 @@
+import { UICorePlugin, Core } from '@clappr/core';
+import '../../../assets/context-menu/context_menu.scss';
+export declare class ContextMenu extends UICorePlugin {
+    private _label;
+    private _url;
+    private container;
+    private menuOptions;
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    get attributes(): {
+        class: string;
+    };
+    get mediaControl(): any;
+    get template(): any;
+    get label(): string;
+    get url(): string;
+    get exposeVersion(): {
+        label: string;
+        name: string;
+    };
+    get events(): {
+        'click [data-version]': string;
+    };
+    constructor(core: Core);
+    bindEvents(): void;
+    destroy(): import("@clappr/core").UIObject;
+    private containerChanged;
+    private toggleContextMenu;
+    private show;
+    private hide;
+    private onOpenMainPage;
+    render(): this;
+}
+//# sourceMappingURL=ContextMenu.d.ts.map

package/lib/plugins/context-menu/ContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/plugins/context-menu/ContextMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuB,IAAI,EAAa,MAAM,cAAc,CAAC;AAIlF,OAAO,gDAAgD,CAAC;AAQxD,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,MAAM,CAAc;IAE5B,OAAO,CAAC,IAAI,CAAc;IAE1B,OAAO,CAAC,SAAS,CAA0B;IAE3C,OAAO,CAAC,WAAW,CAAoB;IAEvC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAa,UAAU;;MAEtB;IAED,IAAI,YAAY,QAEf;IAED,IAAI,QAAQ,QAEX;IAED,IAAI,KAAK,WAER;IAED,IAAI,GAAG,WAEN;IAED,IAAI,aAAa;;;MAKhB;IAED,IAAa,MAAM;;MAIlB;gBAEW,IAAI,EAAE,IAAI;IAYb,UAAU;IAYV,OAAO;IAOhB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,IAAI;IASZ,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,cAAc;IAIb,MAAM;CAShB"}