@gcorevideo/player 2.25.6 → 2.25.8

package/dist/index.embed.js

@@ -12524,7 +12524,7 @@ var PlaybackEvents;
 // https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
 const AUTO$1 = -1;
 const { now: now$2 } = Utils;
-const T$e = 'playback.dash';
+const T$d = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = null;
     _currentLevel = null;
@@ -12873,7 +12873,7 @@ class DashPlayback extends BasePlayback {
         if (!this._dash) {
             return false;
         }
-        trace(`${T$e} get.dvrEnabled`, {
+        trace(`${T$d} get.dvrEnabled`, {
             dvrWindowSize: this._dash?.getDVRWindowSize(),
             minDvrSize: this._minDvrSize,
             playbackType: this.getPlaybackType(),
@@ -12895,7 +12895,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_PROGRESS, progress, {});
     }
     play() {
-        trace(`${T$e} play`, { dash: !!this._dash });
+        trace(`${T$d} play`, { dash: !!this._dash });
         !this._dash && this._setup();
         super.play();
         this._startTimeUpdateTimer();
@@ -41688,7 +41688,7 @@ const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$d = 'playback.hls';
+const T$c = 'playback.hls';
 class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
     _ccTracksUpdated = false;
@@ -42012,7 +42012,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$d} _recover failed to recover`, {
+            trace(`${T$c} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42098,7 +42098,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$d} _onHLSJSError`, {
+        trace(`${T$c} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -42146,7 +42146,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$d} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$c} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -42159,7 +42159,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$d} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$c} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -42189,7 +42189,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$d} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$c} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42546,7 +42546,7 @@ function toClapprTrack(t) {
     };
 }
 
-const T$c = 'playback.html5_video';
+const T$b = 'playback.html5_video';
 const STALL_TIMEOUT = 15000;
 class HTML5Video extends BasePlayback {
     stallTimerId = null;
@@ -42554,7 +42554,7 @@ class HTML5Video extends BasePlayback {
      * @internal
      */
     createError(errorData, options) {
-        trace(`${T$c} createError`, {
+        trace(`${T$b} createError`, {
             errorData: { ...errorData },
         });
         const i18n = this.i18n ||
@@ -42580,12 +42580,12 @@ class HTML5Video extends BasePlayback {
         super._onEnded();
     }
     _handleBufferingEvents() {
-        trace(`${T$c} _handleBufferingEvents`, {
+        trace(`${T$b} _handleBufferingEvents`, {
             networkState: this.el.networkState,
         });
         if (!this.stallTimerId) {
             this.stallTimerId = setTimeout(() => {
-                trace(`${T$c} _handleBufferingEvents stall timeout`, {
+                trace(`${T$b} _handleBufferingEvents stall timeout`, {
                     buffering: this.buffering,
                     ended: this.ended,
                 });
@@ -42671,7 +42671,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$b = 'gplayer';
+const T$a = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -42759,7 +42759,7 @@ class Player {
      * ```
      */
     attachTo(playerElement) {
-        trace(`${T$b} attachTo`, {
+        trace(`${T$a} attachTo`, {
             player: !!this.player,
         });
         assert.ok(!this.player, 'Player already initialized');
@@ -42769,7 +42769,7 @@ class Player {
         }
         const coreOpts = this.buildCoreOptions(playerElement);
         const { core, container } = Player.getRegisteredPlugins();
-        trace(`${T$b} init`, {
+        trace(`${T$a} init`, {
             registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.prototype.name),
         });
         coreOpts.plugins = {
@@ -42783,7 +42783,7 @@ class Player {
      * Destroys the player, releasing all resources and unmounting its UI from the DOM.
      */
     destroy() {
-        trace(`${T$b} destroy`, {
+        trace(`${T$a} destroy`, {
             player: !!this.player,
         });
         if (this.player) {
@@ -42970,7 +42970,7 @@ class Player {
         this.config = $.extend(true, this.config, config);
     }
     initPlayer(coreOptions) {
-        trace(`${T$b} initPlayer`, {
+        trace(`${T$a} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
             player: !!this.player,
@@ -43010,7 +43010,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$b} onReady`, {
+            trace(`${T$a} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -43100,7 +43100,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$b} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+            trace(`${T$a} on CORE_SCREEN_ORIENTATION_CHANGED`, {
                 rootNode: {
                     width: this.rootNode?.clientWidth,
                     height: this.rootNode?.clientHeight,
@@ -43134,9 +43134,7 @@ function insertStyle(css) {
 
 insertStyle("@import \"https://fonts.googleapis.com/css?family=Roboto\";\n:root {\n  --theme-background-color: rgb(0 0 0 / 70%);\n  --theme-text-color: rgb(255 255 255 / 100%);\n  --theme-foreground-color: rgb(201 201 201 / 100%);\n  --theme-hover-color: rgb(255 255 255 / 100%);\n}\n\n.gcore-skin-bg-color {\n  background-color: var(--theme-background-color) !important;\n}\n\n.gcore-skin-text-color {\n  color: var(--theme-text-color) !important;\n}\n\n.gcore-skin-text-color svg {\n  fill: var(--theme-text-color) !important;\n}\n\n.gcore-skin-text-color svg path {\n  fill: var(--theme-text-color) !important;\n}\n\n.gcore-skin-border-textarea-color {\n  border-color: var(--theme-text-color) !important;\n}\n\n.gcore-skin-button-color {\n  color: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg {\n  fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg path {\n  fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg path.icon-hover {\n  fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color[data-fullscreen] svg {\n  stroke: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color[data-fullscreen] svg path {\n  stroke: var(--theme-foreground-color) !important;\n}\n\n.gcore-skin-main-color {\n  background-color: var(--theme-foreground-color);\n}\n\n.gcore-skin-border-color {\n  border-color: var(--theme-foreground-color) !important;\n}\n\n.gcore-skin-button-color:hover {\n  color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-color:hover svg {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-color:hover svg path {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-border-color:hover {\n  border-color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-with-bg-color:hover svg path.icon-hover {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active {\n  color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active svg {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active svg path {\n  fill: var(--theme-hover-color) !important;\n}\n\n* {\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  user-select: none;\n}\n\n.player-poster {\n  background-size: contain !important;\n}\n\n.spinner-three-bounce > .gcore-skin-main-color {\n  box-shadow: 4px 4px 9px 1px rgba(36, 61, 81, 0.51);\n}\n\n.gplayer-lite-btn {\n  cursor: pointer;\n  border: none;\n  margin: 0;\n  padding: 0;\n  width: auto;\n  overflow: visible;\n  background: transparent;\n  /* inherit font & color from ancestor */\n  color: inherit;\n  font: inherit;\n  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */\n  line-height: normal;\n  /* Corrects font smoothing for webkit */\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  /* Corrects inability to style clickable `input` types in iOS */\n  appearance: none;\n  /* Remove excess padding and border in Firefox 4+ */\n}\n.gplayer-lite-btn::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}");
 
-const pluginHtml$4 = "<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";
-
-insertStyle("*,\n:focus,\n:visited {\n  outline: none !important;\n}\n\n.media-control-audiotracks {\n  position: relative;\n}\n.media-control-audiotracks button {\n  background-color: transparent;\n  color: #fff;\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  padding: 0;\n}\n.media-control-audiotracks button .audio-text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  max-width: 100px;\n  background-color: transparent;\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  cursor: pointer;\n}\n.media-control-audiotracks button:hover {\n  color: white;\n}\n.media-control-audiotracks button.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.media-control-audiotracks button span.audio-arrow {\n  width: 9px;\n  height: 6px;\n  margin-left: 5px;\n}\n.media-control-audiotracks .menu {\n  max-width: 114px;\n  list-style-type: none;\n  position: absolute;\n  background-color: rgba(74, 74, 74, 0.6);\n  border: none;\n  min-width: 60px;\n  border-radius: 4px;\n  bottom: 40px;\n  right: -2px;\n}\n.media-control-audiotracks .menu.hidden {\n  display: none;\n}\n.media-control-audiotracks li {\n  font-size: var(--font-size-media-controls-dropdown);\n  text-align: right;\n  height: 30px;\n}\n.media-control-audiotracks li[data-title] {\n  background-color: #c3c2c2;\n  padding: 5px;\n}\n.media-control-audiotracks li a {\n  display: block;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  height: 30px;\n  padding: 5px 10px;\n  color: #fffffe;\n}\n.media-control-audiotracks li a:hover {\n  text-decoration: none;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: white;\n}\n.media-control-audiotracks li.current a {\n  color: #f00;\n}\n.media-control-audiotracks li:first-child a {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.media-control-audiotracks li:last-child a {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}");
+const pluginHtml$4 = "<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";
 
@@ -43398,7 +43396,7 @@ const FullscreenIOS = {
     },
 };
 
-insertStyle("[data-player] {\n  --bottom-panel: 40px;\n}\n\n.container .media-control-notransition {\n  transition: none !important;\n}\n.container .player-poster .play-wrapper {\n  opacity: 1;\n}\n.container.crop-video [data-html5-video] {\n  object-fit: cover;\n}\n.container .cc-line {\n  position: absolute;\n  bottom: calc(var(--bottom-panel) + 5px);\n  width: 100%;\n}\n.container .cc-line p {\n  width: auto;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: white;\n  display: inline-block;\n}\n.container .player-poster .circle-poster {\n  top: 50%;\n  margin-top: -60px;\n  left: 50%;\n  margin-left: -60px;\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  border: 2px solid white;\n  border-radius: 50%;\n  filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n  filter: alpha(opacity=60);\n  opacity: 1;\n  box-shadow: 0 0 1px 0 white;\n}\n.container .player-poster .circle-poster svg {\n  margin-left: 5px;\n  width: 80px;\n}\n.container .spinner-three-bounce[data-spinner] > div {\n  background-color: #ff5700;\n}\n\n.media-control-skin-1.w270 .media-control-quality,\n.media-control-skin-1.w270 .media-control-audiotracks {\n  display: none;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  transform: rotate(270deg);\n  float: none;\n  display: block;\n  position: absolute;\n  /* bottom: 12px; */\n  margin: 0;\n  top: -40px;\n  padding: 0;\n  /* right: 20px; */\n  margin-left: -32px;\n  margin-top: -3px;\n  width: 80px;\n  /* padding-left: 12px; */\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: -5px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n  display: none;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {\n  margin-left: 11px;\n  top: 7px;\n  width: 80px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {\n  margin-left: 11px;\n  top: 1px;\n}\n\n.media-control-skin-1.w370 .media-control-cc {\n  width: 28px;\n}\n.media-control-skin-1.w370 .media-control-cc svg {\n  height: 17px;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container {\n  top: calc(50% - 150px);\n  left: calc(50% - 125px);\n  width: 250px;\n  height: calc(100% - 32px);\n  max-height: 300px;\n  transform: none;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container .share-container-header {\n  border: none;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {\n  visibility: hidden;\n}\n.media-control-skin-1.w370 .media-control-quality,\n.media-control-skin-1.w370 .media-control-audiotracks {\n  display: block;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] {\n  margin-top: 3px;\n  margin-right: 10px;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] ul {\n  bottom: 30px;\n  width: 50px;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] ul li {\n  height: 23px;\n  font-size: 14px;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] ul li a {\n  height: 23px;\n  padding: 2px 5px;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .quality-text,\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .audio-text {\n  font-size: 13px;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.quality-arrow,\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.audio-arrow {\n  width: 7px;\n  height: 5px;\n  margin-left: 4px;\n  margin-top: 11px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera {\n  margin-top: 0;\n  margin-right: 10px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button {\n  height: 32px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button svg {\n  height: 17px;\n  margin: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] {\n  padding-left: 10px;\n  padding-right: 12px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator {\n  line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n  font-size: 11px;\n  line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-button {\n  margin-left: 10px;\n  height: 32px;\n  font-size: 12px;\n  line-height: 32px;\n  text-shadow: none;\n  letter-spacing: 0.6px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-button::before {\n  width: 8px;\n  height: 8px;\n  margin-right: 4px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-info {\n  margin-left: 10px;\n  height: 32px;\n  font-size: 12px;\n  line-height: 32px;\n  text-shadow: none;\n  letter-spacing: 0.6px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-info::before {\n  width: 8px;\n  height: 8px;\n  margin-right: 4px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n  height: 33px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button svg {\n  height: 17px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n  line-height: 33px;\n  font-size: 11px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n  max-width: 50px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] {\n  height: 32px;\n  margin-right: 8px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n  height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n  height: 17px;\n  margin-top: 5px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  display: none;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n  width: 0;\n  height: 12px;\n  top: 9px;\n  padding: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-panel-item {\n  height: 32px;\n}\n\n:root {\n  --font-size-media-controls: 14px;\n  --font-size-media-controls-dropdown: 16px;\n  --player-vod-color: #005aff;\n  --player-dvr-color: #fff;\n  --player-live-color: #ff0101;\n  --player-seekbar-current-color: #ff5700;\n  --player-seekbar-buffer-color: #fff;\n  --gplayer-mc-text-color: #fff;\n  --gplayer-mc-popup-border-color: rgba(255, 255, 255, 0.1);\n}\n\n.media-control-skin-1 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n  pointer-events: none;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  font-size: var(--font-size-media-controls);\n}\n.media-control-skin-1.dragging {\n  pointer-events: auto;\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1.dragging * {\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1 .media-control-icon {\n  line-height: 0;\n  letter-spacing: 0;\n  speak: none;\n  color: var(--gplayer-mc-text-color);\n  vertical-align: middle;\n  text-align: left;\n  transition: all 0.1s ease;\n}\n.media-control-skin-1 .media-control-icon:hover {\n  color: white;\n}\n.media-control-skin-1.media-control-hide .media-control-background[data-background] {\n  opacity: 0;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] {\n  bottom: -50px;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {\n  opacity: 0;\n}\n.media-control-skin-1 .media-control-layer[data-controls] {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 0 12px 0 8px;\n  height: var(--bottom-panel);\n  vertical-align: middle;\n  pointer-events: auto;\n  transition: bottom 0.4s ease-out;\n  display: flex;\n  justify-content: space-between;\n}\n.media-control-skin-1 .media-control-left-panel {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  justify-content: flex-start;\n}\n.media-control-skin-1 .media-control-button,\n.media-control-skin-1 .media-control-indicator,\n.media-control-skin-1 .gplayer-mc-panel-item {\n  order: 50;\n}\n.media-control-skin-1 [data-playpause],\n.media-control-skin-1 [data-playstop] {\n  order: 1;\n}\n.media-control-skin-1 [data-volume] {\n  order: 2;\n}\n.media-control-skin-1 [data-position] {\n  order: 3;\n}\n.media-control-skin-1 [data-duration] {\n  order: 3;\n}\n.media-control-skin-1 .media-control-center-panel {\n  height: 100%;\n  text-align: center;\n  line-height: var(--bottom-panel);\n}\n.media-control-skin-1 .media-control-right-panel {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  justify-content: flex-end;\n}\n@media (max-width: 420px) {\n  .media-control-skin-1 .media-control-right-panel {\n    gap: 0.5rem;\n    overflow: hidden;\n  }\n}\n.media-control-skin-1 button.media-control-button {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  cursor: pointer;\n  display: inline-block;\n  height: 20px;\n  width: 24px;\n}\n.media-control-skin-1 button.media-control-button svg {\n  height: 20px;\n}\n.media-control-skin-1 button.media-control-button svg path {\n  fill: white;\n}\n.media-control-skin-1 button.media-control-button:focus {\n  outline: none;\n}\n.media-control-skin-1 button.media-control-button[data-play] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-pause] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-stop] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-fullscreen] {\n  order: 100;\n  background-color: transparent;\n  border: 0;\n  height: 40px;\n}\n.media-control-skin-1 button.media-control-button[data-hd-indicator] {\n  background-color: transparent;\n  border: 0;\n  cursor: default;\n  display: none !important;\n  float: right;\n  height: 100%;\n}\n.media-control-skin-1 .media-control-indicator[data-position], .media-control-skin-1 .media-control-indicator[data-duration] {\n  display: flex;\n  color: white;\n  cursor: default;\n  line-height: var(--bottom-panel);\n  position: relative;\n}\n.media-control-skin-1 .media-control-indicator[data-position] {\n  margin: 1px 0 0 7px;\n}\n.media-control-skin-1 .media-control-indicator[data-duration] {\n  color: rgb(255, 255, 255);\n  opacity: 0.5;\n  margin-top: 1px;\n  margin-right: 6px;\n}\n.media-control-skin-1 .media-control-indicator[data-duration]::before {\n  content: \"|\";\n  margin-right: 7px;\n}\n.media-control-skin-1 .bar-container[data-seekbar] {\n  position: absolute;\n  top: -11px;\n  left: 0;\n  display: inline-block;\n  vertical-align: middle;\n  width: 100%;\n  height: 20px;\n  cursor: pointer;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] {\n  width: 100%;\n  height: 3px;\n  position: relative;\n  top: 8px;\n  background-color: #666;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-seekbar-buffer-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-seekbar-current-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-container[data-seekbar].seek-disabled {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1 .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1 .bar-scrubber[data-seekbar] {\n  position: absolute;\n  transform: translateX(-50%);\n  top: -11.5px;\n  left: 0;\n  width: 20px;\n  height: 20px;\n  opacity: 1;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {\n  position: absolute;\n  left: 4.5px;\n  top: 4.5px;\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n  background-color: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] {\n  display: flex;\n  justify-content: flex-start;\n  height: var(--bottom-panel);\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n  bottom: 0;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n  background-color: transparent;\n  border: 0;\n  box-sizing: content-box;\n  height: var(--bottom-panel);\n  width: 20px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n  height: 20px;\n  position: relative;\n  top: 3px;\n  margin-top: 7px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n  fill: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {\n  margin-left: 2px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] {\n  position: relative;\n  margin-left: 10px;\n  top: 8px;\n  width: 80px;\n  height: 23px;\n  padding: 3px 0;\n  transition: width 0.2s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {\n  height: 3px;\n  border-radius: 100px;\n  position: relative;\n  top: 7px;\n  background-color: #666;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  border-radius: 100px;\n  background-color: white;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-vod-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {\n  position: absolute;\n  transform: translateX(-50%);\n  top: 3px;\n  margin-left: 3px;\n  width: 16px;\n  height: 16px;\n  opacity: 1;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {\n  position: absolute;\n  left: 3px;\n  top: 5px;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {\n  float: left;\n  width: 4px;\n  padding-left: 2px;\n  height: 12px;\n  opacity: 0.5;\n  box-shadow: inset 2px 0 0 white;\n  transition: transform 0.2s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {\n  box-shadow: inset 2px 0 0 #fff;\n  opacity: 1;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {\n  padding-left: 0;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n  transform: scaleY(1.5);\n}\n\n/* TODO distribute between plugins' styles */\n.media-control-skin-1 .seek-time {\n  height: 26px;\n  line-height: 26px;\n  bottom: 52px;\n  border-radius: 3px;\n  background-color: rgba(74, 74, 74, 0.7);\n}\n.media-control-skin-1 .seek-time span {\n  letter-spacing: 0.8px;\n  font-size: 14px;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n}\n.media-control-skin-1 .seek-time .seek-time__pos {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n@keyframes pulse {\n  0% {\n    color: #fff;\n  }\n  50% {\n    color: #ff0101;\n  }\n  100% {\n    color: #B80000;\n  }\n}");
+insertStyle("[data-player] {\n  --bottom-panel: 40px;\n}\n\n.container .media-control-notransition {\n  transition: none !important;\n}\n.container .player-poster .play-wrapper {\n  opacity: 1;\n}\n.container.crop-video [data-html5-video] {\n  object-fit: cover;\n}\n.container .player-poster .circle-poster {\n  top: 50%;\n  margin-top: -60px;\n  left: 50%;\n  margin-left: -60px;\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  border: 2px solid white;\n  border-radius: 50%;\n  filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n  filter: alpha(opacity=60);\n  opacity: 1;\n  box-shadow: 0 0 1px 0 white;\n}\n.container .player-poster .circle-poster svg {\n  margin-left: 5px;\n  width: 80px;\n}\n.container .spinner-three-bounce[data-spinner] > div {\n  background-color: #ff5700;\n}\n\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  transform: rotate(270deg);\n  float: none;\n  display: block;\n  position: absolute;\n  margin: 0;\n  top: -40px;\n  padding: 0;\n  margin-left: -32px;\n  margin-top: -3px;\n  width: 80px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: -5px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n  display: none;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {\n  margin-left: 11px;\n  top: 7px;\n  width: 80px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {\n  margin-left: 11px;\n  top: 1px;\n}\n.media-control-skin-1.w270 .media-control-dd__popup {\n  max-width: 114px;\n}\n\n.media-control-skin-1.w370 .media-control-cc {\n  width: 28px;\n}\n.media-control-skin-1.w370 .media-control-cc svg {\n  height: 17px;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container {\n  top: calc(50% - 150px);\n  left: calc(50% - 125px);\n  width: 250px;\n  height: calc(100% - 32px);\n  max-height: 300px;\n  transform: none;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container .share-container-header {\n  border: none;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {\n  visibility: hidden;\n}\n.media-control-skin-1.w370 .media-control-quality {\n  display: block;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera {\n  margin-top: 0;\n  margin-right: 10px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button {\n  height: 32px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button svg {\n  height: 17px;\n  margin: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] {\n  padding-left: 10px;\n  padding-right: 12px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator {\n  line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n  font-size: 11px;\n  line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-button {\n  margin-left: 10px;\n  height: 32px;\n  font-size: 12px;\n  line-height: 32px;\n  text-shadow: none;\n  letter-spacing: 0.6px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-button::before {\n  width: 8px;\n  height: 8px;\n  margin-right: 4px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-info {\n  margin-left: 10px;\n  height: 32px;\n  font-size: 12px;\n  line-height: 32px;\n  text-shadow: none;\n  letter-spacing: 0.6px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-info::before {\n  width: 8px;\n  height: 8px;\n  margin-right: 4px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n  height: 33px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button svg {\n  height: 17px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n  line-height: 33px;\n  font-size: 11px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n  max-width: 50px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] {\n  height: 32px;\n  margin-right: 8px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n  height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n  height: 17px;\n  margin-top: 5px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  display: none;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n  width: 0;\n  height: 12px;\n  top: 9px;\n  padding: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-item {\n  height: 32px;\n}\n.media-control-skin-1.w370 .media-control-dd__popup {\n  max-width: 150px;\n}\n\n:root {\n  --font-size-media-controls: 14px;\n  --font-size-media-controls-dropdown: 16px;\n  --gplayer-mc-font-size-dropdown: 16px;\n  --player-vod-color: #005aff;\n  --player-dvr-color: #fff;\n  --player-live-color: #ff0101;\n  --player-seekbar-current-color: #ff5700;\n  --player-seekbar-buffer-color: #fff;\n  --gplayer-mc-text-color: #fff;\n  --gplayer-mc-text-dim-color: #fffffe;\n  --gplayer-mc-popup-border-color: rgb(255 255 255 / 10%);\n  --gplayer-mc-popup-bg: rgb(74 74 74 / 60%);\n}\n\n.media-control-skin-1 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n  pointer-events: none;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  font-size: var(--font-size-media-controls);\n}\n.media-control-skin-1.dragging {\n  pointer-events: auto;\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1.dragging * {\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1 .media-control-icon {\n  line-height: 0;\n  letter-spacing: 0;\n  speak: none;\n  color: var(--gplayer-mc-text-color);\n  vertical-align: middle;\n  text-align: left;\n  transition: all 0.1s ease;\n}\n.media-control-skin-1 .media-control-icon:hover {\n  color: white;\n}\n.media-control-skin-1.media-control-hide .media-control-background[data-background] {\n  opacity: 0;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] {\n  bottom: -50px;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {\n  opacity: 0;\n}\n.media-control-skin-1 .media-control-layer[data-controls] {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 0 12px 0 8px;\n  height: var(--bottom-panel);\n  vertical-align: middle;\n  pointer-events: auto;\n  transition: bottom 0.4s ease-out;\n  display: flex;\n  justify-content: space-between;\n}\n.media-control-skin-1 .media-control-left-panel {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  justify-content: flex-start;\n}\n.media-control-skin-1 .media-control-button,\n.media-control-skin-1 .media-control-indicator,\n.media-control-skin-1 .media-control-item {\n  order: 50;\n}\n.media-control-skin-1 .media-control-item {\n  display: flex;\n  align-items: center;\n}\n.media-control-skin-1 [data-playpause],\n.media-control-skin-1 [data-playstop] {\n  order: 1;\n}\n.media-control-skin-1 [data-volume] {\n  order: 2;\n}\n.media-control-skin-1 [data-position] {\n  order: 3;\n}\n.media-control-skin-1 [data-duration] {\n  order: 3;\n}\n.media-control-skin-1 .media-control-center-panel {\n  height: 100%;\n  text-align: center;\n  line-height: var(--bottom-panel);\n}\n.media-control-skin-1 .media-control-right-panel {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  justify-content: flex-end;\n}\n@media (max-width: 420px) {\n  .media-control-skin-1 .media-control-right-panel {\n    gap: 0.5rem;\n  }\n}\n.media-control-skin-1 button.media-control-button {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  cursor: pointer;\n  display: inline-block;\n  height: 20px;\n  width: 24px;\n}\n.media-control-skin-1 button.media-control-button svg {\n  height: 20px;\n}\n.media-control-skin-1 button.media-control-button svg path {\n  fill: white;\n}\n.media-control-skin-1 button.media-control-button:focus {\n  outline: none;\n}\n.media-control-skin-1 button.media-control-button[data-play] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-pause] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-stop] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-fullscreen] {\n  order: 100;\n  background-color: transparent;\n  border: 0;\n  height: 40px;\n}\n.media-control-skin-1 button.media-control-button[data-hd-indicator] {\n  background-color: transparent;\n  border: 0;\n  cursor: default;\n  display: none !important;\n  float: right;\n  height: 100%;\n}\n.media-control-skin-1 .media-control-indicator[data-position], .media-control-skin-1 .media-control-indicator[data-duration] {\n  display: flex;\n  color: white;\n  cursor: default;\n  line-height: var(--bottom-panel);\n  position: relative;\n}\n.media-control-skin-1 .media-control-indicator[data-position] {\n  margin: 1px 0 0 7px;\n}\n.media-control-skin-1 .media-control-indicator[data-duration] {\n  color: rgb(255, 255, 255);\n  opacity: 0.5;\n  margin-top: 1px;\n  margin-right: 6px;\n}\n.media-control-skin-1 .media-control-indicator[data-duration]::before {\n  content: \"|\";\n  margin-right: 7px;\n}\n.media-control-skin-1 .bar-container[data-seekbar] {\n  position: absolute;\n  top: -11px;\n  left: 0;\n  display: inline-block;\n  vertical-align: middle;\n  width: 100%;\n  height: 20px;\n  cursor: pointer;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] {\n  width: 100%;\n  height: 3px;\n  position: relative;\n  top: 8px;\n  background-color: #666;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-seekbar-buffer-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-seekbar-current-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-container[data-seekbar].seek-disabled {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1 .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1 .bar-scrubber[data-seekbar] {\n  position: absolute;\n  transform: translateX(-50%);\n  top: -11.5px;\n  left: 0;\n  width: 20px;\n  height: 20px;\n  opacity: 1;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {\n  position: absolute;\n  left: 4.5px;\n  top: 4.5px;\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n  background-color: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] {\n  display: flex;\n  justify-content: flex-start;\n  height: var(--bottom-panel);\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n  bottom: 0;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n  background-color: transparent;\n  border: 0;\n  box-sizing: content-box;\n  height: var(--bottom-panel);\n  width: 20px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n  height: 20px;\n  position: relative;\n  top: 3px;\n  margin-top: 7px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n  fill: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {\n  margin-left: 2px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] {\n  position: relative;\n  margin-left: 10px;\n  top: 8px;\n  width: 80px;\n  height: 23px;\n  padding: 3px 0;\n  transition: width 0.2s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {\n  height: 3px;\n  border-radius: 100px;\n  position: relative;\n  top: 7px;\n  background-color: #666;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  border-radius: 100px;\n  background-color: white;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-vod-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {\n  position: absolute;\n  transform: translateX(-50%);\n  top: 3px;\n  margin-left: 3px;\n  width: 16px;\n  height: 16px;\n  opacity: 1;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {\n  position: absolute;\n  left: 3px;\n  top: 5px;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {\n  float: left;\n  width: 4px;\n  padding-left: 2px;\n  height: 12px;\n  opacity: 0.5;\n  box-shadow: inset 2px 0 0 white;\n  transition: transform 0.2s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {\n  box-shadow: inset 2px 0 0 #fff;\n  opacity: 1;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {\n  padding-left: 0;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n  transform: scaleY(1.5);\n}\n.media-control-skin-1 .seek-time {\n  height: 26px;\n  line-height: 26px;\n  bottom: 52px;\n  border-radius: 3px;\n  background-color: rgba(74, 74, 74, 0.7);\n}\n.media-control-skin-1 .seek-time span {\n  letter-spacing: 0.8px;\n  font-size: 14px;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n}\n.media-control-skin-1 .seek-time .seek-time__pos {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.media-control-skin-1 .media-control-dd {\n  display: flex;\n  height: 32px;\n  line-height: 32px;\n  align-items: baseline;\n  gap: 4px;\n  vertical-align: baseline;\n  padding: 0;\n  background-color: transparent;\n  color: var(--gplayer-mc-text-color);\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  cursor: pointer;\n}\n.media-control-skin-1 .media-control-dd__text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  max-width: 100px;\n}\n.media-control-skin-1 .media-control-dd.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.media-control-skin-1 .media-control-dd svg {\n  fill: var(--gplayer-mc-text-color);\n}\n.media-control-skin-1 .media-control-dd__arrow {\n  width: 9px;\n  height: 6px;\n}\n.media-control-skin-1 .media-control-dd__wrap {\n  position: relative;\n}\n.media-control-skin-1 .media-control-dd__popup {\n  max-width: 200px;\n  list-style-type: none;\n  position: absolute;\n  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n  border: none;\n  min-width: 60px;\n  border-radius: 4px;\n  bottom: 40px;\n  right: -2px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding: 5px 0;\n}\n.media-control-skin-1 .media-control-dd__popup li {\n  font-size: var(--gplayer-mc-font-size-dropdown);\n  text-align: right;\n  height: 30px;\n}\n.media-control-skin-1 .media-control-dd__popup li a {\n  display: block;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  padding: 5px 10px;\n  line-height: 20px;\n  color: #fffffe;\n}\n.media-control-skin-1 .media-control-dd__popup li a:hover {\n  text-decoration: none;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: var(--gplayer-mc-text-color);\n}\n.media-control-skin-1 .media-control-dd__popup li.current a {\n  color: #f00;\n}\n.media-control-skin-1 .media-control-dd__popup li:first-child a {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-dd__popup li:last-child a {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n\n@keyframes pulse {\n  0% {\n    color: #fff;\n  }\n  50% {\n    color: #ff0101;\n  }\n  100% {\n    color: #B80000;\n  }\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 renderMultiCamera = function(name) { %>\n        <div class=\"media-control-multicamera\" 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\" || setting === \"clips\") {\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 === \"vr\") {\n                renderVR(setting)\n            } else if ([\"playpause\", \"playstop\", \"fullscreen\"].includes(setting)) {\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";
 
@@ -43431,6 +43429,7 @@ const STANDARD_MEDIA_CONTROL_ELEMENTS = [
     'seekbar',
     'volume',
 ];
+const MENU_VMARGIN = 12;
 // TODO export
 const DEFAULT_SETTINGS = {
     default: ['seekbar'],
@@ -43754,6 +43753,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
      */
@@ -44285,7 +44290,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);
         }
     }
@@ -44666,6 +44671,7 @@ function mergeElements(a, b) {
 }
 
 const VERSION$6 = '2.22.4';
+// const T = 'plugins.audiotracks'
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
@@ -44678,6 +44684,7 @@ const VERSION$6 = '2.22.4';
  */
 class AudioTracks extends UICorePlugin {
     currentTrack = null;
+    open = false;
     tracks = [];
     /**
      * @internal
@@ -44703,7 +44710,7 @@ class AudioTracks extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: 'media-control-audiotracks',
+            class: 'media-control-audiotracks media-control-dd__wrap',
         };
     }
     /**
@@ -44711,8 +44718,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',
         };
     }
     /**
@@ -44726,8 +44733,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) {
@@ -44742,6 +44750,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;
@@ -44749,6 +44758,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
@@ -44759,21 +44772,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);
         }
@@ -44787,24 +44798,34 @@ class AudioTracks extends UICorePlugin {
         this.updateText();
     }
     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) {
@@ -44835,13 +44856,18 @@ 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";
 
 insertStyle(".big-mute-icon-wrapper[data-big-mute] {\n  position: absolute;\n  z-index: 9998;\n  background-color: transparent;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: calc(100% - 50px);\n  margin: 0 auto;\n  opacity: 0.75;\n  transition: opacity 0.1s ease;\n  pointer-events: auto;\n}\n.big-mute-icon-wrapper[data-big-mute].hide {\n  display: none;\n}\n.big-mute-icon-wrapper[data-big-mute]:hover {\n  cursor: pointer;\n}\n\n.big-mute-icon[data-big-mute-icon] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  width: 120px;\n  height: 120px;\n  border: 2px solid white;\n  border-radius: 50%;\n  filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n  filter: alpha(opacity=60);\n  opacity: 1;\n  box-shadow: 0 0 1px 0 white;\n  background: rgba(240, 243, 247, 0.9411764706);\n  z-index: 10000;\n}\n.big-mute-icon[data-big-mute-icon] svg {\n  margin-left: 5px;\n  width: 80px;\n  height: 80px;\n}\n.big-mute-icon[data-big-mute-icon] svg path {\n  fill: #1f1e1e !important;\n}\n.big-mute-icon[data-big-mute-icon]:hover {\n  background: rgba(240, 243, 247, 0.8784313725);\n}\n.big-mute-icon[data-big-mute-icon]:hover svg path {\n  fill: #151515 !important;\n}");
 
-const T$a = 'plugins.big_mute_button';
+const T$9 = 'plugins.big_mute_button';
 // TODO rewrite as a container plugin
 /**
  * `PLUGIN` that displays a big mute button over the video when it's being played muted.
@@ -44904,7 +44930,7 @@ class BigMuteButton extends UICorePlugin {
         if (autoPlay) {
             this.autoPlay = true;
         }
-        trace(`${T$a} onPlay`, {
+        trace(`${T$9} onPlay`, {
             autoPlay: this.autoPlay});
         if (this.autoPlay && !wasMuted && volume === 0) {
             this.mount();
@@ -44978,16 +45004,15 @@ class BigMuteButton extends UICorePlugin {
 
 const pluginHtml$3 = "<button class=\"media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon\"\n    id=\"gear-button\"\n    aria-expanded=\"false\"\n    aria-controls=\"gear-options\">\n    <%= icon %>\n</button>\n<div class=\"gear-wrapper gcore-skin-bg-color\" id=\"gear-options-wrapper\">\n    <ul class=\"gear-options-list\" id=\"gear-options\" role=\"menu\"></ul>\n</div>\n";
 
-insertStyle(".media-control-skin-1 .gplayer-mc-panel-item.media-control-gear {\n  order: 99;\n  height: 20px;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-wrapper {\n  position: absolute;\n  right: 16px;\n  bottom: 52px;\n  width: 250px;\n  min-height: 48px;\n  z-index: 9999;\n  border-radius: 4px;\n  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-options-list {\n  padding: 8px 0;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option {\n  margin: 0;\n  text-align: left;\n  line-height: 22px;\n  padding: 5px 14px;\n  width: 250px;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 8px;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option_icon {\n  flex: 24px 0 0;\n  height: 24px;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option_icon.hidden {\n  visibility: hidden;\n  display: inline-block;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option_label {\n  flex: 0 1 100%;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option_arrow-right-icon {\n  flex: 0 0 14px;\n  height: 24px;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option_value {\n  flex: 1 0 auto;\n}");
+insertStyle(".media-control-skin-1 .media-control-item.media-control-gear {\n  order: 99;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {\n  position: absolute;\n  right: 16px;\n  bottom: 52px;\n  width: 250px;\n  min-height: 48px;\n  z-index: 9999;\n  border-radius: 4px;\n  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {\n  padding: 8px 0;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option {\n  margin: 0;\n  text-align: left;\n  line-height: 22px;\n  padding: 5px 14px;\n  width: 250px;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 8px;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {\n  flex: 24px 0 0;\n  height: 24px;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {\n  visibility: hidden;\n  display: inline-block;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {\n  flex: 0 1 100%;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {\n  flex: 0 0 14px;\n  height: 24px;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {\n  flex: 1 0 auto;\n}");
 
-insertStyle("*, :focus, :visited {\n  outline: none !important;\n}\n\n.gear-wrapper .go-back {\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 20px;\n  width: 100%;\n  text-align: left;\n  padding: 12px;\n}\n.gear-wrapper .go-back .arrow-left-icon {\n  float: left;\n  padding-top: 2px;\n  padding-right: 2px;\n}\n.gear-wrapper .go-back .arrow-left-icon svg {\n  height: 16px;\n}\n.gear-wrapper ul.gear-sub-menu {\n  width: 100%;\n  list-style-type: none;\n  min-width: 60px;\n  border-top: 2px solid rgb(36, 36, 36);\n  overflow-y: auto;\n}\n.gear-wrapper ul.gear-sub-menu li {\n  font-size: 12px;\n  text-align: left;\n}\n.gear-wrapper ul.gear-sub-menu li[data-title] {\n  background-color: #c3c2c2;\n  padding: 5px;\n}\n.gear-wrapper ul.gear-sub-menu li a {\n  display: block;\n  text-decoration: none;\n  height: 32px;\n  padding: 5px 10px;\n  line-height: 22px;\n  color: #fffffe;\n}\n.gear-wrapper ul.gear-sub-menu li a:hover {\n  color: white;\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.gear-wrapper ul.gear-sub-menu li a:hover a {\n  color: white;\n  text-decoration: none;\n}\n.gear-wrapper ul.gear-sub-menu li a .check-icon {\n  width: 30px;\n  height: 20px;\n  float: left;\n  display: block;\n}\n.gear-wrapper ul.gear-sub-menu li a .check-icon svg {\n  display: none;\n}\n.gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {\n  display: inline;\n}");
+insertStyle("*, :focus, :visited {\n  outline: none !important;\n}\n\n.gear-wrapper .go-back {\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 20px;\n  width: 100%;\n  text-align: left;\n  padding: 12px;\n}\n.gear-wrapper .go-back .arrow-left-icon {\n  float: left;\n  padding-top: 2px;\n  padding-right: 2px;\n}\n.gear-wrapper .go-back .arrow-left-icon svg {\n  height: 16px;\n}\n.gear-wrapper ul.gear-sub-menu {\n  width: 100%;\n  list-style-type: none;\n  min-width: 60px;\n  border-top: 2px solid rgb(36, 36, 36);\n  overflow-y: auto;\n}\n.gear-wrapper ul.gear-sub-menu li {\n  font-size: 12px;\n  text-align: left;\n}\n.gear-wrapper ul.gear-sub-menu li a {\n  display: block;\n  text-decoration: none;\n  height: 30px;\n  padding: 5px 10px;\n  line-height: 22px;\n  color: var(--gplayer-mc-text-dim-color);\n}\n.gear-wrapper ul.gear-sub-menu li a:hover {\n  color: var(--gplayer-mc-text-color);\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.gear-wrapper ul.gear-sub-menu li a:hover a {\n  color: var(--gplayer-mc-text-color);\n  text-decoration: none;\n}\n.gear-wrapper ul.gear-sub-menu li a .check-icon {\n  width: 30px;\n  height: 20px;\n  float: left;\n  display: block;\n}\n.gear-wrapper ul.gear-sub-menu li a .check-icon svg {\n  display: none;\n}\n.gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {\n  display: inline;\n}");
 
 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";
 
 const gearHdIcon = "<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_1567)\">\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    <rect x=\"13\" width=\"11\" height=\"7\" rx=\"1\" fill=\"#F6413B\"/>\n    <path\n      d=\"M14.6962 6V1.63636H15.3546V3.53267H17.53V1.63636H18.1905V6H17.53V4.0973H15.3546V6H14.6962ZM20.562 6H19.1493V1.63636H20.6067C21.0343 1.63636 21.4015 1.72372 21.7083 1.89844C22.0151 2.07173 22.2502 2.32102 22.4135 2.64631C22.5783 2.97017 22.6607 3.35866 22.6607 3.81179C22.6607 4.26634 22.5776 4.65696 22.4114 4.98366C22.2466 5.31037 22.008 5.56179 21.6955 5.73793C21.383 5.91264 21.0051 6 20.562 6ZM19.8077 5.42472H20.5257C20.8581 5.42472 21.1344 5.36222 21.3546 5.23722C21.5748 5.1108 21.7395 4.92827 21.8489 4.68963C21.9583 4.44957 22.013 4.15696 22.013 3.81179C22.013 3.46946 21.9583 3.17898 21.8489 2.94034C21.7409 2.7017 21.5797 2.5206 21.3652 2.39702C21.1507 2.27344 20.8844 2.21165 20.5662 2.21165H19.8077V5.42472Z\"\n      fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_28_1567\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
 const VERSION$5 = '2.19.12';
-const MENU_VMARGIN = 12;
 const MENU_BACKLINK_HEIGHT = 44;
 /**
  * Events triggered by the plugin
@@ -45150,7 +45175,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();
             });
@@ -45246,9 +45271,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')
@@ -48475,7 +48499,7 @@ const templateHtml = "<div class=\"player-error-screen__content\" data-error-scr
 
 insertStyle("div.player-error-screen, [data-player] div.player-error-screen {\n  color: #CCCACA;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  background-color: rgba(0, 0, 0, 0.7);\n  z-index: 2000;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\ndiv.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {\n  font-size: 14px;\n  color: #CCCACA;\n  margin-top: 45px;\n}\ndiv.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {\n  font-weight: bold;\n  line-height: 30px;\n  font-size: 18px;\n}\ndiv.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {\n  width: 90%;\n  margin: 0 auto;\n}\ndiv.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {\n  font-size: 13px;\n  margin-top: 15px;\n}\ndiv.player-error-screen__reload, [data-player] div.player-error-screen__reload {\n  cursor: pointer;\n  width: 30px;\n  margin: 15px auto 0;\n}");
 
-const T$9 = 'plugins.error_screen';
+const T$8 = 'plugins.error_screen';
 /**
  * `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
  * @public
@@ -48551,7 +48575,7 @@ class ErrorScreen extends UICorePlugin {
         }, 0);
     }
     onActiveContainerChanged() {
-        trace(`${T$9} onActiveContainerChanged`, {
+        trace(`${T$8} onActiveContainerChanged`, {
             reloading: this.core.options.reloading,
         });
         this.err = null;
@@ -48601,16 +48625,16 @@ class ErrorScreen extends UICorePlugin {
 
 insertStyle(".player-logo[data-logo] {\n  position: absolute;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n}\n\n.clappr-logo {\n  position: absolute;\n}");
 
-insertStyle("*,\n:focus,\n:visited {\n  outline: none !important;\n}\n\n.multicamera[data-multicamera] {\n  float: right;\n  margin-top: 4px;\n  position: relative;\n  margin-right: 20px;\n  width: 20px;\n}\n.multicamera[data-multicamera] button {\n  background-color: transparent;\n  color: #fff;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  font-size: 14px;\n  padding: 0;\n}\n.multicamera[data-multicamera] button svg {\n  height: 20px;\n  position: relative;\n  margin-top: 6px;\n}\n.multicamera[data-multicamera] button:hover {\n  color: #c9c9c9;\n}\n.multicamera[data-multicamera] button.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.multicamera[data-multicamera] button span.quality-arrow {\n  width: 9px;\n  height: 6px;\n  margin-top: 11px;\n  margin-left: 5px;\n}\n.multicamera[data-multicamera] > ul {\n  padding: 6px 0;\n  right: -24px;\n  width: 245px;\n  list-style-type: none;\n  position: absolute;\n  bottom: 48px;\n  border-radius: 4px;\n  display: none;\n  background-color: rgba(74, 74, 74, 0.9);\n}\n.multicamera[data-multicamera] > ul::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 85%;\n  margin-left: -10px;\n  width: 0;\n  height: 0;\n  border-top: 10px solid rgba(74, 74, 74, 0.9);\n  border-right: 10px solid transparent;\n  border-left: 10px solid transparent;\n}\n.multicamera[data-multicamera] li {\n  font-size: 10px;\n  cursor: pointer;\n}\n.multicamera[data-multicamera] li .multicamera-item {\n  display: flex;\n  padding: 10px 0;\n  justify-content: center;\n  position: relative;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {\n  pointer-events: none;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {\n  background-color: rgba(0, 0, 0, 0);\n}\n.multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text {\n  width: 120px;\n  text-align: left;\n  margin-left: 15px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  width: 120px;\n  height: 20px;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  line-height: 1.43;\n  letter-spacing: normal;\n  text-align: left;\n  color: #fff;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  opacity: 0.6;\n}\n.multicamera[data-multicamera] li[data-title] {\n  background-color: #c3c2c2;\n  padding: 5px;\n}\n.multicamera[data-multicamera] li a {\n  color: #444;\n  padding: 2px 10px;\n  display: block;\n  text-decoration: none;\n}\n.multicamera[data-multicamera] li a:hover {\n  background-color: #555;\n  color: white;\n}\n.multicamera[data-multicamera] li a:hover a {\n  color: white;\n  text-decoration: none;\n}\n.multicamera[data-multicamera] li.current a {\n  color: #f00;\n}");
+insertStyle("*,\n:focus,\n:visited {\n  outline: none !important;\n}\n\n.multicamera[data-multicamera] {\n  float: right;\n  margin-top: 4px;\n  position: relative;\n  margin-right: 20px;\n  width: 20px;\n}\n.multicamera[data-multicamera] button {\n  background-color: transparent;\n  color: #fff;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  font-size: 14px;\n  padding: 0;\n}\n.multicamera[data-multicamera] button svg {\n  height: 20px;\n  position: relative;\n  margin-top: 6px;\n}\n.multicamera[data-multicamera] button:hover {\n  color: #c9c9c9;\n}\n.multicamera[data-multicamera] button.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.multicamera[data-multicamera] button span.quality-arrow {\n  width: 9px;\n  height: 6px;\n  margin-top: 11px;\n  margin-left: 5px;\n}\n.multicamera[data-multicamera] > ul {\n  padding: 6px 0;\n  right: -24px;\n  width: 245px;\n  list-style-type: none;\n  position: absolute;\n  bottom: 48px;\n  border-radius: 4px;\n  display: none;\n  background-color: rgba(74, 74, 74, 0.9);\n}\n.multicamera[data-multicamera] > ul::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 85%;\n  margin-left: -10px;\n  width: 0;\n  height: 0;\n  border-top: 10px solid rgba(74, 74, 74, 0.9);\n  border-right: 10px solid transparent;\n  border-left: 10px solid transparent;\n}\n.multicamera[data-multicamera] li {\n  font-size: 10px;\n  cursor: pointer;\n}\n.multicamera[data-multicamera] li .multicamera-item {\n  display: flex;\n  padding: 10px 0;\n  justify-content: center;\n  position: relative;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {\n  pointer-events: none;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {\n  background-color: rgba(0, 0, 0, 0);\n}\n.multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text {\n  width: 120px;\n  text-align: left;\n  margin-left: 15px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  width: 120px;\n  height: 20px;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  line-height: 1.43;\n  letter-spacing: normal;\n  text-align: left;\n  color: #fff;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  opacity: 0.6;\n}\n.multicamera[data-multicamera] li a {\n  color: #444;\n  padding: 2px 10px;\n  display: block;\n  text-decoration: none;\n}\n.multicamera[data-multicamera] li a:hover {\n  background-color: #555;\n  color: white;\n}\n.multicamera[data-multicamera] li a:hover a {\n  color: white;\n  text-decoration: none;\n}\n.multicamera[data-multicamera] li.current a {\n  color: #f00;\n}");
 
 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$2 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n    <%= pipIcon %>\n</button>\n";
 
-insertStyle(".media-control-skin-1 .gplayer-mc-panel-item.media-control-pip {\n  order: 95;\n  display: flex;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-pip button {\n  height: 20px;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-pip button svg {\n  height: 20px;\n}");
+insertStyle(".media-control-skin-1 .media-control-item.media-control-pip {\n  order: 95;\n}\n.media-control-skin-1 .media-control-item.media-control-pip button {\n  height: 20px;\n}\n.media-control-skin-1 .media-control-item.media-control-pip button svg {\n  height: 20px;\n}");
 
 const VERSION$3 = '0.0.1';
-const T$8 = `plugins.pip`;
+const T$7 = `plugins.pip`;
 /**
  * `PLUGIN` that enables picture in picture mode.
  * @beta
@@ -48693,7 +48717,7 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$8} requestPictureInPicture`, {
+        trace(`${T$7} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
@@ -48725,7 +48749,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: 2.0, label: '2x' },
 ];
 const DEFAULT_PLAYBACK_RATE = 1;
-const T$7 = 'plugins.playback_rate';
+const T$6 = 'plugins.playback_rate';
 /**
  * `PLUGIN` that allows changing the playback speed of the video.
  * @beta
@@ -48832,7 +48856,7 @@ class PlaybackRate extends UICorePlugin {
         this.mount();
     }
     mount() {
-        trace(`${T$7} mount`, {
+        trace(`${T$6} mount`, {
             shouldMount: this.shouldMount(),
         });
         if (!this.shouldMount()) {
@@ -48849,7 +48873,7 @@ class PlaybackRate extends UICorePlugin {
         })));
     }
     onMetaDataLoaded() {
-        trace(`${T$7} onMetaDataLoaded`, {
+        trace(`${T$6} onMetaDataLoaded`, {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
@@ -48871,13 +48895,13 @@ class PlaybackRate extends UICorePlugin {
             this.core.activePlayback?.setPlaybackRate(this.selectedRate);
         }
         else {
-            trace(`${T$7} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
+            trace(`${T$6} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
                 selectedRate: this.selectedRate,
             });
         }
     }
     shouldMount() {
-        trace(`${T$7} shouldMount`, {
+        trace(`${T$6} shouldMount`, {
             playbackType: this.core.activePlayback?.getPlaybackType(),
             dvrEnabled: this.core.activePlayback?.dvrEnabled,
         });
@@ -48894,7 +48918,7 @@ class PlaybackRate extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$7} render`, {
+        trace(`${T$6} render`, {
             shouldMount: this.shouldMount(),
         });
         this.$el.html(PlaybackRate.listTemplate({
@@ -48940,13 +48964,13 @@ class PlaybackRate extends UICorePlugin {
         }
     }
     syncRate() {
-        trace(`${T$7} syncRate`, {
+        trace(`${T$6} syncRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(this.selectedRate);
     }
     resetPlaybackRate() {
-        trace(`${T$7} resetPlaybackRate`, {
+        trace(`${T$6} resetPlaybackRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
@@ -48981,7 +49005,7 @@ class PlaybackRate extends UICorePlugin {
             ?.label || `x${rate}`);
     }
     highlightCurrentRate() {
-        trace(`${T$7} highlightCurrentRate`, {
+        trace(`${T$6} highlightCurrentRate`, {
             selectedRate: this.selectedRate,
         });
         this.allRateElements().removeClass('current');
@@ -48992,7 +49016,7 @@ class PlaybackRate extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     updateGearOptionLabel() {
-        trace(`${T$7} updateGearOptionLabel`, {
+        trace(`${T$6} updateGearOptionLabel`, {
             selectedRate: this.selectedRate,
         });
         this.mount();
@@ -49006,7 +49030,7 @@ const posterHTML = "<div class=\"play-wrapper\" id=\"gplayer-poster\">\n    <div
 //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 T$6 = 'plugins.poster';
+const T$5 = 'plugins.poster';
 /**
  * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped
  * @beta
@@ -49110,7 +49134,7 @@ class Poster extends UIContainerPlugin {
         super.disable();
     }
     onError(error) {
-        trace(`${T$6} onError`, {
+        trace(`${T$5} onError`, {
             enabled: this.enabled,
         });
         if (this.hasFatalError) {
@@ -49243,7 +49267,7 @@ const hdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"non
 
 insertStyle(".quality-levels li.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.quality-levels li.current {\n  background-color: #000;\n}");
 
-const T$5 = 'plugins.quality_levels';
+const T$4 = 'plugins.quality_levels';
 const VERSION$2 = 'v2.22.5';
 /**
  * `PLUGIN` that provides a UI to select the desired quality level of the playback.
@@ -49486,7 +49510,7 @@ class QualityLevels extends UICorePlugin {
         this.highlightCurrentLevel();
     }
     highlightCurrentLevel() {
-        trace(`${T$5} highlightCurrentLevel`, {
+        trace(`${T$4} highlightCurrentLevel`, {
             selectedLevelId: this.selectedLevelId,
         });
         this.allLevelElements()
@@ -49514,7 +49538,7 @@ insertStyle(".seek-time {\n  position: absolute;\n  white-space: nowrap;\n  heig
 // Use of this source code is governed by a BSD-style
 // license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE
 const { formatTime } = Utils;
-const T$4 = 'plugins.seek_time';
+const T$3 = 'plugins.seek_time';
 /**
  * `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
  * @beta
@@ -49573,7 +49597,7 @@ class SeekTime extends UICorePlugin {
     showTime(event) {
         this.hoveringOverSeekBar = true;
         this.calculateHoverPosition(event);
-        trace(`${T$4} showTime`, {
+        trace(`${T$3} showTime`, {
             hoverPosition: this.hoverPosition,
         });
         this.update();
@@ -49660,7 +49684,7 @@ const pluginHtml$1 = "<div class=\"skip-container\" id=\"mc-skip-container\">\n
 
 insertStyle(".container-with-poster-clickable .mc-skip-time {\n  height: 0;\n}\n\n.mc-skip-time {\n  position: absolute;\n  width: 100%;\n  height: calc(100% - 50px);\n  z-index: 9998;\n  background-color: transparent;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n}\n.mc-skip-time .skip-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: space-between;\n}\n.mc-skip-time .skip-container .skip-item {\n  flex: 1 0 0px;\n  height: 100%;\n}");
 
-const T$3 = 'plugins.skip_time';
+const T$2 = 'plugins.skip_time';
 /**
  * `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
  * @beta
@@ -49710,7 +49734,7 @@ class SkipTime extends UICorePlugin {
         this.position = 'left';
     }
     handleRewindClicks() {
-        trace(`${T$3} handleRewindClicks`, {
+        trace(`${T$2} handleRewindClicks`, {
             position: this.position,
         });
         if (this.core.getPlaybackType() === Playback.LIVE &&
@@ -49721,7 +49745,7 @@ class SkipTime extends UICorePlugin {
         this.handleSkip();
     }
     handleSkip() {
-        trace(`${T$3} handleSkip`, {
+        trace(`${T$2} handleSkip`, {
             position: this.position,
         });
         if (Browser.isMobile) {
@@ -49776,7 +49800,7 @@ insertStyle(".spinner-three-bounce[data-spinner] {\n  position: absolute;\n  wid
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 // https://github.com/clappr/clappr-plugins/blob/ffaa9d27005fa5a8a7c243ffc47eb5655b84b371/LICENSE
-const T$2 = 'plugins.spinner';
+const T$1 = 'plugins.spinner';
 /**
  * Custom events emitted by the plugin
  * @public
@@ -49849,14 +49873,14 @@ class SpinnerThreeBounce extends UIContainerPlugin {
         this._hide();
     }
     onStop() {
-        trace(`${T$2} onStop`, {
+        trace(`${T$1} onStop`, {
             hasFatalError: this.hasFatalError,
         });
         this._hide();
     }
     onError(e) {
         this.hasFatalError = e.code === PlaybackErrorCode.MediaSourceUnavailable;
-        trace(`${T$2} onError`, {
+        trace(`${T$1} onError`, {
             hasFatalError: this.hasFatalError,
             error: e.code,
         });
@@ -49889,7 +49913,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
         }
     }
     _hide() {
-        trace(`${T$2} _hide`, {
+        trace(`${T$1} _hide`, {
             userShown: this.userShown,
         });
         if (this.userShown) {
@@ -49906,7 +49930,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
      * @internal
      */
     render() {
-        trace(`${T$2} render`, {
+        trace(`${T$1} render`, {
             buffering: this.container.buffering,
         });
         this.$el.html(this.template());
@@ -49924,7 +49948,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
     }
 }
 
-const T$1 = 'plugins.source_controller';
+const T = 'plugins.source_controller';
 const INITIAL_RETRY_DELAY = 1000;
 const MAX_RETRY_DELAY = 5000;
 const RETRY_DELAY_BLUR = 500;
@@ -50070,7 +50094,7 @@ class SourceController extends CorePlugin {
         this.core.getPlugin('error_screen')?.disable(); //  TODO test
     }
     onActiveContainerChanged() {
-        trace(`${T$1} onActiveContainerChanged`, {
+        trace(`${T} onActiveContainerChanged`, {
             retrying: this.active,
             currentSource: this.sourcesList[this.currentSourceIndex],
         });
@@ -50091,7 +50115,7 @@ class SourceController extends CorePlugin {
     }
     bindContainerEventListeners() {
         this.core.activePlayback.on(Events$1.PLAYBACK_ERROR, (error) => {
-            trace(`${T$1} on PLAYBACK_ERROR`, {
+            trace(`${T} on PLAYBACK_ERROR`, {
                 error: {
                     code: error?.code,
                     description: error?.description,
@@ -50115,7 +50139,7 @@ class SourceController extends CorePlugin {
             }
         });
         this.core.activePlayback.on(Events$1.PLAYBACK_PLAY, () => {
-            trace(`${T$1} on PLAYBACK_PLAY`, {
+            trace(`${T} on PLAYBACK_PLAY`, {
                 currentSource: this.sourcesList[this.currentSourceIndex],
                 retrying: this.active,
             });
@@ -50134,7 +50158,7 @@ class SourceController extends CorePlugin {
         this.sourcesDelay = {};
     }
     retryPlayback() {
-        trace(`${T$1} retryPlayback enter`, {
+        trace(`${T} retryPlayback enter`, {
             currentSourceIndex: this.currentSourceIndex,
             currentSource: this.sourcesList[this.currentSourceIndex],
         });
@@ -50147,7 +50171,7 @@ class SourceController extends CorePlugin {
                 this.switching = false;
                 this.core.load(nextSource.source, nextSource.mimeType);
                 setTimeout(() => {
-                    trace(`${T$1} retryPlayback playing`, {
+                    trace(`${T} retryPlayback playing`, {
                         autoPlay: this.autoPlay,
                     });
                     this.core.activeContainer.play({
@@ -50175,19 +50199,18 @@ class SourceController extends CorePlugin {
     }
 }
 
-insertStyle(".media-control-skin-1 .media-control-cc button.media-control-button {\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  align-items: center;\n  vertical-align: top;\n}\n.media-control-skin-1 .media-control-cc button.media-control-button:hover {\n  color: white;\n}\n.media-control-skin-1 .media-control-cc ul {\n  width: auto;\n  border-radius: 4px;\n  bottom: 52px;\n  margin-left: -28px;\n}\n.media-control-skin-1 .media-control-cc ul li {\n  font-size: 16px;\n  text-align: center;\n  white-space: nowrap;\n  height: 30px;\n}\n.media-control-skin-1 .media-control-cc ul li a {\n  height: 30px;\n  padding: 5px 10px;\n  color: #fffffe;\n}\n.media-control-skin-1 .media-control-cc ul li a:hover {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1 .media-control-cc ul li.current a {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1 .media-control-cc ul li:first-child a {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-cc ul li:last-child a {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-cc {\n  position: relative;\n  order: 85;\n}\n.media-control-skin-1 .media-control-cc button {\n  background-color: transparent;\n  color: #fff;\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  cursor: pointer;\n}\n.media-control-skin-1 .media-control-cc button .cc-text svg {\n  fill: white;\n}\n.media-control-skin-1 .media-control-cc button:hover {\n  color: #c9c9c9;\n}\n.media-control-skin-1 .media-control-cc button.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.media-control-skin-1 .media-control-cc ul {\n  width: 80px;\n  overflow: hidden;\n  list-style-type: none;\n  position: absolute;\n  bottom: 25px;\n  border: none;\n  background-color: #e6e6e6;\n  padding: 8px 0;\n  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n}\n.media-control-skin-1 .media-control-cc li a {\n  color: #444;\n  padding: 2px 10px;\n  display: block;\n  text-decoration: none;\n}\n.media-control-skin-1 .media-control-cc li a:hover {\n  background-color: #555;\n  color: white;\n}\n.media-control-skin-1 .media-control-cc li a:hover a {\n  color: white;\n  text-decoration: none;\n}\n.media-control-skin-1 .media-control-cc li.current a {\n  color: #f00;\n  background-color: #555;\n}");
+insertStyle(".media-control-skin-1 .media-control-cc button.media-control-button {\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  align-items: center;\n  vertical-align: top;\n}\n.media-control-skin-1 .media-control-cc button.media-control-button:hover {\n  color: white;\n}\n.media-control-skin-1 .media-control-cc ul li {\n  text-align: center;\n}\n.media-control-skin-1 .media-control-cc ul li a {\n  height: 30px;\n  padding: 5px 10px;\n  color: #fffffe;\n}\n.media-control-skin-1 .media-control-cc ul li a:hover {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1 .media-control-cc ul li.current a {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1 .media-control-cc ul li:first-child a {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-cc ul li:last-child a {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-cc {\n  position: relative;\n  order: 85;\n}\n\n.container .gplayer-cc-line {\n  position: absolute;\n  bottom: calc(var(--bottom-panel) + 5px);\n  width: 100%;\n}\n.container .gplayer-cc-line p {\n  width: auto;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: white;\n  display: inline-block;\n}");
 
 const subtitlesOffIcon = "<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</svg>\n";
 
 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';
-const T = 'plugins.cc';
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
@@ -50218,6 +50241,7 @@ const T = 'plugins.cc';
 class ClosedCaptions extends UICorePlugin {
     isPreselectedApplied = false;
     active = false;
+    open = false;
     track = null;
     tracks = [];
     $line = null;
@@ -50239,14 +50263,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',
         };
     }
     /**
@@ -50254,8 +50278,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() {
@@ -50274,7 +50298,7 @@ class ClosedCaptions extends UICorePlugin {
     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();
         });
@@ -50289,6 +50313,10 @@ class ClosedCaptions extends UICorePlugin {
         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');
@@ -50305,6 +50333,7 @@ class ClosedCaptions extends UICorePlugin {
     }
     onSubtitleAvailable() {
         this.applyTracks();
+        this.mount();
     }
     onSubtitleChanged({ id }) {
         if (id === -1) {
@@ -50365,6 +50394,7 @@ class ClosedCaptions extends UICorePlugin {
         }
         try {
             this.resizeFont();
+            this.clampPopup();
         }
         catch (error) {
         }
@@ -50374,7 +50404,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) {
@@ -50417,17 +50450,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;
@@ -50441,8 +50475,10 @@ class ClosedCaptions extends UICorePlugin {
         this.updateSelection();
     }
     onItemSelect(event) {
-        const id = event.target.dataset.ccSelect ?? '-1';
-        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;
@@ -50459,25 +50495,33 @@ class ClosedCaptions extends UICorePlugin {
         }
     }
     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} 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;
@@ -50487,6 +50531,7 @@ class ClosedCaptions extends UICorePlugin {
             for (const cue of cues) {
                 if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
                     lines.push(cue.getCueAsHTML().textContent);
+                    // TODO break?
                 }
             }
         }
@@ -50512,19 +50557,31 @@ class ClosedCaptions extends UICorePlugin {
         this.allItemElements()
             .removeClass('current')
             .find('a')
-            .removeClass('gcore-skin-active');
-        trace(`${T} 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);
+        }
     }
 }