@gcorevideo/player 2.25.7 → 2.25.8

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,gBAqB/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,gBAuB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

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

package/package.json

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

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()

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

@@ -49,6 +49,8 @@ const STANDARD_MEDIA_CONTROL_ELEMENTS: string[] = [
   'volume',
 ]
 
+const MENU_VMARGIN = 12
+
 /**
  * Built-in media control elements.
  * @beta
@@ -562,6 +564,13 @@ export class MediaControl extends UICorePlugin {
     )
   }
 
+  /**
+   * @returns Vertical space available to render a popup menu
+   */
+  getAvailablePopupHeight() {
+    return this.getAvailableHeight() - MENU_VMARGIN * 2
+  }
+
   /**
    * Set the initial volume, which is preserved when playback is interrupted by an advertisement
    */
@@ -681,6 +690,7 @@ export class MediaControl extends UICorePlugin {
     const pos = offset
       ? Math.min(1, Math.max(offset / this.$seekBarContainer.width(), 0))
       : 0
+
     if (this.settings.seekEnabled) {
       // TODO test that it works when the element does not exist
       this.$seekBarHover.css({ left: hoverOffset })

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -64,6 +64,8 @@ export class ClosedCaptions extends UICorePlugin {
 
   private active = false
 
+  private open = false
+
   private track: TextTrackItem | null = null
 
   private tracks: TextTrackItem[] = []
@@ -91,16 +93,16 @@ export class ClosedCaptions extends UICorePlugin {
     return VERSION
   }
 
-  private static readonly template = template(comboboxHTML)
+  private static readonly templateControl = template(comboboxHTML)
 
-  private static readonly templateString = template(stringHTML)
+  private static readonly templateLine = template(stringHTML)
 
   /**
    * @internal
    */
   override get attributes() {
     return {
-      class: 'media-control-cc',
+      class: 'media-control-cc media-control-dd__wrap',
     }
   }
 
@@ -109,8 +111,8 @@ export class ClosedCaptions extends UICorePlugin {
    */
   override get events() {
     return {
-      'click #cc-select li a': 'onItemSelect',
-      'click #cc-button': 'toggleMenu',
+      'click #gplayer-cc-menu [data-item]': 'onItemSelect',
+      'click #gplayer-cc-button': 'toggleMenu',
     }
   }
 
@@ -136,10 +138,9 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private onCoreReady() {
-    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) // TODO mount to media control
+    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.mount)
     this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, () => {
       this.hideMenu()
     })
@@ -155,7 +156,6 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private onContainerChanged() {
-    trace(`${T} onContainerChanged`)
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_FULLSCREEN,
@@ -176,6 +176,10 @@ export class ClosedCaptions extends UICorePlugin {
       Events.PLAYBACK_SUBTITLE_CHANGED,
       this.onSubtitleChanged,
     )
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
+      // TODO test
+      this.hideMenu()
+    })
 
     // fix for iOS
     const video = this.core.activePlayback.el
@@ -197,6 +201,7 @@ export class ClosedCaptions extends UICorePlugin {
   private onSubtitleAvailable() {
     trace(`${T} onSubtitleAvailable`)
     this.applyTracks()
+    this.mount()
   }
 
   private onSubtitleChanged({ id }: { id: number }) {
@@ -276,6 +281,7 @@ export class ClosedCaptions extends UICorePlugin {
 
     try {
       this.resizeFont()
+      this.clampPopup()
     } catch (error) {
       reportError(error)
     }
@@ -286,7 +292,10 @@ export class ClosedCaptions extends UICorePlugin {
    */
   hide() {
     this.active = false
+    this.open = false
     this.renderIcon()
+    this.$el.find('#gplayer-cc-menu').hide()
+    this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false')
     this.$line.hide()
     if (this.tracks) {
       for (const t of this.tracks) {
@@ -337,20 +346,21 @@ export class ClosedCaptions extends UICorePlugin {
       return this
     }
 
-    if (!this.shouldRender()) {
-      return this
-    }
-
-    const mediaControl = this.core.getPlugin('media_control')
-
-    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.$el.html(
+      ClosedCaptions.templateControl({
+        tracks: this.tracks ?? [],
+        i18n: this.core.i18n,
+        current: this.track?.id ?? -1,
+      }),
+    )
+    this.$el.find('#gplayer-cc-menu').hide()
+    this.open = false
+    this.core.activeContainer.$el.find('#gplayer-cc-line').remove()
+    this.$line = $(ClosedCaptions.templateLine())
     this.resizeFont()
+    this.clampPopup()
 
     this.core.activeContainer.$el.append(this.$line)
-    mediaControl.slot('cc', this.$el)
 
     this.updateSelection()
 
@@ -371,11 +381,12 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private onItemSelect(event: MouseEvent) {
-    const id = (event.target as HTMLElement).dataset.ccSelect ?? '-1'
+    // event.target does not exist for some reason in tests
+    const id =
+      ((event.target ?? event.currentTarget) as HTMLElement).dataset?.item ??
+      '-1'
 
-    trace(`${T} onItemSelect`, { id })
-
-    localStorage.setItem(LOCAL_STORAGE_CC_ID, id)
+    localStorage.setItem(LOCAL_STORAGE_CC_ID, id) // TODO store language instead
     this.selectItem(this.findById(Number(id)))
     this.hideMenu()
     return false
@@ -398,31 +409,37 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private hideMenu() {
-    trace(`${T} hideMenu`)
-    this.$el.find('#cc-select').hide()
+    this.open = false
+    this.$el.find('#gplayer-cc-menu').hide()
+    this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false')
   }
 
   private toggleMenu() {
-    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
+    this.open = !this.open
+    if (this.open) {
+      this.$el.find('#gplayer-cc-menu').show()
+    } else {
+      this.$el.find('#gplayer-cc-menu').hide()
+    }
+    this.$el.find('#gplayer-cc-button').attr('aria-expanded', this.open)
   }
 
   private itemElement(id: number): ZeptoResult {
-    return this.$el.find(`#cc-select li a[data-cc-select="${id}"]`).parent()
+    // TODO fix semantically
+    return this.$el.find(`#gplayer-cc-menu [data-item="${id}"]`).parent()
   }
 
   private allItemElements(): ZeptoResult {
-    return this.$('#cc-select li')
+    return this.$el.find('#gplayer-cc-menu li') // TODO fix semantically
   }
 
   private selectSubtitles() {
     const trackId = this.track ? this.track.id : -1
 
-    this.core.activePlayback.closedCaptionsTrackId = trackId
+    this.core.activePlayback.closedCaptionsTrackId = trackId // TODO test
   }
 
   private getSubtitleText(track: TextTrack) {
@@ -434,6 +451,7 @@ export class ClosedCaptions extends UICorePlugin {
       for (const cue of cues) {
         if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
           lines.push((cue as VTTCue).getCueAsHTML().textContent)
+          // TODO break?
         }
       }
     }
@@ -464,10 +482,8 @@ export class ClosedCaptions extends UICorePlugin {
       .removeClass('current')
       .find('a')
       .removeClass('gcore-skin-active')
+      .attr('aria-checked', 'false')
 
-    trace(`${T} highlightCurrentSubtitles`, {
-      track: this.track?.id,
-    })
     const currentLevelElement = this.itemElement(
       this.track ? this.track.id : -1,
     )
@@ -475,11 +491,26 @@ export class ClosedCaptions extends UICorePlugin {
       .addClass('current')
       .find('a')
       .addClass('gcore-skin-active')
+      .attr('aria-checked', 'true')
   }
 
   private renderIcon() {
+    // render both icons at once
     const icon = this.active ? subtitlesOnIcon : subtitlesOffIcon
+    this.$el.find('#gplayer-cc-button').html(icon)
+  }
 
-    this.$el.find('span.cc-text').html(icon)
+  private clampPopup() {
+    const availableHeight = this.core
+      .getPlugin('media_control')
+      .getAvailablePopupHeight()
+    this.$el.find('#gplayer-cc-menu').css('max-height', `${availableHeight}px`)
+  }
+
+  private mount() {
+    if (this.shouldRender()) {
+      const mediaControl = this.core.getPlugin('media_control')
+      mediaControl.slot('cc', this.$el)
+    }
   }
 }

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

@@ -4,9 +4,9 @@ import { ClosedCaptions } from '../ClosedCaptions.js'
 import { createMockCore, createMockMediaControl } from '../../../testUtils.js'
 import { ExtendedEvents } from '../../media-control/MediaControl.js'
 
-import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
 import { Events } from '@clappr/core'
-// import { Events } from '@clappr/core';
+
+// import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
 
 // Logger.enable('*')
 // setTracer(new LogTracer('ClosedCaptions.test'))
@@ -18,6 +18,7 @@ describe('ClosedCaptions', () => {
   beforeEach(() => {
     core = createMockCore()
     mediaControl = createMockMediaControl(core)
+    mediaControl.getAvailablePopupHeight = vi.fn().mockReturnValue(211)
     core.getPlugin = vi.fn().mockImplementation((name) => {
       if (name === 'media_control') {
         return mediaControl
@@ -31,44 +32,60 @@ describe('ClosedCaptions', () => {
       core.emit(Events.CORE_READY)
       core.activePlayback.el = document.createElement('video')
       core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
-      core.activePlayback.closedCaptionsTracks = [
-        {
-          id: 1,
-          name: 'English',
-          track: {
-            language: 'en',
-            kind: 'subtitles',
-            label: 'English',
-            mode: 'hidden',
-            cues: [],
-          },
-        },
-        {
-          id: 2,
-          name: 'Spanish',
-          track: {
-            language: 'es',
-            kind: 'subtitles',
-            label: 'Spanish',
-            mode: 'hidden',
-            cues: [],
-          },
-        },
-      ]
-      core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_AVAILABLE)
-      core.activeContainer.emit(Events.CONTAINER_SUBTITLE_AVAILABLE)
     })
     it('should render', () => {
       expect(cc.el.innerHTML).toMatchSnapshot()
-      expect(cc.$el.find('#cc-button').length).toEqual(1)
-      expect(mediaControl.slot).toHaveBeenCalledWith('cc', cc.$el)
+      expect(cc.$el.find('#gplayer-cc-button').length).toEqual(1)
+      expect(cc.$el.find('#gplayer-cc-menu').css('display')).toEqual('none')
+      expect(core.activeContainer.$el.find('#gplayer-cc-line').length).toEqual(
+        1,
+      )
+    })
+    it('should clamp popup to availableheight', () => {
+      expect(cc.$el.find('#gplayer-cc-menu').css('max-height')).toBe('211px')
+    })
+    describe('until subtitle tracks are available', () => {
+      it('should not mount', () => {
+        expect(mediaControl.slot).not.toHaveBeenCalledWith(
+          'cc',
+          expect.anything(),
+        )
+        emitSubtitleAvailable(core)
+        expect(mediaControl.slot).toHaveBeenCalledWith('cc', cc.$el)
+      })
+    })
+    describe('when viewport is resized', () => {
+      beforeEach(() => {
+        mediaControl.getAvailablePopupHeight = vi.fn().mockReturnValue(197)
+        core.activeContainer.emit(Events.CONTAINER_RESIZE, {
+          width: 320,
+          height: 260,
+        })
+        core.emit(Events.CORE_RESIZE, { width: 320, height: 260 })
+      })
+      it('should clamp popup height', () => {
+        expect(cc.$el.find('#gplayer-cc-menu').css('max-height')).toBe('197px')
+      })
+    })
+    describe('when media control is rerendered', () => {
+      beforeEach(() => {
+        emitSubtitleAvailable(core)
+        mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+      })
+      it('should mount', () => {
+        expect(mediaControl.slot).toHaveBeenCalledWith('cc', cc.$el)
+      })
     })
     describe('when button is clicked', () => {
       beforeEach(() => {
-        cc.$el.find('#cc-button').click()
+        emitSubtitleAvailable(core)
+        cc.$el.find('#gplayer-cc-button').click()
       })
       it('should open menu', () => {
-        expect(cc.$el.find('#cc-select').css('display')).not.toBe('none')
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).not.toBe('none')
+        expect(cc.$el.find('#gplayer-cc-button').attr('aria-expanded')).toBe(
+          'true',
+        )
       })
       it('should collapse all other menus', () => {
         expect(mediaControl.trigger).toHaveBeenCalledWith(
@@ -79,20 +96,188 @@ describe('ClosedCaptions', () => {
     })
     describe('when clicked twice', () => {
       beforeEach(() => {
-        cc.$el.find('#cc-button').click().click()
+        emitSubtitleAvailable(core)
+        cc.$el.find('#gplayer-cc-button').click().click()
       })
       it('should collapse the menu', () => {
-        expect(cc.$el.find('#cc-select').css('display')).toBe('none')
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).toBe('none')
+        expect(cc.$el.find('#gplayer-cc-button').attr('aria-expanded')).toBe(
+          'false',
+        )
       })
     })
     describe('when media control is hidden', () => {
       beforeEach(() => {
+        emitSubtitleAvailable(core)
         cc.$el.find('#cc-button').click()
         mediaControl.trigger(Events.MEDIACONTROL_HIDE)
       })
       it('should hide menu', () => {
-        expect(cc.$el.find('#cc-select').css('display')).toBe('none')
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).toBe('none')
+      })
+    })
+    describe('when container is clicked', () => {
+      beforeEach(() => {
+        emitSubtitleAvailable(core)
+        cc.$el.find('#gplayer-cc-button').click()
+        core.activeContainer.emit(Events.CONTAINER_CLICK)
+      })
+      it('should hide menu', () => {
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).toBe('none')
+        expect(cc.$el.find('#gplayer-cc-button').attr('aria-expanded')).toBe(
+          'false',
+        )
+      })
+    })
+    describe('when subtitle is changed', () => {
+      beforeEach(async () => {
+        emitSubtitleAvailable(core)
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        core.activePlayback.getCurrentTime = vi.fn().mockReturnValue(7)
+        core.activeContainer.getCurrentTime = vi.fn().mockReturnValue(7)
+        core.activePlayback.closedCaptionsTracks[1].track.cues = [
+          {
+            startTime: 0,
+            endTime: 5,
+            text: 'Alright this is me',
+            getCueAsHTML: vi
+              .fn()
+              .mockImplementation(() =>
+                document.createTextNode('Alright this is me'),
+              ),
+          },
+          {
+            startTime: 5,
+            endTime: 10,
+            text: 'Welcome to my channel',
+            getCueAsHTML: vi
+              .fn()
+              .mockImplementation(() =>
+                document.createTextNode('Welcome to my channel'),
+              ),
+          },
+          {
+            startTime: 10,
+            endTime: 15,
+            text: 'Thank you for watching',
+            getCueAsHTML: vi
+              .fn()
+              .mockImplementation(() =>
+                document.createTextNode('Thank you for watching'),
+              ),
+          },
+        ]
+        core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_CHANGED, { id: 2 })
+      })
+      it('should activate subtitle track', () => {
+        expect(core.activePlayback.closedCaptionsTracks[1].track.mode).toBe(
+          'showing',
+        )
+        expect(core.activePlayback.closedCaptionsTracks[0].track.mode).toBe(
+          'hidden',
+        )
+      })
+      it('should show active subtitle text', () => {
+        expect(
+          core.activeContainer.$el.find('#gplayer-cc-line').text().trim(),
+        ).toEqual('Welcome to my channel')
+      })
+    })
+    describe('when subtitle is selected from menu', () => {
+      beforeEach(() => {
+        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 highlight selected menu item', () => {
+        expect(
+          cc.$el.find('#gplayer-cc-menu li:nth-child(2)').hasClass('current'),
+        ).toBe(true)
+        expect(
+          cc.$el
+            .find('#gplayer-cc-menu li:nth-child(2) a')
+            .attr('aria-checked'),
+        ).toBe('true')
+        expect(cc.$el.find('#gplayer-cc-menu li.current').length).toBe(1)
+        expect(
+          cc.$el.find('#gplayer-cc-menu li a[aria-checked="true"]').length,
+        ).toBe(1)
+      })
+      it('should collapse menu', () => {
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).toBe('none')
+      })
+    })
+    describe('when user turns off subtitles', () => {
+      beforeEach(() => {
+        emitSubtitleAvailable(core)
+        core.activePlayback.closedCaptionsTracks[1].track.mode = 'showing'
+        core.activePlayback.closedCaptionsTrackId = 2
+        core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_CHANGED, { id: 2 })
+        cc.$el.find('#gplayer-cc-button').click()
+        cc.$el.find('#gplayer-cc-menu li:nth-child(3) a').click() // off
+      })
+      it('should hide menu', () => {
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).toBe('none')
+      })
+      it('should hide subtitle text', () => {
+        expect(
+          core.activeContainer.$el.find('#gplayer-cc-line').text().trim(),
+        ).toBe('')
+      })
+      it('should deactivate subtitle track', () => {
+        expect(core.activePlayback.closedCaptionsTrackId).toEqual(-1)
+        expect(core.activePlayback.closedCaptionsTracks[0].track.mode).toBe(
+          'hidden',
+        )
+        expect(core.activePlayback.closedCaptionsTracks[1].track.mode).toBe(
+          'hidden',
+        )
+      })
+      it('should select menu item', () => {
+        expect(
+          cc.$el.find('#gplayer-cc-menu li:nth-child(3)').hasClass('current'),
+        ).toBe(true)
+        expect(
+          cc.$el
+            .find('#gplayer-cc-menu li:nth-child(3) a')
+            .attr('aria-checked'),
+        ).toBe('true')
+        expect(cc.$el.find('#gplayer-cc-menu li.current').length).toBe(1)
+        expect(
+          cc.$el.find('#gplayer-cc-menu li a[aria-checked="true"]').length,
+        ).toBe(1)
       })
     })
   })
 })
+
+function emitSubtitleAvailable(core: any) {
+  core.activePlayback.closedCaptionsTracks = [
+    {
+      id: 1,
+      name: 'English',
+      track: {
+        language: 'en',
+        kind: 'subtitles',
+        label: 'English',
+        mode: 'hidden',
+        cues: [],
+      },
+    },
+    {
+      id: 2,
+      name: 'Spanish',
+      track: {
+        language: 'es',
+        kind: 'subtitles',
+        label: 'Spanish',
+        mode: 'hidden',
+        cues: [],
+      },
+    },
+  ]
+  core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_AVAILABLE)
+  core.activeContainer.emit(Events.CONTAINER_SUBTITLE_AVAILABLE)
+}

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

@@ -1,25 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ClosedCaptions > basically > should render 1`] = `
-"<button data-cc-button="" class="media-control-button media-control-icon gcore-skin-button-color" id="cc-button">
-    <span class="cc-text">/assets/icons/new/subtitles-off.svg</span>
-</button>
+"<button class="media-control-button media-control-icon gcore-skin-button-color media-control-dd" id="gplayer-cc-button" aria-haspopup="menu" aria-expanded="false" aria-controls="gplayer-cc-menu">/assets/icons/new/subtitles-off.svg</button>
 
-<ul class="gcore-skin-bg-color" id="cc-select" style="display: none;">
+<ul class="gcore-skin-bg-color media-control-dd__popup" id="gplayer-cc-menu" role="menu" style="display: none; max-height: 211px;">
     
-        <li class="">
-            <a href="#" class="gcore-skin-text-color" data-cc-select="1">
-                English
-            </a>
-        </li>
-    
-        <li class="">
-            <a href="#" class="gcore-skin-text-color" data-cc-select="2">
-                Spanish
-            </a>
-        </li>
-    
-    <li class="current"><a href="#" class="gcore-skin-text-color gcore-skin-active" data-cc-select="-1">off</a></li>
-</ul>
-"
+    <li class="current">
+        <a href="#" class="gcore-skin-text-color gcore-skin-active" data-item="-1" role="menuitemradio" aria-checked="true">
+            off
+        </a>
+    </li>
+</ul>"
 `;

package/src/testUtils.ts

@@ -134,6 +134,8 @@ export function createMockMediaControl(core: any) {
   // @ts-ignore
   mediaControl.getAvailableHeight = vi.fn().mockReturnValue(300)
   // @ts-ignore
+  mediaControl.getAvailablePopupHeight = vi.fn().mockReturnValue(286)
+  // @ts-ignore
   mediaControl.toggleElement = vi.fn()
   vi.spyOn(mediaControl, 'trigger')
   core.$el.append(mediaControl.$el)