@gcorevideo/player 2.19.14 → 2.20.1

package/src/plugins/level-selector/LevelSelector.ts

@@ -5,6 +5,7 @@ import { type QualityLevel } from '../../playback.types.js'
 import { CLAPPR_VERSION } from '../../build.js'
 import { ZeptoResult } from '../../utils/types.js'
 import { TemplateFunction } from '../types.js'
+import { BottomGear } from '../bottom-gear/BottomGear.js'
 
 import buttonHtml from '../../../assets/level-selector/button.ejs'
 import listHtml from '../../../assets/level-selector/list.ejs'
@@ -13,9 +14,10 @@ import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg'
 import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg'
 import checkIcon from '../../../assets/icons/new/check.svg'
 import '../../../assets/level-selector/style.scss'
+import assert from 'assert'
 
 
-const T = 'plugins.media_control_level_selector'
+const T = 'plugins.level_selector'
 const VERSION = '2.19.4'
 
 /**
@@ -23,7 +25,14 @@ const VERSION = '2.19.4'
  * @beta
  *
  * @remarks
- * The plugin is rendered as a button in the {@link BottomGear | gear menu}.
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * - {@link BottomGear}
+ *
+ * The plugin is rendered as an item in the gear menu.
+ *
  * When clicked, it shows a list of quality levels to choose from.
  *
  * Configuration options:
@@ -53,15 +62,15 @@ export class LevelSelector extends UICorePlugin {
 
   private isOpen = false
 
-  private buttonTemplate: TemplateFunction | null = null
+  private static readonly buttonTemplate: TemplateFunction = template(buttonHtml)
 
-  private listTemplate: TemplateFunction | null = null
+  private static readonly listTemplate: TemplateFunction = template(listHtml)
 
   /**
    * @internal
    */
   get name() {
-    return 'media_control_level_selector'
+    return 'level_selector'
   }
 
   /**
@@ -183,6 +192,8 @@ export class LevelSelector extends UICorePlugin {
    * @internal
    */
   override render() {
+    assert(this.core.getPlugin('bottom_gear'), 'bottom_gear plugin is required')
+
     if (!this.shouldRender()) {
       return this
     }
@@ -193,29 +204,21 @@ export class LevelSelector extends UICorePlugin {
   }
 
   private renderButton() {
-    if (!this.buttonTemplate) {
-      this.buttonTemplate = template(buttonHtml)
-    }
     if (!this.isOpen) {
-      const html = this.buttonTemplate?.({
+      const html = LevelSelector.buttonTemplate({
         arrowRightIcon,
         currentText: this.currentText,
         isHd: this.isHd,
         hdIcon,
       })
       this.$el.html(html)
-      const mediaControl = this.core.getPlugin('media_control')
-      mediaControl.getElement('bottomGear')
-        ?.find('.gear-options-list [data-quality]')
-        ?.html(this.el)
+      const gear = this.core.getPlugin('bottom_gear') as BottomGear
+      gear.getElement('quality')?.html(this.el)
     }
   }
 
   private renderDropdown() {
-    if (!this.listTemplate) {
-      this.listTemplate = template(listHtml)
-    }
-    const html = this.listTemplate!({
+    const html = LevelSelector.listTemplate({
       arrowLeftIcon,
       checkIcon,
       labels: this.levelLabels,
@@ -224,8 +227,8 @@ export class LevelSelector extends UICorePlugin {
       removeAuto: this.removeAuto,
     })
     this.$el.html(html)
-    const mediaControl = this.core.getPlugin('media_control')
-    mediaControl.getElement('bottomGear')?.find('.gear-wrapper').html(this.el)
+    const gear = this.core.getPlugin('bottom_gear') as BottomGear
+    gear?.setContent(this.el)
   }
 
   private get maxLevel() {

package/src/plugins/level-selector/__tests__/LevelSelector.test.ts

@@ -44,6 +44,7 @@ describe('LevelSelector', () => {
       const activeContainer = createContainer()
       activePlayback = createPlayback()
       let mediaControl: UICorePlugin | null = null
+      let bottomGear: UICorePlugin | null = null
       core = Object.assign(new EventLite(), {
         activeContainer,
         activePlayback,
@@ -57,10 +58,14 @@ describe('LevelSelector', () => {
           if (name === 'media_control') {
             return mediaControl
           }
+          if (name === 'bottom_gear') {
+            return bottomGear
+          }
           return null
         }),
       })
       mediaControl = createMediaControl(core)
+      bottomGear = createBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
     describe('initially', () => {
@@ -71,29 +76,15 @@ describe('LevelSelector', () => {
         await clock.tickAsync(1)
       })
       it('should render the proper level label', () => {
+        // @ts-ignore
         expect(levelSelector.el.textContent).toMatchQualityLevelLabel('Auto')
       })
     })
     describe.each([
-      [
-        'auto',
-        LEVELS,
-        -1,
-        'Auto',
-      ],
-      [
-        'standard label',
-        LEVELS,
-        0,
-        '360p',
-      ],
-      [
-        'custom label',
-        LEVELS,
-        1,
-        'HD',
-      ],
-    ])("%s", (_, levels, current, label) => {
+      ['auto', LEVELS, -1, 'Auto'],
+      ['standard label', LEVELS, 0, '360p'],
+      ['custom label', LEVELS, 1, 'HD'],
+    ])('%s', (_, levels, current, label) => {
       beforeEach(async () => {
         core.emit('core:active:container:changed')
         await clock.tickAsync(1)
@@ -102,14 +93,19 @@ describe('LevelSelector', () => {
         await clock.tickAsync(1)
         levelSelector.$el.find('.gear-option').click()
         await clock.tickAsync(1)
-        levelSelector.$el.find(`.gear-sub-menu_btn[data-id="${current}"]`).click()
+        levelSelector.$el
+          .find(`.gear-sub-menu_btn[data-id="${current}"]`)
+          .click()
         await clock.tickAsync(1)
       })
       it('should render the proper level labels', () => {
         expect(levelSelector.el.innerHTML).toMatchSnapshot()
       })
       it('should render the selected level', () => {
-        expect(levelSelector.$el.find('ul.gear-sub-menu .current')[0].textContent).toMatchQualityLevelOption(label)
+        expect(
+          levelSelector.$el.find('ul.gear-sub-menu .current')[0].textContent,
+          // @ts-ignore
+        ).toMatchQualityLevelOption(label)
       })
     })
   })
@@ -118,6 +114,7 @@ describe('LevelSelector', () => {
       const activeContainer = createContainer()
       activePlayback = createPlayback()
       let mediaControl: UICorePlugin | null = null
+      let bottomGear: UICorePlugin | null = null
       core = Object.assign(new EventLite(), {
         activeContainer,
         activePlayback,
@@ -131,10 +128,14 @@ describe('LevelSelector', () => {
           if (name === 'media_control') {
             return mediaControl
           }
+          if (name === 'bottom_gear') {
+            return bottomGear
+          }
           return null
         }),
       })
       mediaControl = createMediaControl(core)
+      bottomGear = createBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
     describe('basically', () => {
@@ -146,7 +147,8 @@ describe('LevelSelector', () => {
       })
       it('should render the restricted quality level label', () => {
         expect(
-          levelSelector.el.textContent
+          levelSelector.el.textContent,
+          // @ts-ignore
         ).toMatchQualityLevelLabel('360p')
 
         expect(levelSelector.el.innerHTML).toMatchSnapshot()
@@ -185,7 +187,10 @@ describe('LevelSelector', () => {
         expect(levelSelector.el.innerHTML).toMatchSnapshot()
       })
       it('should properly apply the restriction', () => {
-        expect(levelSelector.$el.find('li:not(.level-disabled)')[0].textContent).toMatchQualityLevelOption('360p')
+        expect(
+          levelSelector.$el.find('li:not(.level-disabled)')[0].textContent,
+          // @ts-ignore
+        ).toMatchQualityLevelOption('360p')
       })
     })
   })
@@ -217,7 +222,10 @@ expect.extend({
       .trim()
     return {
       pass: rendered.includes(`Quality ${expected}`),
-      message: () => `Quality label must${isNot ? ' not' : ''} be ${expected} in "${rendered}"`,
+      message: () =>
+        `Quality label must${
+          isNot ? ' not' : ''
+        } be ${expected} in "${rendered}"`,
     }
   },
   toMatchQualityLevelOption(received, expected) {
@@ -228,13 +236,26 @@ expect.extend({
       .trim()
     return {
       pass: rendered === expected,
-      message: () => `Quality option must${isNot ? ' not' : ''} be ${expected} in "${rendered}"`,
+      message: () =>
+        `Quality option must${
+          isNot ? ' not' : ''
+        } be ${expected} in "${rendered}"`,
     }
-  }
+  },
 })
 
 function createMediaControl(core: any) {
   const mediaControl = new UICorePlugin(core)
+  // @ts-ignore
   mediaControl.getElement = vi.fn().mockReturnValue(null)
   return mediaControl
 }
+
+function createBottomGear(core: any) {
+  const bottomGear = new UICorePlugin(core)
+  // @ts-ignore
+  bottomGear.getElement = vi.fn().mockReturnValue(null)
+  // @ts-ignore
+  bottomGear.setContent = vi.fn()
+  return bottomGear
+}

package/src/plugins/level-selector/__tests__/__snapshots__/LevelSelector.test.ts.snap

@@ -8,7 +8,7 @@ exports[`LevelSelector > basically > auto > should render the proper level label
 <ul class="gear-sub-menu">
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="-1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="-1" id="level_selector_auto">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
             Auto
         </a>
@@ -16,21 +16,21 @@ exports[`LevelSelector > basically > auto > should render the proper level label
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" 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">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -48,7 +48,7 @@ exports[`LevelSelector > basically > custom label > should render the proper lev
 <ul class="gear-sub-menu">
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
             Auto
         </a>
@@ -56,21 +56,21 @@ exports[`LevelSelector > basically > custom label > should render the proper lev
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="1" 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">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -88,7 +88,7 @@ exports[`LevelSelector > basically > standard label > should render the proper l
 <ul class="gear-sub-menu">
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
             Auto
         </a>
@@ -96,21 +96,21 @@ exports[`LevelSelector > basically > standard label > should render the proper l
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" 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">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -139,21 +139,21 @@ exports[`LevelSelector > options.restrictResolution > given vertical video forma
     
     
         <li class="level-disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class="level-disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" id="level_selector_1280">
                 <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">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" id="level_selector_640">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -172,21 +172,21 @@ exports[`LevelSelector > options.restrictResolution > given vertical video forma
     
     
         <li class="level-disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class="level-disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" id="level_selector_1280">
                 <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">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" id="level_selector_640">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>

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

@@ -45,6 +45,7 @@ export type MediaControlElement =
   | 'pip'
   | 'playbackRate'
   | 'seekBarContainer'
+  | 'subtitlesSelector'
 
 const T = 'plugins.media_control'
 
@@ -207,7 +208,7 @@ export class MediaControl extends UICorePlugin {
    * @deprecated
    */
   get container() {
-    return this.core && this.core.activeContainer
+    return this.core.activeContainer
   }
 
   /**
@@ -215,7 +216,7 @@ export class MediaControl extends UICorePlugin {
    * @deprecated
    */
   get playback() {
-    return this.core && this.core.activePlayback
+    return this.core.activePlayback
   }
 
   /**
@@ -327,7 +328,6 @@ export class MediaControl extends UICorePlugin {
     this.listenTo(this.core, Events.CORE_FULLSCREEN, this.show)
     this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure)
     this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize)
-    this.bindContainerEvents()
 
     this.listenTo(this.core, 'core:advertisement:start', this.onStartAd)
     this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd)
@@ -355,63 +355,60 @@ export class MediaControl extends UICorePlugin {
   }
 
   private bindContainerEvents() {
-    if (!this.container) {
-      return
-    }
-    this.listenTo(this.container, Events.CONTAINER_PLAY, this.changeTogglePlay)
-    this.listenTo(this.container, Events.CONTAINER_PAUSE, this.changeTogglePlay)
-    this.listenTo(this.container, Events.CONTAINER_STOP, this.changeTogglePlay)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAY, this.changeTogglePlay)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.changeTogglePlay)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.changeTogglePlay)
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_DBLCLICK,
       this.toggleFullscreen,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_TIMEUPDATE,
       this.onTimeUpdate,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_PROGRESS,
       this.updateProgressBar,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_SETTINGSUPDATE,
       this.settingsUpdate,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
       this.settingsUpdate,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_HIGHDEFINITIONUPDATE,
       this.highDefinitionUpdate,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_MEDIACONTROL_DISABLE,
       this.disable,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_MEDIACONTROL_ENABLE,
       this.enable,
     )
-    this.listenTo(this.container, Events.CONTAINER_ENDED, this.ended)
-    this.listenTo(this.container, Events.CONTAINER_VOLUME, this.onVolumeChanged)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.ended)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_VOLUME, this.onVolumeChanged)
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_OPTIONS_CHANGE,
       this.setInitialVolume,
     )
-    if (this.container.playback.el.nodeName.toLowerCase() === 'video') {
+    if (this.core.activePlayback.el.nodeName.toLowerCase() === 'video') {
       // wait until the metadata has loaded and then check if fullscreen on video tag is supported
       this.listenToOnce(
-        this.container,
+        this.core.activeContainer,
         Events.CONTAINER_LOADEDMETADATA,
         this.onLoadedMetadataOnVideoTag,
       )
@@ -455,7 +452,7 @@ export class MediaControl extends UICorePlugin {
   }
 
   private onLoadedMetadataOnVideoTag(event: any) {
-    const video = this.playback && this.playback.el
+    const video = this.core.activePlayback?.el
 
     // video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
     // see https://github.com/clappr/clappr/issues/1127
@@ -729,32 +726,33 @@ export class MediaControl extends UICorePlugin {
 
   private onActiveContainerChanged() {
     this.fullScreenOnVideoTagSupported = null
-    this.bindEvents()
     // set the new container to match the volume of the last one
     this.setInitialVolume()
     this.changeTogglePlay()
     this.bindContainerEvents()
     this.settingsUpdate()
-    this.container &&
-      this.container.trigger(
+    this.core.activeContainer &&
+      this.core.activeContainer.trigger(
         Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
-        this.container.isDvrInUse(),
+        this.core.activeContainer.isDvrInUse(),
       )
-    this.container && this.container.mediaControlDisabled && this.disable()
+    this.core.activeContainer && this.core.activeContainer.mediaControlDisabled && this.disable()
     this.trigger(Events.MEDIACONTROL_CONTAINERCHANGED)
 
-    if (this.container.$el) {
-      this.container.$el.addClass('container-skin-1')
+    if (this.core.activeContainer.$el) {
+      this.core.activeContainer.$el.addClass('container-skin-1')
     }
 
     if (this.options.cropVideo) {
-      this.container.$el.addClass('crop-video')
+      this.core.activeContainer.$el.addClass('crop-video')
     }
 
-    const spinnerPlugin = this.container.getPlugin('spinner')
+    // TODO handle by the spinner itself
+    const spinnerPlugin = this.core.activeContainer.getPlugin('spinner')
 
     spinnerPlugin?.$el.find('div').addClass('gcore-skin-main-color')
 
+    // TODO handle by the seek_time itself
     const seekTimePlugin = this.container.getPlugin('seek_time')
 
     seekTimePlugin?.$el.addClass('gcore-skin-bg-color')
@@ -964,12 +962,11 @@ export class MediaControl extends UICorePlugin {
   }
 
   private settingsUpdate() {
-    const newSettings = this.getSettings()
-    $.extend(true, newSettings, {
+    const newSettings = $.extend(true, {
       left: [],
       default: [],
       right: [],
-    })
+    }, this.core.activeContainer?.settings)
 
     newSettings.left = orderByOrderPattern(
       [...newSettings.left, 'clipsText', 'volume'],
@@ -1014,11 +1011,6 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
-  private getSettings() {
-    // TODO show live and remove duration/position if live
-    return $.extend(true, {}, this.container && this.container.settings)
-  }
-
   private highDefinitionUpdate(isHD: boolean) {
     this.isHD = isHD
   }
@@ -1102,9 +1094,19 @@ export class MediaControl extends UICorePlugin {
         return this.$playbackRate
       case 'seekBarContainer':
         return this.$seekBarContainer
+      case 'subtitlesSelector':
+        return this.$subtitlesSelector
     }
   }
 
+  /**
+   * Get the right panel area to append custom elements to
+   * @returns  ZeptoSelector of the right panel element
+   */
+  getRightPanel() {
+    return this.$el.find('.media-control-right-panel')
+  }
+
   private resetIndicators() {
     assert.ok(
       this.$duration && this.$position,
@@ -1298,7 +1300,7 @@ export class MediaControl extends UICorePlugin {
 
     this.changeTogglePlay()
 
-    if (this.container) {
+    if (this.core.activeContainer) {
       this.hideId = setTimeout(() => this.hide(), timeout)
       this.disabled && this.hide()
     }