@gcorevideo/player 2.21.1 → 2.21.3

package/lib/plugins/media-control/MediaControl.js

@@ -95,7 +95,6 @@ export class MediaControl extends UICorePlugin {
     $seekBarLoaded = null;
     $seekBarPosition = null;
     $seekBarScrubber = null;
-    $subtitlesSelector = null;
     $volumeBarContainer = null;
     $volumeBarBackground = null;
     $volumeBarFill = null;
@@ -116,7 +115,8 @@ export class MediaControl extends UICorePlugin {
         return { min: CLAPPR_VERSION };
     }
     get disabled() {
-        const playbackIsNOOP = this.core.activeContainer && this.core.activeContainer.getPlaybackType() === Playback.NO_OP;
+        const playbackIsNOOP = this.core.activeContainer &&
+            this.core.activeContainer.getPlaybackType() === Playback.NO_OP;
         return this.userDisabled || playbackIsNOOP;
     }
     /**
@@ -776,7 +776,6 @@ export class MediaControl extends UICorePlugin {
         this.$volumeBarBackground = this.$el.find('.bar-background[data-volume]');
         this.$volumeBarFill = this.$el.find('.bar-fill-1[data-volume]');
         this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]');
-        this.$subtitlesSelector = this.$el.find('.media-control-subtitles[data-subtitles]');
         this.$playbackRate = this.$el.find('.media-control-playbackrate[data-playbackrate]');
         this.$multiCameraSelector = this.$el.find('.media-control-multicamera[data-multicamera]');
         this.$clipText = this.$el.find('.media-clip-text[data-clipstext]');
@@ -818,7 +817,7 @@ export class MediaControl extends UICorePlugin {
             case 'seekBarContainer':
                 return this.$seekBarContainer;
             case 'subtitlesSelector':
-                return this.$subtitlesSelector;
+                return null;
         }
     }
     putElement(name, element) {
@@ -826,10 +825,13 @@ export class MediaControl extends UICorePlugin {
             case 'audioTracksSelector':
                 this.getRightPanel().append(element);
                 break;
+            case 'gear':
+                this.getRightPanel().append(element);
+                break;
             case 'pip':
                 this.getRightPanel().append(element);
                 break;
-            case 'gear':
+            case 'subtitlesSelector':
                 this.getRightPanel().append(element);
                 break;
         }

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

@@ -11,6 +11,7 @@ import { UICorePlugin, Core } from '@clappr/core';
  * - {@link BottomGear | bottom_gear}
  *
  * It renders a button in the gear menu, which opens a dropdown with the options to change the playback rate.
+ * Note that the playback rate change is supported only for VOD or DVR enabled live streams.
  */
 export declare class PlaybackRate extends UICorePlugin {
     private playbackRates;

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;;;;;;;;;;;;GAYG;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,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"}

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

@@ -33,6 +33,7 @@ const T = 'plugins.playback_rate';
  * - {@link BottomGear | bottom_gear}
  *
  * It renders a button in the gear menu, which opens a dropdown with the options to change the playback rate.
+ * Note that the playback rate change is supported only for VOD or DVR enabled live streams.
  */
 export class PlaybackRate extends UICorePlugin {
     playbackRates = DEFAULT_PLAYBACK_RATES;

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

@@ -1,5 +1,11 @@
 import { UICorePlugin } from '@clappr/core';
 import '../../../assets/subtitles/style.scss';
+export type SubtitlesPluginSettings = {
+    /**
+     * Initially selected subtitles language
+     */
+    language?: string;
+};
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
@@ -9,10 +15,7 @@ import '../../../assets/subtitles/style.scss';
  *
  * - {@link MediaControl}
  *
- * Configuration options:
- *
- * - subtitles.language - The language of the subtitles to select by default.
- *
+ * Configuration options -  {@link SubtitlesPluginSettings}
  * @example
  * ```ts
  * import { Subtitles } from '@gcorevideo/player'
@@ -28,7 +31,6 @@ import '../../../assets/subtitles/style.scss';
  * ```
  */
 export declare class Subtitles extends UICorePlugin {
-    private currentLevel;
     private isPreselectedApplied;
     private isShowing;
     private track;
@@ -69,8 +71,11 @@ export declare class Subtitles extends UICorePlugin {
      * @internal
      */
     bindEvents(): void;
-    private bindPlaybackEvents;
-    private getTracks;
+    private onCoreReady;
+    private onContainerChanged;
+    private onSubtitleAvailable;
+    private onSubtitleChanged;
+    private applyTracks;
     private onStartAd;
     private onFinishAd;
     private playerResize;
@@ -88,22 +93,19 @@ export declare class Subtitles extends UICorePlugin {
      * @internal
      */
     render(): this;
-    private setTracks;
-    private findLevelBy;
-    private selectLevel;
-    private onLevelSelect;
+    private findById;
+    private selectItem;
+    private onItemSelect;
     private applyPreselectedSubtitles;
-    private onShowLevelSelectMenu;
-    private hideSelectLevelMenu;
-    private toggleContextMenu;
-    private buttonElement;
-    private levelElement;
-    private startLevelSwitch;
-    private stopLevelSwitch;
+    private hideMenu;
+    private toggleMenu;
+    private itemElement;
+    private allItemElements;
     private selectSubtitles;
+    private getSubtitleText;
     private setSubtitleText;
     private clearSubtitleText;
-    private updateCurrentLevel;
+    private updateSelection;
     private highlightCurrentSubtitles;
     private renderIcon;
 }

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,EAEL,YAAY,EAIb,MAAM,cAAc,CAAA;AAMrB,OAAO,sCAAsC,CAAA;AAuB7C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,SAAU,SAAQ,YAAY;IACzC,OAAO,CAAC,YAAY,CAA6B;IAEjD,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,KAAK,CAAiC;IAE9C,OAAO,CAAC,MAAM,CAA6B;IAE3C,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;IAiBnB,OAAO,CAAC,kBAAkB;IAkC1B,OAAO,CAAC,SAAS;IAcjB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAoBpB;;OAEG;IACH,IAAI;IAWJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAclB;;OAEG;IACM,MAAM;IAwCf,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,yBAAyB;IASjC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAgDvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,yBAAyB;IAYjC,OAAO,CAAC,UAAU;CASnB"}
+{"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"}

package/lib/plugins/subtitles/Subtitles.js

@@ -1,4 +1,4 @@
-import { Events, UICorePlugin, Browser, template, $, } from '@clappr/core';
+import { Events, UICorePlugin, Browser, template, $ } from '@clappr/core';
 import { reportError, trace } from '@gcorevideo/utils';
 import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
@@ -11,7 +11,6 @@ import { isFullscreen } from '../utils.js';
 const VERSION = '2.19.14';
 const LOCAL_STORAGE_SUBTITLES_ID = 'gplayer.plugins.subtitles.selected';
 const T = 'plugins.subtitles';
-const NO_TRACK = { language: 'off' };
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
@@ -21,10 +20,7 @@ const NO_TRACK = { language: 'off' };
  *
  * - {@link MediaControl}
  *
- * Configuration options:
- *
- * - subtitles.language - The language of the subtitles to select by default.
- *
+ * Configuration options -  {@link SubtitlesPluginSettings}
  * @example
  * ```ts
  * import { Subtitles } from '@gcorevideo/player'
@@ -40,11 +36,10 @@ const NO_TRACK = { language: 'off' };
  * ```
  */
 export class Subtitles extends UICorePlugin {
-    currentLevel = null;
     isPreselectedApplied = false;
     isShowing = false;
-    track = { ...NO_TRACK };
-    tracks = null;
+    track = null;
+    tracks = [];
     $string = null;
     /**
      * @internal
@@ -71,7 +66,7 @@ export class Subtitles extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: this.name,
+            class: 'media-control-subtitles',
             'data-subtitles': '',
         };
     }
@@ -80,28 +75,34 @@ export class Subtitles extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-subtitles-select]': 'onLevelSelect',
-            'click [data-subtitles-button]': 'onShowLevelSelectMenu',
+            'click [data-subtitles-select]': 'onItemSelect',
+            'click [data-subtitles-button]': 'toggleMenu',
         };
     }
     get preselectedLanguage() {
-        return this.core.options.subtitles?.language ?? 'off';
+        return 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(this.core, Events.CORE_RESIZE, this.playerResize);
-        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindPlaybackEvents);
         this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
     }
-    bindPlaybackEvents() {
+    onContainerChanged() {
+        trace(`${T} onContainerChanged`);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
-        this.listenToOnce(this.core.activePlayback, Events.PLAYBACK_PLAY, this.getTracks);
         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');
@@ -116,20 +117,50 @@ export class Subtitles extends UICorePlugin {
             }
         });
     }
-    getTracks() {
-        if (this.core.activePlayback) {
-            try {
-                const tracks = this.core.activePlayback.el
-                    .textTracks;
-                if (tracks.length > 0) {
-                    this.setTracks(tracks);
-                }
+    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);
+                    }
+                };
             }
-            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();
@@ -141,10 +172,11 @@ export class Subtitles extends UICorePlugin {
         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.currentLevel &&
-            this.currentLevel.mode &&
+            this.track &&
+            this.track.track.mode &&
             Browser.isiOS &&
             this.isShowing;
         if (shouldShow) {
@@ -166,7 +198,7 @@ export class Subtitles extends UICorePlugin {
         this.$string.hide();
         if (this.tracks) {
             for (const t of this.tracks) {
-                t.mode = 'hidden';
+                t.track.mode = 'hidden';
             }
         }
     }
@@ -178,23 +210,20 @@ export class Subtitles extends UICorePlugin {
         this.renderIcon();
         if (this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
-            this.currentLevel &&
-            this.currentLevel.mode &&
+            this.track &&
+            this.track.track.mode &&
             Browser.isiOS) {
             this.$string.hide();
-            this.currentLevel.mode = 'showing';
+            this.track.track.mode = 'showing';
         }
         else {
             this.$string.show();
         }
     }
     shouldRender() {
-        return !!(this.tracks && this.tracks.length > 0);
+        return this.tracks.length > 0;
     }
     resizeFont() {
-        if (!this.core.activeContainer) {
-            return;
-        }
         if (!this.$string) {
             return;
         }
@@ -211,133 +240,74 @@ export class Subtitles extends UICorePlugin {
         if (!this.shouldRender()) {
             return this;
         }
-        trace(`${T} render`, {
-            tracks: this.tracks?.length,
-            track: this.track?.language,
-        });
         const mediaControl = this.core.getPlugin('media_control');
-        assert(mediaControl, 'media_control plugin is required');
         this.$el.html(Subtitles.template({ tracks: this.tracks }));
         this.core.activeContainer.$el.find('.subtitle-string').remove();
         this.$string = $(Subtitles.templateString());
         this.resizeFont();
-        this.core.activeContainer.$el.append(this.$string[0]);
-        const ss = mediaControl.getElement('subtitlesSelector');
-        if (ss && ss.length > 0) {
-            ss.append(this.el);
-        }
-        else {
-            mediaControl.getRightPanel().append(this.el);
-        }
-        this.updateCurrentLevel(this.track);
-        this.highlightCurrentSubtitles();
-        this.applyPreselectedSubtitles();
+        this.core.activeContainer.$el.append(this.$string);
+        mediaControl.putElement('subtitlesSelector', this.$el);
+        this.updateSelection();
         this.renderIcon();
         return this;
     }
-    setTracks(tracks) {
-        this.tracks = tracks;
-        this.render();
+    findById(id) {
+        return this.tracks.find((track) => track.id === id) ?? null;
     }
-    findLevelBy(id) {
-        if (this.tracks) {
-            for (const track of this.tracks) {
-                if (track.language === id) {
-                    return track; // TODO TrackInfo?
-                }
-            }
-        }
-    }
-    selectLevel(id) {
+    selectItem(item) {
         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);
-        }
+        this.track = item;
+        this.hideMenu();
+        this.updateSelection();
+    }
+    onItemSelect(event) {
+        const id = event.target.dataset.subtitlesSelect ?? '-1';
+        trace(`${T} onItemSelect`, { id });
+        localStorage.setItem(LOCAL_STORAGE_SUBTITLES_ID, id);
+        this.selectItem(this.findById(Number(id)));
         return false;
     }
     applyPreselectedSubtitles() {
         if (!this.isPreselectedApplied) {
             this.isPreselectedApplied = true;
+            if (!this.preselectedLanguage) {
+                return;
+            }
             setTimeout(() => {
-                this.selectLevel(this.preselectedLanguage);
-            }, 300);
+                this.selectItem(this.tracks.find((t) => t.track.language === this.preselectedLanguage) ?? null);
+            }, 300); // TODO why delay?
         }
     }
-    onShowLevelSelectMenu() {
-        trace(`${T} onShowLevelSelectMenu`);
-        this.toggleContextMenu();
-    }
-    hideSelectLevelMenu() {
+    hideMenu() {
         ;
         this.$('[data-subtitles] ul').hide();
     }
-    toggleContextMenu() {
+    toggleMenu() {
+        ;
         this.$('[data-subtitles] ul').toggle();
     }
-    buttonElement() {
-        return this.$('[data-subtitles] button');
+    itemElement(id) {
+        return this.$(`ul li a[data-subtitles-select="${id}"]`).parent();
     }
-    levelElement(id) {
-        return this.$('[data-subtitles] ul a' + (id ? '[data-subtitles-select="' + id + '"]' : '')).parent();
-    }
-    startLevelSwitch() {
-        this.buttonElement().addClass('changing');
-    }
-    stopLevelSwitch() {
-        this.buttonElement().removeClass('changing');
+    allItemElements() {
+        return this.$('[data-subtitles] li');
     }
     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.core.activePlayback?.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;
+        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);
                 }
-                this.tracks[i].oncuechange = null;
-                this.tracks[i].mode = 'hidden';
             }
         }
+        return lines.join('\n');
     }
     setSubtitleText(text) {
         this.$string.find('p').html(text);
@@ -345,9 +315,8 @@ export class Subtitles extends UICorePlugin {
     clearSubtitleText() {
         this.setSubtitleText('');
     }
-    updateCurrentLevel(track) {
-        this.currentLevel = track;
-        if (track.language === 'off') {
+    updateSelection() {
+        if (!this.track) {
             this.hide();
         }
         else {
@@ -357,20 +326,21 @@ export class Subtitles extends UICorePlugin {
         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');
-        }
+        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.core
-            .getPlugin('media_control')
-            .getElement('subtitlesSelector')
-            ?.find('span.subtitle-text')
-            .html(icon);
+        this.$el.find('span.subtitle-text').html(icon);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.21.1",
+  "version": "2.21.3",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/playback/BasePlayback.ts

@@ -7,6 +7,10 @@ import { PlaybackErrorCode } from '../playback.types.js'
  * @internal
  */
 export class BasePlayback extends HTML5Video {
+  get isHTML5Video() {
+    return true
+  }
+
   createError(errorData: any, options?: ErrorOptions) {
     const i18n =
       this.i18n ||

package/src/playback.types.ts

@@ -130,3 +130,9 @@ export interface PlaybackError {
     icon?: string
   }
 }
+
+export interface TextTrackItem {
+  id: number
+  name: string
+  track: TextTrack
+}

package/src/plugins/bottom-gear/BottomGear.ts

@@ -22,6 +22,8 @@ const T = 'plugins.bottom_gear';
  */
 export type GearItemElement = 'quality' | 'rate' | 'nerd';
 
+// TODO disabled if no items added
+
 /**
  * `PLUGIN` that adds the gear button with an extra options menu on the right side of the {@link MediaControl | media control} UI
  * @beta
@@ -30,7 +32,7 @@ export type GearItemElement = 'quality' | 'rate' | 'nerd';
  * 
  * Depends on:
  *
- * - {@link MediaControl | media_control}
+ * - {@link MediaControl}
  */
 export class BottomGear extends UICorePlugin {
   private isHd = false;