@gcorevideo/player 2.18.3 → 2.19.0

package/lib/plugins/statistics/Statistics.d.ts

@@ -0,0 +1,52 @@
+import { Container, ContainerPlugin } from '@clappr/core';
+import type { PlaybackType } from '../..//types';
+type StatisticsEventData = Record<string, string | number | boolean>;
+type StatisticsRecord = {
+    event: StatisticsEvent;
+    type: PlaybackType;
+} & StatisticsEventData;
+export type PluginSettings = {
+    /**
+     * Sends the statistics record to the storage.
+     * The actual delivery is presumably async and batched.
+     * @param data - The statistics record to send.
+     */
+    send: (data: StatisticsRecord) => void;
+};
+type StatisticsEvent = 'init' | 'start' | 'watch' | 'heatmap';
+export declare class Statistics extends ContainerPlugin {
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    private started;
+    private timeStart;
+    private heatmapSent;
+    private heatmapLastTime;
+    private watchSent;
+    private bufTracking;
+    private lags;
+    /**
+     * The time when buffering last started.
+     */
+    private bufLastStarted;
+    /**
+     * The accumulated buffering duration.
+     */
+    private bufAccDuration;
+    constructor(container: Container);
+    bindEvents(): void;
+    private startLevelSwitch;
+    private stopLevelSwitch;
+    private onBuffering;
+    private onBufferFull;
+    private onReady;
+    private initEvent;
+    private sendMessage;
+    private send;
+    private sendHeatmap;
+    private onTimeUpdateLive;
+    private onStart;
+}
+export {};
+//# sourceMappingURL=Statistics.d.ts.map

package/lib/plugins/statistics/Statistics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statistics.d.ts","sourceRoot":"","sources":["../../../src/plugins/statistics/Statistics.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAA;AAE3E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAYhD,KAAK,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;AAEpE,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,eAAe,CAAA;IACtB,IAAI,EAAE,YAAY,CAAA;CACnB,GAAG,mBAAmB,CAAA;AAEvB,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;OAIG;IACH,IAAI,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAA;CACvC,CAAA;AAED,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAA;AAG7D,qBAAa,UAAW,SAAQ,eAAe;IAC7C,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,SAAS,CAAI;IAErB,OAAO,CAAC,WAAW,CAAQ;IAE3B,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,WAAW,CAAQ;IAE3B,OAAO,CAAC,IAAI,CAAI;IAEhB;;OAEG;IACH,OAAO,CAAC,cAAc,CAAI;IAE1B;;OAEG;IACH,OAAO,CAAC,cAAc,CAAI;gBAEd,SAAS,EAAE,SAAS;IASvB,UAAU;IAoCnB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,IAAI;IAQZ,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,OAAO;CAOhB"}

package/lib/plugins/statistics/Statistics.js

@@ -0,0 +1,130 @@
+// An example implementation of client side performancestatistics
+import { ContainerPlugin, Events, Playback } from '@clappr/core';
+import { reportError } from '@gcorevideo/utils';
+import assert from 'assert';
+import { CLAPPR_VERSION } from '../build.js';
+const CUSTOM_EVENTS_CONTAINER_START = 'container:start';
+const WATCH_CUTOFF = 5;
+const HEATMAP_INTERVAL = 10;
+// TODO rewrite as core plugin
+export class Statistics extends ContainerPlugin {
+    get name() {
+        return 'statistics_gplayer';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    started = false;
+    timeStart = 0;
+    heatmapSent = false;
+    heatmapLastTime = 0;
+    watchSent = false;
+    bufTracking = false;
+    lags = 0;
+    /**
+     * The time when buffering last started.
+     */
+    bufLastStarted = 0;
+    /**
+     * The accumulated buffering duration.
+     */
+    bufAccDuration = 0;
+    constructor(container) {
+        super(container);
+        assert(this.options.statistics &&
+            typeof this.options.statistics.send === 'function', 'Statistics plugin requires statistics options');
+    }
+    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.onTimeUpdateLive);
+        this.listenTo(this.container.playback, Events.PLAYBACK_LEVEL_SWITCH_START, this.startLevelSwitch);
+        this.listenTo(this.container.playback, Events.PLAYBACK_LEVEL_SWITCH_END, this.stopLevelSwitch);
+    }
+    startLevelSwitch() {
+        this.bufTracking = false;
+    }
+    stopLevelSwitch() {
+        this.bufTracking = true;
+    }
+    onBuffering() {
+        if (this.bufTracking) {
+            this.bufLastStarted = performance.now();
+        }
+    }
+    onBufferFull() {
+        if (this.bufTracking && this.bufLastStarted) {
+            this.bufAccDuration += performance.now() - this.bufLastStarted;
+            this.lags++;
+        }
+        this.bufTracking = true;
+    }
+    onReady() {
+        this.initEvent();
+        if (this.options.autoPlay) {
+            this.onStart();
+        }
+    }
+    initEvent() {
+        this.sendMessage('init');
+    }
+    sendMessage(state) {
+        this.send(state, {
+        // embed_url: this.options.referer,
+        // user_agent: Browser.userAgent
+        });
+    }
+    send(event, data = {}) {
+        ;
+        this.options.statistics.send({
+            event,
+            type: this.container.getPlaybackType(),
+            ...data,
+        });
+    }
+    sendHeatmap(time) {
+        const res = {
+            buffering: Math.round(this.bufAccDuration),
+            lags: this.lags,
+        };
+        this.bufAccDuration = 0;
+        this.lags = 0;
+        if (this.container.getPlaybackType() === Playback.VOD) {
+            res.timestamp = time;
+        }
+        this.send('heatmap', res);
+        this.heatmapSent = true;
+        this.heatmapLastTime = time;
+    }
+    onTimeUpdateLive({ current }) {
+        // TODO check the `current` values for the live streams
+        if (!this.timeStart) {
+            this.timeStart = current;
+        }
+        try {
+            const elapsed = current - this.timeStart;
+            const heatmapElapsed = current - this.heatmapLastTime;
+            // TODO check if the heatmap is only needed for the live streams
+            if (!this.heatmapSent || heatmapElapsed >= HEATMAP_INTERVAL) {
+                this.sendHeatmap(current);
+            }
+            if (!this.watchSent && elapsed >= WATCH_CUTOFF) {
+                this.watchSent = true;
+                this.sendMessage('watch');
+            }
+        }
+        catch (error) {
+            reportError(error);
+        }
+    }
+    onStart() {
+        if (this.started) {
+            return;
+        }
+        this.started = true;
+        this.sendMessage('start');
+    }
+}

package/lib/plugins/subtitles/Subtitles.d.ts

@@ -0,0 +1,61 @@
+import { UICorePlugin } from '@clappr/core';
+import '../../../assets/subtitles/style.scss';
+import type { ZeptoResult } from '../types.js';
+export declare class Subtitles extends UICorePlugin {
+    private currentContainer;
+    private currentLevel;
+    private currentPlayback;
+    private isShowing;
+    private tracks;
+    private $string;
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    static get version(): string;
+    get template(): any;
+    get templateString(): any;
+    get attributes(): {
+        class: string;
+        'data-subtitles': string;
+    };
+    get events(): {
+        'click [data-subtitles-select]': string;
+        'click [data-subtitles-button]': string;
+    };
+    private isPreselectedApplied;
+    private track;
+    get preselectedLanguage(): string;
+    bindEvents(): void;
+    unBindEvents(): void;
+    private bindPlaybackEvents;
+    private getTracks;
+    private onStartAd;
+    private onFinishAd;
+    reload(): void;
+    private playerResize;
+    hide(): void;
+    show(): void;
+    private shouldRender;
+    private resizeFont;
+    render(): this;
+    private fillLevels;
+    private findLevelBy;
+    private selectLevel;
+    private onLevelSelect;
+    private applyPreselectedSubtitles;
+    private onShowLevelSelectMenu;
+    private hideSelectLevelMenu;
+    private toggleContextMenu;
+    buttonElement(): ZeptoResult;
+    levelElement(id?: string): ZeptoResult;
+    startLevelSwitch(): void;
+    stopLevelSwitch(): void;
+    selectSubtitles(): void;
+    private setSubtitleText;
+    private clearSubtitleText;
+    private updateCurrentLevel;
+    private highlightCurrentSubtitles;
+    private renderIcon;
+}
+//# sourceMappingURL=Subtitles.d.ts.map

package/lib/plugins/subtitles/Subtitles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subtitles.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/Subtitles.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAIb,MAAM,cAAc,CAAA;AAOrB,OAAO,sCAAsC,CAAA;AAO7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAmB9C,qBAAa,SAAU,SAAQ,YAAY;IACzC,OAAO,CAAC,gBAAgB,CAAuB;IAE/C,OAAO,CAAC,YAAY,CAA2B;IAE/C,OAAO,CAAC,eAAe,CAA4B;IAEnD,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,MAAM,CAA2B;IAEzC,OAAO,CAAC,OAAO,CAAyB;IAExC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,MAAM,KAAK,OAAO,WAEjB;IAED,IAAI,QAAQ,QAEX;IAED,IAAI,cAAc,QAEjB;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;;MAKlB;IAED,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,KAAK,CAAiC;IAE9C,IAAI,mBAAmB,IAAI,MAAM,CAEhC;IAEQ,UAAU;IAoBnB,YAAY;IAgCZ,OAAO,CAAC,kBAAkB;IA4C1B,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,MAAM;IAMN,OAAO,CAAC,YAAY;IAoBpB,IAAI;IAWJ,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,UAAU;IAcT,MAAM;IAgCf,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,yBAAyB;IASjC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAIzB,aAAa,IAAI,WAAW;IAI5B,YAAY,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,WAAW;IAQtC,gBAAgB;IAIhB,eAAe;IAIf,eAAe;IAgDf,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,yBAAyB;IAYjC,OAAO,CAAC,UAAU;CAOnB"}

package/lib/plugins/subtitles/Subtitles.js

@@ -0,0 +1,354 @@
+import { Events, UICorePlugin, Browser, template, $, } from '@clappr/core';
+import { reportError } from '@gcorevideo/utils';
+import assert from 'assert';
+import { CLAPPR_VERSION } from '../build.js';
+import '../../../assets/subtitles/style.scss';
+import subtitlesOffIcon from '../../../assets/icons/new/subtitles-off.svg';
+import subtitlesOnIcon from '../../../assets/icons/new/subtitles-on.svg';
+import comboboxHTML from '../../../assets/subtitles/combobox.ejs';
+import stringHTML from '../../../assets/subtitles/string.ejs';
+import { isFullscreen } from '../utils.js';
+const VERSION = '0.0.1';
+const LOCAL_STORAGE_SUBTITLES_ID = 'subtitles_select';
+const T = 'plugins.subtitles';
+const NO_TRACK = { language: 'off' };
+export class Subtitles extends UICorePlugin {
+    currentContainer;
+    currentLevel;
+    currentPlayback;
+    isShowing = false;
+    tracks;
+    $string;
+    get name() {
+        return 'subtitles';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    static get version() {
+        return VERSION;
+    }
+    get template() {
+        return template(comboboxHTML);
+    }
+    get templateString() {
+        return template(stringHTML);
+    }
+    get attributes() {
+        return {
+            class: this.name,
+            'data-subtitles': '',
+        };
+    }
+    get events() {
+        return {
+            'click [data-subtitles-select]': 'onLevelSelect',
+            'click [data-subtitles-button]': 'onShowLevelSelectMenu',
+        };
+    }
+    isPreselectedApplied = false;
+    track = { ...NO_TRACK };
+    get preselectedLanguage() {
+        return this.core.options.subtitles?.language ?? 'off';
+    }
+    bindEvents() {
+        this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
+        this.listenToOnce(this.core, Events.CORE_READY, this.bindPlaybackEvents);
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
+    }
+    unBindEvents() {
+        // @ts-ignore
+        this.stopListening(this.core, Events.CORE_READY);
+        // @ts-ignore
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
+        // @ts-ignore
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED);
+        // @ts-ignore
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE);
+        // @ts-ignore
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_SHOW);
+        if (this.currentContainer) {
+            // @ts-ignore
+            this.stopListening(this.currentContainer, Events.CONTAINER_FULLSCREEN);
+            // @ts-ignore
+            this.stopListening(this.currentContainer, 'container:advertisement:start', this.onStartAd);
+            // @ts-ignore
+            this.stopListening(this.currentContainer, 'container:advertisement:finish', this.onFinishAd);
+        }
+    }
+    bindPlaybackEvents() {
+        if (this.currentPlayback &&
+            this.currentPlayback === this.core.activePlayback) {
+            return;
+        }
+        this.currentPlayback = this.core.activePlayback;
+        this.currentContainer = this.core.activeContainer;
+        this.listenTo(this.currentContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
+        this.listenToOnce(this.currentPlayback, Events.PLAYBACK_PLAY, this.getTracks);
+        this.listenTo(this.currentContainer, 'container:advertisement:start', this.onStartAd);
+        // fix for iOS
+        const video = this.currentPlayback?.el;
+        assert(video, 'video element is required');
+        video.addEventListener('webkitbeginfullscreen', () => {
+            if (Browser.isiOS) {
+                video.classList.add('ios-fullscreen');
+            }
+        });
+        video.addEventListener('webkitendfullscreen', () => {
+            if (Browser.isiOS) {
+                video.classList.remove('ios-fullscreen');
+            }
+        });
+    }
+    getTracks() {
+        if (this.currentPlayback) {
+            try {
+                const tracks = this.currentPlayback.el.textTracks;
+                tracks.length > 0 && this.fillLevels(tracks);
+            }
+            catch (error) {
+                reportError(error);
+            }
+        }
+    }
+    onStartAd() {
+        if (this.isShowing && this.currentContainer) {
+            this.hide();
+            this.listenTo(this.currentContainer, 'container:advertisement:finish', this.onFinishAd);
+        }
+    }
+    onFinishAd() {
+        this.show();
+        this.stopListening(this.currentContainer, 'container:advertisement:finish', this.onFinishAd);
+    }
+    reload() {
+        this.unBindEvents();
+        this.bindEvents();
+        this.bindPlaybackEvents();
+    }
+    playerResize() {
+        const shouldShow = this.currentContainer &&
+            isFullscreen(this.currentContainer.el) &&
+            this.currentLevel &&
+            this.currentLevel.mode &&
+            Browser.isiOS &&
+            this.isShowing;
+        if (shouldShow) {
+            this.show();
+        }
+        try {
+            this.resizeFont();
+        }
+        catch (error) {
+            reportError(error);
+        }
+    }
+    hide() {
+        this.isShowing = false;
+        this.renderIcon();
+        this.$string.hide();
+        if (this.tracks) {
+            for (const t of this.tracks) {
+                t.mode = 'hidden';
+            }
+        }
+    }
+    show() {
+        this.isShowing = true;
+        this.renderIcon();
+        if (this.currentContainer &&
+            isFullscreen(this.currentContainer.el) &&
+            this.currentLevel &&
+            this.currentLevel.mode &&
+            Browser.isiOS) {
+            this.$string.hide();
+            this.currentLevel.mode = 'showing';
+        }
+        else {
+            this.$string.show();
+        }
+    }
+    shouldRender() {
+        if (!this.currentContainer) {
+            return false;
+        }
+        if (!this.currentPlayback) {
+            return false;
+        }
+        // Only care if we have at least 2 to choose from
+        const hasLevels = !!(this.tracks && this.tracks.length > 0);
+        return hasLevels;
+    }
+    resizeFont() {
+        if (!this.currentContainer) {
+            return;
+        }
+        if (!this.$string) {
+            return;
+        }
+        const skinWidth = this.currentContainer.$el.width();
+        this.$string.find('p').css('font-size', skinWidth * 0.03);
+    }
+    render() {
+        if (this.shouldRender()) {
+            this.$el.html(this.template({ tracks: this.tracks }));
+            this.currentContainer?.$el.find('.subtitle-string').remove();
+            this.$string = $(this.templateString());
+            this.resizeFont();
+            this.currentContainer?.$el.append(this.$string[0]);
+            if (this.core.mediaControl.$subtitlesSelector &&
+                this.core.mediaControl.$subtitlesSelector.length > 0) {
+                this.core.mediaControl.$subtitlesSelector.append(this.el);
+            }
+            else {
+                this.core.mediaControl.$('.media-control-right-panel').append(this.el);
+            }
+            this.updateCurrentLevel(this.track);
+            this.highlightCurrentSubtitles();
+            this.applyPreselectedSubtitles();
+        }
+        if (this.core.mediaControl.$subtitlesSelector?.find('span.subtitle-text')
+            .length > 0) {
+            this.renderIcon();
+        }
+        return this;
+    }
+    fillLevels(tracks) {
+        this.tracks = tracks;
+        this.render();
+    }
+    findLevelBy(id) {
+        if (this.tracks) {
+            for (let i = 0; i < this.tracks.length; i++) {
+                if (this.tracks[i].language === id) {
+                    return this.tracks[i]; // TODO TrackInfo?
+                }
+            }
+        }
+    }
+    selectLevel(id) {
+        this.clearSubtitleText();
+        this.track = this.findLevelBy(id) || { ...NO_TRACK };
+        this.hideSelectLevelMenu();
+        if (!this.track) {
+            this.track = { language: 'off' };
+        }
+        this.updateCurrentLevel(this.track);
+    }
+    onLevelSelect(event) {
+        const id = event.target.dataset.subtitlesSelect;
+        if (id) {
+            localStorage.setItem(LOCAL_STORAGE_SUBTITLES_ID, id);
+            this.selectLevel(id);
+        }
+        return false;
+    }
+    applyPreselectedSubtitles() {
+        if (!this.isPreselectedApplied) {
+            this.isPreselectedApplied = true;
+            setTimeout(() => {
+                this.selectLevel(this.preselectedLanguage);
+            }, 300);
+        }
+    }
+    onShowLevelSelectMenu() {
+        this.toggleContextMenu();
+    }
+    hideSelectLevelMenu() {
+        ;
+        this.$('.subtitles ul').hide();
+    }
+    toggleContextMenu() {
+        ;
+        this.$('.subtitles ul').toggle();
+    }
+    buttonElement() {
+        return this.$('.subtitles button');
+    }
+    levelElement(id) {
+        return this.$('.subtitles ul a' + (id ? '[data-subtitles-select="' + id + '"]' : '')).parent();
+    }
+    startLevelSwitch() {
+        this.buttonElement().addClass('changing');
+    }
+    stopLevelSwitch() {
+        this.buttonElement().removeClass('changing');
+    }
+    selectSubtitles() {
+        if (!this.currentLevel) {
+            return;
+        }
+        if (this.tracks) {
+            for (let i = 0; i < this.tracks.length; i++) {
+                const track = this.tracks[i];
+                if (track.language === this.currentLevel.language) {
+                    track.mode = 'showing';
+                    const currentTime = this.currentPlayback?.getCurrentTime() ?? 0;
+                    const cues = track.cues;
+                    let subtitleText = '';
+                    if (cues && cues.length) {
+                        for (const cue of cues) {
+                            if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
+                                subtitleText +=
+                                    cue.getCueAsHTML().textContent + '\n';
+                            }
+                        }
+                    }
+                    this.setSubtitleText(subtitleText);
+                    track.oncuechange = (e) => {
+                        try {
+                            if (track.activeCues?.length) {
+                                const html = track.activeCues[0].getCueAsHTML();
+                                this.setSubtitleText(html);
+                            }
+                            else {
+                                this.clearSubtitleText();
+                            }
+                        }
+                        catch (error) {
+                            // console.error(error);
+                            reportError(error);
+                        }
+                    };
+                    continue;
+                }
+                this.tracks[i].oncuechange = null;
+                this.tracks[i].mode = 'hidden';
+            }
+        }
+    }
+    setSubtitleText(text) {
+        this.$string.find('p').html(text);
+    }
+    clearSubtitleText() {
+        this.setSubtitleText('');
+    }
+    updateCurrentLevel(track) {
+        this.currentLevel = track;
+        if (track.language === 'off') {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+        this.selectSubtitles();
+        this.highlightCurrentSubtitles();
+    }
+    highlightCurrentSubtitles() {
+        this.levelElement().removeClass('current');
+        this.levelElement().find('a').removeClass('gcore-skin-active');
+        if (this.currentLevel) {
+            const currentLevelElement = this.levelElement(this.currentLevel.language);
+            currentLevelElement.addClass('current');
+            currentLevelElement.find('a').addClass('gcore-skin-active');
+        }
+    }
+    renderIcon() {
+        const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon;
+        this.core.mediaControl.$subtitlesSelector
+            .find('span.subtitle-text')
+            .html(icon);
+    }
+}

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

@@ -0,0 +1,47 @@
+import { UICorePlugin } from '@clappr/core';
+import { TimeValue } from '../..//playback.types';
+import '../../../assets/thumbnails/style.scss';
+export declare class Thumbnails extends UICorePlugin {
+    private _$spotlight;
+    private _$backdrop;
+    private $container;
+    private $img;
+    private _$carousel;
+    private $textThumbnail;
+    private _$backdropCarouselImgs;
+    private spriteSheetHeight;
+    private _hoverPosition;
+    private _show;
+    private _thumbsLoaded;
+    private _oldContainer;
+    private _thumbs;
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    get attributes(): {
+        class: string;
+    };
+    get template(): any;
+    private buildSpriteConfig;
+    bindEvents(): void;
+    private _bindContainerEvents;
+    private _onCoreReady;
+    private loadSpriteSheet;
+    private _onMediaControlContainerChanged;
+    private _init;
+    private _getOptions;
+    private _appendElToMediaControl;
+    private _onMouseMove;
+    private _onMouseLeave;
+    private _calculateHoverPosition;
+    private _buildImg;
+    private _loadBackdrop;
+    setText(time: TimeValue): void;
+    private _updateCarousel;
+    private _updateSpotlightThumb;
+    private _getThumbIndexForTime;
+    private _renderPlugin;
+    private _createElements;
+}
+//# sourceMappingURL=Thumbnails.d.ts.map

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

@@ -0,0 +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,uBAAuB,CAAC;AAKlD,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"}