@gcorevideo/player 2.20.22 → 2.21.1

package/lib/playback/hls-playback/HlsPlayback.js

@@ -4,7 +4,7 @@
 import { Events, Log, Playback, PlayerError, Utils, $ } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
 import assert from 'assert';
-import HLSJS from 'hls.js';
+import HLSJS, { Events as HlsEvents, } from 'hls.js';
 import { PlaybackErrorCode, } from '../../playback.types.js';
 import { isHlsSource } from '../../utils/mediaSources.js';
 import { BasePlayback } from '../BasePlayback.js';
@@ -15,7 +15,6 @@ const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events.register('PLAYBACK_FRAGMENT_CHANGED');
 Events.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
 const T = 'playback.hls';
-// @ts-expect-error
 export default class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
     _ccTracksUpdated = false;
@@ -60,7 +59,7 @@ export default class HlsPlayback extends BasePlayback {
     set currentLevel(id) {
         this._currentLevel = id;
         this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START);
-        assert.ok(this._hls, 'Hls.js instance is not available');
+        assert.ok(this._hls, 'HLS.js is not initialized');
         if (this.options.playback.hlsUseNextLevel) {
             this._hls.nextLevel = this._currentLevel;
         }
@@ -69,11 +68,11 @@ export default class HlsPlayback extends BasePlayback {
         }
     }
     get latency() {
-        assert.ok(this._hls, 'Hls.js instance is not available');
+        assert.ok(this._hls, 'HLS.js is not initialized');
         return this._hls.latency;
     }
     get currentProgramDateTime() {
-        assert.ok(this._hls, 'Hls.js instance is not available');
+        assert.ok(this._hls, 'HLS.js is not initialized');
         assert.ok(this._hls.playingDate, 'Hls.js playingDate is not defined');
         return this._hls.playingDate;
     }
@@ -258,7 +257,7 @@ export default class HlsPlayback extends BasePlayback {
             return;
         }
         this._hls.once(HLSJS.Events.MEDIA_ATTACHED, () => {
-            assert.ok(this._hls, 'Hls.js instance is not available');
+            assert.ok(this._hls, 'HLS.js is not initialized');
             this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
         });
         const onPlaying = () => {
@@ -283,13 +282,15 @@ export default class HlsPlayback extends BasePlayback {
         // this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, (evt, data) => this._onSubtitleLoaded(evt, data));
         this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, () => this._onSubtitleLoaded());
         this._hls.on(HLSJS.Events.SUBTITLE_TRACKS_UPDATED, () => (this._ccTracksUpdated = true));
+        this._hls.on(HlsEvents.AUDIO_TRACKS_UPDATED, (evt, data) => this._onAudioTracksUpdated(evt, data));
+        this._hls.on(HlsEvents.AUDIO_TRACK_SWITCHED, (evt, data) => this._onAudioTrackSwitched(evt, data));
         this.bindCustomListeners();
     }
     bindCustomListeners() {
         this.customListeners.forEach((item) => {
             const requestedEventName = item.eventName;
             const typeOfListener = item.once ? 'once' : 'on';
-            assert.ok(this._hls, 'Hls.js instance is not available');
+            assert.ok(this._hls, 'HLS.js is not initialized');
             requestedEventName &&
                 this._hls[`${typeOfListener}`](requestedEventName, item.callback);
         });
@@ -297,7 +298,7 @@ export default class HlsPlayback extends BasePlayback {
     unbindCustomListeners() {
         this.customListeners.forEach((item) => {
             const requestedEventName = item.eventName;
-            assert.ok(this._hls, 'Hls.js instance is not available');
+            assert.ok(this._hls, 'HLS.js is not initialized');
             requestedEventName && this._hls.off(requestedEventName, item.callback);
         });
     }
@@ -321,7 +322,7 @@ export default class HlsPlayback extends BasePlayback {
         this.trigger(Events.PLAYBACK_READY, this.name);
     }
     _recover(evt, data, error) {
-        assert(this._hls, 'Hls.js instance is not available');
+        assert(this._hls, 'HLS.js is not initialized');
         if (!this._recoveredDecodingError) {
             this._recoveredDecodingError = true;
             this._hls.recoverMediaError();
@@ -484,10 +485,6 @@ export default class HlsPlayback extends BasePlayback {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
-                        // TODO check
-                        // if (data.error instanceof MediaError && data.error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
-                        //   error.code = PlaybackErrorCode.MediaSourceUnavailable
-                        // }
                         this._recover(evt, data, error);
                         break;
                     default:
@@ -630,7 +627,7 @@ export default class HlsPlayback extends BasePlayback {
         }
     }
     _fillLevels() {
-        assert.ok(this._hls, 'Hls.js instance is not available');
+        assert.ok(this._hls, 'HLS.js is not initialized');
         this._levels = this._hls.levels.map((level, index) => {
             return {
                 level: index, // or level.id?
@@ -831,6 +828,34 @@ export default class HlsPlayback extends BasePlayback {
         }));
         this.stop();
     }
+    get audioTracks() {
+        assert.ok(this._hls, 'HLS.js is not initialized');
+        return this._hls.audioTracks.map(toClapprTrack);
+    }
+    // @ts-expect-error
+    get currentAudioTrack() {
+        assert.ok(this._hls, 'HLS.js is not initialized');
+        const idx = this._hls.audioTrack;
+        const track = this._hls.audioTracks[idx]; // TODO or find by .id == idx?
+        if (track) {
+            return toClapprTrack(track);
+        }
+        return null;
+    }
+    switchAudioTrack(id) {
+        assert.ok(this._hls, 'HLS.js is not initialized');
+        this._hls.audioTrack = Number(id); // TODO or find index by .id == id?
+    }
+    _onAudioTracksUpdated(_, data) {
+        trace(`${T} onAudioTracksUpdated`);
+        this.trigger(Events.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack));
+    }
+    _onAudioTrackSwitched(_, data) {
+        trace(`${T} onAudioTrackSwitched`);
+        // @ts-ignore
+        const track = this._hls.audioTracks[data.id];
+        this.trigger(Events.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
+    }
 }
 HlsPlayback.canPlay = function (resource, mimeType) {
     if (!isHlsSource(resource, mimeType)) {
@@ -838,3 +863,11 @@ HlsPlayback.canPlay = function (resource, mimeType) {
     }
     return HLSJS.isSupported();
 };
+function toClapprTrack(t) {
+    return {
+        id: String(t.id),
+        language: t.lang ?? '',
+        kind: t.type === 'main' ? 'main' : 'description', // TODO check
+        label: t.name,
+    };
+}

package/lib/plugins/audio-selector/AudioSelector.d.ts

@@ -1,12 +1,16 @@
 import { UICorePlugin } from '@clappr/core';
-import { AudioTrackLoadedData, AudioTrackSwitchedData, Events as HlsEvents } from 'hls.js';
 import '../../../assets/audio-selector/style.scss';
 /**
- * `PLUGIN` that adds an audio track selector to the media control UI.
+ * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
+ * @remarks
+ * The plugin is activated when there are multiple audio tracks available.
+ * The plugin adds a button showing the current audio track and a dropdown to switch to another audio track.
+ * Depends on:
+ *
+ * - {@link MediaControl}
  */
 export declare class AudioSelector extends UICorePlugin {
-    private selectedTrackId;
     private currentTrack;
     private tracks;
     /**
@@ -42,11 +46,11 @@ export declare class AudioSelector extends UICorePlugin {
      * @internal
      */
     bindEvents(): void;
-    private unBindEvents;
+    private onCoreReady;
     private bindPlaybackEvents;
     private setupAudioTrackListeners;
     private onStop;
-    private reload;
+    private onActiveContainerChanged;
     private shouldRender;
     /**
      * @internal
@@ -55,7 +59,7 @@ export declare class AudioSelector extends UICorePlugin {
     private fillTracks;
     private findTrackBy;
     private onTrackSelect;
-    private setIndexTrack;
+    private selectAudioTrack;
     private onShowLevelSelectMenu;
     private hideSelectTrackMenu;
     private toggleContextMenu;
@@ -63,11 +67,8 @@ export declare class AudioSelector extends UICorePlugin {
     private buttonElementText;
     private trackElement;
     private getTitle;
-    startTrackSwitch(): void;
+    private startTrackSwitch;
     private updateText;
-    updateCurrentTrack(e: HlsEvents.AUDIO_TRACK_SWITCHED, info: AudioTrackSwitchedData | AudioTrackLoadedData): void;
-    private updateCurrentTrackW3C;
-    private setCurrentTrack;
-    highlightCurrentTrack(): void;
+    private highlightCurrentTrack;
 }
 //# sourceMappingURL=AudioSelector.d.ts.map

package/lib/plugins/audio-selector/AudioSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AudioSelector.d.ts","sourceRoot":"","sources":["../../../src/plugins/audio-selector/AudioSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAY,MAAM,cAAc,CAAA;AAC7D,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EAEtB,MAAM,IAAI,SAAS,EACpB,MAAM,QAAQ,CAAA;AAKf,OAAO,2CAA2C,CAAA;AAiClD;;;GAGG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAG7C,OAAO,CAAC,eAAe,CAAoB;IAE3C,OAAO,CAAC,YAAY,CAA8B;IAElD,OAAO,CAAC,MAAM,CAAuB;IAErC;;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,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IAoBnB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,wBAAwB;IA4EhC,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,YAAY;IAoBpB;;OAEG;IACM,MAAM;IA2Bf,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,QAAQ;IAYhB,gBAAgB;IAIhB,OAAO,CAAC,UAAU;IAYlB,kBAAkB,CAChB,CAAC,EAAE,SAAS,CAAC,oBAAoB,EACjC,IAAI,EAAE,sBAAsB,GAAG,oBAAoB;IAwBrD,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,eAAe;IASvB,qBAAqB;CAatB"}
+{"version":3,"file":"AudioSelector.d.ts","sourceRoot":"","sources":["../../../src/plugins/audio-selector/AudioSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAY,MAAM,cAAc,CAAA;AAQ7D,OAAO,2CAA2C,CAAA;AAQlD;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,MAAM,CAAmB;IAEjC;;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,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,wBAAwB;IAyBhC,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,YAAY;IAWpB;;OAEG;IACM,MAAM;IAkBf,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,qBAAqB;CAW9B"}

package/lib/plugins/audio-selector/AudioSelector.js

@@ -1,20 +1,23 @@
 import { Events, UICorePlugin, template } from '@clappr/core';
-import { Events as HlsEvents, } from 'hls.js';
+import { trace } from '@gcorevideo/utils';
+import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/audio-selector/track-selector.ejs';
 import '../../../assets/audio-selector/style.scss';
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg';
-import assert from 'assert';
 const VERSION = '0.0.1';
-// const T = 'plugins.audio_selector';
-const AUTO = 0;
+const T = 'plugins.audio_selector';
 /**
- * `PLUGIN` that adds an audio track selector to the media control UI.
+ * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
+ * @remarks
+ * The plugin is activated when there are multiple audio tracks available.
+ * The plugin adds a button showing the current audio track and a dropdown to switch to another audio track.
+ * Depends on:
+ *
+ * - {@link MediaControl}
  */
 export class AudioSelector extends UICorePlugin {
-    // TODO
-    selectedTrackId;
     currentTrack = null;
     tracks = [];
     /**
@@ -41,7 +44,7 @@ export class AudioSelector extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: this.name,
+            class: 'media-control-audio-tracks',
             'data-track-selector': '',
         };
     }
@@ -58,101 +61,49 @@ export class AudioSelector extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core, Events.CORE_READY, this.bindPlaybackEvents);
-        // TODO CORE_ACTIVE_CONTAINER_CHANGED
-        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.hideSelectTrackMenu);
+        this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
-    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);
+    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.hideSelectTrackMenu);
     }
     bindPlaybackEvents() {
-        // this.currentTrack = {};
-        // this.removeAuto = false;
-        this.selectedTrackId = undefined;
-        const currentPlayback = this.core.activePlayback;
-        this.listenTo(currentPlayback, Events.PLAYBACK_STOP, this.onStop);
+        trace(`${T} bindPlaybackEvents`);
+        this.currentTrack = null;
+        this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop);
         this.setupAudioTrackListeners();
     }
     setupAudioTrackListeners() {
-        const currentPlayback = this.core.activePlayback;
-        // TODO no-crutch:currentPlayback._hls
-        if (currentPlayback._hls) {
-            // TODO AUDIO_TRACKS_UPDATED
-            // currentPlayback._hls.on('hlsAudioTracksUpdated', (e, data) => {
-            currentPlayback._hls.on(HlsEvents.AUDIO_TRACKS_UPDATED, (e, data) => {
-                // let id = -1;
-                // for (const audioTrack of data.audioTracks) {
-                //   if (audioTrack.default) {
-                //     id = audioTrack.id;
-                //     this.currentTrack = audioTrack;
-                //   }
-                // }
-                const defaultTrack = data.audioTracks.find((track) => track.default);
-                if (defaultTrack) {
-                    this.currentTrack = {
-                        id: defaultTrack.id,
-                        label: defaultTrack.name,
-                    };
-                }
-                this.fillTracks(data.audioTracks.map((p) => ({
-                    id: p.id,
-                    label: p.name,
-                })), defaultTrack?.id);
-            });
-            currentPlayback._hls.on(HlsEvents.AUDIO_TRACK_SWITCHING, this.startTrackSwitch.bind(this));
-            currentPlayback._hls.on(HlsEvents.AUDIO_TRACK_SWITCHED, this.updateCurrentTrack.bind(this));
-            currentPlayback._hls.on(HlsEvents.AUDIO_TRACK_LOADED, this.updateCurrentTrack.bind(this));
-        }
-        else {
-            this.listenToOnce(currentPlayback, Events.PLAYBACK_PLAY, () => {
-                const mediaElement = currentPlayback.$el.get(0);
-                // const { audioTracks } = currentPlayback.$el.get(0);
-                const audioTracks = mediaElement.audioTracks;
-                if (audioTracks && audioTracks.length) {
-                    let index = 0;
-                    const trackItems = [];
-                    for (const audioTrack of audioTracks) {
-                        if (audioTrack.enabled) {
-                            const t = {
-                                id: index,
-                                label: audioTrack.label,
-                            };
-                            this.currentTrack = t;
-                            trackItems.push(t);
-                            index++;
-                        }
-                    }
-                    audioTracks.addEventListener('change', () => this.updateCurrentTrackW3C());
-                    this.fillTracks(trackItems, trackItems[0].id);
-                }
-            });
-        }
-    }
-    onStop() { }
-    reload() {
-        this.unBindEvents();
-        this.bindEvents();
+        this.listenTo(this.core.activePlayback, Events.PLAYBACK_AUDIO_AVAILABLE, (tracks) => {
+            trace(`${T} on PLAYBACK_AUDIO_AVAILABLE`, { audioTracks: tracks });
+            this.currentTrack =
+                tracks.find((track) => track.kind === 'main') ?? null;
+            this.fillTracks(tracks);
+        });
+        this.listenTo(this.core.activePlayback, Events.PLAYBACK_AUDIO_CHANGED, (track) => {
+            trace(`${T} PLAYBACK_AUDIO_CHANGED`, { audioTrack: track });
+            this.currentTrack = track;
+            this.highlightCurrentTrack();
+            this.buttonElement().removeClass('changing');
+            this.updateText();
+        });
+    }
+    onStop() {
+        trace(`${T} onStop`);
+    }
+    onActiveContainerChanged() {
+        trace(`${T} onActiveContainerChanged`);
         this.bindPlaybackEvents();
     }
     shouldRender() {
-        if (!this.core.activeContainer) {
-            return false;
-        }
-        const currentPlayback = this.core.activePlayback;
-        if (!currentPlayback) {
+        if (!this.core.activePlayback) {
             return false;
         }
-        const { audioTracks } = currentPlayback.activePlayback._hls || currentPlayback.$el.get(0);
-        this.tracks = audioTracks;
+        this.tracks = this.core.activePlayback.audioTracks;
         // Only care if we have at least 2 to choose from
         return this.tracks && this.tracks.length > 1;
     }
@@ -164,146 +115,75 @@ export class AudioSelector extends UICorePlugin {
             return this;
         }
         const mediaControl = this.core.getPlugin('media_control');
-        assert(mediaControl, 'media_control plugin is required');
         this.$el.html(AudioSelector.template({ tracks: this.tracks, title: this.getTitle() }));
-        const ats = mediaControl.getElement('audioTracksSelector');
-        if (!(ats && ats.length > 0)) {
-            return this;
-        }
-        ats.append(this.el);
+        this.$('.audio-arrow').append(audioArrow);
+        mediaControl.putElement('audioTracksSelector', this.$el);
+        this.updateText();
         this.highlightCurrentTrack();
-        const aa = ats.find('audioArrow');
-        if (aa.length > 0) {
-            aa.append(audioArrow);
-        }
         return this;
     }
-    fillTracks(tracks, selected = AUTO) {
-        if (this.selectedTrackId === undefined) {
-            this.selectedTrackId = selected;
-        }
-        // this.tracks = levels.audioTracks;
-        // for (let i = 0; i < this.tracks.length; i++) {
-        //   if (this.tracks[i].name && !this.tracks[i].label) {
-        //     this.tracks[i].label = this.tracks[i].name;
-        //   }
-        // }
+    fillTracks(tracks) {
         this.tracks = tracks;
-        // Player.player.trigger('tracks', this.tracks);
-        // this.core.trigger('tracks', this.tracks);
         this.render();
     }
     findTrackBy(id) {
         return this.tracks.find((track) => track.id === id);
     }
     onTrackSelect(event) {
-        // this.selectedTrackId = parseInt(event.target.dataset.levelSelectorSelect, 10)
         const id = event.target?.dataset?.trackSelectorSelect;
         if (id) {
-            this.setIndexTrack(Number(id));
+            this.selectAudioTrack(id);
         }
         this.toggleContextMenu();
         event.stopPropagation();
         return false;
     }
-    setIndexTrack(index) {
-        this.selectedTrackId = index;
-        if (this.core.activePlayback._hls) {
-            if (this.core.activePlayback._hls.audioTrack.id === this.selectedTrackId) {
-                return;
-            }
-            this.core.activePlayback._hls.audioTrack = this.selectedTrackId;
-        }
-        else {
-            const { audioTracks } = this.core.activePlayback.$el.get(0);
-            for (const track of audioTracks) {
-                track.enabled = track.id === this.selectedTrackId;
-            }
-        }
-        this.updateText(this.selectedTrackId);
+    selectAudioTrack(id) {
+        this.startTrackSwitch();
+        this.core.activePlayback.switchAudioTrack(id);
+        this.updateText();
     }
     onShowLevelSelectMenu() {
         this.toggleContextMenu();
     }
     hideSelectTrackMenu() {
         ;
-        this.$('.audio_selector ul').hide();
+        this.$('ul').hide();
     }
     toggleContextMenu() {
         ;
-        this.$('.audio_selector ul').toggle();
+        this.$('ul').toggle();
     }
     buttonElement() {
-        return this.$('.audio_selector button');
+        return this.$('button');
     }
     buttonElementText() {
-        return this.$('.audio_selector button .audio-text');
+        return this.$('button .audio-text');
     }
     trackElement(id) {
-        return this.$('.audio_selector ul a' +
+        return this.$('ul a' +
             (id !== undefined ? '[data-track-selector-select="' + id + '"]' : '')).parent();
     }
     getTitle() {
-        if (!this.tracks) {
-            return '';
-        }
-        const selectedTrackId = this.selectedTrackId || 0;
-        const selectedTrack = this.tracks[selectedTrackId];
-        return selectedTrack?.label || '';
+        return this.currentTrack?.label || '';
     }
     startTrackSwitch() {
         this.buttonElement().addClass('changing');
     }
-    updateText(trackId) {
-        if (trackId === undefined) {
+    updateText() {
+        if (!this.currentTrack) {
             return;
         }
-        const track = this.findTrackBy(trackId);
-        if (track) {
-            this.buttonElementText().text(track.label);
-        }
-    }
-    updateCurrentTrack(e, info) {
-        // if (!info) {
-        //   const { audioTracks } = this.core.activePlayback.$el.get(0);
-        //   for (const track of audioTracks) {
-        //     if (track.enabled) {
-        //       info = track;
-        //     }
-        //   }
-        // }
-        // if (!info) {
-        //   return;
-        // }
-        // const track = this.findTrackBy(info.id);
-        // this.currentTrack = track ? track : null;
-        // this.selectedTrackId = track?.id;
-        // this.highlightCurrentTrack();
-        // this.buttonElement().removeClass('changing');
-        this.setCurrentTrack(info.id);
-    }
-    updateCurrentTrackW3C() {
-        const { audioTracks } = this.core.activePlayback.$el.get(0);
-        const index = audioTracks.findIndex((track) => track.enabled);
-        if (index >= 0) {
-            this.setCurrentTrack(index);
-        }
-    }
-    setCurrentTrack(index) {
-        const track = this.findTrackBy(index);
-        this.currentTrack = track ?? null;
-        this.selectedTrackId = index;
-        this.highlightCurrentTrack();
-        this.buttonElement().removeClass('changing');
+        this.buttonElementText().text(this.currentTrack.label);
     }
     highlightCurrentTrack() {
         this.trackElement().removeClass('current');
         this.trackElement().find('a').removeClass('gcore-skin-active');
         if (this.currentTrack) {
-            const currentTrackElement = this.trackElement(this.currentTrack.id);
-            currentTrackElement.addClass('current');
-            currentTrackElement.find('a').addClass('gcore-skin-active');
+            this.trackElement(this.currentTrack.id)
+                .addClass('current')
+                .find('a')
+                .addClass('gcore-skin-active');
         }
-        this.updateText(this.selectedTrackId);
     }
 }

package/lib/plugins/bottom-gear/BottomGear.d.ts

@@ -39,7 +39,6 @@ export declare class BottomGear extends UICorePlugin {
      */
     get attributes(): {
         class: string;
-        'data-track-selector': string;
     };
     /**
      * @internal
@@ -76,5 +75,6 @@ export declare class BottomGear extends UICorePlugin {
     refresh(): void;
     private toggleGearMenu;
     private hide;
+    private onCoreReady;
 }
 //# sourceMappingURL=BottomGear.d.ts.map

package/lib/plugins/bottom-gear/BottomGear.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoC,MAAM,cAAc,CAAC;AAO9E,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D;;;;;;;;;GASG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAS;IAErB;;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,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IASnB;;;OAGG;IACH,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,GAAG,IAAI;IAIrD;;;OAGG;IACH,UAAU,CAAC,OAAO,EAAE,WAAW;IAI/B,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAkBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;CAGb"}
+{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoC,MAAM,cAAc,CAAC;AAO9E,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D;;;;;;;;;GASG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAS;IAErB;;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,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IAKnB;;;OAGG;IACH,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,GAAG,IAAI;IAIrD;;;OAGG;IACH,UAAU,CAAC,OAAO,EAAE,WAAW;IAI/B,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAiBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,WAAW;CAMpB"}

package/lib/plugins/bottom-gear/BottomGear.js

@@ -46,8 +46,7 @@ export class BottomGear extends UICorePlugin {
      */
     get attributes() {
         return {
-            'class': this.name,
-            'data-track-selector': ''
+            'class': 'media-control-gear',
         };
     }
     /**
@@ -62,18 +61,15 @@ export class BottomGear extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        const mediaControl = this.core.getPlugin('media_control');
-        assert(mediaControl, 'media_control plugin is required');
+        this.listenTo(this.core, ClapprEvents.CORE_READY, this.onCoreReady);
         this.listenTo(this.core, ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-        this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
     }
     /**
      * @param name - Name of a gear menu placeholder item to attach custom UI
      * @returns Zepto result of the element
      */
     getElement(name) {
-        return this.core.getPlugin('media_control')?.getElement('gear')?.find(`.gear-options-list [data-${name}]`);
+        return this.$el.find(`.gear-options-list [data-${name}]`);
     }
     /**
      * Replaces the content of the gear menu
@@ -100,7 +96,6 @@ export class BottomGear extends UICorePlugin {
      */
     render() {
         const mediaControl = this.core.getPlugin('media_control');
-        assert(mediaControl, 'media_control plugin is required');
         // TODO use options.mediaControl.gear.items
         const items = [
             'quality',
@@ -109,7 +104,7 @@ export class BottomGear extends UICorePlugin {
         ];
         const icon = this.isHd ? gearHdIcon : gearIcon;
         this.$el.html(BottomGear.template({ icon, items }));
-        mediaControl.getElement('gear')?.html(this.el);
+        mediaControl.putElement('gear', this.$el);
         mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
         return this;
     }
@@ -128,4 +123,10 @@ export class BottomGear extends UICorePlugin {
     hide() {
         this.$el.find('.gear-wrapper').hide();
     }
+    onCoreReady() {
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.render);
+        this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
+    }
 }

package/lib/plugins/level-selector/LevelSelector.js

@@ -68,7 +68,7 @@ export class LevelSelector extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: this.name,
+            class: 'level-selector',
             'data-level-selector': '',
         };
     }