@gcorevideo/player 2.22.4 → 2.22.7

package/lib/plugins/vast-ads/VastAds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VastAds.d.ts","sourceRoot":"","sources":["../../../src/plugins/vast-ads/VastAds.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,IAAI,EAIJ,QAAQ,EAER,YAAY,EAEb,MAAM,cAAc,CAAA;AAarB,OAAO,qCAAqC,CAAA;AAQ5C,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,OAAO,CAAC,qBAAqB,CAAwC;IAErE,OAAO,CAAC,oBAAoB,CAAwC;IAEpE,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,mBAAmB,CAAI;IAE/B,OAAO,CAAC,UAAU,CAAyB;IAE3C,OAAO,CAAC,SAAS,CAAyB;IAE1C,OAAO,CAAC,eAAe,CAA2B;IAElD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,YAAY,CAAY;IAEhC,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,SAAS,CAAwB;IAEzC,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,mBAAmB,CAA2B;IAEtD,OAAO,CAAC,aAAa,CAAiC;IAEtD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,IAAI,CAA2B;IAEvC,OAAO,CAAC,OAAO,CAAK;IAEpB,OAAO,CAAC,uBAAuB,CAAI;IAEnC,OAAO,CAAC,0BAA0B,CAAI;IAEtC,OAAO,CAAC,YAAY,CAAoB;IAExC,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,SAAS,CAA2B;IAE5C,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,YAAY,CAA2B;IAE/C,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,MAAM,KAAK,OAAO,WAEjB;IAED,IAAI,YAAY,QAEf;IAED,IAAa,UAAU;;;MAKtB;gBAEW,IAAI,EAAE,IAAI;IAqEb,UAAU;IA8FnB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,oBAAoB;IAkE5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,qBAAqB;IAwD7B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,uBAAuB;IAuC/B,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,mBAAmB;IAiD3B,YAAY;IASZ,OAAO,CAAC,gBAAgB;IA0BxB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IA6BpB,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAG3B;IAED,IAAI,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAE9B;IAED,OAAO,CAAC,kBAAkB;IAU1B,gBAAgB,CAAC,CAAC,EAAE,MAAM;IAQ1B,cAAc;IAsBd,eAAe;IAkBf,WAAW;IAiBX,OAAO,CAAC,UAAU;IA+ClB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAiHhB,MAAM;IAqBf,OAAO,CAAC,QAAQ;CAGjB"}
+{"version":3,"file":"VastAds.d.ts","sourceRoot":"","sources":["../../../src/plugins/vast-ads/VastAds.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,IAAI,EAIJ,QAAQ,EAER,YAAY,EAEb,MAAM,cAAc,CAAA;AAarB,OAAO,qCAAqC,CAAA;AAQ5C,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,OAAO,CAAC,qBAAqB,CAAwC;IAErE,OAAO,CAAC,oBAAoB,CAAwC;IAEpE,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,mBAAmB,CAAI;IAE/B,OAAO,CAAC,UAAU,CAAyB;IAE3C,OAAO,CAAC,SAAS,CAAyB;IAE1C,OAAO,CAAC,eAAe,CAA2B;IAElD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,YAAY,CAAY;IAEhC,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,SAAS,CAAwB;IAEzC,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,mBAAmB,CAA2B;IAEtD,OAAO,CAAC,aAAa,CAAiC;IAEtD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,IAAI,CAA2B;IAEvC,OAAO,CAAC,OAAO,CAAK;IAEpB,OAAO,CAAC,uBAAuB,CAAI;IAEnC,OAAO,CAAC,0BAA0B,CAAI;IAEtC,OAAO,CAAC,YAAY,CAAoB;IAExC,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,SAAS,CAA2B;IAE5C,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,YAAY,CAA2B;IAE/C,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,MAAM,KAAK,OAAO,WAEjB;IAED,IAAI,YAAY,QAEf;IAED,IAAa,UAAU;;;MAKtB;gBAEW,IAAI,EAAE,IAAI;IAqEb,UAAU;IA8FnB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,oBAAoB;IAkE5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,qBAAqB;IAwD7B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,uBAAuB;IAuC/B,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,uBAAuB;IAO/B,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,mBAAmB;IAiD3B,YAAY;IASZ,OAAO,CAAC,gBAAgB;IA0BxB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IA6BpB,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAG3B;IAED,IAAI,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAE9B;IAED,OAAO,CAAC,kBAAkB;IAU1B,gBAAgB,CAAC,CAAC,EAAE,MAAM;IAQ1B,cAAc;IAsBd,eAAe;IAkBf,WAAW;IAiBX,OAAO,CAAC,UAAU;IA+ClB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAiHhB,MAAM;IAqBf,OAAO,CAAC,QAAQ;CAGjB"}

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

@@ -345,8 +345,11 @@ export class VastAds extends UICorePlugin {
         // @ts-ignore
         this.stopListening(this.playback, Events.PLAYBACK_PAUSE);
     }
+    get pluginOptions() {
+        return this.options.vastAds;
+    }
     _pauserollListeners() {
-        if (!this._validateData(this._options.VastAds.pauseroll)) {
+        if (!this._validateData(this.pluginOptions.pauseroll)) {
             return;
         }
         this._stopPauserollListeners();
@@ -571,11 +574,11 @@ export class VastAds extends UICorePlugin {
         // const currentRoll = type;
         this.destroyRoll();
         if (currentRoll === 'preroll') {
-            this.options.vastAds[currentRoll] = [];
+            this.pluginOptions[currentRoll] = [];
         }
         this.currentState = '';
         this.$el.hide();
-        if (!this.options.disableClickOnPause) {
+        if (!this.options.disableClickOnPause) { // TODO sort out
             this._clickToPausePlugin?.enable();
         }
         try {

package/lib/utils/fullscreen.d.ts

@@ -0,0 +1,3 @@
+import { Utils } from '@clappr/core';
+export declare const fullscreenEnabled: typeof Utils.Fullscreen.fullscreenEnabled;
+//# sourceMappingURL=fullscreen.d.ts.map

package/lib/utils/fullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen.d.ts","sourceRoot":"","sources":["../../src/utils/fullscreen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAEpC,eAAO,MAAM,iBAAiB,2CAAqC,CAAA"}

package/lib/utils/fullscreen.js

@@ -0,0 +1,2 @@
+import { Utils } from '@clappr/core';
+export const fullscreenEnabled = Utils.Fullscreen.fullscreenEnabled;

package/package.json

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

package/src/index.plugins.ts

@@ -14,13 +14,14 @@ export * from "./plugins/error-screen/ErrorScreen.js";
 export * from "./plugins/favicon/Favicon.js";
 // _ ga-events
 export * from "./plugins/google-analytics/GoogleAnalytics.js";
-export * from "./plugins/level-selector/LevelSelector.js";
 export * from "./plugins/logo/Logo.js";
 export * from "./plugins/media-control/MediaControl.js";
 export * from "./plugins/multi-camera/MultiCamera.js";
 export * from "./plugins/picture-in-picture/PictureInPicture.js";
 export * from "./plugins/playback-rate/PlaybackRate.js";
 export * from "./plugins/poster/Poster.js";
+export * from "./plugins/level-selector/QualityLevels.js";
+export { QualityLevels as LevelSelector } from "./plugins/level-selector/QualityLevels.js";
 export * from "./plugins/seek-time/SeekTime.js";
 export * from "./plugins/share/Share.js";
 export * from "./plugins/skip-time/SkipTime.js";

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

@@ -604,11 +604,8 @@ export default class DashPlayback extends BasePlayback {
   }
 
   _updatePlaybackType() {
-    assert.ok(
-      this._dash,
-      'An instance of dashjs MediaPlayer is required to update the playback type',
-    )
     const prevPlaybackType = this._playbackType
+    // @ts-ignore
     this._playbackType = this._dash.isDynamic() ? Playback.LIVE : Playback.VOD
     if (prevPlaybackType !== this._playbackType) {
       this._updateSettings()

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

@@ -235,7 +235,6 @@ export class BottomGear extends UICorePlugin {
       .hide()
 
     // TODO make non-clickable when there are no items
-    mediaControl.putElement('gear', this.$el)
 
     setTimeout(() => {
       this.trigger(GearEvents.RENDERED)
@@ -276,6 +275,7 @@ export class BottomGear extends UICorePlugin {
 
   private onMediaControlRendered() {
     trace(`${T} onMediaControlRendered`)
-    this.render()
+    const mediaControl = this.core.getPlugin('media_control')
+    mediaControl.putElement('gear', this.$el)
   }
 }

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

@@ -2,6 +2,7 @@ import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { BottomGear, GearEvents } from '../BottomGear'
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
+import { Events } from '@clappr/core'
 
 describe('BottomGear', () => {
   let mediaControl: any
@@ -20,13 +21,11 @@ describe('BottomGear', () => {
     onGearRendered = vi.fn()
     bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
     bottomGear.render()
+    core.emit(Events.CORE_READY)
   })
   it('should render', () => {
     expect(bottomGear.el.innerHTML).toMatchSnapshot()
   })
-  it('should attach to media control', () => {
-    expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.$el)
-  })
   it('should emit event in the next cycle', async () => {
     expect(onGearRendered).not.toHaveBeenCalled()
     await new Promise((resolve) => setTimeout(resolve, 0))
@@ -37,6 +36,19 @@ describe('BottomGear', () => {
       'none',
     )
   })
+  describe('until media control is rendered', () => {
+    it('should not attach to media control', () => {
+      expect(mediaControl.putElement).not.toHaveBeenCalledWith('gear', expect.anything())
+    })
+  })
+  describe('when media control is rendered', () => {
+    beforeEach(() => {
+      mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+    })
+    it('should attach to media control', () => {
+      expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.$el)
+    })
+  })
   describe('when clicked', () => {
     beforeEach(() => {
       bottomGear.$el.find('#gear-button').click()

package/src/plugins/level-selector/{LevelSelector.ts → QualityLevels.ts}

@@ -1,5 +1,5 @@
 import { Events, template, UICorePlugin } from '@clappr/core'
-import { reportError, trace } from '@gcorevideo/utils'
+import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
 import { type QualityLevel } from '../../playback.types.js'
@@ -17,14 +17,14 @@ import checkIcon from '../../../assets/icons/new/check.svg'
 import '../../../assets/level-selector/style.scss'
 import { MediaControl } from '../media-control/MediaControl.js'
 
-const T = 'plugins.level_selector'
-const VERSION = '2.19.4'
+const T = 'plugins.quality_levels'
+const VERSION = 'v2.22.5'
 
 /**
- * Configuration options for the {@link LevelSelector | level selector} plugin.
+ * Configuration options for the {@link QualityLevels} plugin.
  * @beta
  */
-export interface LevelSelectorPluginSettings {
+export interface QualityLevelsPluginSettings {
   /**
    * The maximum resolution to allow in the level selector.
    */
@@ -52,19 +52,19 @@ export interface LevelSelectorPluginSettings {
  *
  * The plugin is rendered as an item in the gear menu, which, when clicked, shows a list of quality levels to choose from.
  *
- * Configuration options - {@link LevelSelectorPluginSettings}
+ * Configuration options - {@link QualityLevelsPluginSettings}
  *
  * @example
  * ```ts
  * new Player({
- *   levelSelector: {
+ *   qualityLevels: {
  *     restrictResolution: 360,
  *     labels: { 360: 'SD', 720: 'HD' },
  *   },
  * })
  * ```
  */
-export class LevelSelector extends UICorePlugin {
+export class QualityLevels extends UICorePlugin {
   private levels: QualityLevel[] = []
 
   private levelLabels: string[] = []
@@ -230,7 +230,7 @@ export class LevelSelector extends UICorePlugin {
 
   private renderDropdown() {
     this.$el.html(
-      LevelSelector.listTemplate({
+      QualityLevels.listTemplate({
         arrowLeftIcon,
         checkIcon,
         current: this.selectedLevelId,
@@ -247,7 +247,7 @@ export class LevelSelector extends UICorePlugin {
     ;(this.core.getPlugin('bottom_gear') as BottomGear)
       ?.addItem('quality', this.$el)
       .html(
-        LevelSelector.buttonTemplate({
+        QualityLevels.buttonTemplate({
           arrowRightIcon,
           currentText: this.currentText,
           isHd: this.isHd,
@@ -257,8 +257,14 @@ export class LevelSelector extends UICorePlugin {
       )
   }
 
+  private get pluginOptions(): QualityLevelsPluginSettings {
+    return (
+      this.core.options.qualityLevels || this.core.options.levelSelector || {}
+    )
+  }
+
   private get maxLevel() {
-    const maxRes = this.core.options.levelSelector?.restrictResolution
+    const maxRes = this.pluginOptions.restrictResolution
     return maxRes
       ? this.levels.find(
           (level) =>
@@ -269,7 +275,7 @@ export class LevelSelector extends UICorePlugin {
   }
 
   private onLevelsAvailable(levels: QualityLevel[]) {
-    const maxResolution = this.core.options.levelSelector?.restrictResolution
+    const maxResolution = this.pluginOptions.restrictResolution
     this.levels = levels
     this.makeLevelsLabels()
     if (maxResolution) {
@@ -287,7 +293,7 @@ export class LevelSelector extends UICorePlugin {
   }
 
   private makeLevelsLabels() {
-    const labels = this.core.options.levelSelector?.labels ?? {}
+    const labels = this.pluginOptions.labels ?? {}
     this.levelLabels = []
 
     for (const level of this.levels) {

package/src/plugins/level-selector/__tests__/{LevelSelector.test.ts → QualityLevels.test.ts}

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { Events } from '@clappr/core'
-import { LevelSelector } from '../LevelSelector.js'
+import { QualityLevels } from '../QualityLevels.js'
 import {
   createMockBottomGear,
   createMockCore,
@@ -33,9 +33,9 @@ const LEVELS = [
   },
 ]
 
-describe('LevelSelector', () => {
+describe('QualityLevels', () => {
   let core: any
-  let levelSelector: LevelSelector
+  let levelSelector: QualityLevels
   let mediaControl: any
   let bottomGear: any
   describe('basically', () => {
@@ -57,7 +57,7 @@ describe('LevelSelector', () => {
       })
       mediaControl = createMockMediaControl(core)
       bottomGear = createMockBottomGear(core)
-      levelSelector = new LevelSelector(core)
+      levelSelector = new QualityLevels(core)
     })
     describe('initially', () => {
       beforeEach(() => {
@@ -123,13 +123,13 @@ describe('LevelSelector', () => {
       })
       mediaControl = createMockMediaControl(core)
       bottomGear = createMockBottomGear(core)
-      levelSelector = new LevelSelector(core)
+      levelSelector = new QualityLevels(core)
       core.emit(Events.CORE_READY)
       core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
       bottomGear.trigger(GearEvents.RENDERED)
     })
     describe('initially', () => {
-      beforeEach(async () => {
+      beforeEach(() => {
         core.activePlayback.emit(Events.PLAYBACK_LEVELS_AVAILABLE, LEVELS)
       })
       it('should render the restricted quality level label', () => {
@@ -143,6 +143,20 @@ describe('LevelSelector', () => {
           // @ts-ignore
         ).toMatchQualityLevelOption('360p')
       })
+      describe('when opened', () => {
+        beforeEach(() => {
+          bottomGear.$el.find('[data-quality]').click()
+        })
+        it('should render the restricted level items disabled', () => {
+          expect(levelSelector.el.innerHTML).toMatchSnapshot()
+          const allItems = levelSelector.$el.find('#level-selector-menu li')
+          expect(allItems.length).toBe(3)
+          const unrestrictedItems = allItems.filter(':not(.disabled)')
+          expect(unrestrictedItems.length).toBe(1)
+          // @ts-ignore
+          expect(unrestrictedItems.text()).toMatchQualityLevelOption('360p')
+        })
+      })
     })
     describe('given vertical video format levels', () => {
       beforeEach(() => {

package/src/plugins/level-selector/__tests__/__snapshots__/{LevelSelector.test.ts.snap → QualityLevels.test.ts.snap}

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`LevelSelector > basically > auto > should render the selected level 1`] = `
+exports[`QualityLevels > basically > auto > should render the selected level 1`] = `
 "<button class="gplayer-lite-btn go-back gcore-skin-text-color" id="level-selector-back-button">
     <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
     quality
 </button>
-<ul class="gear-sub-menu" id="level-selector-menu">
+<ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
     
         <li class="current">
             <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="-1" id="level_selector_auto">
@@ -16,21 +16,21 @@ exports[`LevelSelector > basically > auto > should render the selected level 1`]
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 Full HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -40,12 +40,12 @@ exports[`LevelSelector > basically > auto > should render the selected level 1`]
 "
 `;
 
-exports[`LevelSelector > basically > custom label > should render the selected level 1`] = `
+exports[`QualityLevels > basically > custom label > should render the selected level 1`] = `
 "<button class="gplayer-lite-btn go-back gcore-skin-text-color" id="level-selector-back-button">
     <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
     quality
 </button>
-<ul class="gear-sub-menu" id="level-selector-menu">
+<ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
     
         <li class="">
             <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto">
@@ -56,21 +56,21 @@ exports[`LevelSelector > basically > custom label > should render the selected l
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 Full HD
             </a>
         </li>
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="1" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="1" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -80,12 +80,12 @@ exports[`LevelSelector > basically > custom label > should render the selected l
 "
 `;
 
-exports[`LevelSelector > basically > standard label > should render the selected level 1`] = `
+exports[`QualityLevels > basically > standard label > should render the selected level 1`] = `
 "<button class="gplayer-lite-btn go-back gcore-skin-text-color" id="level-selector-back-button">
     <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
     quality
 </button>
-<ul class="gear-sub-menu" id="level-selector-menu">
+<ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
     
         <li class="">
             <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto">
@@ -96,21 +96,21 @@ exports[`LevelSelector > basically > standard label > should render the selected
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 Full HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -120,30 +120,30 @@ exports[`LevelSelector > basically > standard label > should render the selected
 "
 `;
 
-exports[`LevelSelector > options.restrictResolution > given vertical video format levels > should recognize vertical orientation 1`] = `
+exports[`QualityLevels > options.restrictResolution > given vertical video format levels > should recognize vertical orientation 1`] = `
 "<button class="gplayer-lite-btn go-back gcore-skin-text-color" id="level-selector-back-button">
     <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
     quality
 </button>
-<ul class="gear-sub-menu" id="level-selector-menu">
+<ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
     
     
-        <li class="disabled ">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
+        <li class=" disabled">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
-        <li class="disabled ">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" id="level_selector_720">
+        <li class=" disabled">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 720p
             </a>
         </li>
     
-        <li class="current ">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" id="level_selector_360">
+        <li class=" current">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" data-disabled="false" data-checked="true" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -153,8 +153,8 @@ exports[`LevelSelector > options.restrictResolution > given vertical video forma
 "
 `;
 
-exports[`LevelSelector > options.restrictResolution > initially > should render the restricted quality level label 1`] = `
-"<button class="gplayer-lite-btn gcore-skin-text-color gear-option">
+exports[`QualityLevels > options.restrictResolution > initially > should render the restricted quality level label 1`] = `
+"<button class="gplayer-lite-btn gcore-skin-text-color gear-option" aria-haspopup="menu">
     <span class="gear-option_hd-icon hidden">/assets/icons/new/hd.svg</span>
     <span>quality</span>
     <span class="gear-option_arrow-right-icon">/assets/icons/new/arrow-right.svg</span>
@@ -162,3 +162,36 @@ exports[`LevelSelector > options.restrictResolution > initially > should render
 </button>
 "
 `;
+
+exports[`QualityLevels > options.restrictResolution > initially > when opened > should render the restricted level items disabled 1`] = `
+"<button class="gplayer-lite-btn go-back gcore-skin-text-color" id="level-selector-back-button">
+    <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
+    quality
+</button>
+<ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
+    
+    
+        <li class=" disabled">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_1080">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                1080p
+            </a>
+        </li>
+    
+        <li class=" disabled">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_720">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                720p
+            </a>
+        </li>
+    
+        <li class=" current">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" data-disabled="false" data-checked="true" role="menuitemradio" id="level_selector_360">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                360p
+            </a>
+        </li>
+    
+</ul>
+"
+`;