@gcorevideo/player 2.22.0 → 2.22.2

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

@@ -1,17 +1,16 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { $, UICorePlugin } from '@clappr/core'
-import FakeTimers from '@sinonjs/fake-timers'
-import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
+import { Events } from '@clappr/core'
 import { LevelSelector } from '../LevelSelector.js'
 import {
+  createMockBottomGear,
   createMockCore,
   createMockMediaControl,
-  createMockPlayback,
 } from '../../../testUtils.js'
-import { MediaControlEvents } from '../../media-control/MediaControl.js'
+import { GearEvents } from '../../bottom-gear/BottomGear.js'
+// import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
 
-setTracer(new LogTracer('LevelSelector.test'))
-Logger.enable('*')
+// setTracer(new LogTracer('LevelSelector.test'))
+// Logger.enable('*')
 
 const LEVELS = [
   {
@@ -33,28 +32,20 @@ const LEVELS = [
     bitrate: 250000,
   },
 ]
+
 describe('LevelSelector', () => {
-  let clock: FakeTimers.InstalledClock
   let core: any
   let levelSelector: LevelSelector
-  let activePlayback: any
-  let mediaControl: UICorePlugin
-  let bottomGear: UICorePlugin | null
-  beforeEach(() => {
-    clock = FakeTimers.install()
-  })
-  afterEach(() => {
-    clock.uninstall()
-  })
+  let mediaControl: any
+  let bottomGear: any
   describe('basically', () => {
     beforeEach(() => {
       core = createMockCore({
         levelSelector: {
           // restrictResolution: 360,
-          labels: { 360: '360p', 720: 'HD' },
+          labels: { 720: 'HD', 1080: 'Full HD' },
         },
       })
-      activePlayback = core.activePlayback
       core.getPlugin.mockImplementation((name: string) => {
         if (name === 'media_control') {
           return mediaControl
@@ -65,43 +56,45 @@ describe('LevelSelector', () => {
         return null
       })
       mediaControl = createMockMediaControl(core)
-      bottomGear = createBottomGear(core)
+      bottomGear = createMockBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
     describe('initially', () => {
-      beforeEach(async () => {
-        core.emit('core:active:container:changed')
-        await clock.tickAsync(1)
-        activePlayback.emit('playback:levels:available', LEVELS)
-        await clock.tickAsync(1)
+      beforeEach(() => {
+        core.emit(Events.CORE_READY)
+        core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+        bottomGear.trigger(GearEvents.RENDERED)
+        core.activePlayback.emit(Events.PLAYBACK_LEVELS_AVAILABLE, LEVELS)
       })
       it('should render proper level label', () => {
-        // @ts-ignore
-        expect(levelSelector.el.textContent).toMatchQualityLevelLabel('Auto')
+        expect(
+          bottomGear.$el.find('[data-quality]').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelLabel('auto')
       })
     })
     describe.each([
-      ['auto', LEVELS, -1, 'Auto'],
+      ['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)
-        // activePlayback.currentLevel = current
-        activePlayback.emit('playback:levels:available', levels)
-        await clock.tickAsync(1)
-        levelSelector.$el.find('.gear-option').click()
-        await clock.tickAsync(1)
+      beforeEach(() => {
+        core.emit(Events.CORE_READY)
+        core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+        bottomGear.trigger(GearEvents.RENDERED)
+        core.activePlayback.emit(Events.PLAYBACK_LEVELS_AVAILABLE, levels)
         levelSelector.$el
-          .find(`.gear-sub-menu_btn[data-id="${current}"]`)
+          .find(`#level-selector-menu [data-id="${current}"]`)
           .click()
-        await clock.tickAsync(1)
       })
-      it('should render the proper level labels', () => {
-        expect(levelSelector.el.innerHTML).toMatchSnapshot()
+      it('should render the proper level label', () => {
+        expect(
+          bottomGear.$el.find('[data-quality]').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelLabel(label)
       })
       it('should render the selected level', () => {
+        expect(levelSelector.el.innerHTML).toMatchSnapshot()
         expect(
           levelSelector.$el.find('ul.gear-sub-menu .current')[0].textContent,
           // @ts-ignore
@@ -111,15 +104,14 @@ describe('LevelSelector', () => {
   })
   describe('options.restrictResolution', () => {
     beforeEach(() => {
-      let mediaControl: UICorePlugin | null = null
-      let bottomGear: UICorePlugin | null = null
       core = createMockCore({
         levelSelector: {
           restrictResolution: 360,
-          labels: { 360: '360p', 720: '720p' },
+          labels: { 360: '360p', 720: '720p', 1080: '1080p' },
         },
       })
-      activePlayback = core.activePlayback
+      mediaControl = createMockMediaControl(core)
+      bottomGear = createMockBottomGear(core)
       core.getPlugin.mockImplementation((name: string) => {
         if (name === 'media_control') {
           return mediaControl
@@ -130,30 +122,31 @@ describe('LevelSelector', () => {
         return null
       })
       mediaControl = createMockMediaControl(core)
-      bottomGear = createBottomGear(core)
+      bottomGear = createMockBottomGear(core)
       levelSelector = new LevelSelector(core)
+      core.emit(Events.CORE_READY)
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+      bottomGear.trigger(GearEvents.RENDERED)
     })
-    describe('basically', () => {
+    describe('initially', () => {
       beforeEach(async () => {
-        core.emit('core:active:container:changed')
-        await clock.tickAsync(1)
-        activePlayback.emit('playback:levels:available', LEVELS)
-        await clock.tickAsync(1)
+        core.activePlayback.emit(Events.PLAYBACK_LEVELS_AVAILABLE, LEVELS)
       })
       it('should render the restricted quality level label', () => {
+        expect(bottomGear.$el.find('[data-quality]').html()).toMatchSnapshot()
         expect(
-          levelSelector.el.textContent,
+          bottomGear.$el.find('[data-quality]').text(),
           // @ts-ignore
         ).toMatchQualityLevelLabel('360p')
-
-        expect(levelSelector.el.innerHTML).toMatchSnapshot()
+        expect(
+          levelSelector.$el.find('#level-selector-menu .current').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelOption('360p')
       })
     })
     describe('given vertical video format levels', () => {
-      beforeEach(async () => {
-        core.emit('core:active:container:changed')
-        await clock.tickAsync(1)
-        activePlayback.emit('playback:levels:available', [
+      beforeEach(() => {
+        core.activePlayback.emit(Events.PLAYBACK_LEVELS_AVAILABLE, [
           {
             level: 0,
             width: 360,
@@ -168,22 +161,31 @@ describe('LevelSelector', () => {
           },
           {
             level: 2,
-            width: 1920,
-            height: 1080,
+            width: 1080,
+            height: 1920,
             bitrate: 250000,
           },
         ])
-        await clock.tickAsync(1)
-        levelSelector.$el.find('.gear-option').click()
-        await clock.tickAsync(1)
       })
       it('should recognize vertical orientation', () => {
         expect(levelSelector.el.innerHTML).toMatchSnapshot()
-        expect(levelSelector.el.innerHTML).toMatchSnapshot()
+        expect(
+          levelSelector.$el.find('#level-selector-menu [data-id]:eq(0)').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelOption('1080p')
+        expect(
+          levelSelector.$el.find('#level-selector-menu [data-id]:eq(1)').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelOption('720p')
+        expect(
+          levelSelector.$el.find('#level-selector-menu [data-id]:eq(2)').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelOption('360p')
       })
       it('should properly apply the restriction', () => {
         expect(
-          levelSelector.$el.find('li:not(.level-disabled)')[0].textContent,
+          levelSelector.$el.find('#level-selector-menu li:not(.disabled)')[0]
+            .textContent,
           // @ts-ignore
         ).toMatchQualityLevelOption('360p')
       })
@@ -195,11 +197,11 @@ expect.extend({
   toMatchQualityLevelLabel(received, expected) {
     const { isNot } = this
     const rendered = received
-      .replace('/assets/icons/new/arrow-right.svg', '')
+      .replace(/\/assets\/.*\.svg/g, '')
       .replace(/\s+/g, ' ')
       .trim()
     return {
-      pass: rendered.includes(`Quality ${expected}`),
+      pass: rendered.includes(`quality ${expected}`),
       message: () =>
         `Quality label must${
           isNot ? ' not' : ''
@@ -209,7 +211,7 @@ expect.extend({
   toMatchQualityLevelOption(received, expected) {
     const { isNot } = this
     const rendered = received
-      .replace('/assets/icons/new/check.svg', '')
+      .replace(/\/assets\/.*\.svg/g, '')
       .replace(/\s+/g, ' ')
       .trim()
     return {
@@ -221,15 +223,3 @@ expect.extend({
     }
   },
 })
-
-function createBottomGear(core: any) {
-  const bottomGear = new UICorePlugin(core)
-  const elemets = {
-    quality: $(document.createElement('div')),
-  }
-  // @ts-ignore
-  bottomGear.getElement = vi.fn().mockImplementation((name) => elemets[name])
-  // @ts-ignore
-  bottomGear.setContent = vi.fn()
-  return bottomGear
-}

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

@@ -1,24 +1,24 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`LevelSelector > basically > auto > should render the proper level labels 1`] = `
-"<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+exports[`LevelSelector > 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
+    quality
 </button>
-<ul class="gear-sub-menu">
+<ul class="gear-sub-menu" id="level-selector-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">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
-            Auto
-        </a>
-    </li>
+                auto
+            </a>
+        </li>
     
     
         <li class="">
             <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
+                Full HD
             </a>
         </li>
     
@@ -40,25 +40,25 @@ exports[`LevelSelector > basically > auto > should render the proper level label
 "
 `;
 
-exports[`LevelSelector > basically > custom label > should render the proper level labels 1`] = `
-"<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+exports[`LevelSelector > 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
+    quality
 </button>
-<ul class="gear-sub-menu">
+<ul class="gear-sub-menu" id="level-selector-menu">
     
         <li class="">
             <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>
-    </li>
+                auto
+            </a>
+        </li>
     
     
         <li class="">
             <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
+                Full HD
             </a>
         </li>
     
@@ -80,25 +80,25 @@ exports[`LevelSelector > basically > custom label > should render the proper lev
 "
 `;
 
-exports[`LevelSelector > basically > standard label > should render the proper level labels 1`] = `
-"<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+exports[`LevelSelector > 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
+    quality
 </button>
-<ul class="gear-sub-menu">
+<ul class="gear-sub-menu" id="level-selector-menu">
     
         <li class="">
             <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>
-    </li>
+                auto
+            </a>
+        </li>
     
     
         <li class="">
             <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
+                Full HD
             </a>
         </li>
     
@@ -120,40 +120,30 @@ exports[`LevelSelector > basically > standard label > should render the proper l
 "
 `;
 
-exports[`LevelSelector > options.restrictResolution > basically > should render the restricted quality level label 1`] = `
-"<button class="gplayer-lite-btn gcore-skin-text-color gear-option">
-    
-    <span>Quality</span>
-    <span class="gear-option_arrow-right-icon">/assets/icons/new/arrow-right.svg</span>
-    <span class="gear-option_value">360p</span>
-</button>
-"
-`;
-
 exports[`LevelSelector > options.restrictResolution > given vertical video format levels > should recognize vertical orientation 1`] = `
-"<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+"<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
+    quality
 </button>
-<ul class="gear-sub-menu">
+<ul class="gear-sub-menu" id="level-selector-menu">
     
     
-        <li class="level-disabled">
+        <li class="disabled ">
             <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" id="level_selector_1280">
+        <li class="disabled ">
+            <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>
                 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_640">
+        <li class="current ">
+            <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>
@@ -163,35 +153,12 @@ exports[`LevelSelector > options.restrictResolution > given vertical video forma
 "
 `;
 
-exports[`LevelSelector > options.restrictResolution > given vertical video format levels > should recognize vertical orientation 2`] = `
-"<button class="gplayer-lite-btn go-back gcore-skin-text-color">
-    <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
-    Quality
+exports[`LevelSelector > options.restrictResolution > initially > should render the restricted quality level label 1`] = `
+"<button class="gplayer-lite-btn gcore-skin-text-color gear-option">
+    <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>
+    <span class="gear-option_value">360p</span>
 </button>
-<ul class="gear-sub-menu">
-    
-    
-        <li class="level-disabled">
-            <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" 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" id="level_selector_640">
-                <span class="check-icon">/assets/icons/new/check.svg</span>
-                360p
-            </a>
-        </li>
-    
-</ul>
 "
 `;

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

@@ -47,11 +47,15 @@ export type MediaControlElement =
   | 'clipText'
   | 'dvr'
   | 'duration'
+  | 'fullscreen'
   | 'gear'
+  | 'multicamera'
   | 'pip'
   | 'playbackRate'
   | 'position'
   | 'seekBarContainer'
+  | 'vr'
+  | 'volume'
 
 type MediaControlSettings = {
   left: MediaControlElement[]
@@ -62,28 +66,25 @@ type MediaControlSettings = {
 
 const DEFAULT_SETTINGS: MediaControlSettings = {
   left: [],
-  right: [],
+  right: [
+    'fullscreen',
+    'pip',
+    'gear',
+    'cc',
+    'multicamera',
+    // 'playbackrate',
+    'vr',
+    'audiotracks',
+  ],
   default: [],
   seekEnabled: true,
 }
 
-/**
- * Custom events emitted by the plugins to communicate with one another
- * @beta
- */
-export enum MediaControlEvents {
-  /**
-   * Emitted when the gear menu is rendered
-   */
-  MEDIACONTROL_GEAR_RENDERED = 'mediacontrol:gear:rendered',
-}
-
 const T = 'plugins.media_control'
 
 const LEFT_ORDER = [
   'playpause',
   'playstop',
-  // 'live',
   'dvr',
   'volume',
   'position',
@@ -115,6 +116,9 @@ type DisabledClickable = {
 export class MediaControl extends UICorePlugin {
   // private advertisementPlaying = false
 
+  private customAreaElements: Record<string, HTMLElement> = {}
+  private customAreaHandler?: (name: string, element: HTMLElement) => void
+
   private buttonsColor: string | null = null
 
   private currentDurationValue: number = 0
@@ -155,8 +159,6 @@ export class MediaControl extends UICorePlugin {
 
   private verticalVolume = false
 
-  private $audioTracksSelector: ZeptoResult | null = null
-
   private $clipText: ZeptoResult | null = null
 
   private $clipTextContainer: ZeptoResult | null = null
@@ -167,8 +169,6 @@ export class MediaControl extends UICorePlugin {
 
   private $multiCameraSelector: ZeptoResult | null = null
 
-  private $pip: ZeptoResult | null = null
-
   private $playPauseToggle: ZeptoResult | null = null
 
   private $playStopToggle: ZeptoResult | null = null
@@ -740,9 +740,13 @@ export class MediaControl extends UICorePlugin {
       if (this.core.activeContainer && this.core.activeContainer.isReady) {
         this.core.activeContainer.setVolume(value)
       } else {
-        this.listenToOnce(this.core.activeContainer, Events.CONTAINER_READY, () => {
-          this.core.activeContainer.setVolume(value)
-        })
+        this.listenToOnce(
+          this.core.activeContainer,
+          Events.CONTAINER_READY,
+          () => {
+            this.core.activeContainer.setVolume(value)
+          },
+        )
       }
     }
 
@@ -815,10 +819,12 @@ export class MediaControl extends UICorePlugin {
     if (!this.$volumeBarContainer) {
       return
     }
+    if (this.hideVolumeId) {
+      clearTimeout(this.hideVolumeId)
+    }
     if (this.draggingVolumeBar) {
       this.hideVolumeId = setTimeout(() => this.hideVolumeBar(), timeout)
     } else {
-      this.hideVolumeId && clearTimeout(this.hideVolumeId)
       this.hideVolumeId = setTimeout(
         () => this.$volumeBarContainer?.addClass('volume-bar-hide'),
         timeout,
@@ -1025,16 +1031,7 @@ export class MediaControl extends UICorePlugin {
     }
 
     // actual order of the items appear rendered is controlled by CSS
-    newSettings.right = [
-      'fullscreen',
-      'pip',
-      'gear',
-      'cc',
-      'multicamera',
-      'playbackrate',
-      'vr',
-      'audiotracks',
-    ]
+    newSettings.right = DEFAULT_SETTINGS.right
 
     if (
       (!this.fullScreenOnVideoTagSupported &&
@@ -1140,31 +1137,40 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
-  putElement(name: MediaControlElement, element: HTMLElement) {
+  putElement(name: MediaControlElement, element: ZeptoResult) {
     const panel = this.getElementLocation(name)
     trace(`${T} putElement`, { name, panel: !!panel })
     if (panel) {
       const current = panel.find(`[data-${name}]`)
-      element.setAttribute(`data-${name}`, '')
+      element.attr(`data-${name}`, '')
       // TODO test
       if (current.length) {
-        if (current[0] === element) {
+        if (current[0] === element[0]) {
           return
         }
         current.replaceWith(element)
       } else {
         panel.append(element)
       }
+      return
     }
   }
 
+  handleCustomArea(handler: (name: string, content: HTMLElement) => void) {
+    this.customAreaHandler = handler
+    Object.entries(this.customAreaElements).forEach(([name, element]) => {
+      handler(name, element)
+    })
+    this.customAreaElements = {}
+  }
+
   /**
    * 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
    */
-  toggleElement(name: MediaControlElement, show: boolean) {
-    this.$el.find(`[data-${name}]`).toggle(show)
+  toggleElement(area: MediaControlElement, show: boolean) {
+    this.$el.find(`[data-${area}]`).toggle(show)
   }
 
   private getRightPanel() {
@@ -1356,6 +1362,7 @@ export class MediaControl extends UICorePlugin {
    * @internal
    */
   override render() {
+    trace(`${T} render`)
     const timeout = this.options.hideMediaControlDelay || 2000
 
     const html = MediaControl.template({ settings: this.settings ?? {} })
@@ -1417,6 +1424,7 @@ export class MediaControl extends UICorePlugin {
 
     this.rendered = true
     this.updateVolumeUI()
+    // TODO setTimeout
     this.trigger(Events.MEDIACONTROL_RENDERED)
 
     return this
@@ -1505,6 +1513,12 @@ export class MediaControl extends UICorePlugin {
   }
 
   private getElementLocation(name: MediaControlElement) {
+    trace(`${T} getElementLocation`, {
+      name,
+      right: this.settings.right,
+      left: this.settings.left,
+      default: this.settings.default,
+    })
     if (this.settings.right?.includes(name)) {
       return this.getRightPanel()
     }