@gcorevideo/player 2.22.4 → 2.22.5

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>
+"
+`;

package/src/plugins/vast-ads/VastAds.ts

@@ -223,7 +223,7 @@ export class VastAds extends UICorePlugin {
           )
         } else {
           this.countRepeatableRoll = this.findCloserAdvertisement(
-            this.options.vastAds.repeatableroll,
+                this.options.vastAds.repeatableroll,
             'startTime',
             this.countRepeatableRoll,
             e,
@@ -519,8 +519,12 @@ export class VastAds extends UICorePlugin {
     this.stopListening(this.playback, Events.PLAYBACK_PAUSE)
   }
 
+  private get pluginOptions() {
+    return this.options.vastAds
+  }
+
   private _pauserollListeners() {
-    if (!this._validateData(this._options.VastAds.pauseroll)) {
+    if (!this._validateData(this.pluginOptions.pauseroll)) {
       return
     }
     this._stopPauserollListeners()
@@ -781,12 +785,12 @@ export class VastAds extends UICorePlugin {
 
     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()
     }