@gcorevideo/player 2.25.6 → 2.25.8

package/dist/index.js

@@ -12680,7 +12680,7 @@ var PlaybackEvents;
 // https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
 const AUTO$1 = -1;
 const { now: now$2 } = Utils;
-const T$p = 'playback.dash';
+const T$o = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = null;
     _currentLevel = null;
@@ -12954,10 +12954,10 @@ class DashPlayback extends BasePlayback {
     }
     _onPlaybackError = (event) => {
         // TODO
-        trace(`${T$p} _onPlaybackError`, { event });
+        trace(`${T$o} _onPlaybackError`, { event });
     };
     _onDASHJSSError = (event) => {
-        trace(`${T$p} _onDASHJSSError`, { event });
+        trace(`${T$o} _onDASHJSSError`, { event });
         this._stopTimeUpdateTimer();
         // Note that the other error types are deprecated
         const e = event.error;
@@ -12992,7 +12992,7 @@ class DashPlayback extends BasePlayback {
         }
     };
     triggerError(error) {
-        trace(`${T$p} triggerError`, { error });
+        trace(`${T$o} triggerError`, { error });
         // this triggers Events.ERROR to be handled by the UI
         this.trigger(Events$1.PLAYBACK_ERROR, this.createError(error, {
             useCodePrefix: false,
@@ -13031,10 +13031,10 @@ class DashPlayback extends BasePlayback {
     }
     get dvrEnabled() {
         if (!this._dash) {
-            trace(`${T$p} dvrEnable no dash player instance`);
+            trace(`${T$o} dvrEnable no dash player instance`);
             return false;
         }
-        trace(`${T$p} get.dvrEnabled`, {
+        trace(`${T$o} get.dvrEnabled`, {
             dvrWindowSize: this._dash?.getDVRWindowSize(),
             minDvrSize: this._minDvrSize,
             playbackType: this.getPlaybackType(),
@@ -13056,7 +13056,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_PROGRESS, progress, {});
     }
     play() {
-        trace(`${T$p} play`, { dash: !!this._dash });
+        trace(`${T$o} play`, { dash: !!this._dash });
         !this._dash && this._setup();
         super.play();
         this._startTimeUpdateTimer();
@@ -13142,7 +13142,7 @@ class DashPlayback extends BasePlayback {
     }
     // @ts-expect-error
     get currentAudioTrack() {
-        trace(`${T$p} get currentAudioTrack`);
+        trace(`${T$o} get currentAudioTrack`);
         assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized');
         const t = this._dash.getCurrentTrackFor('audio');
         if (!t) {
@@ -41850,7 +41850,7 @@ const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$o = 'playback.hls';
+const T$n = 'playback.hls';
 class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
     _ccTracksUpdated = false;
@@ -42082,7 +42082,7 @@ class HlsPlayback extends BasePlayback {
             maxMaxBufferLength: 4,
             autoStartLoad: false,
         }, this.options.playback.hlsjsConfig);
-        trace(`${T$o} _createHLSInstance`, { config });
+        trace(`${T$n} _createHLSInstance`, { config });
         this._hls = new Hls(config);
     }
     _attachHLSMedia() {
@@ -42175,7 +42175,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$o} _recover failed to recover`, {
+            trace(`${T$n} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42261,7 +42261,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$o} _onHLSJSError`, {
+        trace(`${T$n} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -42309,7 +42309,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$o} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$n} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -42322,7 +42322,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$o} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$n} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -42352,7 +42352,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$o} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$n} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42686,11 +42686,11 @@ class HlsPlayback extends BasePlayback {
         this._hls.audioTrack = Number(id); // TODO or find index by .id == id?
     }
     _onAudioTracksUpdated(_, data) {
-        trace(`${T$o} onAudioTracksUpdated`);
+        trace(`${T$n} onAudioTracksUpdated`);
         this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack));
     }
     _onAudioTrackSwitched(_, data) {
-        trace(`${T$o} onAudioTrackSwitched`);
+        trace(`${T$n} onAudioTrackSwitched`);
         // @ts-ignore
         const track = this._hls.audioTracks[data.id];
         this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
@@ -42711,7 +42711,7 @@ function toClapprTrack(t) {
     };
 }
 
-const T$n = 'playback.html5_video';
+const T$m = 'playback.html5_video';
 const STALL_TIMEOUT = 15000;
 class HTML5Video extends BasePlayback {
     stallTimerId = null;
@@ -42719,7 +42719,7 @@ class HTML5Video extends BasePlayback {
      * @internal
      */
     createError(errorData, options) {
-        trace(`${T$n} createError`, {
+        trace(`${T$m} createError`, {
             errorData: { ...errorData },
         });
         const i18n = this.i18n ||
@@ -42735,11 +42735,11 @@ class HTML5Video extends BasePlayback {
         return super.createError(errorData, { ...options, useCodePrefix: false });
     }
     _onWaiting() {
-        trace(`${T$n} _onWaiting`);
+        trace(`${T$m} _onWaiting`);
         super._onWaiting();
     }
     _onEnded() {
-        trace(`${T$n} _onEnded`);
+        trace(`${T$m} _onEnded`);
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
             this.stallTimerId = null;
@@ -42747,12 +42747,12 @@ class HTML5Video extends BasePlayback {
         super._onEnded();
     }
     _handleBufferingEvents() {
-        trace(`${T$n} _handleBufferingEvents`, {
+        trace(`${T$m} _handleBufferingEvents`, {
             networkState: this.el.networkState,
         });
         if (!this.stallTimerId) {
             this.stallTimerId = setTimeout(() => {
-                trace(`${T$n} _handleBufferingEvents stall timeout`, {
+                trace(`${T$m} _handleBufferingEvents stall timeout`, {
                     buffering: this.buffering,
                     ended: this.ended,
                 });
@@ -42770,7 +42770,7 @@ class HTML5Video extends BasePlayback {
         super._handleBufferingEvents();
     }
     _onPlaying() {
-        trace(`${T$n} _onPlaying`);
+        trace(`${T$m} _onPlaying`);
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
             this.stallTimerId = null;
@@ -42778,7 +42778,7 @@ class HTML5Video extends BasePlayback {
         super._onPlaying();
     }
     _onPause() {
-        trace(`${T$n} _onPause`);
+        trace(`${T$m} _onPause`);
         super._onPause();
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
@@ -42788,7 +42788,7 @@ class HTML5Video extends BasePlayback {
     get audioTracks() {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$n} get audioTracks`, { supported });
+        trace(`${T$m} get audioTracks`, { supported });
         const retval = [];
         if (supported) {
             for (let i = 0; i < tracks.length; i++) {
@@ -42807,7 +42807,7 @@ class HTML5Video extends BasePlayback {
     get currentAudioTrack() {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$n} get currentAudioTrack`, {
+        trace(`${T$m} get currentAudioTrack`, {
             supported,
         });
         if (supported) {
@@ -42828,7 +42828,7 @@ class HTML5Video extends BasePlayback {
     switchAudioTrack(id) {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$n} switchAudioTrack`, {
+        trace(`${T$m} switchAudioTrack`, {
             supported,
         });
         if (supported) {
@@ -42847,7 +42847,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$m = 'gplayer';
+const T$l = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -42935,7 +42935,7 @@ class Player {
      * ```
      */
     attachTo(playerElement) {
-        trace(`${T$m} attachTo`, {
+        trace(`${T$l} attachTo`, {
             player: !!this.player,
         });
         assert.ok(!this.player, 'Player already initialized');
@@ -42945,7 +42945,7 @@ class Player {
         }
         const coreOpts = this.buildCoreOptions(playerElement);
         const { core, container } = Player.getRegisteredPlugins();
-        trace(`${T$m} init`, {
+        trace(`${T$l} init`, {
             registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.prototype.name),
         });
         coreOpts.plugins = {
@@ -42959,7 +42959,7 @@ class Player {
      * Destroys the player, releasing all resources and unmounting its UI from the DOM.
      */
     destroy() {
-        trace(`${T$m} destroy`, {
+        trace(`${T$l} destroy`, {
             player: !!this.player,
         });
         if (this.player) {
@@ -43146,7 +43146,7 @@ class Player {
         this.config = $.extend(true, this.config, config);
     }
     initPlayer(coreOptions) {
-        trace(`${T$m} initPlayer`, {
+        trace(`${T$l} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
             player: !!this.player,
@@ -43171,7 +43171,7 @@ class Player {
         }
     }
     triggerAutoPlay() {
-        trace(`${T$m} triggerAutoPlay`);
+        trace(`${T$l} triggerAutoPlay`);
         setTimeout(() => {
             this.player?.play({
                 autoPlay: true,
@@ -43189,7 +43189,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$m} onReady`, {
+            trace(`${T$l} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -43223,7 +43223,7 @@ class Player {
     buildCoreOptions(rootNode) {
         const sources = this.buildMediaSourcesList();
         const source = sources[0];
-        trace(`${T$m} buildCoreOptions`, {
+        trace(`${T$l} buildCoreOptions`, {
             source,
             sources,
         });
@@ -43284,7 +43284,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$m} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+            trace(`${T$l} on CORE_SCREEN_ORIENTATION_CHANGED`, {
                 orientation,
                 rootNode: {
                     width: this.rootNode?.clientWidth,
@@ -43299,14 +43299,14 @@ class Player {
             }
         }, null);
         core.on(Events$1.CORE_RESIZE, ({ width, height }) => {
-            trace(`${T$m} on CORE_RESIZE`, {
+            trace(`${T$l} on CORE_RESIZE`, {
                 width,
                 height,
             });
             this.safeTriggerEvent(PlayerEvent.Resize, { width, height });
         }, null);
         core.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
-            trace(`${T$m} CORE_FULLSCREEN`, {
+            trace(`${T$l} CORE_FULLSCREEN`, {
                 isFullscreen,
             });
             this.safeTriggerEvent(PlayerEvent.Fullscreen, isFullscreen);
@@ -43314,7 +43314,7 @@ class Player {
     }
 }
 
-var version$1 = "2.25.6";
+var version$1 = "2.25.8";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43338,7 +43338,7 @@ function version() {
     };
 }
 
-const pluginHtml$6 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"><%= icon %></span>\n</button>\n<ul class='gcore-skin-bg-color menu hidden' id=\"audiotracks-select\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
+const pluginHtml$6 = "<button class='gcore-skin-button-color media-control-dd' id=\"gplayer-audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n    <span class=\"media-control-dd__text\" id=\"gplayer-audiotracks-button-text\"><%= title %></span>\n    <span class=\"media-control-dd__arrow\"><%= icon %></span>\n</button>\n<ul class=\"gcore-skin-bg-color menu media-control-dd__popup\" id=\"gplayer-audiotracks-menu\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class=\"gcore-skin-text-color\" data-item=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\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";
 
@@ -43632,6 +43632,7 @@ const STANDARD_MEDIA_CONTROL_ELEMENTS = [
     'seekbar',
     'volume',
 ];
+const MENU_VMARGIN = 12;
 // TODO export
 const DEFAULT_SETTINGS = {
     default: ['seekbar'],
@@ -43649,7 +43650,7 @@ const INITIAL_SETTINGS = {
     default: [],
     seekEnabled: false,
 };
-const T$l = 'plugins.media_control';
+const T$k = 'plugins.media_control';
 /**
  * Extended events for the {@link MediaControl} plugin
  * @beta
@@ -43931,7 +43932,7 @@ class MediaControl extends UICorePlugin {
      * Hides the media control UI
      */
     disable() {
-        trace(`${T$l} disable`);
+        trace(`${T$k} disable`);
         this.userDisabled = true; // TODO distinguish between user and system (e.g., unplayable) disabled?
         this.hide();
         this.unbindKeyEvents();
@@ -43941,7 +43942,7 @@ class MediaControl extends UICorePlugin {
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable() {
-        trace(`${T$l} enable`);
+        trace(`${T$k} enable`);
         if (this.options.chromeless) {
             return;
         }
@@ -43958,6 +43959,12 @@ class MediaControl extends UICorePlugin {
     getAvailableHeight() {
         return (this.core.$el.height() - this.$el.find('.media-control-layer').height());
     }
+    /**
+     * @returns Vertical space available to render a popup menu
+     */
+    getAvailablePopupHeight() {
+        return this.getAvailableHeight() - MENU_VMARGIN * 2;
+    }
     /**
      * Set the initial volume, which is preserved when playback is interrupted by an advertisement
      */
@@ -44490,7 +44497,7 @@ class MediaControl extends UICorePlugin {
         const panel = this.getElementLocation(name);
         if (panel) {
             element.attr(`data-${name}`, '');
-            element.addClass('gplayer-mc-panel-item');
+            element.addClass('media-control-item');
             mountTo(panel, element);
         }
     }
@@ -44871,7 +44878,7 @@ function mergeElements(a, b) {
 }
 
 const VERSION$7 = '2.22.4';
-const T$k = 'plugins.audiotracks';
+// const T = 'plugins.audiotracks'
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
@@ -44884,6 +44891,7 @@ const T$k = 'plugins.audiotracks';
  */
 class AudioTracks extends UICorePlugin {
     currentTrack = null;
+    open = false;
     tracks = [];
     /**
      * @internal
@@ -44909,7 +44917,7 @@ class AudioTracks extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: 'media-control-audiotracks',
+            class: 'media-control-audiotracks media-control-dd__wrap',
         };
     }
     /**
@@ -44917,8 +44925,8 @@ class AudioTracks extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-audiotracks-select]': 'onTrackSelect',
-            'click #audiotracks-button': 'toggleMenu',
+            'click #gplayer-audiotracks-menu [data-item]': 'onTrackSelect',
+            'click #gplayer-audiotracks-button': 'toggleMenu',
         };
     }
     /**
@@ -44932,8 +44940,9 @@ class AudioTracks extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, () => {
-            mediaControl.slot('audiotracks', this.$el);
+            this.mount();
         });
+        // TODO when tracks change, re-render and re-attach
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideMenu);
         this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
             if (from !== this.name) {
@@ -44948,6 +44957,7 @@ class AudioTracks extends UICorePlugin {
                 tracks.find((track) => track.kind === 'main') ?? null; // TODO test
             this.tracks = tracks;
             this.render();
+            this.mount();
         });
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_CHANGED, (track) => {
             this.currentTrack = track;
@@ -44955,6 +44965,10 @@ class AudioTracks extends UICorePlugin {
             this.buttonElement().removeClass('changing');
             this.updateText();
         });
+        // TODO test
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => {
+            this.hideMenu();
+        });
     }
     shouldRender() {
         // Render is called from the parent class constructor so tracks aren't available
@@ -44965,21 +44979,19 @@ class AudioTracks extends UICorePlugin {
      * @internal
      */
     render() {
-        if (!this.shouldRender()) {
-            return this;
-        }
         this.$el.html(AudioTracks.template({
-            tracks: this.tracks,
+            tracks: this.tracks ?? [],
             title: this.getTitle(),
             icon: audioArrow,
             current: this.currentTrack?.id,
         }));
+        this.$el.find('#gplayer-audiotracks-menu').hide();
         this.updateText();
         this.highlightCurrentTrack();
         return this;
     }
     onTrackSelect(event) {
-        const id = event.currentTarget?.dataset?.audiotracksSelect;
+        const id = event.currentTarget?.dataset?.item;
         if (id) {
             this.selectAudioTrack(id);
         }
@@ -44993,25 +45005,34 @@ class AudioTracks extends UICorePlugin {
         this.updateText();
     }
     hideMenu() {
-        trace(`${T$k} hideMenu`);
-        this.$el.find('#audiotracks-select').addClass('hidden');
-        this.$el.find('#audiotracks-button').attr('aria-expanded', 'false');
+        this.open = false;
+        this.$el.find('#gplayer-audiotracks-menu').hide();
+        this.$el.find('#gplayer-audiotracks-button').attr('aria-expanded', 'false');
     }
     toggleMenu() {
-        this.core.getPlugin('media_control').trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
-        this.$el.find('#audiotracks-select').toggleClass('hidden'); // TODO use plain CSS display: none
-        const open = !this.$el.find('#audiotracks-select').hasClass('hidden'); // TODO hold state
-        this.$el.find('#audiotracks-button').attr('aria-expanded', open);
+        this.open = !this.open;
+        this.core
+            .getPlugin('media_control')
+            .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
+        if (this.open) {
+            this.$el.find('#gplayer-audiotracks-menu').show();
+        }
+        else {
+            this.$el.find('#gplayer-audiotracks-menu').hide();
+        }
+        this.$el
+            .find('#gplayer-audiotracks-button')
+            .attr('aria-expanded', this.open);
     }
     buttonElement() {
-        return this.$('button');
+        return this.$('#gplayer-audiotracks-button');
     }
     buttonElementText() {
-        return this.$('button .audio-text');
+        return this.$el.find('#gplayer-audiotracks-button-text');
     }
     trackElement(id) {
-        return this.$('#audiotracks-select a' +
-            (id !== undefined ? `[data-audiotracks-select="${id}"]` : '')).parent();
+        return this.$('#gplayer-audiotracks-menu a' +
+            (id !== undefined ? `[data-item="${id}"]` : '')).parent();
     }
     getTitle() {
         if (!this.currentTrack) {
@@ -45042,6 +45063,11 @@ class AudioTracks extends UICorePlugin {
                 .attr('aria-checked', 'true');
         }
     }
+    mount() {
+        if (this.shouldRender()) {
+            this.core.getPlugin('media_control')?.slot('audiotracks', this.$el);
+        }
+    }
 }
 
 const templateHtml$2 = "<div class=\"big-mute-icon-wrapper\" data-big-mute id=\"gplayer-big-mute-button\">\n    <div class=\"big-mute-icon gcore-skin-border-color\" data-big-mute-icon id=\"gplayer-big-mute-icon\"></div>\n</div>\n";
@@ -45195,7 +45221,6 @@ const gearHdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\
 
 const VERSION$6 = '2.19.12';
 const T$i = 'plugins.bottom_gear';
-const MENU_VMARGIN = 12;
 const MENU_BACKLINK_HEIGHT = 44;
 /**
  * Events triggered by the plugin
@@ -45360,7 +45385,7 @@ class BottomGear extends UICorePlugin {
                 .appendTo(this.$el.find('#gear-options-wrapper'));
             $item.on('click', (e) => {
                 e.stopPropagation();
-                this.alignSubmenu($subMenu);
+                this.clampPopup($subMenu);
                 $subMenu.show();
                 this.$el.find('#gear-options').hide();
             });
@@ -45457,9 +45482,8 @@ class BottomGear extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         mediaControl.slot('gear', this.$el);
     }
-    alignSubmenu($subMenu) {
-        const availableHeight = this.core.getPlugin('media_control').getAvailableHeight() -
-            MENU_VMARGIN * 2;
+    clampPopup($subMenu) {
+        const availableHeight = this.core.getPlugin('media_control').getAvailablePopupHeight();
         $subMenu.css('max-height', `${availableHeight}px`);
         $subMenu
             .find('.gear-sub-menu')
@@ -51608,9 +51632,9 @@ const subtitlesOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
 
 const subtitlesOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M16.238 16.1C13.979 16.1 12.578 14.538 12.578 11.997C12.578 9.462 13.973 7.9 16.238 7.9C18.087 7.9 19.5029 9.127 19.6219 10.824H18.032C17.876 9.927 17.168 9.338 16.238 9.338C15.011 9.338 14.249 10.354 14.249 11.997C14.249 13.641 15.011 14.662 16.243 14.662C17.178 14.662 17.881 14.111 18.038 13.251H19.627C19.492 14.938 18.119 16.1 16.238 16.1ZM8.03198 16.1C5.77298 16.1 4.37299 14.538 4.37299 11.997C4.37299 9.462 5.76798 7.9 8.03198 7.9C9.88098 7.9 11.298 9.127 11.416 10.824H9.82697C9.67097 9.927 8.96198 9.338 8.03198 9.338C6.80598 9.338 6.04297 10.354 6.04297 11.997C6.04297 13.641 6.80596 14.662 8.03796 14.662C8.97296 14.662 9.67601 14.111 9.83301 13.251H11.422C11.287 14.938 9.91398 16.1 8.03198 16.1ZM22.5 3H1.5C0.672 3 0 3.671 0 4.5V19.5C0 20.329 0.672 21 1.5 21H22.5C23.329 21 24 20.329 24 19.5V4.5C24 3.671 23.329 3 22.5 3Z\"\n    fill=\"#C9C9C9\"/>\n  <rect y=\"22\" width=\"24\" height=\"2\" rx=\"1\" fill=\"#F6413B\"/>\n</svg>\n";
 
-const comboboxHTML = "<button data-cc-button class='media-control-button media-control-icon gcore-skin-button-color' id=\"cc-button\">\n    <span class='cc-text'></span>\n</button>\n\n<ul class='gcore-skin-bg-color' id=\"cc-select\">\n    <% for (const t of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-cc-select=\"<%= t.id %>\">\n                <%= t.name %>\n            </a>\n        </li>\n    <% } %>\n    <li><a href=\"#\" class='gcore-skin-text-color' data-cc-select=\"-1\"><%= i18n.t('off') %></a></li>\n</ul>\n";
+const comboboxHTML = "<button\n    class='media-control-button media-control-icon gcore-skin-button-color media-control-dd'\n    id=\"gplayer-cc-button\"\n    aria-haspopup=\"menu\"\n    aria-expanded=\"false\"\n    aria-controls=\"gplayer-cc-menu\"\n>\n</button>\n\n<ul class='gcore-skin-bg-color media-control-dd__popup' id=\"gplayer-cc-menu\" role=\"menu\">\n    <% for (const t of tracks) { %>\n        <li>\n            <a\n                href=\"#\"\n                class=\"gcore-skin-text-color\"\n                data-item=\"<%= t.id %>\"\n                role=\"menuitemradio\"\n                aria-checked=\"<%= t.id === current %>\"\n            >\n                <%= t.name %>\n            </a>\n        </li>\n    <% } %>\n    <li class=\"current\">\n        <a\n            href=\"#\"\n            class='gcore-skin-text-color gcore-skin-active'\n            data-item=\"-1\"\n            role=\"menuitemradio\"\n            aria-checked=\"<%= current === -1 %>\"\n        >\n            <%= i18n.t('off') %>\n        </a>\n    </li>\n</ul>";
 
-const stringHTML = "<div class=\"cc-line\" id=\"cc-line\">\n  <p></p>\n</div>\n";
+const stringHTML = "<div class=\"gplayer-cc-line\" id=\"gplayer-cc-line\">\n  <p></p>\n</div>\n";
 
 const VERSION = '2.19.14';
 const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
@@ -51645,6 +51669,7 @@ const T$3 = 'plugins.cc';
 class ClosedCaptions extends UICorePlugin {
     isPreselectedApplied = false;
     active = false;
+    open = false;
     track = null;
     tracks = [];
     $line = null;
@@ -51666,14 +51691,14 @@ class ClosedCaptions extends UICorePlugin {
     static get version() {
         return VERSION;
     }
-    static template = tmpl(comboboxHTML);
-    static templateString = tmpl(stringHTML);
+    static templateControl = tmpl(comboboxHTML);
+    static templateLine = tmpl(stringHTML);
     /**
      * @internal
      */
     get attributes() {
         return {
-            class: 'media-control-cc',
+            class: 'media-control-cc media-control-dd__wrap',
         };
     }
     /**
@@ -51681,8 +51706,8 @@ class ClosedCaptions extends UICorePlugin {
      */
     get events() {
         return {
-            'click #cc-select li a': 'onItemSelect',
-            'click #cc-button': 'toggleMenu',
+            'click #gplayer-cc-menu [data-item]': 'onItemSelect',
+            'click #gplayer-cc-button': 'toggleMenu',
         };
     }
     get preselectedLanguage() {
@@ -51699,10 +51724,9 @@ class ClosedCaptions extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
     }
     onCoreReady() {
-        trace(`${T$3} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render); // TODO mount to media control
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mount);
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, () => {
             this.hideMenu();
         });
@@ -51713,11 +51737,14 @@ class ClosedCaptions extends UICorePlugin {
         });
     }
     onContainerChanged() {
-        trace(`${T$3} onContainerChanged`);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_FULLSCREEN, this.playerResize);
         this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_SUBTITLE_AVAILABLE, this.onSubtitleAvailable);
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_SUBTITLE_CHANGED, this.onSubtitleChanged);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => {
+            // TODO test
+            this.hideMenu();
+        });
         // fix for iOS
         const video = this.core.activePlayback.el;
         assert(video, 'video element is required');
@@ -51735,6 +51762,7 @@ class ClosedCaptions extends UICorePlugin {
     onSubtitleAvailable() {
         trace(`${T$3} onSubtitleAvailable`);
         this.applyTracks();
+        this.mount();
     }
     onSubtitleChanged({ id }) {
         trace(`${T$3} onSubtitleChanged`, { id });
@@ -51799,6 +51827,7 @@ class ClosedCaptions extends UICorePlugin {
         }
         try {
             this.resizeFont();
+            this.clampPopup();
         }
         catch (error) {
             reportError(error);
@@ -51809,7 +51838,10 @@ class ClosedCaptions extends UICorePlugin {
      */
     hide() {
         this.active = false;
+        this.open = false;
         this.renderIcon();
+        this.$el.find('#gplayer-cc-menu').hide();
+        this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false');
         this.$line.hide();
         if (this.tracks) {
             for (const t of this.tracks) {
@@ -51852,17 +51884,18 @@ class ClosedCaptions extends UICorePlugin {
         if (!this.core.activeContainer) {
             return this;
         }
-        if (!this.shouldRender()) {
-            return this;
-        }
-        const mediaControl = this.core.getPlugin('media_control');
-        this.$el.html(ClosedCaptions.template({ tracks: this.tracks, i18n: this.core.i18n }));
-        this.$el.find('#cc-select').hide();
-        this.core.activeContainer.$el.find('#cc-line').remove();
-        this.$line = $(ClosedCaptions.templateString());
+        this.$el.html(ClosedCaptions.templateControl({
+            tracks: this.tracks ?? [],
+            i18n: this.core.i18n,
+            current: this.track?.id ?? -1,
+        }));
+        this.$el.find('#gplayer-cc-menu').hide();
+        this.open = false;
+        this.core.activeContainer.$el.find('#gplayer-cc-line').remove();
+        this.$line = $(ClosedCaptions.templateLine());
         this.resizeFont();
+        this.clampPopup();
         this.core.activeContainer.$el.append(this.$line);
-        mediaControl.slot('cc', this.$el);
         this.updateSelection();
         this.renderIcon();
         return this;
@@ -51876,9 +51909,10 @@ class ClosedCaptions extends UICorePlugin {
         this.updateSelection();
     }
     onItemSelect(event) {
-        const id = event.target.dataset.ccSelect ?? '-1';
-        trace(`${T$3} onItemSelect`, { id });
-        localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
+        // event.target does not exist for some reason in tests
+        const id = (event.target ?? event.currentTarget).dataset?.item ??
+            '-1';
+        localStorage.setItem(LOCAL_STORAGE_CC_ID, id); // TODO store language instead
         this.selectItem(this.findById(Number(id)));
         this.hideMenu();
         return false;
@@ -51895,26 +51929,33 @@ class ClosedCaptions extends UICorePlugin {
         }
     }
     hideMenu() {
-        trace(`${T$3} hideMenu`);
-        this.$el.find('#cc-select').hide();
+        this.open = false;
+        this.$el.find('#gplayer-cc-menu').hide();
+        this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false');
     }
     toggleMenu() {
-        trace(`${T$3} toggleMenu`, { display: this.$el.find('#cc-select').css('display') });
         this.core
             .getPlugin('media_control')
             .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
-        this.$el.find('#cc-select').toggle();
-        // TODO hold state, add aria-expanded to the button, add active state to the button
+        this.open = !this.open;
+        if (this.open) {
+            this.$el.find('#gplayer-cc-menu').show();
+        }
+        else {
+            this.$el.find('#gplayer-cc-menu').hide();
+        }
+        this.$el.find('#gplayer-cc-button').attr('aria-expanded', this.open);
     }
     itemElement(id) {
-        return this.$el.find(`#cc-select li a[data-cc-select="${id}"]`).parent();
+        // TODO fix semantically
+        return this.$el.find(`#gplayer-cc-menu [data-item="${id}"]`).parent();
     }
     allItemElements() {
-        return this.$('#cc-select li');
+        return this.$el.find('#gplayer-cc-menu li'); // TODO fix semantically
     }
     selectSubtitles() {
         const trackId = this.track ? this.track.id : -1;
-        this.core.activePlayback.closedCaptionsTrackId = trackId;
+        this.core.activePlayback.closedCaptionsTrackId = trackId; // TODO test
     }
     getSubtitleText(track) {
         const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
@@ -51924,6 +51965,7 @@ class ClosedCaptions extends UICorePlugin {
             for (const cue of cues) {
                 if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
                     lines.push(cue.getCueAsHTML().textContent);
+                    // TODO break?
                 }
             }
         }
@@ -51949,19 +51991,31 @@ class ClosedCaptions extends UICorePlugin {
         this.allItemElements()
             .removeClass('current')
             .find('a')
-            .removeClass('gcore-skin-active');
-        trace(`${T$3} highlightCurrentSubtitles`, {
-            track: this.track?.id,
-        });
+            .removeClass('gcore-skin-active')
+            .attr('aria-checked', 'false');
         const currentLevelElement = this.itemElement(this.track ? this.track.id : -1);
         currentLevelElement
             .addClass('current')
             .find('a')
-            .addClass('gcore-skin-active');
+            .addClass('gcore-skin-active')
+            .attr('aria-checked', 'true');
     }
     renderIcon() {
+        // render both icons at once
         const icon = this.active ? subtitlesOnIcon : subtitlesOffIcon;
-        this.$el.find('span.cc-text').html(icon);
+        this.$el.find('#gplayer-cc-button').html(icon);
+    }
+    clampPopup() {
+        const availableHeight = this.core
+            .getPlugin('media_control')
+            .getAvailablePopupHeight();
+        this.$el.find('#gplayer-cc-menu').css('max-height', `${availableHeight}px`);
+    }
+    mount() {
+        if (this.shouldRender()) {
+            const mediaControl = this.core.getPlugin('media_control');
+            mediaControl.slot('cc', this.$el);
+        }
     }
 }