@gcorevideo/player 2.22.22 → 2.22.24

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -8,6 +8,7 @@ import subtitlesOnIcon from '../../../assets/icons/new/subtitles-on.svg';
 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';
 const VERSION = '2.19.14';
 const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
 const T = 'plugins.cc';
@@ -40,7 +41,7 @@ const T = 'plugins.cc';
  */
 export class ClosedCaptions extends UICorePlugin {
     isPreselectedApplied = false;
-    isShowing = false;
+    active = false;
     track = null;
     tracks = [];
     $line = null;
@@ -77,12 +78,14 @@ export class ClosedCaptions extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-cc-select]': 'onItemSelect',
-            'click [data-cc-button]': 'toggleMenu',
+            'click #cc-select li a': 'onItemSelect',
+            'click #cc-button': 'toggleMenu',
         };
     }
     get preselectedLanguage() {
-        return this.core.options.cc?.language ?? this.core.options.subtitles?.language ?? '';
+        return (this.core.options.cc?.language ??
+            this.core.options.subtitles?.language ??
+            '');
     }
     /**
      * @internal
@@ -96,8 +99,15 @@ export class ClosedCaptions extends UICorePlugin {
         trace(`${T} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render); // TODO mount to media control
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, () => {
+            this.hideMenu();
+        });
+        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
+            if (from !== this.name) {
+                this.hideMenu();
+            }
+        });
     }
     onContainerChanged() {
         trace(`${T} onContainerChanged`);
@@ -164,7 +174,7 @@ export class ClosedCaptions extends UICorePlugin {
         }
     }
     onStartAd() {
-        if (this.isShowing && this.core.activeContainer) {
+        if (this.active && this.core.activeContainer) {
             this.hide();
             this.listenTo(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
         }
@@ -180,7 +190,7 @@ export class ClosedCaptions extends UICorePlugin {
             this.track &&
             this.track.track.mode &&
             Browser.isiOS &&
-            this.isShowing;
+            this.active;
         if (shouldShow) {
             this.show();
         }
@@ -195,7 +205,7 @@ export class ClosedCaptions extends UICorePlugin {
      * Hides the subtitles menu and the subtitles.
      */
     hide() {
-        this.isShowing = false;
+        this.active = false;
         this.renderIcon();
         this.$line.hide();
         if (this.tracks) {
@@ -208,7 +218,7 @@ export class ClosedCaptions extends UICorePlugin {
      * Shows the subtitles menu and the subtitles.
      */
     show() {
-        this.isShowing = true;
+        this.active = true;
         this.renderIcon();
         if (this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
@@ -243,7 +253,8 @@ export class ClosedCaptions extends UICorePlugin {
             return this;
         }
         const mediaControl = this.core.getPlugin('media_control');
-        this.$el.html(ClosedCaptions.template({ tracks: this.tracks }));
+        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.resizeFont();
@@ -259,7 +270,6 @@ export class ClosedCaptions extends UICorePlugin {
     selectItem(item) {
         this.clearSubtitleText();
         this.track = item;
-        this.hideMenu();
         this.updateSelection();
     }
     onItemSelect(event) {
@@ -267,6 +277,7 @@ export class ClosedCaptions extends UICorePlugin {
         trace(`${T} onItemSelect`, { id });
         localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
         this.selectItem(this.findById(Number(id)));
+        this.hideMenu();
         return false;
     }
     applyPreselectedSubtitles() {
@@ -281,18 +292,22 @@ export class ClosedCaptions extends UICorePlugin {
         }
     }
     hideMenu() {
-        ;
-        this.$('[data-cc] ul').hide();
+        trace(`${T} hideMenu`);
+        this.$el.find('#cc-select').hide();
     }
     toggleMenu() {
-        trace(`${T} toggleMenu`);
-        this.$('[data-cc] ul').toggle();
+        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
     }
     itemElement(id) {
-        return this.$(`ul li a[data-cc-select="${id}"]`).parent();
+        return this.$el.find(`#cc-select li a[data-cc-select="${id}"]`).parent();
     }
     allItemElements() {
-        return this.$('[data-cc] li');
+        return this.$('#cc-select li');
     }
     selectSubtitles() {
         const trackId = this.track ? this.track.id : -1;
@@ -342,7 +357,7 @@ export class ClosedCaptions extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     renderIcon() {
-        const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon;
+        const icon = this.active ? subtitlesOnIcon : subtitlesOffIcon;
         this.$el.find('span.cc-text').html(icon);
     }
 }

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;EAoBrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAc/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;EAoBrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAe/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -159,6 +159,7 @@ export function createMockMediaControl(core) {
     mediaControl.mount = vi.fn();
     // @ts-ignore
     mediaControl.toggleElement = vi.fn();
+    vi.spyOn(mediaControl, 'trigger');
     return mediaControl;
 }
 export function createMockBottomGear(core) {

package/package.json

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

package/src/index.plugins.ts

@@ -1,7 +1,7 @@
 import '../assets/style/main.scss';
 
-export * from "./plugins/audio-selector/AudioSelector.js";
-export { AudioTracks as AudioSelector } from "./plugins/audio-selector/AudioSelector.js";
+export * from "./plugins/audio-selector/AudioTracks.js";
+export { AudioTracks as AudioSelector } from "./plugins/audio-selector/AudioTracks.js";
 export * from "./plugins/big-mute-button/BigMuteButton.js";
 export * from "./plugins/bottom-gear/BottomGear.js";
 export * from "./plugins/clappr-stats/ClapprStats.js";

package/src/plugins/audio-selector/{AudioSelector.ts → AudioTracks.ts}

@@ -4,16 +4,16 @@ import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
-import pluginHtml from '../../../assets/audio-selector/track-selector.ejs'
-import '../../../assets/audio-selector/style.scss'
+import pluginHtml from '../../../assets/audio-tracks/template.ejs'
+import '../../../assets/audio-tracks/style.scss'
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg'
 import { ZeptoResult } from '../../types.js'
-import { MediaControl } from '../media-control/MediaControl.js'
-// import { trace } from '@gcorevideo/utils'
+import { ExtendedEvents, MediaControl } from '../media-control/MediaControl.js'
+import { trace } from '@gcorevideo/utils'
 
 const VERSION: string = '2.22.4'
 
-// const T = 'plugins.audiotracks'
+const T = 'plugins.audiotracks'
 
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
@@ -34,7 +34,7 @@ export class AudioTracks extends UICorePlugin {
    * @internal
    */
   get name() {
-    return 'audio_selector' // TODO rename to audiotracks
+    return 'audio_tracks'
   }
 
   /**
@@ -68,7 +68,7 @@ export class AudioTracks extends UICorePlugin {
   override get events() {
     return {
       'click [data-audiotracks-select]': 'onTrackSelect',
-      'click #audiotracks-button': 'toggleContextMenu',
+      'click #audiotracks-button': 'toggleMenu',
     }
   }
 
@@ -91,6 +91,11 @@ export class AudioTracks extends UICorePlugin {
       mediaControl.mount('audiotracks', this.$el)
     })
     this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
+    this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from: string) => {
+      if (from !== this.name) {
+        this.hideMenu()
+      }
+    })
   }
 
   private onActiveContainerChanged() {
@@ -162,10 +167,13 @@ export class AudioTracks extends UICorePlugin {
   }
 
   private hideMenu() {
+    trace(`${T} hideMenu`)
     this.$el.find('#audiotracks-select').addClass('hidden')
+    this.$el.find('#audiotracks-button').attr('aria-expanded', 'false')
   }
 
-  private toggleContextMenu() {
+  private 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)

package/src/plugins/audio-selector/__tests__/{AudioSelector.test.ts → AudioTracks.test.ts}

@@ -1,23 +1,23 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { Events } from '@clappr/core'
-
-import { AudioTracks } from '../AudioSelector'
+import { ExtendedEvents } from '../../media-control/MediaControl'
+import { AudioTracks } from '../AudioTracks'
 
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
 // import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
 
 // Logger.enable('*')
-// setTracer(new LogTracer('AudioSelector.test'))
+// setTracer(new LogTracer('AudioTracks.test'))
 
 const TRACKS = [
   { id: '1', label: 'English', language: 'en', track: {} },
   { id: '2', label: 'Spanish', language: 'es', track: {} },
 ]
 
-describe('AudioSelector', () => {
+describe('AudioTracks', () => {
   let core: any
   let mediaControl: any
-  let audioSelector: AudioTracks
+  let audioTracks: AudioTracks
   beforeEach(() => {
     core = createMockCore()
     mediaControl = createMockMediaControl(core)
@@ -25,7 +25,7 @@ describe('AudioSelector', () => {
       if (name === 'media_control') return mediaControl
       return null
     })
-    audioSelector = new AudioTracks(core)
+    audioTracks = new AudioTracks(core)
     core.emit(Events.CORE_READY)
     core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
   })
@@ -47,7 +47,7 @@ describe('AudioSelector', () => {
     it('should attach to the media control', () => {
       expect(mediaControl.mount).toHaveBeenCalledWith(
         'audiotracks',
-        audioSelector.$el,
+        audioTracks.$el,
       )
     })
   })
@@ -56,31 +56,37 @@ describe('AudioSelector', () => {
       emitTracksAvailable(core, TRACKS)
     })
     it('should render button', () => {
-      expect(audioSelector.$el.find('#audiotracks-button').length).toBe(1)
+      expect(audioTracks.$el.find('#audiotracks-button').length).toBe(1)
     })
     it('should render menu hidden', () => {
-      expect(audioSelector.el.innerHTML).toMatchSnapshot()
+      expect(audioTracks.el.innerHTML).toMatchSnapshot()
       expect(
-        audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
+        audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
       ).toBe(true)
-      const trackItems = audioSelector.$el.find('#audiotracks-select li')
+      const trackItems = audioTracks.$el.find('#audiotracks-select li')
       expect(trackItems.length).toBe(2)
       expect(trackItems.eq(0).text().trim()).toBe('English')
       expect(trackItems.eq(1).text().trim()).toBe('Spanish')
     })
     describe('when button is clicked', () => {
       beforeEach(() => {
-        audioSelector.$el.find('#audiotracks-button').click()
+        audioTracks.$el.find('#audiotracks-button').click()
       })
       it('should show menu', () => {
-        expect(audioSelector.$el.html()).toMatchSnapshot()
+        expect(audioTracks.$el.html()).toMatchSnapshot()
         expect(
-          audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
+          audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
         ).toBe(false)
       })
+      it('should collapse all other menus', () => {
+        expect(mediaControl.trigger).toHaveBeenCalledWith(
+          ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+          'audio_tracks',
+        )
+      })
       describe('when audio track is selected', () => {
         beforeEach(() => {
-          audioSelector.$el
+          audioTracks.$el
             .find('#audiotracks-select [data-audiotracks-select="2"]')
             .click()
         })
@@ -90,14 +96,15 @@ describe('AudioSelector', () => {
           )
         })
         it('should hide the menu', () => {
-          expect(audioSelector.$el.html()).toMatchSnapshot()
+          expect(audioTracks.$el.html()).toMatchSnapshot()
           expect(
-            audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
+            audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
           ).toBe(true)
+          expect(audioTracks.$el.find('#audiotracks-button').attr('aria-expanded')).toBe('false')
         })
         it('should add changing class to the button', () => {
           expect(
-            audioSelector.$el.find('#audiotracks-button').hasClass('changing'),
+            audioTracks.$el.find('#audiotracks-button').hasClass('changing'),
           ).toBe(true)
         })
         describe('when current audio track changes', () => {
@@ -115,14 +122,14 @@ describe('AudioSelector', () => {
           })
           it('should update button class', () => {
             expect(
-              audioSelector.$el
+              audioTracks.$el
                 .find('#audiotracks-button')
                 .hasClass('changing'),
             ).toBe(false)
           })
           it('should update button label', () => {
             expect(
-              audioSelector.$el
+              audioTracks.$el
                 .find('#audiotracks-button')
                 .text()
                 .replace(/\/assets.*\.svg/g, '')
@@ -130,7 +137,7 @@ describe('AudioSelector', () => {
             ).toBe('Spanish')
           })
           it('should highlight the selected menu item', () => {
-            const selectedItem = audioSelector.$el.find(
+            const selectedItem = audioTracks.$el.find(
               '#audiotracks-select .current',
             )
             expect(selectedItem.text().trim()).toBe('Spanish')
@@ -142,10 +149,10 @@ describe('AudioSelector', () => {
           })
           it('should unhighlight any previously highlighted menu item', () => {
             expect(
-              audioSelector.$el.find('#audiotracks-select li.current').length,
+              audioTracks.$el.find('#audiotracks-select li.current').length,
             ).toBe(1)
             expect(
-              audioSelector.$el.find(
+              audioTracks.$el.find(
                 '#audiotracks-select a.gcore-skin-active[data-audiotracks-select]',
               ).length,
             ).toBe(1)
@@ -153,11 +160,21 @@ describe('AudioSelector', () => {
         })
       })
     })
+    describe('when button is clicked twice', () => {
+      beforeEach(() => {
+        audioTracks.$el.find('#audiotracks-button').click()
+        audioTracks.$el.find('#audiotracks-button').click()
+      })
+      it('should collapse the menu', () => {
+        expect(audioTracks.$el.find('#audiotracks-select').hasClass('hidden')).toBe(true)
+        expect(audioTracks.$el.find('#audiotracks-button').attr('aria-expanded')).toBe('false')
+      })
+    })
   })
   describe('when audio tracks are not available', () => {
     it('should not render the button', () => {
-      expect(audioSelector.$el.find('#audiotracks-button').length).toBe(0)
-      expect(audioSelector.$el.find('#audiotracks-select').length).toBe(0)
+      expect(audioTracks.$el.find('#audiotracks-button').length).toBe(0)
+      expect(audioTracks.$el.find('#audiotracks-select').length).toBe(0)
     })
   })
 })

package/src/plugins/audio-selector/__tests__/__snapshots__/AudioSelector.test.ts.snap

@@ -65,3 +65,69 @@ exports[`AudioSelector > given that audio tracks are available > when button is
 </ul>
 "
 `;
+
+exports[`AudioTracks > given that audio tracks are available > should render menu hidden 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="false">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;
+
+exports[`AudioTracks > given that audio tracks are available > when button is clicked > should show menu 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu" id="audiotracks-select" role="menu">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;
+
+exports[`AudioTracks > given that audio tracks are available > when button is clicked > when audio track is selected > should hide the menu 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;

package/src/plugins/audio-selector/__tests__/__snapshots__/AudioTracks.test.ts.snap

@@ -0,0 +1,67 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AudioTracks > given that audio tracks are available > should render menu hidden 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="false">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;
+
+exports[`AudioTracks > given that audio tracks are available > when button is clicked > should show menu 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu" id="audiotracks-select" role="menu">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;
+
+exports[`AudioTracks > given that audio tracks are available > when button is clicked > when audio track is selected > should hide the menu 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button" aria-haspopup="menu" aria-expanded="false">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;

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

@@ -10,6 +10,7 @@ import '../../../assets/bottom-gear/gear-sub-menu.scss'
 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'
 
 const VERSION = '2.19.12'
 
@@ -97,7 +98,7 @@ export enum GearEvents {
  * ```
  */
 export class BottomGear extends UICorePlugin {
-  private isHd = false
+  private hd = false
 
   /**
    * @internal
@@ -215,7 +216,7 @@ export class BottomGear extends UICorePlugin {
 
   private highDefinitionUpdate(isHd: boolean) {
     trace(`${T} highDefinitionUpdate`, { isHd })
-    this.isHd = isHd
+    this.hd = isHd
     this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon)
   }
 
@@ -228,7 +229,7 @@ export class BottomGear extends UICorePlugin {
     if (!mediaControl) {
       return this // TODO test
     }
-    const icon = this.isHd ? gearHdIcon : gearIcon
+    const icon = this.hd ? gearHdIcon : gearIcon
     this.$el
       .html(BottomGear.template({ icon }))
       .find('#gear-sub-menu-wrapper')
@@ -254,10 +255,14 @@ export class BottomGear extends UICorePlugin {
   }
 
   private toggleGearMenu() {
+    this.core
+      .getPlugin('media_control')
+      .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name)
     this.$el.find('#gear-options-wrapper').toggle()
   }
 
   private hide() {
+    trace(`${T} hide`)
     this.$el.find('#gear-options-wrapper').hide()
   }
 
@@ -271,6 +276,15 @@ export class BottomGear extends UICorePlugin {
       this.onMediaControlRendered,
     )
     this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide)
+    this.listenTo(
+      mediaControl,
+      ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+      (from: string) => {
+        if (from !== this.name) {
+          this.hide()
+        }
+      },
+    )
   }
 
   private onMediaControlRendered() {

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

@@ -3,6 +3,7 @@ import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
 import { BottomGear, GearEvents } from '../BottomGear'
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
 import { Events } from '@clappr/core'
+import { ExtendedEvents } from '../../media-control/MediaControl'
 
 describe('BottomGear', () => {
   let mediaControl: any
@@ -56,10 +57,30 @@ describe('BottomGear', () => {
     beforeEach(() => {
       bottomGear.$el.find('#gear-button').click()
     })
-    it('should toggle the gear menu', () => {
+    it('should open the gear menu', () => {
       expect(
         bottomGear.$el.find('#gear-options-wrapper').css('display'),
       ).not.toBe('none')
     })
+    it('should trigger media control menu collapse', () => {
+      expect(mediaControl.trigger).toHaveBeenCalledWith(
+        ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+        'bottom_gear',
+      )
+    })
+  })
+  describe('when clicked twice', () => {
+    beforeEach(() => {
+      console.log('display:%s', bottomGear.$el.find('#gear-options-wrapper').css('display'))
+      bottomGear.$el.find('#gear-button').click()
+      console.log('display:%s', bottomGear.$el.find('#gear-options-wrapper').css('display'))
+      bottomGear.$el.find('#gear-button').click()
+      console.log('display:%s', bottomGear.$el.find('#gear-options-wrapper').css('display'))
+    })
+    it('should collapse the gear menu', () => {
+      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+        'none',
+      )
+    })
   })
 })