@gcorevideo/player 2.25.6 → 2.25.8

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

@@ -1,19 +1,18 @@
 import { Events, UICorePlugin, template } from '@clappr/core'
 import { AudioTrack } from '@clappr/core/types/base/playback/playback.js'
 import assert from 'assert'
+// import { trace } from '@gcorevideo/utils'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
 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 { 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.
@@ -28,6 +27,8 @@ const T = 'plugins.audiotracks'
 export class AudioTracks extends UICorePlugin {
   private currentTrack: AudioTrack | null = null
 
+  private open = false
+
   private tracks: AudioTrack[] = []
 
   /**
@@ -58,7 +59,7 @@ export class AudioTracks extends UICorePlugin {
    */
   override get attributes() {
     return {
-      class: 'media-control-audiotracks',
+      class: 'media-control-audiotracks media-control-dd__wrap',
     }
   }
 
@@ -67,8 +68,8 @@ export class AudioTracks extends UICorePlugin {
    */
   override get events() {
     return {
-      'click [data-audiotracks-select]': 'onTrackSelect',
-      'click #audiotracks-button': 'toggleMenu',
+      'click #gplayer-audiotracks-menu [data-item]': 'onTrackSelect',
+      'click #gplayer-audiotracks-button': 'toggleMenu',
     }
   }
 
@@ -87,15 +88,21 @@ export class AudioTracks extends UICorePlugin {
   private onCoreReady() {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
+
     this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
-      mediaControl.slot('audiotracks', this.$el)
+      this.mount()
     })
+    // TODO when tracks change, re-render and re-attach
     this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
-    this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from: string) => {
-      if (from !== this.name) {
-        this.hideMenu()
-      }
-    })
+    this.listenTo(
+      mediaControl,
+      ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+      (from: string) => {
+        if (from !== this.name) {
+          this.hideMenu()
+        }
+      },
+    )
   }
 
   private onActiveContainerChanged() {
@@ -108,6 +115,7 @@ export class AudioTracks extends UICorePlugin {
           tracks.find((track) => track.kind === 'main') ?? null // TODO test
         this.tracks = tracks
         this.render()
+        this.mount()
       },
     )
     this.listenTo(
@@ -120,6 +128,10 @@ export class AudioTracks extends UICorePlugin {
         this.updateText()
       },
     )
+    // TODO test
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
+      this.hideMenu()
+    })
   }
 
   private shouldRender() {
@@ -132,18 +144,15 @@ export class AudioTracks extends UICorePlugin {
    * @internal
    */
   override render() {
-    if (!this.shouldRender()) {
-      return this
-    }
-
     this.$el.html(
       AudioTracks.template({
-        tracks: this.tracks,
+        tracks: this.tracks ?? [],
         title: this.getTitle(),
         icon: audioArrow,
         current: this.currentTrack?.id,
       }),
     )
+    this.$el.find('#gplayer-audiotracks-menu').hide()
     this.updateText()
     this.highlightCurrentTrack()
 
@@ -151,7 +160,7 @@ export class AudioTracks extends UICorePlugin {
   }
 
   private onTrackSelect(event: MouseEvent) {
-    const id = (event.currentTarget as HTMLElement)?.dataset?.audiotracksSelect
+    const id = (event.currentTarget as HTMLElement)?.dataset?.item
     if (id) {
       this.selectAudioTrack(id)
     }
@@ -167,31 +176,40 @@ 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')
+    this.open = false
+    this.$el.find('#gplayer-audiotracks-menu').hide()
+    this.$el.find('#gplayer-audiotracks-button').attr('aria-expanded', 'false')
   }
 
   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)
+    this.open = !this.open
+
+    this.core
+      .getPlugin('media_control')
+      .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name)
+    if (this.open) {
+      this.$el.find('#gplayer-audiotracks-menu').show()
+    } else {
+      this.$el.find('#gplayer-audiotracks-menu').hide()
+    }
+    this.$el
+      .find('#gplayer-audiotracks-button')
+      .attr('aria-expanded', this.open)
   }
 
   private buttonElement(): ZeptoResult {
-    return this.$('button')
+    return this.$('#gplayer-audiotracks-button')
   }
 
   private buttonElementText(): ZeptoResult {
-    return this.$('button .audio-text')
+    return this.$el.find('#gplayer-audiotracks-button-text')
   }
 
   private trackElement(id?: string): ZeptoResult {
     return (
       this.$(
-        '#audiotracks-select a' +
-          (id !== undefined ? `[data-audiotracks-select="${id}"]` : ''),
+        '#gplayer-audiotracks-menu a' +
+          (id !== undefined ? `[data-item="${id}"]` : ''),
       ) as ZeptoResult
     ).parent()
   }
@@ -229,4 +247,10 @@ export class AudioTracks extends UICorePlugin {
         .attr('aria-checked', 'true')
     }
   }
+
+  private mount() {
+    if (this.shouldRender()) {
+      this.core.getPlugin('media_control')?.slot('audiotracks', this.$el)
+    }
+  }
 }

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

@@ -1,5 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { Events } from '@clappr/core'
+
 import { ExtendedEvents } from '../../media-control/MediaControl'
 import { AudioTracks } from '../AudioTracks'
 
@@ -29,54 +30,51 @@ describe('AudioTracks', () => {
     core.emit(Events.CORE_READY)
     core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
   })
-  describe('before media control is rendererd', () => {
-    beforeEach(() => {
-      emitTracksAvailable(core, TRACKS)
+  describe('basically', () => {
+    it('should render button', () => {
+      expect(audioTracks.$el.find('#gplayer-audiotracks-button').length).toBe(1)
     })
-    it('should not attach to the media control', () => {
-      expect(mediaControl.slot).not.toHaveBeenCalledWith(
-        'audiotracks',
-        expect.anything(),
-      )
+    it('should render menu hidden', () => {
+      expect(audioTracks.$el.find('#gplayer-audiotracks-menu').css('display')).toBe('none')
     })
   })
-  describe('when media control is rendered', () => {
-    beforeEach(() => {
-      mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
-    })
-    it('should attach to the media control', () => {
-      expect(mediaControl.slot).toHaveBeenCalledWith(
+  describe('until audio tracks are available', () => {
+    it('should not mount', () => {
+      expect(mediaControl.slot).not.toHaveBeenCalledWith(
         'audiotracks',
-        audioTracks.$el,
+        expect.anything(),
       )
     })
   })
-  describe('given that audio tracks are available', () => {
+  describe('when audio tracks are available', () => {
     beforeEach(() => {
       emitTracksAvailable(core, TRACKS)
     })
-    it('should render button', () => {
-      expect(audioTracks.$el.find('#audiotracks-button').length).toBe(1)
-    })
-    it('should render menu hidden', () => {
+    it('should render menu', () => {
       expect(audioTracks.el.innerHTML).toMatchSnapshot()
       expect(
-        audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
-      ).toBe(true)
-      const trackItems = audioTracks.$el.find('#audiotracks-select li')
+        audioTracks.$el.find('#gplayer-audiotracks-menu').css('display'),
+      ).toBe('none')
+      const trackItems = audioTracks.$el.find('#gplayer-audiotracks-menu li')
       expect(trackItems.length).toBe(2)
       expect(trackItems.eq(0).text().trim()).toBe('English')
       expect(trackItems.eq(1).text().trim()).toBe('Spanish')
     })
+    it('should mount', () => {
+      expect(mediaControl.slot).toHaveBeenCalledWith(
+        'audiotracks',
+        audioTracks.$el,
+      )
+    })
     describe('when button is clicked', () => {
       beforeEach(() => {
-        audioTracks.$el.find('#audiotracks-button').click()
+        audioTracks.$el.find('#gplayer-audiotracks-button').click()
       })
       it('should show menu', () => {
         expect(audioTracks.$el.html()).toMatchSnapshot()
         expect(
-          audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
-        ).toBe(false)
+          audioTracks.$el.find('#gplayer-audiotracks-menu').css('display'),
+        ).not.toBe('none')
       })
       it('should collapse all other menus', () => {
         expect(mediaControl.trigger).toHaveBeenCalledWith(
@@ -87,7 +85,7 @@ describe('AudioTracks', () => {
       describe('when audio track is selected', () => {
         beforeEach(() => {
           audioTracks.$el
-            .find('#audiotracks-select [data-audiotracks-select="2"]')
+            .find('#gplayer-audiotracks-menu [data-item="2"]')
             .click()
         })
         it('should switch to the selected audio track', () => {
@@ -98,13 +96,13 @@ describe('AudioTracks', () => {
         it('should hide the menu', () => {
           expect(audioTracks.$el.html()).toMatchSnapshot()
           expect(
-            audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
-          ).toBe(true)
-          expect(audioTracks.$el.find('#audiotracks-button').attr('aria-expanded')).toBe('false')
+            audioTracks.$el.find('#gplayer-audiotracks-menu').css('display'),
+          ).toBe('none')
+          expect(audioTracks.$el.find('#gplayer-audiotracks-button').attr('aria-expanded')).toBe('false')
         })
         it('should add changing class to the button', () => {
           expect(
-            audioTracks.$el.find('#audiotracks-button').hasClass('changing'),
+            audioTracks.$el.find('#gplayer-audiotracks-button').hasClass('changing'),
           ).toBe(true)
         })
         describe('when current audio track changes', () => {
@@ -123,14 +121,14 @@ describe('AudioTracks', () => {
           it('should update button class', () => {
             expect(
               audioTracks.$el
-                .find('#audiotracks-button')
+                .find('#gplayer-audiotracks-button')
                 .hasClass('changing'),
             ).toBe(false)
           })
           it('should update button label', () => {
             expect(
               audioTracks.$el
-                .find('#audiotracks-button')
+                .find('#gplayer-audiotracks-button')
                 .text()
                 .replace(/\/assets.*\.svg/g, '')
                 .trim(),
@@ -138,22 +136,22 @@ describe('AudioTracks', () => {
           })
           it('should highlight the selected menu item', () => {
             const selectedItem = audioTracks.$el.find(
-              '#audiotracks-select .current',
+              '#gplayer-audiotracks-menu .current',
             )
             expect(selectedItem.text().trim()).toBe('Spanish')
             expect(
               selectedItem
-                .find('a[data-audiotracks-select]')
+                .find('a[data-item]')
                 .hasClass('gcore-skin-active'),
             ).toBe(true)
           })
           it('should unhighlight any previously highlighted menu item', () => {
             expect(
-              audioTracks.$el.find('#audiotracks-select li.current').length,
+              audioTracks.$el.find('#gplayer-audiotracks-menu li.current').length,
             ).toBe(1)
             expect(
               audioTracks.$el.find(
-                '#audiotracks-select a.gcore-skin-active[data-audiotracks-select]',
+                '#gplayer-audiotracks-menu a.gcore-skin-active[data-item]',
               ).length,
             ).toBe(1)
           })
@@ -162,19 +160,36 @@ describe('AudioTracks', () => {
     })
     describe('when button is clicked twice', () => {
       beforeEach(() => {
-        audioTracks.$el.find('#audiotracks-button').click()
-        audioTracks.$el.find('#audiotracks-button').click()
+        audioTracks.$el.find('#gplayer-audiotracks-button').click()
+        audioTracks.$el.find('#gplayer-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')
+        expect(audioTracks.$el.find('#gplayer-audiotracks-menu').css('display')).toBe('none')
+        expect(audioTracks.$el.find('#gplayer-audiotracks-button').attr('aria-expanded')).toBe('false')
+      })
+    })
+    describe('when media control is rendered', () => {
+      beforeEach(() => {
+        mediaControl.slot.mockClear()
+        mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+      })
+      it('should remount', () => {
+        expect(mediaControl.slot).toHaveBeenCalledWith(
+          'audiotracks',
+          audioTracks.$el,
+        )
       })
     })
   })
-  describe('when audio tracks are not available', () => {
-    it('should not render the button', () => {
-      expect(audioTracks.$el.find('#audiotracks-button').length).toBe(0)
-      expect(audioTracks.$el.find('#audiotracks-select').length).toBe(0)
+  describe('when container is clicked', () => {
+    beforeEach(() => {
+      emitTracksAvailable(core, TRACKS)
+      audioTracks.$el.find('#gplayer-audiotracks-button').click()
+      core.activeContainer.emit(Events.CONTAINER_CLICK)
+    })
+    it('should hide the menu', () => {
+      expect(audioTracks.$el.find('#gplayer-audiotracks-menu').css('display')).toBe('none')
+      expect(audioTracks.$el.find('#gplayer-audiotracks-button').attr('aria-expanded')).toBe('false')
     })
   })
 })

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

@@ -1,19 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AudioSelector > 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">
+"<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color" id="gplayer-mc-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">
+<ul class="gcore-skin-bg-color menu hidden" id="media-control-audiotracks-select" role="menu">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+            <a href="#" class="gcore-skin-text-color" data-media-control-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">
+            <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>
@@ -23,19 +23,19 @@ exports[`AudioSelector > given that audio tracks are available > should render m
 `;
 
 exports[`AudioSelector > 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">
+"<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color" id="gplayer-mc-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">
+<ul class="gcore-skin-bg-color menu" id="media-control-audiotracks-select" role="menu">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+            <a href="#" class="gcore-skin-text-color" data-media-control-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">
+            <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>
@@ -45,19 +45,19 @@ exports[`AudioSelector > given that audio tracks are available > when button is
 `;
 
 exports[`AudioSelector > 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">
+"<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color changing" id="gplayer-mc-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">
+<ul class="gcore-skin-bg-color menu hidden" id="media-control-audiotracks-select" role="menu">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+            <a href="#" class="gcore-skin-text-color" data-media-control-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">
+            <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>
@@ -67,19 +67,19 @@ exports[`AudioSelector > given that audio tracks are available > when button is
 `;
 
 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">
+"<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color" id="gplayer-mc-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">
+<ul class="gcore-skin-bg-color menu hidden" id="media-control-audiotracks-select" role="menu">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+            <a href="#" class="gcore-skin-text-color" data-media-control-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">
+            <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>
@@ -89,19 +89,19 @@ exports[`AudioTracks > given that audio tracks are available > should render men
 `;
 
 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">
+"<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color" id="gplayer-mc-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">
+<ul class="gcore-skin-bg-color menu" id="media-control-audiotracks-select" role="menu">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+            <a href="#" class="gcore-skin-text-color" data-media-control-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">
+            <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>
@@ -111,19 +111,19 @@ exports[`AudioTracks > given that audio tracks are available > when button is cl
 `;
 
 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">
+"<button data-gplayer-mc-audiotracks-button="" class="gcore-skin-button-color changing" id="gplayer-mc-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">
+<ul class="gcore-skin-bg-color menu hidden" id="media-control-audiotracks-select" role="menu">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+            <a href="#" class="gcore-skin-text-color" data-media-control-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">
+            <a href="#" class="gcore-skin-text-color" data-media-control-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>

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

@@ -1,19 +1,20 @@
 // 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>
+exports[`AudioTracks > when audio tracks are available > should render menu 1`] = `
+"<button class="gcore-skin-button-color media-control-dd" id="gplayer-audiotracks-button" aria-haspopup="menu" aria-expanded="false">
+    <span class="media-control-dd__text" id="gplayer-audiotracks-button-text"></span>
+    <span class="media-control-dd__arrow">/assets/icons/old/quality-arrow.svg</span>
 </button>
-<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
+<ul class="gcore-skin-bg-color menu media-control-dd__popup" id="gplayer-audiotracks-menu" role="menu" style="display: none;">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+            <a href="#" class="gcore-skin-text-color" data-item="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">
+            <a href="#" class="gcore-skin-text-color" data-item="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>
@@ -22,20 +23,21 @@ exports[`AudioTracks > given that audio tracks are available > should render men
 "
 `;
 
-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>
+exports[`AudioTracks > when audio tracks are available > when button is clicked > should show menu 1`] = `
+"<button class="gcore-skin-button-color media-control-dd" id="gplayer-audiotracks-button" aria-haspopup="menu" aria-expanded="true">
+    <span class="media-control-dd__text" id="gplayer-audiotracks-button-text"></span>
+    <span class="media-control-dd__arrow">/assets/icons/old/quality-arrow.svg</span>
 </button>
-<ul class="gcore-skin-bg-color menu" id="audiotracks-select" role="menu">
+<ul class="gcore-skin-bg-color menu media-control-dd__popup" id="gplayer-audiotracks-menu" role="menu">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+            <a href="#" class="gcore-skin-text-color" data-item="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">
+            <a href="#" class="gcore-skin-text-color" data-item="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>
@@ -44,20 +46,21 @@ exports[`AudioTracks > given that audio tracks are available > when button is cl
 "
 `;
 
-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>
+exports[`AudioTracks > when audio tracks are available > when button is clicked > when audio track is selected > should hide the menu 1`] = `
+"<button class="gcore-skin-button-color media-control-dd changing" id="gplayer-audiotracks-button" aria-haspopup="menu" aria-expanded="false">
+    <span class="media-control-dd__text" id="gplayer-audiotracks-button-text"></span>
+    <span class="media-control-dd__arrow">/assets/icons/old/quality-arrow.svg</span>
 </button>
-<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
+<ul class="gcore-skin-bg-color menu media-control-dd__popup" id="gplayer-audiotracks-menu" role="menu" style="display: none;">
     
         <li class="">
-            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+            <a href="#" class="gcore-skin-text-color" data-item="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">
+            <a href="#" class="gcore-skin-text-color" data-item="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>

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

@@ -198,7 +198,7 @@ export class BottomGear extends UICorePlugin {
         .appendTo(this.$el.find('#gear-options-wrapper'))
       $item.on('click', (e: MouseEvent) => {
         e.stopPropagation()
-        this.alignSubmenu($subMenu)
+        this.clampPopup($subMenu)
         $subMenu.show()
         this.$el.find('#gear-options').hide()
       })
@@ -323,10 +323,9 @@ export class BottomGear extends UICorePlugin {
     mediaControl.slot('gear', this.$el)
   }
 
-  private alignSubmenu($subMenu: ZeptoResult) {
+  private clampPopup($subMenu: ZeptoResult) {
     const availableHeight =
-      this.core.getPlugin('media_control').getAvailableHeight() -
-      MENU_VMARGIN * 2
+      this.core.getPlugin('media_control').getAvailablePopupHeight()
     $subMenu.css('max-height', `${availableHeight}px`)
     $subMenu
       .find('.gear-sub-menu')

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

@@ -110,7 +110,7 @@ describe('BottomGear', () => {
     })
     describe('when submenu is open', () => {
       beforeEach(async () => {
-        mediaControl.getAvailableHeight.mockReturnValue(198)
+        mediaControl.getAvailablePopupHeight.mockReturnValue(174)
         bottomGear.$el.find('#gear-button').click()
         await new Promise((resolve) => setTimeout(resolve, 0))
         bottomGear.$el.find('#more-button').click()