@gcorevideo/player 2.28.19 → 2.28.21

package/dist/index.embed.js

@@ -51528,6 +51528,46 @@ const fullscreenOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
 
 const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M15.1568 23.15C15.7408 23.15 16.2142 22.6766 16.2142 22.0926V17.1947C16.2142 16.7253 16.5948 16.3447 17.0642 16.3447H21.9621C22.5461 16.3447 23.0195 15.8713 23.0195 15.2873C23.0195 14.7034 22.5461 14.2299 21.9621 14.2299H16.0642C14.9832 14.2299 14.0995 15.1137 14.0995 16.1947V22.0926C14.0995 22.6766 14.5729 23.15 15.1568 23.15Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M1.90739 10.7701H7.80528C8.88627 10.7701 9.77006 9.88627 9.77006 8.80528V2.90739C9.77006 2.32341 9.29665 1.85 8.71267 1.85C8.12869 1.85 7.65528 2.32341 7.65528 2.90739V7.80528C7.65528 8.27472 7.27472 8.65528 6.80528 8.65528H1.90739C1.32341 8.65528 0.85 9.12869 0.85 9.71267C0.85 10.2966 1.32341 10.7701 1.90739 10.7701Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M8.71261 23.15C9.29659 23.15 9.77 22.6766 9.77 22.0926V16.1947C9.77 15.1137 8.88621 14.2299 7.80521 14.2299H1.90733C1.32335 14.2299 0.849939 14.7034 0.849939 15.2873C0.849939 15.8713 1.32335 16.3447 1.90733 16.3447H6.80521C7.27466 16.3447 7.65521 16.7253 7.65521 17.1947V22.0926C7.65521 22.6766 8.12862 23.15 8.71261 23.15Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M21.9621 10.7701C22.5461 10.7701 23.0195 10.2966 23.0195 9.71267C23.0195 9.12869 22.5461 8.65528 21.9621 8.65528H17.0642C16.5948 8.65528 16.2142 8.27472 16.2142 7.80528V2.90739C16.2142 2.32341 15.7408 1.85 15.1568 1.85C14.5729 1.85 14.0995 2.32341 14.0995 2.90739V8.80528C14.0995 9.88627 14.9832 10.7701 16.0642 10.7701H21.9621Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n</svg>\n";
 
+/**
+ *
+ * @param {() => void} callback - The callback to call when the user clicks away from the element
+ * @returns {(HTMLElement | null) => void}
+ */
+function clickaway(callback) {
+    let handler = (event) => { };
+    return (node) => {
+        window.removeEventListener('click', handler);
+        if (!node) {
+            return;
+        }
+        handler = (event) => {
+            if (!node.contains(event.target)) {
+                window.removeEventListener('click', handler);
+                callback();
+            }
+        };
+        window.addEventListener('click', handler);
+    };
+}
+/**
+ * Sets up a clickaway handler for the media control on mobile devices.
+ * The handler is deferred to ensure it is called after the next event loop tick.
+ *
+ * @param {() => void} callback - The callback to call when the user clicks away from the media control
+ * @returns {(HTMLElement | null) => void}
+ */
+function mediaControlClickaway(callback) {
+    if (!Browser.isMobile) {
+        return () => { };
+    }
+    const cw = clickaway(callback);
+    return (node) => {
+        setTimeout(() => {
+            cw(node);
+        }, 0);
+    };
+}
+
 // This is a derived work from the {@link https://github.com/clappr/clappr-plugins/tree/ffaa9d27005fa5a8a7c243ffc47eb5655b84b371/src/plugins/media_control | Clappr MediaControl plugin}
 // It is redistributed under the terms of the {@link ../../../../../LICENSE | Apache 2.0} license.
 // Copyright 2014 Globo.com Player authors. All rights reserved.
@@ -51781,6 +51821,7 @@ class MediaControl extends UICorePlugin {
     }
     /**
      * @internal
+     * The methods declared here will be exposed via the main player object API
      */
     getExternalInterface() {
         return {
@@ -51825,9 +51866,7 @@ class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PAUSE, this.changeTogglePlay);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_STOP, this.changeTogglePlay);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_DBLCLICK, this.toggleFullscreen);
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => {
-            this.clickaway(this.core.activeContainer.$el[0]);
-        });
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => this.clickaway(this.core.activeContainer.$el[0]));
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PROGRESS, this.updateProgressBar);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_SETTINGSUPDATE, this.updateSettings);
@@ -52447,6 +52486,23 @@ class MediaControl extends UICorePlugin {
     mount(name, element) {
         mountTo(this.getMountParent(name), element);
     }
+    /**
+     * Set or reset the keep visibility state
+     *
+     * Keep visibility state controls whether the media control is hidden automatically after a delay.
+     * Keep visibility prevents the the auto-hide behaviour
+     *
+     * @param keepVisible - The state
+     */
+    setKeepVisible(keepVisible) {
+        this.keepVisible = keepVisible;
+        if (keepVisible) {
+            this.clickaway(this.core.activeContainer.$el[0]);
+        }
+        else {
+            this.clickaway(null);
+        }
+    }
     getMountParent(name) {
         switch (name) {
             case 'root':
@@ -52746,9 +52802,7 @@ class MediaControl extends UICorePlugin {
     delayHide() {
         this.hide(this.options.hideMediaControlDelay || DEFAULT_HIDE_DELAY);
     }
-    // 2 seconds delay is needed since on mobile devices mouse(touch)move events are not dispatched immediately
-    // as opposed to the click event
-    clickaway = clickaway(() => setTimeout(this.resetUserKeepVisible, 0));
+    clickaway = mediaControlClickaway(() => this.resetUserKeepVisible());
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
@@ -52789,22 +52843,6 @@ function mergeElements(a, b) {
         return acc;
     }, a);
 }
-function clickaway(callback) {
-    let handler = (event) => { };
-    return (node) => {
-        window.removeEventListener('click', handler);
-        if (!node) {
-            return;
-        }
-        handler = (event) => {
-            if (!node.contains(event.target)) {
-                window.removeEventListener('click', handler);
-                callback();
-            }
-        };
-        window.addEventListener('click', handler);
-    };
-}
 
 const VERSION$6 = '2.22.4';
 // const T = 'plugins.audiotracks'
@@ -52898,6 +52936,9 @@ class AudioTracks extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => {
             this.hideMenu();
         });
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_DESTROYED, () => {
+            this.clickaway(null);
+        });
     }
     shouldRender() {
         // Render is called from the parent class constructor so tracks aren't available
@@ -52937,6 +52978,7 @@ class AudioTracks extends UICorePlugin {
         this.open = false;
         this.$el.find('#gplayer-audiotracks-menu').hide();
         this.$el.find('#gplayer-audiotracks-button').attr('aria-expanded', 'false');
+        this.setKeepVisible(false);
     }
     toggleMenu() {
         this.open = !this.open;
@@ -52952,6 +52994,11 @@ class AudioTracks extends UICorePlugin {
         this.$el
             .find('#gplayer-audiotracks-button')
             .attr('aria-expanded', this.open);
+        this.setKeepVisible(this.open);
+    }
+    setKeepVisible(keepVisible) {
+        this.core.getPlugin('media_control').setKeepVisible(keepVisible);
+        this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null);
     }
     buttonElement() {
         return this.$('#gplayer-audiotracks-button');
@@ -52997,6 +53044,7 @@ class AudioTracks extends UICorePlugin {
             this.core.getPlugin('media_control')?.slot('audiotracks', this.$el);
         }
     }
+    clickaway = mediaControlClickaway(() => this.hideMenu());
 }
 
 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";
@@ -53141,7 +53189,7 @@ 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 .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(".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: 20px;\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: 20px;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {\n  flex: 1 0 auto;\n}");
 
 insertStyle("*,\n:focus,\n: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 .gear-options-list,\n.gear-wrapper .gear-sub-menu {\n  list-style-type: none;\n}\n.gear-wrapper ul.gear-sub-menu {\n  width: 100%;\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}");
 
@@ -53327,6 +53375,9 @@ class BottomGear extends UICorePlugin {
         this.listenTo(container, Events$1.CONTAINER_CLICK, () => {
             this.collapse();
         });
+        this.listenTo(container, Events$1.CONTAINER_DESTROYED, () => {
+            this.clickaway(null);
+        });
     }
     highDefinitionUpdate(isHd) {
         this.hd = isHd;
@@ -53379,6 +53430,11 @@ class BottomGear extends UICorePlugin {
         this.$el
             .find('#gear-button')
             .attr('aria-expanded', (!this.collapsed).toString());
+        this.setKeepVisible(!this.collapsed);
+    }
+    setKeepVisible(keepVisible) {
+        this.core.getPlugin('media_control').setKeepVisible(keepVisible);
+        this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null);
     }
     collapse() {
         this.collapsed = true;
@@ -53386,6 +53442,7 @@ class BottomGear extends UICorePlugin {
         this.$el.find('#gear-button').attr('aria-expanded', 'false');
         // TODO hide submenus
         this.collapseSubmenus();
+        this.setKeepVisible(false);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
@@ -53418,6 +53475,7 @@ class BottomGear extends UICorePlugin {
             .find('.gear-sub-menu')
             .css('max-height', `${availableHeight - MENU_BACKLINK_HEIGHT}px`);
     }
+    clickaway = mediaControlClickaway(() => this.collapse());
 }
 
 /**
@@ -56894,9 +56952,9 @@ const buttonHtml$1 = "<button class='gplayer-lite-btn gcore-skin-text-color gear
 
 const listHtml$1 = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\" id=\"playback-rate-back-button\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    <%= i18n.t('playback_rate') %>\n</button>\n<ul class=\"gear-sub-menu\" id=\"playback-rate-menu\">\n    <% for (const item of playbackRates) { %>\n        <li<%= item.value === current ? ' class=\"current\"' : '' %>>\n            <a href=\"#\" class=\"gear-sub-menu_btn gcore-skin-text-color<%= item.value === current ? ' gcore-skin-active' : '' %>\" data-rate=\"<%= item.value %>\">\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= item.label %>\n            </a>\n        </li>\n    <% } %>\n</ul>";
 
-const speedIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M11.9854 23.9999C11.4272 23.9999 10.9571 23.5293 10.9571 22.9704C10.9571 22.4115 11.4272 21.9409 11.9854 21.9409C17.4492 21.9409 21.9143 17.4704 21.9143 11.9999C21.9143 6.52948 17.4492 2.05899 11.9854 2.05899C11.4272 2.05899 10.9571 1.58836 10.9571 1.02949C10.9571 0.470625 11.4272 0 11.9854 0C18.5949 0 24 5.38224 24 12.0291C24 18.6766 18.5949 24 11.9854 24V23.9999ZM10.2227 17.853L17.4785 13.4413C18.0072 13.1178 18.301 12.5885 18.301 11.9707C18.301 11.353 17.9779 10.8237 17.4785 10.5002L10.2227 6.08852C9.69405 5.76499 9.01826 5.76499 8.4896 6.05919C7.96094 6.35338 7.60828 6.94157 7.60828 7.5591V16.3824C7.60828 17.0002 7.93142 17.5883 8.4896 17.8824C8.75393 18.0294 9.04779 18.1177 9.34139 18.1177C9.63523 18.1177 9.95838 18.0294 10.2227 17.853V17.853ZM15.9216 11.9707L9.66457 15.7647V8.17661L15.9216 11.9707ZM8.22516 22.3529C8.4602 21.8236 8.25447 21.2058 7.7258 20.9705C7.19714 20.7353 6.69755 20.4413 6.2277 20.0882C5.75764 19.7646 5.11137 19.8822 4.78824 20.3235C4.46509 20.7941 4.58251 21.4412 5.02327 21.7647C5.58146 22.1764 6.19819 22.5293 6.81519 22.8235C6.96211 22.8824 7.10903 22.9117 7.25574 22.9117C7.66699 22.941 8.04893 22.7057 8.22513 22.3528L8.22516 22.3529ZM3.58381 19.0882C4.05387 18.7647 4.17127 18.1177 3.84814 17.647C3.52502 17.1764 3.23115 16.6765 2.99635 16.1471C2.76132 15.6178 2.14456 15.4118 1.6157 15.6472C1.08704 15.8825 0.881306 16.5 1.11634 17.0295C1.41018 17.6472 1.7626 18.2648 2.14459 18.8236C2.35032 19.1178 2.67325 19.2646 2.99638 19.2646C3.20191 19.2942 3.40763 19.2353 3.58384 19.0882L3.58381 19.0882ZM1.14563 13.9707C1.70382 13.9118 2.14435 13.4118 2.08576 12.853C2.05645 12.5588 2.05645 12.2648 2.05645 11.9706C2.05645 11.6764 2.05645 11.4117 2.08576 11.1178C2.14456 10.5589 1.70381 10.059 1.14563 10.0001C0.587439 9.94122 0.0881057 10.3825 0.0293019 10.9414C1.96979e-07 11.2942 0 11.6178 0 11.9709C0 12.3237 0.0293018 12.6768 0.0588091 13.0297C0.117618 13.5589 0.558169 13.9709 1.08706 13.9709C1.08686 13.9707 1.11636 13.9707 1.14567 13.9707L1.14563 13.9707ZM2.96687 7.79432C3.2019 7.26502 3.49553 6.76482 3.81866 6.2944C4.1418 5.82377 4.02439 5.17672 3.55432 4.8532C3.08427 4.52967 2.438 4.64722 2.11486 5.11786C1.73292 5.67672 1.38047 6.2942 1.08661 6.91193C0.851579 7.44123 1.08661 8.05897 1.58597 8.29426C1.73289 8.35314 1.87981 8.38247 2.02652 8.38247C2.40888 8.41181 2.7906 8.1767 2.96686 7.7943L2.96687 7.79432ZM6.22757 3.85328C6.69762 3.52974 7.19696 3.23554 7.69635 2.97089C8.22501 2.73558 8.43074 2.11807 8.19571 1.58857C7.96068 1.05927 7.34392 0.85329 6.81505 1.08861C6.19806 1.3828 5.58128 1.73565 5.02314 2.14741C4.55308 2.47094 4.43568 3.11797 4.78811 3.5886C4.99384 3.8828 5.31676 4.02969 5.6399 4.02969C5.84583 4.05902 6.05135 4.00014 6.22757 3.85325V3.85328Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
+const speedIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M11.9854 23.9999C11.4272 23.9999 10.9571 23.5293 10.9571 22.9704C10.9571 22.4115 11.4272 21.9409 11.9854 21.9409C17.4492 21.9409 21.9143 17.4704 21.9143 11.9999C21.9143 6.52948 17.4492 2.05899 11.9854 2.05899C11.4272 2.05899 10.9571 1.58836 10.9571 1.02949C10.9571 0.470625 11.4272 0 11.9854 0C18.5949 0 24 5.38224 24 12.0291C24 18.6766 18.5949 24 11.9854 24V23.9999ZM10.2227 17.853L17.4785 13.4413C18.0072 13.1178 18.301 12.5885 18.301 11.9707C18.301 11.353 17.9779 10.8237 17.4785 10.5002L10.2227 6.08852C9.69405 5.76499 9.01826 5.76499 8.4896 6.05919C7.96094 6.35338 7.60828 6.94157 7.60828 7.5591V16.3824C7.60828 17.0002 7.93142 17.5883 8.4896 17.8824C8.75393 18.0294 9.04779 18.1177 9.34139 18.1177C9.63523 18.1177 9.95838 18.0294 10.2227 17.853V17.853ZM15.9216 11.9707L9.66457 15.7647V8.17661L15.9216 11.9707ZM8.22516 22.3529C8.4602 21.8236 8.25447 21.2058 7.7258 20.9705C7.19714 20.7353 6.69755 20.4413 6.2277 20.0882C5.75764 19.7646 5.11137 19.8822 4.78824 20.3235C4.46509 20.7941 4.58251 21.4412 5.02327 21.7647C5.58146 22.1764 6.19819 22.5293 6.81519 22.8235C6.96211 22.8824 7.10903 22.9117 7.25574 22.9117C7.66699 22.941 8.04893 22.7057 8.22513 22.3528L8.22516 22.3529ZM3.58381 19.0882C4.05387 18.7647 4.17127 18.1177 3.84814 17.647C3.52502 17.1764 3.23115 16.6765 2.99635 16.1471C2.76132 15.6178 2.14456 15.4118 1.6157 15.6472C1.08704 15.8825 0.881306 16.5 1.11634 17.0295C1.41018 17.6472 1.7626 18.2648 2.14459 18.8236C2.35032 19.1178 2.67325 19.2646 2.99638 19.2646C3.20191 19.2942 3.40763 19.2353 3.58384 19.0882L3.58381 19.0882ZM1.14563 13.9707C1.70382 13.9118 2.14435 13.4118 2.08576 12.853C2.05645 12.5588 2.05645 12.2648 2.05645 11.9706C2.05645 11.6764 2.05645 11.4117 2.08576 11.1178C2.14456 10.5589 1.70381 10.059 1.14563 10.0001C0.587439 9.94122 0.0881057 10.3825 0.0293019 10.9414C1.96979e-07 11.2942 0 11.6178 0 11.9709C0 12.3237 0.0293018 12.6768 0.0588091 13.0297C0.117618 13.5589 0.558169 13.9709 1.08706 13.9709C1.08686 13.9707 1.11636 13.9707 1.14567 13.9707L1.14563 13.9707ZM2.96687 7.79432C3.2019 7.26502 3.49553 6.76482 3.81866 6.2944C4.1418 5.82377 4.02439 5.17672 3.55432 4.8532C3.08427 4.52967 2.438 4.64722 2.11486 5.11786C1.73292 5.67672 1.38047 6.2942 1.08661 6.91193C0.851579 7.44123 1.08661 8.05897 1.58597 8.29426C1.73289 8.35314 1.87981 8.38247 2.02652 8.38247C2.40888 8.41181 2.7906 8.1767 2.96686 7.7943L2.96687 7.79432ZM6.22757 3.85328C6.69762 3.52974 7.19696 3.23554 7.69635 2.97089C8.22501 2.73558 8.43074 2.11807 8.19571 1.58857C7.96068 1.05927 7.34392 0.85329 6.81505 1.08861C6.19806 1.3828 5.58128 1.73565 5.02314 2.14741C4.55308 2.47094 4.43568 3.11797 4.78811 3.5886C4.99384 3.8828 5.31676 4.02969 5.6399 4.02969C5.84583 4.05902 6.05135 4.00014 6.22757 3.85325V3.85328Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
-const arrowRightIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M8.70725 20.7073C8.51225 20.9023 8.25625 21.0002 8.00025 21.0002C7.74425 21.0002 7.48825 20.9023 7.29325 20.7073C6.90225 20.3162 6.90225 19.6842 7.29325 19.2932L14.5863 12.0002L7.29325 4.70725C6.90225 4.31625 6.90225 3.68425 7.29325 3.29325C7.68425 2.90225 8.31625 2.90225 8.70725 3.29325L16.7073 11.2933C17.0983 11.6842 17.0983 12.3162 16.7073 12.7072L8.70725 20.7073Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
+const arrowRightIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M8.70725 20.7073C8.51225 20.9023 8.25625 21.0002 8.00025 21.0002C7.74425 21.0002 7.48825 20.9023 7.29325 20.7073C6.90225 20.3162 6.90225 19.6842 7.29325 19.2932L14.5863 12.0002L7.29325 4.70725C6.90225 4.31625 6.90225 3.68425 7.29325 3.29325C7.68425 2.90225 8.31625 2.90225 8.70725 3.29325L16.7073 11.2933C17.0983 11.6842 17.0983 12.3162 16.7073 12.7072L8.70725 20.7073Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
 const arrowLeftIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n        d=\"M16.7073 19.2932C17.0983 19.6842 17.0983 20.3162 16.7073 20.7073C16.5123 20.9023 16.2563 21.0002 16.0003 21.0002C15.7443 21.0002 15.4882 20.9023 15.2933 20.7073L7.29325 12.7072C6.90225 12.3162 6.90225 11.6842 7.29325 11.2933L15.2933 3.29325C15.6842 2.90225 16.3163 2.90225 16.7073 3.29325C17.0983 3.68425 17.0983 4.31625 16.7073 4.70725L9.41425 12.0002L16.7073 19.2932Z\"\n        fill=\"#C9C9C9\"/>\n</svg>\n";
 
@@ -57413,7 +57471,7 @@ const buttonHtml = "<button class='gplayer-lite-btn gcore-skin-text-color gear-o
 
 const listHtml = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\" id=\"level-selector-back-button\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    <%= i18n.t('quality') %>\n</button>\n<ul class=\"gear-sub-menu quality-levels\" id=\"level-selector-menu\" role=\"menu\">\n    <% if (!removeAuto) { %>\n        <li>\n            <a href=\"#\"\n                class=\"gear-sub-menu_btn gcore-skin-text-color\"\n                data-id=\"-1\"\n                id=\"level_selector_auto\"\n               aria-checked=\"<%= current === -1 %>\"\n               role=\"menuitemradio\"\n            >\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= i18n.t('auto') %>\n            </a>\n        </li>\n    <% } %>\n    <% for (const item of levels.slice().reverse()) {\n        var disabled = maxLevel >= 0 && item.level > maxLevel\n        var checked = item.level === current\n    %>\n        <li class=\"<%= disabled ? ' disabled' : ''%><%=checked ? ' current' : ''%>\">\n            <a href=\"#\"\n                class=\"gear-sub-menu_btn gcore-skin-text-color<%= checked ? ' gcore-skin-active' : '' %>\"\n                data-id=\"<%= item.level %>\"\n                aria-disabled=\"<%= disabled %>\"\n                aria-checked=\"<%= checked %>\"\n                role=\"menuitemradio\"\n                id=\"level_selector_<%= item.width > item.height ? item.height : item.width %>\"\n            >\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= labels[item.level] %>\n            </a>\n        </li>\n    <% } %>\n</ul>\n";
 
-const hdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.9562 8.22232H13.9961V15.1873H14.9562C15.8914 15.1873 16.766 14.8253 17.4195 14.1676C18.0786 13.5037 18.4415 12.6281 18.4415 11.7026C18.4415 9.7837 16.8781 8.22253 14.9561 8.22253L14.9562 8.22232Z\"\n    fill=\"#C9C9C9\"/>\n  <path\n    d=\"M22.0801 4H1.91994C0.859222 4 0 4.86406 0 5.91994V17.4878C0 18.5437 0.859222 19.4078 1.91994 19.4078H22.0801C23.1408 19.4078 24 18.5437 24 17.4878V5.91994C24 4.86406 23.1408 4 22.0801 4ZM10.3975 15.3473C10.3975 15.6124 10.1827 15.8272 9.91754 15.8272C9.65216 15.8272 9.43761 15.6122 9.43761 15.3473V12.0239H5.55956V15.3473C5.55956 15.6124 5.34481 15.8272 5.07963 15.8272C4.81425 15.8272 4.5997 15.6122 4.5997 15.3473L4.59949 7.74042C4.59949 7.47524 4.81425 7.26049 5.07943 7.26049C5.34481 7.26049 5.55936 7.47544 5.55936 7.74042V11.0636H9.43741V7.74042C9.43741 7.47524 9.65216 7.26049 9.91734 7.26049C10.1827 7.26049 10.3973 7.47544 10.3973 7.74042L10.3975 15.3473ZM18.1005 14.8438C17.2652 15.6844 16.1486 16.1472 14.9561 16.1472H13.5161C13.2507 16.1472 13.0361 15.9323 13.0361 15.6673V7.74263C13.0361 7.47745 13.2509 7.26269 13.5161 7.26269H14.9561C17.4072 7.26269 19.4013 9.25438 19.4013 11.7027C19.4013 12.8835 18.9392 13.9991 18.1005 14.844V14.8438Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
+const hdIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.9562 8.22232H13.9961V15.1873H14.9562C15.8914 15.1873 16.766 14.8253 17.4195 14.1676C18.0786 13.5037 18.4415 12.6281 18.4415 11.7026C18.4415 9.7837 16.8781 8.22253 14.9561 8.22253L14.9562 8.22232Z\"\n    fill=\"#C9C9C9\"/>\n  <path\n    d=\"M22.0801 4H1.91994C0.859222 4 0 4.86406 0 5.91994V17.4878C0 18.5437 0.859222 19.4078 1.91994 19.4078H22.0801C23.1408 19.4078 24 18.5437 24 17.4878V5.91994C24 4.86406 23.1408 4 22.0801 4ZM10.3975 15.3473C10.3975 15.6124 10.1827 15.8272 9.91754 15.8272C9.65216 15.8272 9.43761 15.6122 9.43761 15.3473V12.0239H5.55956V15.3473C5.55956 15.6124 5.34481 15.8272 5.07963 15.8272C4.81425 15.8272 4.5997 15.6122 4.5997 15.3473L4.59949 7.74042C4.59949 7.47524 4.81425 7.26049 5.07943 7.26049C5.34481 7.26049 5.55936 7.47544 5.55936 7.74042V11.0636H9.43741V7.74042C9.43741 7.47524 9.65216 7.26049 9.91734 7.26049C10.1827 7.26049 10.3973 7.47544 10.3973 7.74042L10.3975 15.3473ZM18.1005 14.8438C17.2652 15.6844 16.1486 16.1472 14.9561 16.1472H13.5161C13.2507 16.1472 13.0361 15.9323 13.0361 15.6673V7.74263C13.0361 7.47745 13.2509 7.26269 13.5161 7.26269H14.9561C17.4072 7.26269 19.4013 9.25438 19.4013 11.7027C19.4013 12.8835 18.9392 13.9991 18.1005 14.844V14.8438Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
 insertStyle(".quality-levels li.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.quality-levels li.current {\n  background-color: #000;\n}");
 
@@ -57553,6 +57611,7 @@ class QualityLevels extends UICorePlugin {
      */
     render() {
         if (!this.shouldRender()) {
+            this.$el.hide();
             return this;
         }
         this.renderDropdown();
@@ -57572,6 +57631,9 @@ class QualityLevels extends UICorePlugin {
         }));
     }
     updateButton() {
+        if (!this.shouldRender()) {
+            return;
+        }
         this.core.getPlugin('bottom_gear')
             ?.addItem('quality', this.$el)
             .html(QualityLevels.buttonTemplate({
@@ -58419,8 +58481,7 @@ class ClosedCaptions extends UICorePlugin {
     }
     get preselectedLanguage() {
         return (this.core.options.cc?.language ??
-            this.core.options.subtitles?.language ??
-            '');
+            this.core.options.subtitles?.language);
     }
     /**
      * @internal
@@ -58445,6 +58506,9 @@ class ClosedCaptions extends UICorePlugin {
     onContainerChanged() {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_FULLSCREEN, this.onContainerResize);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_RESIZE, this.onContainerResize);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_DESTROYED, () => {
+            this.clickaway(null);
+        });
         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);
@@ -58473,13 +58537,17 @@ class ClosedCaptions extends UICorePlugin {
         this.applyTracks();
         this.mount();
     }
-    onSubtitleChanged({ id }) {
+    onSubtitleChanged({ id: _ }) {
+        // ignoring the subtitle selected by the playback engine or user agent
+        const id = this.track?.id ?? -1;
         if (id === -1) {
             this.clearSubtitleText();
         }
         for (const track of this.tracks) {
+            // Native subtitles are always hidden
+            track.track.mode = 'hidden';
             if (track.id === id) {
-                track.track.mode = 'showing';
+                // track.track.mode = 'showing'
                 this.setSubtitleText(this.getSubtitleText(track.track));
                 track.track.oncuechange = (e) => {
                     try {
@@ -58497,7 +58565,7 @@ class ClosedCaptions extends UICorePlugin {
             }
             else {
                 track.track.oncuechange = null;
-                track.track.mode = 'hidden';
+                // track.track.mode = 'hidden'
             }
         }
     }
@@ -58624,18 +58692,18 @@ class ClosedCaptions extends UICorePlugin {
     applyPreselectedSubtitles() {
         if (!this.isPreselectedApplied) {
             this.isPreselectedApplied = true;
-            if (!this.preselectedLanguage) {
-                return;
-            }
+            // if the language is undefined, then let the engine decide
+            // to hide the subtitles forcefully, set the language to 'none'
             setTimeout(() => {
                 this.selectItem(this.tracks.find((t) => t.track.language === this.preselectedLanguage) ?? null);
-            }, 300); // TODO why delay?
+            }, 0);
         }
     }
     hideMenu() {
         this.open = false;
         this.$el.find('#gplayer-cc-menu').hide();
         this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false');
+        this.setKeepVisible(false);
     }
     toggleMenu() {
         this.core
@@ -58649,6 +58717,13 @@ class ClosedCaptions extends UICorePlugin {
             this.$el.find('#gplayer-cc-menu').hide();
         }
         this.$el.find('#gplayer-cc-button').attr('aria-expanded', this.open);
+        this.setKeepVisible(this.open);
+    }
+    setKeepVisible(keepVisible) {
+        if (this.shouldKeepVisible) {
+            this.core.getPlugin('media_control').setKeepVisible(keepVisible);
+            this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null);
+        }
     }
     itemElement(id) {
         // TODO fix semantically
@@ -58658,8 +58733,10 @@ class ClosedCaptions extends UICorePlugin {
         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; // TODO test
+        this.track ? this.track.id : -1;
+        // TODO find out if this is needed
+        // this.core.activePlayback.closedCaptionsTrackId = trackId
+        this.core.activePlayback.closedCaptionsTrackId = -1;
     }
     getSubtitleText(track) {
         const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
@@ -58721,6 +58798,10 @@ class ClosedCaptions extends UICorePlugin {
             mediaControl.slot('cc', this.$el);
         }
     }
+    get shouldKeepVisible() {
+        return !!this.options.cc?.keepVisible;
+    }
+    clickaway = mediaControlClickaway(() => this.hideMenu());
 }
 
 // An example implementation of client side performancestatistics