@gcorevideo/player 2.20.21 → 2.21.1

package/dist/index.js

@@ -12626,7 +12626,6 @@ var PlaybackErrorCode;
 /**
  * This class adds common behaviors to all playback modules.
  * @internal
- * TODO use custom HTML5Video playback with this layer applied
  */
 class BasePlayback extends HTML5Video$1 {
     createError(errorData, options) {
@@ -12672,13 +12671,13 @@ var PlaybackEvents;
     PlaybackEvents["PLAYBACK_RATE_CHANGED"] = "playback:rate-changed";
 })(PlaybackEvents || (PlaybackEvents = {}));
 
-// Copyright 2014 Globo.com Player authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-const AUTO$2 = -1;
+// This code is derived on works by Globo.com.
+// This code is distributed under the terms of the Apache License 2.0.
+// Original code's license can be found on
+// https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
+const AUTO$1 = -1;
 const { now: now$2 } = Utils;
-const T$j = 'playback.dash';
-// @ts-expect-error
+const T$k = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = null;
     _currentLevel = null;
@@ -12724,7 +12723,7 @@ class DashPlayback extends BasePlayback {
     }
     get currentLevel() {
         if (this._currentLevel === null) {
-            return AUTO$2;
+            return AUTO$1;
         }
         // 0 is a valid level ID
         return this._currentLevel;
@@ -12838,6 +12837,7 @@ class DashPlayback extends BasePlayback {
                 const newLevel = this.getLevel(evt.newQuality);
                 this.onLevelSwitch(newLevel);
             });
+            this.checkAudioTracks();
         });
         this._dash.on(DASHJS.MediaPlayer.events.QUALITY_CHANGE_RENDERED, (evt) => {
             const currentLevel = this.getLevel(evt.newQuality);
@@ -12858,6 +12858,11 @@ class DashPlayback extends BasePlayback {
         this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_RATE_CHANGED, (e) => {
             this.trigger(PlaybackEvents.PLAYBACK_RATE_CHANGED, e.playbackRate);
         });
+        this._dash.on(DASHJS.MediaPlayer.events.TRACK_CHANGE_RENDERED, (e) => {
+            if (e.mediaType === 'audio') {
+                this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack$1(e.newMediaInfo));
+            }
+        });
     }
     render() {
         this._ready();
@@ -12947,10 +12952,10 @@ class DashPlayback extends BasePlayback {
     }
     _onPlaybackError = (event) => {
         // TODO
-        trace(`${T$j} _onPlaybackError`, { event });
+        trace(`${T$k} _onPlaybackError`, { event });
     };
     _onDASHJSSError = (event) => {
-        trace(`${T$j} _onDASHJSSError`, { event });
+        trace(`${T$k} _onDASHJSSError`, { event });
         this._stopTimeUpdateTimer();
         // Note that the other error types are deprecated
         const e = event.error;
@@ -12985,7 +12990,7 @@ class DashPlayback extends BasePlayback {
         }
     };
     triggerError(error) {
-        trace(`${T$j} triggerError`, { error });
+        trace(`${T$k} triggerError`, { error });
         // this triggers Events.ERROR to be handled by the UI
         this.trigger(Events$1.PLAYBACK_ERROR, this.createError(error, {
             useCodePrefix: false,
@@ -13024,7 +13029,7 @@ class DashPlayback extends BasePlayback {
     }
     get dvrEnabled() {
         if (!this._dash) {
-            trace(`${T$j} dvrEnable no dash player instance`);
+            trace(`${T$k} dvrEnable no dash player instance`);
             return false;
         }
         return (this._dash?.getDVRWindowSize() >= this._minDvrSize &&
@@ -13046,7 +13051,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_PROGRESS, progress, {});
     }
     play() {
-        trace(`${T$j} play`, { dash: !!this._dash });
+        trace(`${T$k} play`, { dash: !!this._dash });
         if (!this._dash) {
             this._setup();
         }
@@ -13125,6 +13130,36 @@ class DashPlayback extends BasePlayback {
     setPlaybackRate(rate) {
         this._dash?.setPlaybackRate(rate);
     }
+    get audioTracks() {
+        assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized');
+        const tracks = this._dash.getTracksFor('audio');
+        trace(`${T$k} get audioTracks`, { tracks });
+        return tracks.map(toClapprTrack$1);
+    }
+    // @ts-expect-error
+    get currentAudioTrack() {
+        trace(`${T$k} get currentAudioTrack`);
+        assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized');
+        const t = this._dash.getCurrentTrackFor('audio');
+        if (!t) {
+            return null;
+        }
+        return toClapprTrack$1(t);
+    }
+    switchAudioTrack(id) {
+        assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized');
+        const tracks = this._dash.getTracksFor('audio');
+        const track = tracks.find((t) => t.id === id);
+        assert.ok(track, 'Invalid audio track ID');
+        this._dash.setCurrentTrack(track);
+    }
+    checkAudioTracks() {
+        // @ts-ignore
+        const tracks = this._dash.getTracksFor('audio');
+        if (tracks.length) {
+            this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, tracks.map(toClapprTrack$1));
+        }
+    }
 }
 DashPlayback.canPlay = function (resource, mimeType) {
     if (!isDashSource(resource, mimeType)) {
@@ -13136,6 +13171,14 @@ DashPlayback.canPlay = function (resource, mimeType) {
     const ctor = ms || mms || wms;
     return typeof ctor === 'function';
 };
+function toClapprTrack$1(t) {
+    return {
+        id: t.id,
+        kind: t.roles && t.roles?.length > 0 ? t.roles[0] : 'main', // TODO
+        label: t.labels.map((l) => l.text).join(' '), // TODO
+        language: t.lang,
+    };
+}
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -41792,12 +41835,11 @@ const CLAPPR_VERSION = '0.11.3';
 // Use of this source code is governed by a BSD-style
 // license that can be found on https://github.com/clappr/hlsjs-playback/blob/main/LICENSE
 const { now } = Utils;
-const AUTO$1 = -1;
+const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$i = 'playback.hls';
-// @ts-expect-error
+const T$j = 'playback.hls';
 class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
     _ccTracksUpdated = false;
@@ -41834,7 +41876,7 @@ class HlsPlayback extends BasePlayback {
         return this._levels || [];
     }
     get currentLevel() {
-        return this._currentLevel ?? AUTO$1;
+        return this._currentLevel ?? AUTO;
     }
     get isReady() {
         return this._isReadyState;
@@ -41842,7 +41884,7 @@ class HlsPlayback extends BasePlayback {
     set currentLevel(id) {
         this._currentLevel = id;
         this.trigger(Events$1.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;
         }
@@ -41851,11 +41893,11 @@ 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;
     }
@@ -42026,7 +42068,7 @@ class HlsPlayback extends BasePlayback {
             maxBufferLength: 2,
             maxMaxBufferLength: 4,
         }, this.options.playback.hlsjsConfig);
-        trace(`${T$i} _createHLSInstance`, { config });
+        trace(`${T$j} _createHLSInstance`, { config });
         this._hls = new Hls(config);
     }
     _attachHLSMedia() {
@@ -42040,7 +42082,7 @@ class HlsPlayback extends BasePlayback {
             return;
         }
         this._hls.once(Hls.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 = () => {
@@ -42065,13 +42107,15 @@ class HlsPlayback extends BasePlayback {
         // this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, (evt, data) => this._onSubtitleLoaded(evt, data));
         this._hls.on(Hls.Events.SUBTITLE_TRACK_LOADED, () => this._onSubtitleLoaded());
         this._hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, () => (this._ccTracksUpdated = true));
+        this._hls.on(Events.AUDIO_TRACKS_UPDATED, (evt, data) => this._onAudioTracksUpdated(evt, data));
+        this._hls.on(Events.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);
         });
@@ -42079,7 +42123,7 @@ 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);
         });
     }
@@ -42103,7 +42147,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.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();
@@ -42115,7 +42159,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$i} _recover failed to recover`, {
+            trace(`${T$j} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42201,7 +42245,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$i} _onHLSJSError`, {
+        trace(`${T$j} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -42249,7 +42293,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$i} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$j} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -42262,14 +42306,10 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$i} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$j} _onHLSJSError trying to recover from media error`, {
                             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:
@@ -42296,7 +42336,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$i} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$j} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42411,7 +42451,7 @@ 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?
@@ -42612,6 +42652,34 @@ 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$j} onAudioTracksUpdated`);
+        this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack));
+    }
+    _onAudioTrackSwitched(_, data) {
+        trace(`${T$j} onAudioTrackSwitched`);
+        // @ts-ignore
+        const track = this._hls.audioTracks[data.id];
+        this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
+    }
 }
 HlsPlayback.canPlay = function (resource, mimeType) {
     if (!isHlsSource(resource, mimeType)) {
@@ -42619,8 +42687,16 @@ HlsPlayback.canPlay = function (resource, mimeType) {
     }
     return Hls.isSupported();
 };
+function toClapprTrack(t) {
+    return {
+        id: String(t.id),
+        language: t.lang ?? '',
+        kind: t.type === 'main' ? 'main' : 'description', // TODO check
+        label: t.name,
+    };
+}
 
-const T$h = 'playback.html5_video';
+const T$i = 'playback.html5_video';
 const STALL_TIMEOUT = 15000;
 class HTML5Video extends BasePlayback {
     stallTimerId = null;
@@ -42628,7 +42704,7 @@ class HTML5Video extends BasePlayback {
      * @internal
      */
     createError(errorData, options) {
-        trace(`${T$h} createError`, {
+        trace(`${T$i} createError`, {
             errorData: { ...errorData },
         });
         const i18n = this.i18n ||
@@ -42639,20 +42715,16 @@ class HTML5Video extends BasePlayback {
         if (i18n &&
             !errorData.UI &&
             errorData.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
-            // errorData.UI = {
-            //   title: i18n.t('no_broadcast'),
-            //   message: errorData.message,
-            // }
             errorData.code = PlaybackErrorCode.MediaSourceUnavailable;
         }
         return super.createError(errorData, { ...options, useCodePrefix: false });
     }
     _onWaiting() {
-        trace(`${T$h} _onWaiting`);
+        trace(`${T$i} _onWaiting`);
         super._onWaiting();
     }
     _onEnded() {
-        trace(`${T$h} _onEnded`);
+        trace(`${T$i} _onEnded`);
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
             this.stallTimerId = null;
@@ -42660,28 +42732,30 @@ class HTML5Video extends BasePlayback {
         super._onEnded();
     }
     _handleBufferingEvents() {
-        trace(`${T$h} _handleBufferingEvents`, {
+        trace(`${T$i} _handleBufferingEvents`, {
             networkState: this.el.networkState,
         });
         if (!this.stallTimerId) {
             this.stallTimerId = setTimeout(() => {
-                trace(`${T$h} _handleBufferingEvents stall timeout`, {
+                trace(`${T$i} _handleBufferingEvents stall timeout`, {
                     buffering: this.buffering,
                     ended: this.ended,
                 });
                 this.stallTimerId = null;
-                this.createError({
+                const error = this.createError({
                     code: PlaybackErrorCode.MediaSourceUnavailable,
                     level: PlayerError.Levels.FATAL,
                     message: 'Stall timeout',
                     description: 'Playback stalled for too long',
                 });
+                this.trigger(Events$1.PLAYBACK_ERROR, error);
+                setTimeout(() => this.stop(), 0);
             }, STALL_TIMEOUT);
         }
         super._handleBufferingEvents();
     }
     _onPlaying() {
-        trace(`${T$h} _onPlaying`);
+        trace(`${T$i} _onPlaying`);
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
             this.stallTimerId = null;
@@ -42689,13 +42763,66 @@ class HTML5Video extends BasePlayback {
         super._onPlaying();
     }
     _onPause() {
-        trace(`${T$h} _onPause`);
+        trace(`${T$i} _onPause`);
         super._onPause();
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
             this.stallTimerId = null;
         }
     }
+    get audioTracks() {
+        const tracks = this.el.audioTracks;
+        const supported = !!tracks;
+        trace(`${T$i} get audioTracks`, { supported });
+        const retval = [];
+        if (supported) {
+            for (let i = 0; i < tracks.length; i++) {
+                const track = tracks[i];
+                retval.push({
+                    id: track.id,
+                    label: track.label,
+                    language: track.language,
+                    kind: track.kind, // TODO check
+                });
+            }
+        }
+        return retval;
+    }
+    // @ts-expect-error
+    get currentAudioTrack() {
+        const tracks = this.el.audioTracks;
+        const supported = !!tracks;
+        trace(`${T$i} get currentAudioTrack`, {
+            supported,
+        });
+        if (supported) {
+            for (let i = 0; i < tracks.length; i++) {
+                const track = tracks[i];
+                if (track.enabled) {
+                    return {
+                        id: track.id,
+                        label: track.label,
+                        language: track.language,
+                        kind: track.kind,
+                    };
+                }
+            }
+        }
+        return null;
+    }
+    switchAudioTrack(id) {
+        const tracks = this.el.audioTracks;
+        const supported = !!tracks;
+        trace(`${T$i} switchAudioTrack`, {
+            supported,
+        });
+        if (supported) {
+            for (let i = 0; i < tracks.length; i++) {
+                const track = tracks[i];
+                track.enabled = track.id === id;
+            }
+        }
+    }
 }
 
 // TODO consider allowing the variation of the order of playback modules
@@ -42705,7 +42832,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$g = 'GPlayer';
+const T$h = 'GPlayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -42800,7 +42927,7 @@ class Player {
         }
         const coreOpts = this.buildCoreOptions(playerElement);
         const { core, container } = Player.getRegisteredPlugins();
-        trace(`${T$g} init`, {
+        trace(`${T$h} init`, {
             registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.prototype.name),
         });
         coreOpts.plugins = {
@@ -42814,7 +42941,7 @@ class Player {
      * Destroys the player, releasing all resources and unmounting its UI from the DOM.
      */
     destroy() {
-        trace(`${T$g} destroy`, {
+        trace(`${T$h} destroy`, {
             player: !!this.player,
         });
         if (this.player) {
@@ -43001,7 +43128,7 @@ class Player {
         this.config = $.extend(true, this.config, config);
     }
     initPlayer(coreOptions) {
-        trace(`${T$g} initPlayer`, {
+        trace(`${T$h} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
             // TODO selected options
@@ -43026,7 +43153,7 @@ class Player {
         }
     }
     triggerAutoPlay() {
-        trace(`${T$g} triggerAutoPlay`);
+        trace(`${T$h} triggerAutoPlay`);
         setTimeout(() => {
             this.player?.play({
                 autoPlay: true,
@@ -43044,7 +43171,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$g} onReady`, {
+            trace(`${T$h} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -43078,7 +43205,7 @@ class Player {
     buildCoreOptions(rootNode) {
         const sources = this.buildMediaSourcesList();
         const source = sources[0];
-        trace(`${T$g} buildCoreOptions`, {
+        trace(`${T$h} buildCoreOptions`, {
             source,
             sources,
         });
@@ -43139,7 +43266,7 @@ class Player {
         assert.ok(this.player, 'Player is not initialized');
         const core = this.player.core;
         core.on(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
-            trace(`${T$g} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+            trace(`${T$h} on CORE_SCREEN_ORIENTATION_CHANGED`, {
                 orientation,
                 rootNode: {
                     width: this.rootNode?.clientWidth,
@@ -43154,14 +43281,14 @@ class Player {
             }
         }, null);
         core.on(Events$1.CORE_RESIZE, ({ width, height }) => {
-            trace(`${T$g} on CORE_RESIZE`, {
+            trace(`${T$h} on CORE_RESIZE`, {
                 width,
                 height,
             });
             this.safeTriggerEvent(PlayerEvent.Resize, { width, height });
         }, null);
         core.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
-            trace(`${T$g} CORE_FULLSCREEN`, {
+            trace(`${T$h} CORE_FULLSCREEN`, {
                 isFullscreen,
             });
             this.safeTriggerEvent(PlayerEvent.Fullscreen, isFullscreen);
@@ -43169,7 +43296,7 @@ class Player {
     }
 }
 
-var version$1 = "2.20.21";
+var version$1 = "2.21.1";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43193,20 +43320,23 @@ function version() {
     };
 }
 
-const pluginHtml$7 = "<button data-track-selector-button class='gcore-skin-button-color'>\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"></span>\n</button>\n<ul class='gcore-skin-bg-color'>\n    <% for (var i = 0; i < tracks.length; i++) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-track-selector-select=\"<%= tracks[i].id %>\">\n                <%= tracks[i].label || tracks[i].name %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
+const pluginHtml$7 = "<button data-track-selector-button class='gcore-skin-button-color'>\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"></span>\n</button>\n<ul class='gcore-skin-bg-color'>\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-track-selector-select=\"<%= track.id %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
 
 const audioArrow = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"9px\" height=\"6px\" viewBox=\"0 0 9 6\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n     xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->\n  <title>quality-arrow</title>\n  <desc>Created with Sketch.</desc>\n  <defs></defs>\n  <g id=\"quality-arrow\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n    <path\n      d=\"M5.07079194,5.78553848 C4.91457318,5.94277844 4.70551573,6.00941824 4.50028717,5.99893557 C4.2950586,6.00941824 4.08676693,5.94277844 3.92978239,5.78553848 L0.221118462,1.2997069 C-0.0737061539,1.00469478 -0.0737061539,0.526236029 0.221118462,0.231972666 C0.515177299,-0.0630394586 1.23500883,0.00734414472 1.64852907,0.00734414472 L7.77475484,0.00734414472 C8.21201421,0.00734414472 8.48539703,-0.0630394586 8.77945587,0.231972666 C9.07351471,0.526236029 9.07351471,1.00469478 8.77945587,1.2997069 L5.07079194,5.78553848 Z\"\n      fill=\"#FFFFFE\"></path>\n  </g>\n</svg>\n";
 
 const VERSION$6 = '0.0.1';
-// const T = 'plugins.audio_selector';
-const AUTO = 0;
+const T$g = '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}
  */
 class AudioSelector extends UICorePlugin {
-    // TODO
-    selectedTrackId;
     currentTrack = null;
     tracks = [];
     /**
@@ -43233,7 +43363,7 @@ class AudioSelector extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: this.name,
+            class: 'media-control-audio-tracks',
             'data-track-selector': '',
         };
     }
@@ -43250,101 +43380,49 @@ class AudioSelector extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core, Events$1.CORE_READY, this.bindPlaybackEvents);
-        // TODO CORE_ACTIVE_CONTAINER_CHANGED
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideSelectTrackMenu);
+        this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
-    unBindEvents() {
-        // @ts-ignore
-        this.stopListening(this.core, Events$1.CORE_READY);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_HIDE);
+    onCoreReady() {
+        trace(`${T$g} onCoreReady`);
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideSelectTrackMenu);
     }
     bindPlaybackEvents() {
-        // this.currentTrack = {};
-        // this.removeAuto = false;
-        this.selectedTrackId = undefined;
-        const currentPlayback = this.core.activePlayback;
-        this.listenTo(currentPlayback, Events$1.PLAYBACK_STOP, this.onStop);
+        trace(`${T$g} bindPlaybackEvents`);
+        this.currentTrack = null;
+        this.listenTo(this.core.activePlayback, Events$1.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(Events.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(Events.AUDIO_TRACK_SWITCHING, this.startTrackSwitch.bind(this));
-            currentPlayback._hls.on(Events.AUDIO_TRACK_SWITCHED, this.updateCurrentTrack.bind(this));
-            currentPlayback._hls.on(Events.AUDIO_TRACK_LOADED, this.updateCurrentTrack.bind(this));
-        }
-        else {
-            this.listenToOnce(currentPlayback, Events$1.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);
-                }
-            });
-        }
+        this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_AUDIO_AVAILABLE, (tracks) => {
+            trace(`${T$g} on PLAYBACK_AUDIO_AVAILABLE`, { audioTracks: tracks });
+            this.currentTrack =
+                tracks.find((track) => track.kind === 'main') ?? null;
+            this.fillTracks(tracks);
+        });
+        this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_AUDIO_CHANGED, (track) => {
+            trace(`${T$g} PLAYBACK_AUDIO_CHANGED`, { audioTrack: track });
+            this.currentTrack = track;
+            this.highlightCurrentTrack();
+            this.buttonElement().removeClass('changing');
+            this.updateText();
+        });
     }
-    onStop() { }
-    reload() {
-        this.unBindEvents();
-        this.bindEvents();
+    onStop() {
+        trace(`${T$g} onStop`);
+    }
+    onActiveContainerChanged() {
+        trace(`${T$g} 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;
     }
@@ -43356,145 +43434,74 @@ 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);
     }
 }
 
@@ -43648,7 +43655,7 @@ class BigMuteButton extends UICorePlugin {
     }
 }
 
-const pluginHtml$5 = "<div class=\"media-control-gear\" data-<%= name %>>\n    <button type=\"button\" class=\"button-gear gplayer-lite-btn gcore-skin-button-color\" data-gear-button=\"-1\">\n        <span class=\"gear-icon\"><%= icon %></span>\n    </button>\n    <div class=\"gear-wrapper gcore-skin-bg-color\">\n        <ul class=\"gear-options-list\">\n            <% items.forEach(function (gear) { %>\n                <li data-<%= gear %>></li>\n            <% }); %>\n        </ul>\n    </div>\n</div>\n";
+const pluginHtml$5 = "<button type=\"button\" class=\"button-gear media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon\" data-gear-button=\"-1\">\n    <%= icon %>\n</button>\n<div class=\"gear-wrapper gcore-skin-bg-color\">\n    <ul class=\"gear-options-list\">\n        <% for (const item of items) { %>\n            <li data-<%= item %>></li>\n        <% } %>\n    </ul>\n</div>";
 
 const gearIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_660_1503)\">\n    <path\n      d=\"M19.14 12.94C19.18 12.64 19.2 12.33 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.16 9.47999C21.34 9.33999 21.39 9.06999 21.28 8.86999L19.36 5.54999C19.24 5.32999 18.99 5.25999 18.77 5.32999L16.38 6.28999C15.88 5.90999 15.35 5.58999 14.76 5.34999L14.4 2.80999C14.36 2.56999 14.16 2.39999 13.92 2.39999H10.08C9.83999 2.39999 9.64999 2.56999 9.60999 2.80999L9.24999 5.34999C8.65999 5.58999 8.11999 5.91999 7.62999 6.28999L5.23999 5.32999C5.01999 5.24999 4.76999 5.32999 4.64999 5.54999L2.73999 8.86999C2.61999 9.07999 2.65999 9.33999 2.85999 9.47999L4.88999 11.06C4.83999 11.36 4.79999 11.69 4.79999 12C4.79999 12.31 4.81999 12.64 4.86999 12.94L2.83999 14.52C2.65999 14.66 2.60999 14.93 2.71999 15.13L4.63999 18.45C4.75999 18.67 5.00999 18.74 5.22999 18.67L7.61999 17.71C8.11999 18.09 8.64999 18.41 9.23999 18.65L9.59999 21.19C9.64999 21.43 9.83999 21.6 10.08 21.6H13.92C14.16 21.6 14.36 21.43 14.39 21.19L14.75 18.65C15.34 18.41 15.88 18.09 16.37 17.71L18.76 18.67C18.98 18.75 19.23 18.67 19.35 18.45L21.27 15.13C21.39 14.91 21.34 14.66 21.15 14.52L19.14 12.94ZM12 15.6C10.02 15.6 8.39999 13.98 8.39999 12C8.39999 10.02 10.02 8.39999 12 8.39999C13.98 8.39999 15.6 10.02 15.6 12C15.6 13.98 13.98 15.6 12 15.6Z\"\n      fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_660_1503\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
@@ -43911,7 +43918,7 @@ function getPageX(event) {
     return 0;
 }
 
-const mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n\n<div class=\"media-control-layer gcore-skin-bg-color\" data-controls>\n    <% var renderBar = function(name) { %>\n        <div class=\"bar-container\" data-<%= name %>>\n            <div class=\"bar-background\" data-<%= name %>>\n                <div class=\"bar-fill-1\" data-<%= name %>></div>\n                <div class=\"bar-fill-2 gcore-skin-main-color\" data-<%= name %>></div>\n                <div class=\"bar-hover\" data-<%= name %>></div>\n            </div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderSegmentedBar = function(name, segments) {\n        segments = segments || 10; %>\n    <div class=\"bar-container\" data-<%= name %>>\n        <div class=\"bar-background\" data-<%= name %>>\n            <div class=\"bar-fill-1 gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    </div>\n    <% }; %>\n    <% var renderDrawer = function(name, renderContent) { %>\n        <div class=\"drawer-container\" data-<%= name %>>\n            <div class=\"drawer-icon-container\" data-<%= name %>>\n                <div class=\"drawer-icon media-control-icon gcore-skin-button-color\" data-<%= name %>></div>\n                <span class=\"drawer-text\" data-<%= name %>></span>\n            </div>\n            <% renderContent(name); %>\n        </div>\n    <% }; %>\n    <% var renderIndicator = function(name) { %>\n        <div class=\"media-control-indicator gcore-skin-text-color\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderBottomGear = function(name) { %>\n        <div class=\"media-control-bottomgear\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderPIP = function(name) { %>\n        <div class=\"media-control-pip\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderQuality = function(name) { %>\n        <div class=\"media-control-quality\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderNerd = function(name) { %>\n        <div class=\"media-control-nerd\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderAudioTracks = function(name) { %>\n        <div class=\"media-control-audio-tracks\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderSubtitles = function(name) { %>\n        <div class=\"media-control-subtitles\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderMultiCamera = function(name) { %>\n        <div class=\"media-control-multicamera\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderClipsText = function(name) { %>\n\n        <div class=\"media-clip-container gcore-skin-text-color\" data-<%= name %>>\n            <div class=\"media-clip-point gcore-skin-text-color\" data-<%= name %>>•</div>\n            <div class=\"media-clip-text gcore-skin-text-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderPlaybackRate = function(name) { %>\n        <div class=\"media-control-playbackrate\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderVR = function(name) { %>\n        <div class=\"media-control-vr\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderButton = function(name) { %>\n        <button type=\"button\" class=\"media-control-button media-control-icon gcore-skin-button-color\" data-<%= name %>\n                aria-label=\"<%= name %>\"></button>\n    <% }; %>\n\n    <% var templates = {\n        bar: renderBar,\n        segmentedBar: renderSegmentedBar,\n    };\n    var render = function (settingsList) {\n        settingsList.forEach(function (setting) {\n\n            if (setting === \"seekbar\") {\n                renderBar(setting);\n            } else if (setting === \"volume\") {\n                renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {\n                    return renderSegmentedBar(name);\n                });\n            } else if (setting === \"duration\" || setting === \"position\") {\n                renderIndicator(setting);\n            } else if (setting === \"quality\") {\n                renderQuality(setting)\n            } else if (setting === \"bottomgear\") {\n                renderBottomGear(setting)\n            } else if (setting === \"pip\") {\n                renderPIP(setting)\n            } else if (setting === \"nerd\") {\n                renderNerd(setting)\n            } else if (setting === \"multicamera\") {\n                renderMultiCamera(setting)\n            } else if (setting === \"subtitles\") {\n                renderSubtitles(setting)\n            } else if (setting === \"playbackrate\") {\n                renderPlaybackRate(setting)\n            } else if (setting === \"vr\") {\n                renderVR(setting)\n            } else if (setting === \"clipsText\") {\n                renderClipsText(setting)\n            } else if (setting === \"audiotracks\") {\n                renderAudioTracks(setting)\n            } else {\n                renderButton(setting);\n            }\n        });\n    }; %>\n    <% if (settings.default && settings.default.length) { %>\n        <div class=\"media-control-center-panel\" data-media-control>\n            <% render(settings.default); %>\n        </div>\n    <% } %>\n    <% if (settings.left && settings.left.length) { %>\n        <div class=\"media-control-left-panel\" data-media-control>\n            <% render(settings.left); %>\n        </div>\n    <% } %>\n    <% if (settings.right && settings.right.length) { %>\n        <div class=\"media-control-right-panel\" data-media-control>\n            <% render(settings.right); %>\n        </div>\n    <% } %>\n</div>\n";
+const mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n\n<div class=\"media-control-layer gcore-skin-bg-color\" data-controls>\n    <% var renderBar = function(name) { %>\n        <div class=\"bar-container\" data-<%= name %>>\n            <div class=\"bar-background\" data-<%= name %>>\n                <div class=\"bar-fill-1\" data-<%= name %>></div>\n                <div class=\"bar-fill-2 gcore-skin-main-color\" data-<%= name %>></div>\n                <div class=\"bar-hover\" data-<%= name %>></div>\n            </div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderSegmentedBar = function(name, segments) {\n        segments = segments || 10; %>\n    <div class=\"bar-container\" data-<%= name %>>\n        <div class=\"bar-background\" data-<%= name %>>\n            <div class=\"bar-fill-1 gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    </div>\n    <% }; %>\n    <% var renderDrawer = function(name, renderContent) { %>\n        <div class=\"drawer-container\" data-<%= name %>>\n            <div class=\"drawer-icon-container\" data-<%= name %>>\n                <div class=\"drawer-icon media-control-icon gcore-skin-button-color\" data-<%= name %>></div>\n                <span class=\"drawer-text\" data-<%= name %>></span>\n            </div>\n            <% renderContent(name); %>\n        </div>\n    <% }; %>\n    <% var renderIndicator = function(name) { %>\n        <div class=\"media-control-indicator gcore-skin-text-color\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderQuality = function(name) { %>\n        <div class=\"media-control-quality\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderNerd = function(name) { %>\n        <div class=\"media-control-nerd\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderSubtitles = function(name) { %>\n        <div class=\"media-control-subtitles\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderMultiCamera = function(name) { %>\n        <div class=\"media-control-multicamera\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderClipsText = function(name) { %>\n\n        <div class=\"media-clip-container gcore-skin-text-color\" data-<%= name %>>\n            <div class=\"media-clip-point gcore-skin-text-color\" data-<%= name %>>•</div>\n            <div class=\"media-clip-text gcore-skin-text-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderPlaybackRate = function(name) { %>\n        <div class=\"media-control-playbackrate\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderVR = function(name) { %>\n        <div class=\"media-control-vr\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderButton = function(name) { %>\n        <button type=\"button\" class=\"media-control-button media-control-icon gcore-skin-button-color\" data-<%= name %>\n                aria-label=\"<%= name %>\"></button>\n    <% }; %>\n\n    <% var templates = {\n        bar: renderBar,\n        segmentedBar: renderSegmentedBar,\n    };\n    var render = function (settingsList) {\n        settingsList.forEach(function (setting) {\n\n            if (setting === \"seekbar\") {\n                renderBar(setting);\n            } else if (setting === \"volume\") {\n                renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {\n                    return renderSegmentedBar(name);\n                });\n            } else if (setting === \"duration\" || setting === \"position\") {\n                renderIndicator(setting);\n            } else if (setting === \"quality\") {\n                renderQuality(setting)\n            } else if (setting === \"nerd\") {\n                renderNerd(setting)\n            } else if (setting === \"multicamera\") {\n                renderMultiCamera(setting)\n            } else if (setting === \"subtitles\") {\n                renderSubtitles(setting)\n            } else if (setting === \"playbackrate\") {\n                renderPlaybackRate(setting)\n            } else if (setting === \"vr\") {\n                renderVR(setting)\n            } else if (setting === \"clipsText\") {\n                renderClipsText(setting)\n            } else {\n                renderButton(setting);\n            }\n        });\n    }; %>\n    <% if (settings.left && settings.left.length) { %>\n        <div class=\"media-control-left-panel\" data-media-control>\n            <% render(settings.left); %>\n        </div>\n    <% } %>\n    <% if (settings.default && settings.default.length) { %>\n        <div class=\"media-control-center-panel\" data-media-control>\n            <% render(settings.default); %>\n        </div>\n    <% } %>\n    <% if (settings.right && settings.right.length) { %>\n        <div class=\"media-control-right-panel\" data-media-control>\n            <% render(settings.right); %>\n        </div>\n    <% } %>\n</div>\n";
 
 const playIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_28_1564)\">\n    <path d=\"M6 3V20L19.3571 11.5L6 3Z\" fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_28_1564\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
@@ -43991,7 +43998,6 @@ class MediaControl extends UICorePlugin {
     userKeepVisible = false;
     verticalVolume = false;
     $audioTracksSelector = null;
-    $bottomGear = null;
     $clipText = null;
     $clipTextContainer = null;
     $duration = null;
@@ -44688,9 +44694,6 @@ 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.$bottomGear = this.$el.find('.media-control-bottomgear');
-        this.$pip = this.$el.find('.media-control-pip');
-        this.$audioTracksSelector = this.$el.find('.media-control-audio-tracks[data-audiotracks]');
         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]');
@@ -44703,6 +44706,7 @@ class MediaControl extends UICorePlugin {
      * Get a media control element DOM node
      * @param name - The name of the media control element
      * @returns The DOM node to render to or extend
+     * @deprecated  Use {@link MediaControl.putElement} instead
      * @remarks
      * Use this method to render custom media control UI in a plugin
      * @example
@@ -44720,14 +44724,13 @@ class MediaControl extends UICorePlugin {
     getElement(name) {
         switch (name) {
             case 'audioTracksSelector':
-                return this.$audioTracksSelector;
+                return null;
             case 'clipText':
                 return this.$clipText;
-            case 'bottomGear':
             case 'gear':
-                return this.$bottomGear;
+                return null;
             case 'pip':
-                return this.$pip;
+                return null;
             case 'playbackRate':
                 return this.$playbackRate;
             case 'seekBarContainer':
@@ -44736,6 +44739,19 @@ class MediaControl extends UICorePlugin {
                 return this.$subtitlesSelector;
         }
     }
+    putElement(name, element) {
+        switch (name) {
+            case 'audioTracksSelector':
+                this.getRightPanel().append(element);
+                break;
+            case 'pip':
+                this.getRightPanel().append(element);
+                break;
+            case 'gear':
+                this.getRightPanel().append(element);
+                break;
+        }
+    }
     /**
      * Get the right panel area to append custom elements to
      * @returns  ZeptoSelector of the right panel element
@@ -45063,8 +45079,7 @@ class BottomGear extends UICorePlugin {
      */
     get attributes() {
         return {
-            'class': this.name,
-            'data-track-selector': ''
+            'class': 'media-control-gear',
         };
     }
     /**
@@ -45079,18 +45094,15 @@ class BottomGear extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        const mediaControl = this.core.getPlugin('media_control');
-        assert(mediaControl, 'media_control plugin is required');
+        this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(mediaControl, Events$1.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
@@ -45117,7 +45129,6 @@ 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',
@@ -45126,7 +45137,7 @@ 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;
     }
@@ -45145,6 +45156,12 @@ 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, Events$1.MEDIACONTROL_RENDERED, this.render);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
+    }
 }
 
 var mousetrap = {exports: {}};
@@ -48772,7 +48789,7 @@ class LevelSelector extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: this.name,
+            class: 'level-selector',
             'data-level-selector': '',
         };
     }
@@ -49587,7 +49604,7 @@ class MultiCamera extends UICorePlugin {
 
 const pipIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M21.05 3.00001C21.302 3.00001 21.5435 3.10003 21.7217 3.27833C21.9 3.45646 22 3.69802 22 3.95003V10.6H20.1V4.90003H4.90001V18.2H10.6V20.1H3.95001C3.69802 20.1 3.45647 20 3.27832 19.8217C3.10002 19.6436 3 19.402 3 19.15V3.95001C3 3.69802 3.10002 3.45647 3.27832 3.27832C3.45644 3.10002 3.69801 3 3.95001 3L21.05 3.00001ZM21.05 12.5C21.302 12.5 21.5435 12.6 21.7217 12.7783C21.9 12.9565 22 13.198 22 13.45V19.15C22 19.402 21.9 19.6436 21.7217 19.8217C21.5436 20 21.302 20.1 21.05 20.1H13.45C13.198 20.1 12.9564 20 12.7783 19.8217C12.6 19.6436 12.5 19.402 12.5 19.15V13.45C12.5 13.198 12.6 12.9565 12.7783 12.7783C12.9564 12.6 13.198 12.5 13.45 12.5H21.05ZM7.47178 6.12823L9.60928 8.26572L11.5501 6.32492V11.5499H6.32509L8.26589 9.60911L6.12839 7.47161L7.47178 6.12823Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
-const buttonHtml$1 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n    <span><%= pipIcon %></span>\n</button>\n";
+const buttonHtml$1 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n    <%= pipIcon %>\n</button>\n";
 
 const VERSION$2 = '0.0.1';
 const T$7 = `plugins.pip`;
@@ -49628,6 +49645,11 @@ class PictureInPicture extends UICorePlugin {
             'click button': 'togglePictureInPicture',
         };
     }
+    get attributes() {
+        return {
+            'class': 'media-control-pip',
+        };
+    }
     get videoElement() {
         return this.core.activePlayback.el;
     }
@@ -49655,7 +49677,7 @@ class PictureInPicture extends UICorePlugin {
         this.$el.html(t({ pipIcon }));
         const mediaControl = this.core.getPlugin('media_control');
         if (mediaControl) {
-            mediaControl.getElement('pip')?.html(this.el);
+            mediaControl.putElement('pip', this.el);
         }
         return this;
     }
@@ -50606,7 +50628,6 @@ class SpinnerThreeBounce extends UIContainerPlugin {
     template = tmpl(spinnerHTML);
     hasFatalError = false;
     hasBuffering = false;
-    _showOnError = false;
     constructor(container) {
         super(container);
         this.listenTo(this.container, Events$1.CONTAINER_STATE_BUFFERING, this.onBuffering);
@@ -50617,9 +50638,6 @@ class SpinnerThreeBounce extends UIContainerPlugin {
         this.listenTo(this.container, Events$1.CONTAINER_ERROR, this.onError);
         this.listenTo(this.container, Events$1.CONTAINER_READY, this.render);
     }
-    showOnError() {
-        this._showOnError = true;
-    }
     onBuffering() {
         this.hasBuffering = true;
         this._show();
@@ -50636,27 +50654,17 @@ class SpinnerThreeBounce extends UIContainerPlugin {
     }
     onStop() {
         trace(`${T$4} onStop`, {
-            showOnError: this._showOnError,
             hasFatalError: this.hasFatalError,
         });
-        // if (!(this.hasFatalError && this._showOnError)) {
-        //   this._hide()
-        // }
         this._hide();
     }
     onError(e) {
         this.hasFatalError = e.code === PlaybackErrorCode.MediaSourceUnavailable;
         trace(`${T$4} onError`, {
             e,
-            showOnError: this._showOnError,
             hasFatalError: this.hasFatalError,
             error: e.code,
         });
-        // if (this._showOnError) {
-        //   this._show()
-        // } else {
-        //   this._hide()
-        // }
         this._hide();
     }
     /**
@@ -50702,18 +50710,15 @@ class SpinnerThreeBounce extends UIContainerPlugin {
      * @internal
      */
     render() {
-        // TODO control via sourcecontroller instead
-        const showOnStart = this.options.spinner?.showOnStart;
         trace(`${T$4} render`, {
             buffering: this.container.buffering,
-            showOnStart,
         });
         this.$el.html(this.template());
         this.el.firstElementChild?.addEventListener('animationiteration', () => {
             this.trigger(SpinnerEvents.SYNC);
         });
         this.container.$el.append(this.$el[0]);
-        if (showOnStart || this.container.buffering) {
+        if (this.container.buffering) {
             this._show();
         }
         else {
@@ -50830,7 +50835,6 @@ class SourceController extends CorePlugin {
     onCoreReady() {
         trace(`${T$3} onCoreReady`);
         this.core.getPlugin('error_screen')?.disable(); //  TODO test
-        // this.core.getPlugin('spinner')?.showOnError()
     }
     onActiveContainerChanged() {
         trace(`${T$3} onActiveContainerChanged`, {