@gcorevideo/player 2.21.3 → 2.21.6

package/lib/plugins/playback-rate/PlaybackRate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,IAAI,EAAE,MAAM,cAAc,CAAC;AAoC9E;;;;;;;;;;;;;GAaG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,aAAa,CAAgD;IAGrE,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,YAAY,CAAiC;IAErD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAwB;IAE9D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAsB;gBAE9C,IAAI,EAAE,IAAI;IAMtB;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IAKnB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,YAAY;IAYpB;;OAEG;IACM,MAAM;IA6Bf,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,MAAM;IAGd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,oBAAoB;CAS7B"}
+{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,IAAI,EAAE,MAAM,cAAc,CAAA;AAuC7E;;;;;;;;;;;;;GAaG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,aAAa,CAA+C;IAGpE,OAAO,CAAC,gBAAgB,CAAoB;IAE5C,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,YAAY,CAAgC;IAEpD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAqB;gBAE7C,IAAI,EAAE,IAAI;IAQtB;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,uBAAuB;IAgB/B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,YAAY;IAepB;;OAEG;IACM,MAAM;IAgCf,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,oBAAoB;CAS7B"}

package/lib/plugins/playback-rate/PlaybackRate.js

@@ -9,7 +9,7 @@ import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg';
 import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg';
 import checkIcon from '../../../assets/icons/new/check.svg';
 import { PlaybackEvents } from '../../playback/types.js';
-import { MediaControlEvents } from '../media-control/MediaControl.js';
+import { MediaControlEvents, } from '../media-control/MediaControl.js';
 const DEFAULT_PLAYBACK_RATES = [
     { value: '0.5', label: '0.5x' },
     { value: '0.75', label: '0.75x' },
@@ -17,7 +17,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: '1.25', label: '1.25x' },
     { value: '1.5', label: '1.5x' },
     { value: '1.75', label: '1.75x' },
-    { value: '2.0', label: '2x' }
+    { value: '2.0', label: '2x' },
 ];
 const DEFAULT_PLAYBACK_RATE = '1.0';
 const T = 'plugins.playback_rate';
@@ -57,16 +57,17 @@ export class PlaybackRate extends UICorePlugin {
     static listTemplate = template(listHtml);
     constructor(core) {
         super(core);
-        this.playbackRates = core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
-        this.selectedRate = core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
+        this.playbackRates =
+            core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
+        this.selectedRate =
+            core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
     }
     /**
      * @internal
      */
     get attributes() {
         return {
-            'class': this.name,
-            'data-playback-rate-select': ''
+            class: 'media-control-playbackrate',
         };
     }
     /**
@@ -87,6 +88,7 @@ export class PlaybackRate extends UICorePlugin {
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
     }
     onCoreReady() {
+        trace(`${T} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         const gear = this.core.getPlugin('bottom_gear');
@@ -94,6 +96,7 @@ export class PlaybackRate extends UICorePlugin {
         this.listenTo(mediaControl, MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, this.onGearRendered);
     }
     onActiveContainerChange() {
+        trace(`${T} onActiveContainerChange`);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay);
         this.listenTo(this.core.activePlayback, PlaybackEvents.PLAYBACK_RATE_CHANGED, this.onPlaybackRateChange);
@@ -117,7 +120,7 @@ export class PlaybackRate extends UICorePlugin {
     allRateElements() {
         return this.$('ul.gear-sub-menu li');
     }
-    rateElement(rate = "1") {
+    rateElement(rate = '1') {
         return this.$(`ul.gear-sub-menu a[data-rate="${rate}"]`).parent();
     }
     onPlaybackRateChange(playbackRate) {
@@ -132,10 +135,11 @@ export class PlaybackRate extends UICorePlugin {
         }
     }
     shouldRender() {
-        if (!this.core.activeContainer) {
+        if (!this.core.activePlayback) {
             return false;
         }
-        if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
+        if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
+            !this.core.activePlayback.dvrEnabled) {
             return false;
         }
         return 'setPlaybackRate' in this.core.activePlayback;
@@ -158,9 +162,12 @@ export class PlaybackRate extends UICorePlugin {
             title: this.getTitle(),
             speedIcon,
             arrowRightIcon,
+            i18n: this.core.i18n,
         });
         this.$el.html(button);
-        this.core.getPlugin('bottom_gear')?.getElement('rate')?.html(this.el);
+        this.core.getPlugin('bottom_gear')
+            ?.getElement('rate')
+            ?.html(this.el);
         this.rendered = true;
         return this;
     }
@@ -175,7 +182,8 @@ export class PlaybackRate extends UICorePlugin {
         }
     }
     onPlay() {
-        if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
+        if (this.core.getPlaybackType() === Playback.LIVE &&
+            !this.core.activePlayback.dvrEnabled) {
             this.resetPlaybackRate();
         }
         else {
@@ -185,8 +193,7 @@ export class PlaybackRate extends UICorePlugin {
     resetPlaybackRate() {
         this.setSelectedRate(DEFAULT_PLAYBACK_RATE);
     }
-    onStop() {
-    }
+    onStop() { }
     onRateSelect(event) {
         event.stopPropagation();
         const rate = event.currentTarget.dataset.rate;
@@ -201,6 +208,7 @@ export class PlaybackRate extends UICorePlugin {
             playbackRates: this.playbackRates,
             arrowLeftIcon,
             checkIcon,
+            i18n: this.core.i18n,
         }));
         this.core.getPlugin('bottom_gear')?.setContent(this.el);
         this.highlightCurrentRate();
@@ -216,7 +224,8 @@ export class PlaybackRate extends UICorePlugin {
         this.selectedRate = rate;
     }
     getTitle() {
-        return this.playbackRates.find((r) => r.value === this.selectedRate)?.label || this.selectedRate;
+        return (this.playbackRates.find((r) => r.value === this.selectedRate)?.label ||
+            this.selectedRate);
     }
     highlightCurrentRate() {
         this.allRateElements().removeClass('current');

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

@@ -0,0 +1,118 @@
+import { UICorePlugin } from '@clappr/core';
+import '../../../assets/subtitles/style.scss';
+export type ClosedCaptionsPluginSettings = {
+    /**
+     * Initially selected subtitles language
+     */
+    language?: string;
+};
+/**
+ * @deprecated Use {@link ClosedCaptionsPluginSettings} instead.
+ */
+export type SubtitlesPluginSettings = ClosedCaptionsPluginSettings;
+/**
+ * `PLUGIN` that provides a UI to select the subtitles when available.
+ * @beta
+ *
+ * @remarks
+ * The plugin is activated when closed captions tracks are provided with the media source.
+ * It shows a familiar "CC" button with a dropdown menu to select the subtitles language.
+ *
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * Configuration options -  {@link ClosedCaptionsPluginSettings}
+ * @example
+ * ```ts
+ * import { ClosedCaptions } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(ClosedCaptions)
+ *
+ * new Player({
+ *   ...
+ *   cc: {
+ *     language: 'en',
+ *   },
+ * })
+ * ```
+ */
+export declare class ClosedCaptions extends UICorePlugin {
+    private isPreselectedApplied;
+    private isShowing;
+    private track;
+    private tracks;
+    private $line;
+    /**
+     * @internal
+     */
+    get name(): string;
+    /**
+     * @internal
+     */
+    get supportedVersion(): {
+        min: string;
+    };
+    /**
+     * @internal
+     */
+    static get version(): string;
+    private static readonly template;
+    private static readonly templateString;
+    /**
+     * @internal
+     */
+    get attributes(): {
+        class: string;
+    };
+    /**
+     * @internal
+     */
+    get events(): {
+        'click [data-cc-select]': string;
+        'click [data-cc-button]': string;
+    };
+    private get preselectedLanguage();
+    /**
+     * @internal
+     */
+    bindEvents(): void;
+    private onCoreReady;
+    private onContainerChanged;
+    private onSubtitleAvailable;
+    private onSubtitleChanged;
+    private applyTracks;
+    private onStartAd;
+    private onFinishAd;
+    private playerResize;
+    /**
+     * Hides the subtitles menu and the subtitles.
+     */
+    hide(): void;
+    /**
+     * Shows the subtitles menu and the subtitles.
+     */
+    show(): void;
+    private shouldRender;
+    private resizeFont;
+    /**
+     * @internal
+     */
+    render(): this;
+    private findById;
+    private selectItem;
+    private onItemSelect;
+    private applyPreselectedSubtitles;
+    private hideMenu;
+    private toggleMenu;
+    private itemElement;
+    private allItemElements;
+    private selectSubtitles;
+    private getSubtitleText;
+    private setSubtitleText;
+    private clearSubtitleText;
+    private updateSelection;
+    private highlightCurrentSubtitles;
+    private renderIcon;
+}
+//# sourceMappingURL=ClosedCaptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAe7C,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,4BAA4B,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,kBAAkB;IAwC1B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IA+BzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAqBpB;;OAEG;IACH,IAAI;IAWJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA0Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,UAAU;CAKnB"}

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -0,0 +1,348 @@
+import { Events, UICorePlugin, Browser, template, $ } from '@clappr/core';
+import { reportError, trace } 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 = '2.19.14';
+const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
+const T = 'plugins.cc';
+/**
+ * `PLUGIN` that provides a UI to select the subtitles when available.
+ * @beta
+ *
+ * @remarks
+ * The plugin is activated when closed captions tracks are provided with the media source.
+ * It shows a familiar "CC" button with a dropdown menu to select the subtitles language.
+ *
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * Configuration options -  {@link ClosedCaptionsPluginSettings}
+ * @example
+ * ```ts
+ * import { ClosedCaptions } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(ClosedCaptions)
+ *
+ * new Player({
+ *   ...
+ *   cc: {
+ *     language: 'en',
+ *   },
+ * })
+ * ```
+ */
+export class ClosedCaptions extends UICorePlugin {
+    isPreselectedApplied = false;
+    isShowing = false;
+    track = null;
+    tracks = [];
+    $line = null;
+    /**
+     * @internal
+     */
+    get name() {
+        return 'cc';
+    }
+    /**
+     * @internal
+     */
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    /**
+     * @internal
+     */
+    static get version() {
+        return VERSION;
+    }
+    static template = template(comboboxHTML);
+    static templateString = template(stringHTML);
+    /**
+     * @internal
+     */
+    get attributes() {
+        return {
+            class: 'media-control-cc',
+        };
+    }
+    /**
+     * @internal
+     */
+    get events() {
+        return {
+            'click [data-cc-select]': 'onItemSelect',
+            'click [data-cc-button]': 'toggleMenu',
+        };
+    }
+    get preselectedLanguage() {
+        return this.core.options.cc?.language ?? this.core.options.subtitles?.language ?? '';
+    }
+    /**
+     * @internal
+     */
+    bindEvents() {
+        this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
+    }
+    onCoreReady() {
+        trace(`${T} onCoreReady`);
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
+    }
+    onContainerChanged() {
+        trace(`${T} onContainerChanged`);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
+        this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
+        this.listenTo(this.core.activePlayback, Events.PLAYBACK_SUBTITLE_AVAILABLE, this.onSubtitleAvailable);
+        this.listenTo(this.core.activePlayback, Events.PLAYBACK_SUBTITLE_CHANGED, this.onSubtitleChanged);
+        // fix for iOS
+        const video = this.core.activePlayback.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');
+            }
+        });
+    }
+    onSubtitleAvailable() {
+        trace(`${T} onSubtitleAvailable`);
+        this.applyTracks();
+    }
+    onSubtitleChanged({ id }) {
+        trace(`${T} onSubtitleChanged`, { id });
+        if (id === -1) {
+            this.clearSubtitleText();
+        }
+        for (const track of this.tracks) {
+            if (track.id === id) {
+                track.track.mode = 'showing';
+                this.setSubtitleText(this.getSubtitleText(track.track));
+                track.track.oncuechange = (e) => {
+                    try {
+                        if (track.track.activeCues?.length) {
+                            const html = track.track.activeCues[0].getCueAsHTML();
+                            this.setSubtitleText(html);
+                        }
+                        else {
+                            this.clearSubtitleText();
+                        }
+                    }
+                    catch (error) {
+                        reportError(error);
+                    }
+                };
+            }
+            else {
+                track.track.oncuechange = null;
+                track.track.mode = 'hidden';
+            }
+        }
+    }
+    applyTracks() {
+        try {
+            this.tracks = this.core.activePlayback.closedCaptionsTracks;
+            this.applyPreselectedSubtitles();
+            this.render();
+        }
+        catch (error) {
+            reportError(error);
+        }
+    }
+    onStartAd() {
+        if (this.isShowing && this.core.activeContainer) {
+            this.hide();
+            this.listenTo(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
+        }
+    }
+    onFinishAd() {
+        this.show();
+        this.stopListening(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
+    }
+    playerResize() {
+        trace(`${T} playerResize`);
+        const shouldShow = this.core.activeContainer &&
+            isFullscreen(this.core.activeContainer.el) &&
+            this.track &&
+            this.track.track.mode &&
+            Browser.isiOS &&
+            this.isShowing;
+        if (shouldShow) {
+            this.show();
+        }
+        try {
+            this.resizeFont();
+        }
+        catch (error) {
+            reportError(error);
+        }
+    }
+    /**
+     * Hides the subtitles menu and the subtitles.
+     */
+    hide() {
+        this.isShowing = false;
+        this.renderIcon();
+        this.$line.hide();
+        if (this.tracks) {
+            for (const t of this.tracks) {
+                t.track.mode = 'hidden';
+            }
+        }
+    }
+    /**
+     * Shows the subtitles menu and the subtitles.
+     */
+    show() {
+        this.isShowing = true;
+        this.renderIcon();
+        if (this.core.activeContainer &&
+            isFullscreen(this.core.activeContainer.el) &&
+            this.track &&
+            this.track.track.mode &&
+            Browser.isiOS) {
+            this.$line.hide();
+            this.track.track.mode = 'showing';
+        }
+        else {
+            this.$line.show();
+        }
+    }
+    shouldRender() {
+        return this.tracks?.length > 0;
+    }
+    resizeFont() {
+        if (!this.$line) {
+            return;
+        }
+        const skinWidth = this.core.activeContainer.$el.width();
+        this.$line.find('p').css('font-size', skinWidth * 0.03);
+    }
+    /**
+     * @internal
+     */
+    render() {
+        if (!this.core.activeContainer) {
+            return this;
+        }
+        if (!this.shouldRender()) {
+            return this;
+        }
+        const mediaControl = this.core.getPlugin('media_control');
+        this.$el.html(ClosedCaptions.template({ tracks: this.tracks }));
+        this.core.activeContainer.$el.find('#cc-line').remove();
+        this.$line = $(ClosedCaptions.templateString());
+        this.resizeFont();
+        this.core.activeContainer.$el.append(this.$line);
+        mediaControl.putElement('cc', this.el);
+        this.updateSelection();
+        this.renderIcon();
+        return this;
+    }
+    findById(id) {
+        return this.tracks.find((track) => track.id === id) ?? null;
+    }
+    selectItem(item) {
+        this.clearSubtitleText();
+        this.track = item;
+        this.hideMenu();
+        this.updateSelection();
+    }
+    onItemSelect(event) {
+        const id = event.target.dataset.ccSelect ?? '-1';
+        trace(`${T} onItemSelect`, { id });
+        localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
+        this.selectItem(this.findById(Number(id)));
+        return false;
+    }
+    applyPreselectedSubtitles() {
+        if (!this.isPreselectedApplied) {
+            this.isPreselectedApplied = true;
+            if (!this.preselectedLanguage) {
+                return;
+            }
+            setTimeout(() => {
+                this.selectItem(this.tracks.find((t) => t.track.language === this.preselectedLanguage) ?? null);
+            }, 300); // TODO why delay?
+        }
+    }
+    hideMenu() {
+        ;
+        this.$('[data-cc] ul').hide();
+    }
+    toggleMenu() {
+        trace(`${T} toggleMenu`);
+        this.$('[data-cc] ul').toggle();
+    }
+    itemElement(id) {
+        return this.$(`ul li a[data-cc-select="${id}"]`).parent();
+    }
+    allItemElements() {
+        return this.$('[data-cc] li');
+    }
+    selectSubtitles() {
+        const trackId = this.track ? this.track.id : -1;
+        this.core.activePlayback.closedCaptionsTrackId = trackId;
+    }
+    getSubtitleText(track) {
+        const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
+        const cues = track.cues;
+        const lines = [];
+        if (cues && cues.length) {
+            for (const cue of cues) {
+                if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
+                    lines.push(cue.getCueAsHTML().textContent);
+                }
+            }
+        }
+        return lines.join('\n');
+    }
+    setSubtitleText(text) {
+        this.$line.find('p').html(text);
+    }
+    clearSubtitleText() {
+        this.setSubtitleText('');
+    }
+    updateSelection() {
+        if (!this.track) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+        this.selectSubtitles();
+        this.highlightCurrentSubtitles();
+    }
+    highlightCurrentSubtitles() {
+        this.allItemElements()
+            .removeClass('current')
+            .find('a')
+            .removeClass('gcore-skin-active');
+        trace(`${T} highlightCurrentSubtitles`, {
+            track: this.track?.id,
+        });
+        const currentLevelElement = this.itemElement(this.track ? this.track.id : -1);
+        currentLevelElement
+            .addClass('current')
+            .find('a')
+            .addClass('gcore-skin-active');
+    }
+    renderIcon() {
+        const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon;
+        this.$el.find('span.cc-text').html(icon);
+    }
+}

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

@@ -1,11 +1,15 @@
 import { UICorePlugin } from '@clappr/core';
 import '../../../assets/subtitles/style.scss';
-export type SubtitlesPluginSettings = {
+export type ClosedCaptionsPluginSettings = {
     /**
      * Initially selected subtitles language
      */
     language?: string;
 };
+/**
+ * @deprecated Use {@link ClosedCaptionsPluginSettings} instead.
+ */
+export type SubtitlesPluginSettings = ClosedCaptionsPluginSettings;
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
@@ -15,16 +19,16 @@ export type SubtitlesPluginSettings = {
  *
  * - {@link MediaControl}
  *
- * Configuration options -  {@link SubtitlesPluginSettings}
+ * Configuration options -  {@link ClosedCaptionsPluginSettings}
  * @example
  * ```ts
- * import { Subtitles } from '@gcorevideo/player'
+ * import { ClosedCaptions } from '@gcorevideo/player'
  *
- * Player.registerPlugin(Subtitles)
+ * Player.registerPlugin(ClosedCaptions)
  *
  * new Player({
  *   ...
- *   subtitles: {
+ *   cc: {
  *     language: 'en',
  *   },
  * })
@@ -35,7 +39,7 @@ export declare class Subtitles extends UICorePlugin {
     private isShowing;
     private track;
     private tracks;
-    private $string;
+    private $line;
     /**
      * @internal
      */
@@ -57,14 +61,13 @@ export declare class Subtitles extends UICorePlugin {
      */
     get attributes(): {
         class: string;
-        'data-subtitles': string;
     };
     /**
      * @internal
      */
     get events(): {
-        'click [data-subtitles-select]': string;
-        'click [data-subtitles-button]': string;
+        'click [data-cc-select]': string;
+        'click [data-cc-button]': string;
     };
     private get preselectedLanguage();
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Subtitles.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/Subtitles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAe7C,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,SAAU,SAAQ,YAAY;IACzC,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,OAAO,CAA2B;IAE1C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,kBAAkB;IAwC1B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IA+BzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAqBpB;;OAEG;IACH,IAAI;IAWJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA0Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,UAAU;CAKnB"}
+{"version":3,"file":"Subtitles.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/Subtitles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAe7C,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,4BAA4B,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,SAAU,SAAQ,YAAY;IACzC,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,kBAAkB;IAwC1B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IA+BzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAqBpB;;OAEG;IACH,IAAI;IAWJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA0Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,UAAU;CAKnB"}