@gcorevideo/player 2.28.19 → 2.28.21

package/lib/plugins/media-control/MediaControl.js

@@ -20,6 +20,7 @@ import volumeMaxIcon from '../../../assets/icons/new/volume-max.svg';
 import volumeOffIcon from '../../../assets/icons/new/volume-off.svg';
 import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg';
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg';
+import { mediaControlClickaway } from '../../utils/clickaway.js';
 const STANDARD_MEDIA_CONTROL_ELEMENTS = [
     'duration',
     'fullscreen',
@@ -268,6 +269,7 @@ export class MediaControl extends UICorePlugin {
     }
     /**
      * @internal
+     * The methods declared here will be exposed via the main player object API
      */
     getExternalInterface() {
         return {
@@ -312,9 +314,7 @@ export class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.changeTogglePlay);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.changeTogglePlay);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_DBLCLICK, this.toggleFullscreen);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
-            this.clickaway(this.core.activeContainer.$el[0]);
-        });
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => this.clickaway(this.core.activeContainer.$el[0]));
         this.listenTo(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_PROGRESS, this.updateProgressBar);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_SETTINGSUPDATE, this.updateSettings);
@@ -938,6 +938,23 @@ export 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':
@@ -1237,9 +1254,7 @@ export 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);
@@ -1280,19 +1295,3 @@ 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);
-    };
-}

package/lib/plugins/subtitles/ClosedCaptions.d.ts

@@ -114,6 +114,7 @@ export declare class ClosedCaptions extends UICorePlugin {
     private applyPreselectedSubtitles;
     private hideMenu;
     private toggleMenu;
+    private setKeepVisible;
     private itemElement;
     private allItemElements;
     private selectSubtitles;
@@ -125,5 +126,7 @@ export declare class ClosedCaptions extends UICorePlugin {
     private renderIcon;
     private clampPopup;
     private mount;
+    private get shouldKeepVisible();
+    private clickaway;
 }
 //# sourceMappingURL=ClosedCaptions.d.ts.map

package/lib/plugins/subtitles/ClosedCaptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAgB7C;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAyB;IAEhE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuB;IAE3D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAM9B;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,kBAAkB;IAgD1B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,iBAAiB;IA+BzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,iBAAiB;IAqBzB;;OAEG;IACH,IAAI;IAcJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA4Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,KAAK;CAMd"}
+{"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAiB7C;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAyB;IAEhE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuB;IAE3D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAK9B;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,kBAAkB;IAmD1B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,iBAAiB;IAqBzB;;OAEG;IACH,IAAI;IAcJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA4Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,yBAAyB;IAejC,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,KAAK;IAOb,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,CAAC,SAAS,CAA+C;CACjE"}

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -9,6 +9,7 @@ import comboboxHTML from '../../../assets/subtitles/combobox.ejs';
 import stringHTML from '../../../assets/subtitles/string.ejs';
 import { isFullscreen } from '../utils/fullscreen.js';
 import { ExtendedEvents } from '../media-control/MediaControl.js';
+import { mediaControlClickaway } from '../../utils/clickaway.js';
 const VERSION = '2.19.14';
 const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
 const T = 'plugins.cc';
@@ -93,8 +94,7 @@ export class ClosedCaptions extends UICorePlugin {
     }
     get preselectedLanguage() {
         return (this.core.options.cc?.language ??
-            this.core.options.subtitles?.language ??
-            '');
+            this.core.options.subtitles?.language);
     }
     /**
      * @internal
@@ -119,6 +119,9 @@ export class ClosedCaptions extends UICorePlugin {
     onContainerChanged() {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_FULLSCREEN, this.onContainerResize);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_RESIZE, this.onContainerResize);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_DESTROYED, () => {
+            this.clickaway(null);
+        });
         this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_SUBTITLE_AVAILABLE, this.onSubtitleAvailable);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_SUBTITLE_CHANGED, this.onSubtitleChanged);
@@ -147,14 +150,17 @@ export class ClosedCaptions extends UICorePlugin {
         this.applyTracks();
         this.mount();
     }
-    onSubtitleChanged({ id }) {
-        trace(`${T} 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 {
@@ -173,7 +179,7 @@ export class ClosedCaptions extends UICorePlugin {
             }
             else {
                 track.track.oncuechange = null;
-                track.track.mode = 'hidden';
+                // track.track.mode = 'hidden'
             }
         }
     }
@@ -302,18 +308,18 @@ export 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
@@ -327,6 +333,13 @@ export 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
@@ -337,7 +350,9 @@ export class ClosedCaptions extends UICorePlugin {
     }
     selectSubtitles() {
         const trackId = this.track ? this.track.id : -1;
-        this.core.activePlayback.closedCaptionsTrackId = trackId; // TODO test
+        // 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;
@@ -399,4 +414,8 @@ export class ClosedCaptions extends UICorePlugin {
             mediaControl.slot('cc', this.$el);
         }
     }
+    get shouldKeepVisible() {
+        return !!this.options.cc?.keepVisible;
+    }
+    clickaway = mediaControlClickaway(() => this.hideMenu());
 }

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;;EAsB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAChC,IAAI,SAAS,EACb,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCtC;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;;EA8B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAuB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;;EAsB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAChC,IAAI,SAAS,EACb,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCtC;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;;EA8B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAyB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -120,6 +120,8 @@ export function createMockMediaControl(core) {
     mediaControl.getAvailablePopupHeight = vi.fn().mockReturnValue(286);
     // @ts-ignore
     mediaControl.toggleElement = vi.fn();
+    // @ts-ignore
+    mediaControl.setKeepVisible = vi.fn();
     vi.spyOn(mediaControl, 'trigger');
     core.$el.append(mediaControl.$el);
     return mediaControl;

package/lib/utils/clickaway.d.ts

@@ -0,0 +1,15 @@
+/**
+ *
+ * @param {() => void} callback - The callback to call when the user clicks away from the element
+ * @returns {(HTMLElement | null) => void}
+ */
+export declare function clickaway(callback: () => void): (node: HTMLElement | null) => void;
+/**
+ * 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}
+ */
+export declare function mediaControlClickaway(callback: () => void): (node: HTMLElement | null) => void;
+//# sourceMappingURL=clickaway.d.ts.map

package/lib/utils/clickaway.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickaway.d.ts","sourceRoot":"","sources":["../../src/utils/clickaway.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,IAGlC,MAAM,WAAW,GAAG,IAAI,UAanC;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,IAAI,UAKxC,WAAW,GAAG,IAAI,UAKnC"}

package/lib/utils/clickaway.js

@@ -0,0 +1,40 @@
+import { Browser } from '@clappr/core';
+/**
+ *
+ * @param {() => void} callback - The callback to call when the user clicks away from the element
+ * @returns {(HTMLElement | null) => void}
+ */
+export 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}
+ */
+export function mediaControlClickaway(callback) {
+    if (!Browser.isMobile) {
+        return () => { };
+    }
+    const cw = clickaway(callback);
+    return (node) => {
+        setTimeout(() => {
+            cw(node);
+        }, 0);
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.28.19",
+  "version": "2.28.21",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/plugins/audio-selector/AudioTracks.ts

@@ -9,6 +9,7 @@ import pluginHtml from '../../../assets/audio-tracks/template.ejs'
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg'
 import { ZeptoResult } from '../../types.js'
 import { ExtendedEvents, MediaControl } from '../media-control/MediaControl.js'
+import { mediaControlClickaway } from '../../utils/clickaway.js'
 
 const VERSION: string = '2.22.4'
 
@@ -132,6 +133,9 @@ export class AudioTracks extends UICorePlugin {
     this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
       this.hideMenu()
     })
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_DESTROYED, () => {
+      this.clickaway(null)
+    })
   }
 
   private shouldRender() {
@@ -179,6 +183,7 @@ export 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)
   }
 
   private toggleMenu() {
@@ -195,6 +200,13 @@ export class AudioTracks extends UICorePlugin {
     this.$el
       .find('#gplayer-audiotracks-button')
       .attr('aria-expanded', this.open)
+
+    this.setKeepVisible(this.open)
+  }
+
+  private setKeepVisible(keepVisible: boolean) {
+    this.core.getPlugin('media_control').setKeepVisible(keepVisible)
+    this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null)
   }
 
   private buttonElement(): ZeptoResult {
@@ -209,7 +221,7 @@ export class AudioTracks extends UICorePlugin {
     return (
       this.$(
         '#gplayer-audiotracks-menu a' +
-          (id !== undefined ? `[data-item="${id}"]` : ''),
+        (id !== undefined ? `[data-item="${id}"]` : ''),
       ) as ZeptoResult
     ).parent()
   }
@@ -253,4 +265,6 @@ export class AudioTracks extends UICorePlugin {
       this.core.getPlugin('media_control')?.slot('audiotracks', this.$el)
     }
   }
+
+  private clickaway = mediaControlClickaway(() => this.hideMenu())
 }

package/src/plugins/bottom-gear/BottomGear.ts

@@ -17,6 +17,7 @@ import gearIcon from '../../../assets/icons/new/gear.svg'
 import gearHdIcon from '../../../assets/icons/new/gear-hd.svg'
 import { ZeptoResult } from '../../types.js'
 import { ExtendedEvents } from '../media-control/MediaControl.js'
+import { mediaControlClickaway } from '../../utils/clickaway.js'
 
 const VERSION = '2.19.12'
 
@@ -214,6 +215,9 @@ export class BottomGear extends UICorePlugin {
     this.listenTo(container, ClapprEvents.CONTAINER_CLICK, () => {
       this.collapse()
     })
+    this.listenTo(container, ClapprEvents.CONTAINER_DESTROYED, () => {
+      this.clickaway(null)
+    })
   }
 
   private highDefinitionUpdate(isHd: boolean) {
@@ -272,6 +276,12 @@ export class BottomGear extends UICorePlugin {
     this.$el
       .find('#gear-button')
       .attr('aria-expanded', (!this.collapsed).toString())
+    this.setKeepVisible(!this.collapsed)
+  }
+
+  private setKeepVisible(keepVisible: boolean) {
+    this.core.getPlugin('media_control').setKeepVisible(keepVisible)
+    this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null)
   }
 
   private collapse() {
@@ -280,6 +290,7 @@ export class BottomGear extends UICorePlugin {
     this.$el.find('#gear-button').attr('aria-expanded', 'false')
     // TODO hide submenus
     this.collapseSubmenus()
+    this.setKeepVisible(false)
   }
 
   private onCoreReady() {
@@ -328,4 +339,6 @@ export class BottomGear extends UICorePlugin {
       .find('.gear-sub-menu')
       .css('max-height', `${availableHeight - MENU_BACKLINK_HEIGHT}px`)
   }
+
+  private clickaway = mediaControlClickaway(() => this.collapse())
 }

package/src/plugins/level-selector/QualityLevels.ts

@@ -217,6 +217,7 @@ export class QualityLevels extends UICorePlugin {
    */
   override render() {
     if (!this.shouldRender()) {
+      this.$el.hide()
       return this
     }
     this.renderDropdown()
@@ -241,6 +242,9 @@ export class QualityLevels extends UICorePlugin {
   }
 
   private updateButton() {
+    if (!this.shouldRender()) {
+      return
+    }
     ;(this.core.getPlugin('bottom_gear') as BottomGear)
       ?.addItem('quality', this.$el)
       .html(

package/src/plugins/media-control/MediaControl.ts

@@ -37,6 +37,7 @@ import volumeMaxIcon from '../../../assets/icons/new/volume-max.svg'
 import volumeOffIcon from '../../../assets/icons/new/volume-off.svg'
 import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg'
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg'
+import { mediaControlClickaway } from '../../utils/clickaway.js'
 
 const STANDARD_MEDIA_CONTROL_ELEMENTS: string[] = [
   'duration',
@@ -399,6 +400,7 @@ export class MediaControl extends UICorePlugin {
 
   /**
    * @internal
+   * The methods declared here will be exposed via the main player object API
    */
   override getExternalInterface() {
     return {
@@ -471,9 +473,7 @@ export class MediaControl extends UICorePlugin {
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_CLICK,
-      () => {
-        this.clickaway(this.core.activeContainer.$el[0])
-      },
+      () => this.clickaway(this.core.activeContainer.$el[0]),
     )
     this.listenTo(
       this.core.activeContainer,
@@ -1269,6 +1269,23 @@ export class MediaControl extends UICorePlugin {
     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: boolean) {
+    this.keepVisible = keepVisible
+    if (keepVisible) {
+      this.clickaway(this.core.activeContainer.$el[0])
+    } else {
+      this.clickaway(null)
+    }
+  }
+
   private getMountParent(name: MediaControlSlotMountPoint): ZeptoResult {
     switch (name) {
       case 'root':
@@ -1630,9 +1647,7 @@ export class MediaControl extends UICorePlugin {
     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
-  private clickaway = clickaway(() => setTimeout(this.resetUserKeepVisible, 0))
+  private clickaway = mediaControlClickaway(() => this.resetUserKeepVisible())
 }
 
 MediaControl.extend = function (properties) {
@@ -1686,21 +1701,3 @@ function mergeElements(
     return acc
   }, a)
 }
-
-function clickaway(callback: () => void) {
-  let handler = (event: MouseEvent | TouchEvent) => {}
-
-  return (node: HTMLElement | null) => {
-    window.removeEventListener('click', handler)
-    if (!node) {
-      return
-    }
-    handler = (event: MouseEvent | TouchEvent) => {
-      if (!node.contains(event.target as Node)) {
-        window.removeEventListener('click', handler)
-        callback()
-      }
-    }
-    window.addEventListener('click', handler)
-  }
-}

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -14,6 +14,7 @@ import stringHTML from '../../../assets/subtitles/string.ejs'
 import { isFullscreen } from '../utils/fullscreen.js'
 import type { ZeptoResult } from '../../types.js'
 import { ExtendedEvents } from '../media-control/MediaControl.js'
+import { mediaControlClickaway } from '../../utils/clickaway.js'
 
 const VERSION: string = '2.19.14'
 
@@ -124,11 +125,10 @@ export class ClosedCaptions extends UICorePlugin {
     }
   }
 
-  private get preselectedLanguage(): string {
+  private get preselectedLanguage(): string | undefined {
     return (
       this.core.options.cc?.language ??
-      this.core.options.subtitles?.language ??
-      ''
+      this.core.options.subtitles?.language
     )
   }
 
@@ -173,6 +173,9 @@ export class ClosedCaptions extends UICorePlugin {
       Events.CONTAINER_RESIZE,
       this.onContainerResize,
     )
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_DESTROYED, () => {
+      this.clickaway(null)
+    })
     this.listenTo(
       this.core.activeContainer,
       'container:advertisement:start',
@@ -218,14 +221,17 @@ export class ClosedCaptions extends UICorePlugin {
     this.mount()
   }
 
-  private onSubtitleChanged({ id }: { id: number }) {
-    trace(`${T} onSubtitleChanged`, { id })
+  private onSubtitleChanged({ id: _ }: { id: number }) {
+    // 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))
 
@@ -244,7 +250,7 @@ export class ClosedCaptions extends UICorePlugin {
         }
       } else {
         track.track.oncuechange = null
-        track.track.mode = 'hidden'
+        // track.track.mode = 'hidden'
       }
     }
   }
@@ -408,16 +414,15 @@ export class ClosedCaptions extends UICorePlugin {
   private 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)
     }
   }
 
@@ -425,6 +430,7 @@ export class ClosedCaptions extends UICorePlugin {
     this.open = false
     this.$el.find('#gplayer-cc-menu').hide()
     this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false')
+    this.setKeepVisible(false)
   }
 
   private toggleMenu() {
@@ -438,6 +444,14 @@ export 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)
+  }
+
+  private setKeepVisible(keepVisible: boolean) {
+    if (this.shouldKeepVisible) {
+      this.core.getPlugin('media_control').setKeepVisible(keepVisible)
+      this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null)
+    }
   }
 
   private itemElement(id: number): ZeptoResult {
@@ -452,7 +466,9 @@ export class ClosedCaptions extends UICorePlugin {
   private selectSubtitles() {
     const trackId = this.track ? this.track.id : -1
 
-    this.core.activePlayback.closedCaptionsTrackId = trackId // TODO test
+    // TODO find out if this is needed
+    // this.core.activePlayback.closedCaptionsTrackId = trackId
+    this.core.activePlayback.closedCaptionsTrackId = -1
   }
 
   private getSubtitleText(track: TextTrack) {
@@ -526,4 +542,10 @@ export class ClosedCaptions extends UICorePlugin {
       mediaControl.slot('cc', this.$el)
     }
   }
+
+  private get shouldKeepVisible() {
+    return !!this.options.cc?.keepVisible
+  }
+
+  private clickaway = mediaControlClickaway(() => this.hideMenu())
 }

package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts

@@ -132,6 +132,7 @@ describe('ClosedCaptions', () => {
     describe('when subtitle is changed', () => {
       beforeEach(async () => {
         emitSubtitleAvailable(core)
+        cc.$el.find('#gplayer-cc-button').click()
         await new Promise((resolve) => setTimeout(resolve, 100))
         core.activePlayback.getCurrentTime = vi.fn().mockReturnValue(7)
         core.activeContainer.getCurrentTime = vi.fn().mockReturnValue(7)
@@ -167,11 +168,16 @@ describe('ClosedCaptions', () => {
               ),
           },
         ]
+        cc.$el.find('#gplayer-cc-menu li:nth-child(2) a').click()
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        // TODO test explicitly that PLAYBACK_SUBTITLE_CHANGED event does not cause track switch
         core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_CHANGED, { id: 2 })
+        await new Promise((resolve) => setTimeout(resolve, 100))
+
       })
       it('should activate subtitle track', () => {
         expect(core.activePlayback.closedCaptionsTracks[1].track.mode).toBe(
-          'showing',
+          'hidden',
         )
         expect(core.activePlayback.closedCaptionsTracks[0].track.mode).toBe(
           'hidden',
@@ -188,8 +194,8 @@ describe('ClosedCaptions', () => {
         emitSubtitleAvailable(core)
         cc.$el.find('#gplayer-cc-menu li:nth-child(2) a').click()
       })
-      it('should activate subtitle track', () => {
-        expect(core.activePlayback.closedCaptionsTrackId).toEqual(2)
+      it('should deactivate native subtitles track', () => {
+        expect(core.activePlayback.closedCaptionsTrackId).toEqual(-1)
       })
       it('should highlight selected menu item', () => {
         expect(