@gcorevideo/player 2.25.7 → 2.25.9

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -42,6 +42,7 @@ const T = 'plugins.cc';
 export class ClosedCaptions extends UICorePlugin {
     isPreselectedApplied = false;
     active = false;
+    open = false;
     track = null;
     tracks = [];
     $line = null;
@@ -63,14 +64,14 @@ export class ClosedCaptions extends UICorePlugin {
     static get version() {
         return VERSION;
     }
-    static template = template(comboboxHTML);
-    static templateString = template(stringHTML);
+    static templateControl = template(comboboxHTML);
+    static templateLine = template(stringHTML);
     /**
      * @internal
      */
     get attributes() {
         return {
-            class: 'media-control-cc',
+            class: 'media-control-cc media-control-dd__wrap',
         };
     }
     /**
@@ -78,8 +79,8 @@ export class ClosedCaptions extends UICorePlugin {
      */
     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',
         };
     }
     get preselectedLanguage() {
@@ -92,14 +93,12 @@ export class ClosedCaptions extends UICorePlugin {
      */
     bindEvents() {
         this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
     }
     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();
         });
@@ -110,11 +109,15 @@ export class ClosedCaptions extends UICorePlugin {
         });
     }
     onContainerChanged() {
-        trace(`${T} onContainerChanged`);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
+        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, '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);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
+            // TODO test
+            this.hideMenu();
+        });
         // fix for iOS
         const video = this.core.activePlayback.el;
         assert(video, 'video element is required');
@@ -132,6 +135,7 @@ export class ClosedCaptions extends UICorePlugin {
     onSubtitleAvailable() {
         trace(`${T} onSubtitleAvailable`);
         this.applyTracks();
+        this.mount();
     }
     onSubtitleChanged({ id }) {
         trace(`${T} onSubtitleChanged`, { id });
@@ -183,8 +187,7 @@ export class ClosedCaptions extends UICorePlugin {
         this.show();
         this.stopListening(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
     }
-    playerResize() {
-        trace(`${T} playerResize`);
+    onContainerResize() {
         const shouldShow = this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
             this.track &&
@@ -196,6 +199,7 @@ export class ClosedCaptions extends UICorePlugin {
         }
         try {
             this.resizeFont();
+            this.clampPopup();
         }
         catch (error) {
             reportError(error);
@@ -206,7 +210,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) {
@@ -249,17 +256,18 @@ export class ClosedCaptions extends UICorePlugin {
         if (!this.core.activeContainer) {
             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();
         this.renderIcon();
         return this;
@@ -273,9 +281,10 @@ export class ClosedCaptions extends UICorePlugin {
         this.updateSelection();
     }
     onItemSelect(event) {
-        const id = event.target.dataset.ccSelect ?? '-1';
-        trace(`${T} onItemSelect`, { id });
-        localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
+        // event.target does not exist for some reason in tests
+        const id = (event.target ?? event.currentTarget).dataset?.item ??
+            '-1';
+        localStorage.setItem(LOCAL_STORAGE_CC_ID, id); // TODO store language instead
         this.selectItem(this.findById(Number(id)));
         this.hideMenu();
         return false;
@@ -292,26 +301,33 @@ export class ClosedCaptions extends UICorePlugin {
         }
     }
     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');
     }
     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);
     }
     itemElement(id) {
-        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();
     }
     allItemElements() {
-        return this.$('#cc-select li');
+        return this.$el.find('#gplayer-cc-menu li'); // TODO fix semantically
     }
     selectSubtitles() {
         const trackId = this.track ? this.track.id : -1;
-        this.core.activePlayback.closedCaptionsTrackId = trackId;
+        this.core.activePlayback.closedCaptionsTrackId = trackId; // TODO test
     }
     getSubtitleText(track) {
         const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
@@ -321,6 +337,7 @@ export class ClosedCaptions extends UICorePlugin {
             for (const cue of cues) {
                 if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
                     lines.push(cue.getCueAsHTML().textContent);
+                    // TODO break?
                 }
             }
         }
@@ -346,18 +363,30 @@ export class ClosedCaptions extends UICorePlugin {
         this.allItemElements()
             .removeClass('current')
             .find('a')
-            .removeClass('gcore-skin-active');
-        trace(`${T} highlightCurrentSubtitles`, {
-            track: this.track?.id,
-        });
+            .removeClass('gcore-skin-active')
+            .attr('aria-checked', 'false');
         const currentLevelElement = this.itemElement(this.track ? this.track.id : -1);
         currentLevelElement
             .addClass('current')
             .find('a')
-            .addClass('gcore-skin-active');
+            .addClass('gcore-skin-active')
+            .attr('aria-checked', 'true');
     }
     renderIcon() {
+        // render both icons at once
         const icon = this.active ? subtitlesOnIcon : subtitlesOffIcon;
-        this.$el.find('span.cc-text').html(icon);
+        this.$el.find('#gplayer-cc-button').html(icon);
+    }
+    clampPopup() {
+        const availableHeight = this.core
+            .getPlugin('media_control')
+            .getAvailablePopupHeight();
+        this.$el.find('#gplayer-cc-menu').css('max-height', `${availableHeight}px`);
+    }
+    mount() {
+        if (this.shouldRender()) {
+            const mediaControl = this.core.getPlugin('media_control');
+            mediaControl.slot('cc', this.$el);
+        }
     }
 }

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.9",
   "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',
     }
   }
 
@@ -127,7 +129,6 @@ export class ClosedCaptions extends UICorePlugin {
    */
   override bindEvents() {
     this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
-    this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize)
     this.listenTo(
       this.core,
       Events.CORE_ACTIVE_CONTAINER_CHANGED,
@@ -136,10 +137,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,11 +155,15 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private onContainerChanged() {
-    trace(`${T} onContainerChanged`)
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_FULLSCREEN,
-      this.playerResize,
+      this.onContainerResize,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_RESIZE,
+      this.onContainerResize,
     )
     this.listenTo(
       this.core.activeContainer,
@@ -176,6 +180,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 +205,7 @@ export class ClosedCaptions extends UICorePlugin {
   private onSubtitleAvailable() {
     trace(`${T} onSubtitleAvailable`)
     this.applyTracks()
+    this.mount()
   }
 
   private onSubtitleChanged({ id }: { id: number }) {
@@ -260,8 +269,7 @@ export class ClosedCaptions extends UICorePlugin {
     )
   }
 
-  private playerResize() {
-    trace(`${T} playerResize`)
+  private onContainerResize() {
     const shouldShow =
       this.core.activeContainer &&
       isFullscreen(this.core.activeContainer.el) &&
@@ -276,6 +284,7 @@ export class ClosedCaptions extends UICorePlugin {
 
     try {
       this.resizeFont()
+      this.clampPopup()
     } catch (error) {
       reportError(error)
     }
@@ -286,7 +295,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 +349,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 +384,12 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private onItemSelect(event: MouseEvent) {
-    const id = (event.target as HTMLElement).dataset.ccSelect ?? '-1'
-
-    trace(`${T} onItemSelect`, { id })
+    // event.target does not exist for some reason in tests
+    const id =
+      ((event.target ?? event.currentTarget) as HTMLElement).dataset?.item ??
+      '-1'
 
-    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 +412,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 +454,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 +485,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 +494,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)
+    }
   }
 }