@gcorevideo/player 2.22.17 → 2.22.20

package/lib/plugins/media-control/MediaControl.js

@@ -20,14 +20,21 @@ import volumeMaxIcon from '../../../assets/icons/new/volume-max.svg';
 import volumeOffIcon from '../../../assets/icons/new/volume-off.svg';
 import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg';
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg';
+const MANAGED_ELEMENTS = [
+    'dvr',
+    'duration',
+    'fullscreen',
+    'hd-indicator',
+    'position',
+    'seekbar',
+    'volume',
+];
 const DEFAULT_SETTINGS = {
     default: [],
     left: ['dvr'],
     right: [
         'audiotracks',
         'cc',
-        // 'dvr',
-        // 'duration',
         'fullscreen',
         'gear',
         'multicamera',
@@ -46,10 +53,10 @@ const T = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
-    'dvr',
     'volume',
     'position',
     'duration',
+    'dvr',
 ];
 const { Config, Fullscreen, formatTime, extend, removeArrayItem } = Utils;
 function orderByOrderPattern(arr, order) {
@@ -696,8 +703,7 @@ export class MediaControl extends UICorePlugin {
             }
             this.$el.show();
             this.trigger(Events.MEDIACONTROL_SHOW, this.name);
-            this.container &&
-                this.container.trigger(Events.CONTAINER_MEDIACONTROL_SHOW, this.name);
+            this.core.activeContainer?.trigger(Events.CONTAINER_MEDIACONTROL_SHOW, this.name);
             this.$el.removeClass('media-control-hide');
             this.hideId = setTimeout(() => this.hide(), timeout);
             if (event) {
@@ -751,7 +757,7 @@ export class MediaControl extends UICorePlugin {
             right: [],
         }, this.core.activeContainer.settings);
         trace(`${T} updateSettings`, { newSettings });
-        newSettings.left.push('clips'); // TODO
+        newSettings.left.push('clips'); // TODO settings
         // TODO make order controlled via CSS
         newSettings.left = orderByOrderPattern([...newSettings.left, 'volume', 'clips'], LEFT_ORDER);
         if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
@@ -814,7 +820,6 @@ export class MediaControl extends UICorePlugin {
      * Get a media control element DOM node
      * @param name - The name of the media control element
      * @returns The DOM node to render to or extend
-     * @deprecated  Use {@link MediaControl.putElement} instead
      * @remarks
      * Use this method to render custom media control UI in a plugin
      * @example
@@ -830,7 +835,7 @@ export class MediaControl extends UICorePlugin {
      */
     mount(name, element) {
         const panel = this.getElementLocation(name);
-        trace(`${T} putElement`, { name, panel: !!panel });
+        trace(`${T} mount`, { name, panel: !!panel });
         if (panel) {
             const current = panel.find(`[data-${name}]`);
             element.attr(`data-${name}`, '');
@@ -847,13 +852,18 @@ export class MediaControl extends UICorePlugin {
             return;
         }
     }
+    /**
+     * @deprecated  Use {@link MediaControl.mount} instead
+     * @param name
+     * @param element
+     */
     putElement(name, element) {
         this.mount(name, element);
     }
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
-     * @param show - Whether to show or hide the element
+     * @param show - Visibility state
      */
     toggleElement(area, show) {
         this.$el.find(`[data-${area}]`).toggle(show);
@@ -1069,6 +1079,7 @@ export class MediaControl extends UICorePlugin {
                 width: this.options.width,
                 height: this.options.height,
             });
+            // TODO check out
             this.hideVolumeBar(0);
         }, 0);
         this.parseColors();

package/lib/plugins/picture-in-picture/PictureInPicture.js

@@ -80,7 +80,7 @@ export class PictureInPicture extends UICorePlugin {
         this.$el.html(PictureInPicture.buttonTemplate({ pipIcon }));
         const mediaControl = this.core.getPlugin('media_control');
         if (mediaControl) {
-            mediaControl.putElement('pip', this.$el);
+            mediaControl.mount('pip', this.$el);
         }
         return this;
     }

package/lib/plugins/seek-time/SeekTime.d.ts

@@ -28,7 +28,7 @@ export declare class SeekTime extends UICorePlugin {
     private $seekTimeEl;
     bindEvents(): void;
     private onContainerChanged;
-    private updateDuration;
+    private onTimeUpdate;
     private showTime;
     private hideTime;
     private calculateHoverPosition;

package/lib/plugins/seek-time/SeekTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeekTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/seek-time/SeekTime.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,YAAY,EAAmB,MAAM,cAAc,CAAC;AAM/E,OAAO,0CAA0C,CAAC;AAKlD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAI,YAAY,QAEf;IAED,IAAI,qBAAqB,QAExB;IAED,IAAI,mBAAmB,QAItB;IAED,IAAI,aAAa,YAEhB;IAED,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,iBAAiB,CAAuB;IAEhD,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,OAAO,CAAC,QAAQ,CAAK;IAGrB,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,WAAW,CAA4B;IAEtC,UAAU;IAWnB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,sBAAsB;IAO9B,WAAW;;;IAYX,MAAM;IA8CN,eAAe;IAQN,MAAM;CAahB"}
+{"version":3,"file":"SeekTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/seek-time/SeekTime.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,YAAY,EAAmB,MAAM,cAAc,CAAC;AAM/E,OAAO,0CAA0C,CAAC;AAKlD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAI,YAAY,QAEf;IAED,IAAI,qBAAqB,QAExB;IAED,IAAI,mBAAmB,QAItB;IAED,IAAI,aAAa,YAEhB;IAED,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,iBAAiB,CAAuB;IAEhD,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,OAAO,CAAC,QAAQ,CAAK;IAGrB,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,WAAW,CAA4B;IAEtC,UAAU;IAWnB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,sBAAsB;IAO9B,WAAW;;;IAYX,MAAM;IA8CN,eAAe;IAQN,MAAM;CAahB"}

package/lib/plugins/seek-time/SeekTime.js

@@ -56,7 +56,7 @@ export class SeekTime extends UICorePlugin {
         this.listenTo(this.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.onContainerChanged);
         if (this.mediaControlContainer) {
             this.listenTo(this.mediaControlContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.update);
-            this.listenTo(this.mediaControlContainer, Events.CONTAINER_TIMEUPDATE, this.updateDuration);
+            this.listenTo(this.mediaControlContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         }
     }
     onContainerChanged() {
@@ -64,9 +64,8 @@ export class SeekTime extends UICorePlugin {
         this.stopListening();
         this.bindEvents();
     }
-    updateDuration(timeProgress) {
-        this.duration = timeProgress.total;
-        // this.firstFragDateTime = timeProgress.firstFragDateTime;
+    onTimeUpdate({ total }) {
+        this.duration = total;
         this.update();
     }
     showTime(event) {

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -248,7 +248,7 @@ export class ClosedCaptions extends UICorePlugin {
         this.$line = $(ClosedCaptions.templateString());
         this.resizeFont();
         this.core.activeContainer.$el.append(this.$line);
-        mediaControl.putElement('cc', this.$el);
+        mediaControl.mount('cc', this.$el);
         this.updateSelection();
         this.renderIcon();
         return this;

package/lib/plugins/vast-ads/VastAds.js

@@ -440,7 +440,7 @@ export class VastAds extends UICorePlugin {
         // Attempt to get poster plugin. (May interfere with media control)
         this._posterPlugin = this._container?.getPlugin('poster');
         // Attempt to get click-to-pause plugin. (May interfere with advert click handling)
-        this._clickToPausePlugin = this._container?.getPlugin('click_to_pause_custom');
+        this._clickToPausePlugin = this._container?.getPlugin('click_to_pause');
         assert(this.playback, 'playback is not defined');
         this._contentElement = this.playback.el;
         if (this._pluginIsReady) {

package/lib/plugins/vast-ads/rollmanager.js

@@ -56,7 +56,7 @@ export default class RollManager extends Events {
         this._playback = this.core.activePlayback;
         this._contentElement = this._playback.el;
         this._posterPlugin = this._container.getPlugin('poster');
-        this._clickToPausePlugin = this._container.getPlugin('click_to_pause_custom');
+        this._clickToPausePlugin = this._container.getPlugin('click_to_pause');
         this._adContainer = _adContainer;
         this._events = {};
         this._pr = Math.floor(Math.random() * 1000000);

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,CAAC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EAAE,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;EAmB9G;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAc/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAY7C"}
+{"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"}

package/lib/testUtils.js

@@ -75,7 +75,7 @@ export function createMockCore(options = {}, container = createMockContainer(opt
             ...options,
         },
         configure: vi.fn(),
-        getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
+        getPlaybackType: vi.fn(),
         getPlugin: vi.fn(),
         load: vi.fn(),
         trigger: emitter.emit,
@@ -112,7 +112,7 @@ export function createMockPlayback(name = 'mock') {
         getDuration: vi.fn().mockImplementation(() => 100),
         enterPiP: vi.fn(),
         exitPiP: vi.fn(),
-        getPlaybackType: vi.fn().mockImplementation(() => Playback.LIVE),
+        getPlaybackType: vi.fn(),
         getStartTimeOffset: vi.fn().mockImplementation(() => 0),
         getCurrentTime: vi.fn().mockImplementation(() => 0),
         isHighDefinitionInUse: vi.fn().mockImplementation(() => false),
@@ -138,7 +138,7 @@ export function createMockContainer(options = {}, playback = createMockPlayback(
         $el: $(el),
         getDuration: vi.fn().mockReturnValue(0),
         getPlugin: vi.fn(),
-        getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
+        getPlaybackType: vi.fn(),
         isDvrInUse: vi.fn().mockReturnValue(false),
         isDvrEnabled: vi.fn().mockReturnValue(false),
         isPlaying: vi.fn().mockReturnValue(false),
@@ -169,7 +169,10 @@ export function createMockBottomGear(core) {
         if (existing.length) {
             return existing;
         }
-        return $('<li></li>').attr(`data-${name}`, '').append($el).appendTo(plugin.$el);
+        return $('<li></li>')
+            .attr(`data-${name}`, '')
+            .append($el)
+            .appendTo(plugin.$el);
     });
     plugin.refresh = vi.fn();
     return plugin;

package/lib/types.d.ts

@@ -145,7 +145,7 @@ export interface PlayerConfig extends Record<string, unknown> {
     mute?: boolean;
     /**
      * Stream type.
-     * @remark
+     * @remarks
      * Should only be set if known in advance, as it should not change once determined.
      * Otherwise it might cause inconsistencies in the UI plugins behavior, for instance, glitches with rendering of the DVR controls or seek bar.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.22.17",
+  "version": "2.22.20",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",
@@ -17,7 +17,7 @@
     "format": "prettier --write src/",
     "lint": "oxlint -c ../../.oxlintrc.json --tsconfig=./tsconfig.json --fix --ignore-path=../../.gitignore src",
     "ship": "npm run build && npm run build:bundle && npm publish --access public",
-    "test": "NODE_OPTIONS='--trace-deprecation' vitest"
+    "test": "NODE_OPTIONS='--trace-deprecation' vitest --dom"
   },
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "@types/sinonjs__fake-timers": "^8.1.5",
     "assert": "^2.1.0",
     "eventemitter3": "^5.0.1",
-    "jsdom": "^26.0.0",
+    "happy-dom": "^17.4.4",
     "nodemon": "^3.1.9",
     "rollup": "^4.27.4",
     "rollup-plugin-polyfill-node": "^0.13.0",

package/src/playback/__tests__/HTML5Video.test.ts

@@ -33,10 +33,10 @@ describe('HTML5Video', () => {
         }
         const html5Video = new HTML5Video({}, i18n, playerError)
         html5Video.load('https://example.com/video.mp4')
-        ;(html5Video.el as any).error = {
+        vi.spyOn(html5Video.el as HTMLVideoElement, 'error', 'get').mockReturnValue({
           code: MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED,
           message: 'Media source not supported',
-        }
+        } as any)
         html5Video.el.dispatchEvent(new Event('error', { bubbles: true }))
         expect(playerError.createError).toHaveBeenCalledWith(expect.objectContaining({
           code: PlaybackErrorCode.MediaSourceUnavailable,

package/src/playback/dash-playback/DashPlayback.ts

@@ -20,7 +20,6 @@ import {
   PlaybackErrorCode,
   QualityLevel,
   TimePosition,
-  TimeUpdate,
   TimeValue,
 } from '../../playback.types.js'
 import { isDashSource } from '../../utils/mediaSources.js'
@@ -77,7 +76,6 @@ export default class DashPlayback extends BasePlayback {
   // #EXT-X-PLAYLIST-TYPE
   _playlistType: PlaylistType | null = null
 
-  // #EXT-X-PROGRAM-DATE-TIME
   _programDateTime: TimeValue = 0
 
   _dash: DASHJS.MediaPlayerClass | null = null
@@ -350,9 +348,9 @@ export default class DashPlayback extends BasePlayback {
     }
   }
 
-  getProgramDateTime() {
-    return this._programDateTime
-  }
+  // getProgramDateTime() {
+  //   return this._programDateTime
+  // }
 
   // the duration on the video element itself should not be used
   // as this does not necesarily represent the duration of the stream
@@ -498,10 +496,10 @@ export default class DashPlayback extends BasePlayback {
     if (this.startChangeQuality) {
       return
     }
-    const update: TimeUpdate = {
+    const update: TimePosition = {
       current: this.getCurrentTime(),
       total: this.getDuration(),
-      firstFragDateTime: this.getProgramDateTime(),
+      // firstFragDateTime: this.getProgramDateTime(), // TODO figure out if needed
     }
     const isSame =
       this._lastTimeUpdate &&

package/src/playback/hls-playback/HlsPlayback.ts

@@ -27,7 +27,6 @@ import {
   PlayerComponentType,
   QualityLevel,
   TimePosition,
-  TimeUpdate,
 } from '../../playback.types.js'
 import { PlaybackType } from '../../types.js'
 import { isHlsSource } from '../../utils/mediaSources.js'
@@ -742,11 +741,10 @@ export default class HlsPlayback extends BasePlayback {
     )
   }
 
-  private _onTimeUpdate() {
-    const update: TimeUpdate = {
+  override _onTimeUpdate() {
+    const update: TimePosition = {
       current: this.getCurrentTime(),
       total: this.getDuration(),
-      firstFragDateTime: this.getProgramDateTime(),
     }
     const isSame =
       this._lastTimeUpdate &&

package/src/playback.types.ts

@@ -42,10 +42,9 @@ export type TimeProgress = {
 /**
  * For the plugin development
  * @beta
+ * @deprecated  Use TimePosition instead
  */
-export type TimeUpdate = TimePosition & {
-  firstFragDateTime: number
-}
+export type TimeUpdate = TimePosition
 
 /**
  * A level of quality within a media source/representation.

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

@@ -9,6 +9,7 @@ import '../../../assets/audio-selector/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'
 
 const VERSION: string = '2.22.4'
 
@@ -87,7 +88,7 @@ export class AudioTracks extends UICorePlugin {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
     this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
-      mediaControl.putElement('audiotracks', this.$el)
+      mediaControl.mount('audiotracks', this.$el)
     })
     this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
   }
@@ -130,12 +131,12 @@ export class AudioTracks extends UICorePlugin {
       return this
     }
 
-    const mediaControl = this.core.getPlugin('media_control') as MediaControl
     this.$el.html(
       AudioTracks.template({
         tracks: this.tracks,
         title: this.getTitle(),
         icon: audioArrow,
+        current: this.currentTrack?.id,
       }),
     )
     this.updateText()
@@ -145,7 +146,7 @@ export class AudioTracks extends UICorePlugin {
   }
 
   private onTrackSelect(event: MouseEvent) {
-    const id = (event.target as HTMLElement)?.dataset?.audiotracksSelect
+    const id = (event.currentTarget as HTMLElement)?.dataset?.audiotracksSelect
     if (id) {
       this.selectAudioTrack(id)
     }
@@ -155,7 +156,7 @@ export class AudioTracks extends UICorePlugin {
   }
 
   private selectAudioTrack(id: string) {
-    this.startTrackSwitch()
+    this.startTrackSwitching()
     this.core.activeContainer.switchAudioTrack(id)
     this.updateText()
   }
@@ -165,7 +166,9 @@ export class AudioTracks extends UICorePlugin {
   }
 
   private toggleContextMenu() {
-    this.$el.find('#audiotracks-select').toggleClass('hidden')
+    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)
   }
 
   private buttonElement(): ZeptoResult {
@@ -192,7 +195,7 @@ export class AudioTracks extends UICorePlugin {
     return this.currentTrack.label || this.currentTrack.language
   }
 
-  private startTrackSwitch() {
+  private startTrackSwitching() {
     this.buttonElement().addClass('changing')
   }
 
@@ -205,13 +208,17 @@ export class AudioTracks extends UICorePlugin {
 
   private highlightCurrentTrack() {
     this.trackElement().removeClass('current')
-    this.trackElement().find('a').removeClass('gcore-skin-active')
+    this.trackElement()
+      .find('a')
+      .removeClass('gcore-skin-active')
+      .attr('aria-checked', 'false')
 
     if (this.currentTrack) {
       this.trackElement(this.currentTrack.id)
         .addClass('current')
         .find('a')
         .addClass('gcore-skin-active')
+        .attr('aria-checked', 'true')
     }
   }
 }

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

@@ -34,7 +34,7 @@ describe('AudioSelector', () => {
       emitTracksAvailable(core, TRACKS)
     })
     it('should not attach to the media control', () => {
-      expect(mediaControl.putElement).not.toHaveBeenCalledWith(
+      expect(mediaControl.mount).not.toHaveBeenCalledWith(
         'audiotracks',
         expect.anything(),
       )
@@ -45,20 +45,20 @@ describe('AudioSelector', () => {
       mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
     })
     it('should attach to the media control', () => {
-      expect(mediaControl.putElement).toHaveBeenCalledWith(
+      expect(mediaControl.mount).toHaveBeenCalledWith(
         'audiotracks',
         audioSelector.$el,
       )
     })
   })
-  describe('when audio tracks are available', () => {
+  describe('given that audio tracks are available', () => {
     beforeEach(() => {
       emitTracksAvailable(core, TRACKS)
     })
-    it('should render the button', () => {
+    it('should render button', () => {
       expect(audioSelector.$el.find('#audiotracks-button').length).toBe(1)
     })
-    it('should render the menu hidden', () => {
+    it('should render menu hidden', () => {
       expect(audioSelector.el.innerHTML).toMatchSnapshot()
       expect(
         audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
@@ -68,17 +68,17 @@ describe('AudioSelector', () => {
       expect(trackItems.eq(0).text().trim()).toBe('English')
       expect(trackItems.eq(1).text().trim()).toBe('Spanish')
     })
-    describe('when the button is clicked', () => {
+    describe('when button is clicked', () => {
       beforeEach(() => {
         audioSelector.$el.find('#audiotracks-button').click()
       })
-      it('should show the menu', () => {
+      it('should show menu', () => {
         expect(audioSelector.$el.html()).toMatchSnapshot()
         expect(
           audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
         ).toBe(false)
       })
-      describe('when an audio track is selected', () => {
+      describe('when audio track is selected', () => {
         beforeEach(() => {
           audioSelector.$el
             .find('#audiotracks-select [data-audiotracks-select="2"]')

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 > when audio tracks are available > should render the menu hidden 1`] = `
-"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button">
+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">
     <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">
+<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">
+            <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">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>
@@ -22,20 +22,20 @@ exports[`AudioSelector > when audio tracks are available > should render the men
 "
 `;
 
-exports[`AudioSelector > when audio tracks are available > when the button is clicked > should show the menu 1`] = `
-"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button">
+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">
     <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">
+<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">
+            <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">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>
@@ -44,20 +44,20 @@ exports[`AudioSelector > when audio tracks are available > when the button is cl
 "
 `;
 
-exports[`AudioSelector > when audio tracks are available > when the button is clicked > when an audio track is selected > should hide the menu 1`] = `
-"<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button">
+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">
     <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">
+<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">
+            <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">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
                 Spanish
             </a>
         </li>

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

@@ -21,7 +21,7 @@ const T = 'plugins.bottom_gear'
  */
 export enum GearEvents {
   /**
-   * Use this event to accurately attach an item to the gear menu
+   * Subscribe to this event to accurately attach an item to the gear menu
    */
   RENDERED = 'rendered',
 }
@@ -276,6 +276,6 @@ export class BottomGear extends UICorePlugin {
   private onMediaControlRendered() {
     trace(`${T} onMediaControlRendered`)
     const mediaControl = this.core.getPlugin('media_control')
-    mediaControl.putElement('gear', this.$el)
+    mediaControl.mount('gear', this.$el)
   }
 }

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

@@ -38,7 +38,10 @@ describe('BottomGear', () => {
   })
   describe('until media control is rendered', () => {
     it('should not attach to media control', () => {
-      expect(mediaControl.putElement).not.toHaveBeenCalledWith('gear', expect.anything())
+      expect(mediaControl.mount).not.toHaveBeenCalledWith(
+        'gear',
+        expect.anything(),
+      )
     })
   })
   describe('when media control is rendered', () => {
@@ -46,7 +49,7 @@ describe('BottomGear', () => {
       mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
     })
     it('should attach to media control', () => {
-      expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.$el)
+      expect(mediaControl.mount).toHaveBeenCalledWith('gear', bottomGear.$el)
     })
   })
   describe('when clicked', () => {
@@ -54,9 +57,9 @@ describe('BottomGear', () => {
       bottomGear.$el.find('#gear-button').click()
     })
     it('should toggle the gear menu', () => {
-      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-        'block',
-      )
+      expect(
+        bottomGear.$el.find('#gear-options-wrapper').css('display'),
+      ).not.toBe('none')
     })
   })
 })

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

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BottomGear > should render 1`] = `
-"<button type="button" class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button">
+"<button class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button">
     /assets/icons/new/gear.svg
 </button>
-<div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display: none;">
-    <ul class="gear-options-list" id="gear-options"></ul>
+<div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display:none">
+    <ul class="gear-options-list" id="gear-options" role="menu"></ul>
 </div>
 "
 `;