@gcorevideo/player 2.28.20 → 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 {
@@ -936,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':
@@ -1235,13 +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(() => {
-        if (Browser.isMobile) {
-            setTimeout(this.resetUserKeepVisible, 0);
-        }
-    });
+    clickaway = mediaControlClickaway(() => this.resetUserKeepVisible());
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
@@ -1282,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,GAK9B;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,kBAAkB;IAgD1B,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;IAMhB,OAAO,CAAC,UAAU;IAalB,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;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';
@@ -118,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);
@@ -315,6 +319,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);
     }
     toggleMenu() {
         this.core
@@ -328,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
@@ -402,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.20",
+  "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/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 {
@@ -1267,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':
@@ -1628,13 +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(() => {
-    if (Browser.isMobile) {
-      setTimeout(this.resetUserKeepVisible, 0)
-    }
-  })
+  private clickaway = mediaControlClickaway(() => this.resetUserKeepVisible())
 }
 
 MediaControl.extend = function (properties) {
@@ -1688,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'
 
@@ -172,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',
@@ -426,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() {
@@ -439,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 {
@@ -529,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/testUtils.ts

@@ -137,6 +137,8 @@ export function createMockMediaControl(core: any) {
   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/src/utils/clickaway.ts

@@ -0,0 +1,43 @@
+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: () => 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)
+    }
+}
+
+/**
+ * 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: () => void) {
+    if (!Browser.isMobile) {
+        return () => { }
+    }
+    const cw = clickaway(callback)
+    return (node: HTMLElement | null) => {
+        setTimeout(() => {
+            cw(node)
+        }, 0)
+    }
+}