@gcorevideo/player 2.21.6 → 2.22.1

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,7 +66,16 @@ type MediaControlSettings = {
 
 const DEFAULT_SETTINGS: MediaControlSettings = {
   left: [],
-  right: [],
+  right: [
+    'fullscreen',
+    'pip',
+    'gear',
+    'cc',
+    'multicamera',
+    // 'playbackrate',
+    'vr',
+    'audiotracks',
+  ],
   default: [],
   seekEnabled: true,
 }
@@ -70,6 +83,7 @@ const DEFAULT_SETTINGS: MediaControlSettings = {
 /**
  * Custom events emitted by the plugins to communicate with one another
  * @beta
+ * @deprecated
  */
 export enum MediaControlEvents {
   /**
@@ -83,7 +97,6 @@ const T = 'plugins.media_control'
 const LEFT_ORDER = [
   'playpause',
   'playstop',
-  // 'live',
   'dvr',
   'volume',
   'position',
@@ -115,6 +128,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 +171,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 +181,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 +752,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)
+          },
+        )
       }
     }
 
@@ -805,7 +821,9 @@ export class MediaControl extends UICorePlugin {
   }
 
   private showVolumeBar() {
-    this.hideVolumeId && clearTimeout(this.hideVolumeId)
+    if (this.hideVolumeId) {
+      clearTimeout(this.hideVolumeId)
+    }
     this.$volumeBarContainer?.removeClass('volume-bar-hide')
   }
 
@@ -813,10 +831,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,
@@ -1023,16 +1043,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 &&
@@ -1138,31 +1149,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() {
@@ -1354,6 +1374,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 ?? {} })
@@ -1415,6 +1436,7 @@ export class MediaControl extends UICorePlugin {
 
     this.rendered = true
     this.updateVolumeUI()
+    // TODO setTimeout
     this.trigger(Events.MEDIACONTROL_RENDERED)
 
     return this
@@ -1503,6 +1525,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()
     }

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

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { MediaControl, MediaControlElement } from '../MediaControl'
 import { createMockCore } from '../../../testUtils'
 import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
-import { Events, Playback } from '@clappr/core'
+import { $, Events, Playback } from '@clappr/core'
 
 Logger.enable('*')
 setTracer(new LogTracer('MediaControl.test'))
@@ -60,7 +60,7 @@ describe('MediaControl', () => {
         const element = document.createElement('div')
         element.className = 'my-media-control'
         element.textContent = 'test'
-        mediaControl.putElement(mcName, element)
+        mediaControl.putElement(mcName, $(element))
 
         expect(mediaControl.el.innerHTML).toMatchSnapshot()
         expect(mediaControl.$el.find('.media-control-right-panel .my-media-control').length).toEqual(1)
@@ -90,7 +90,7 @@ describe('MediaControl', () => {
           const element = document.createElement('div')
           element.className = 'my-dvr-controls'
           element.textContent = 'live'
-          mediaControl.putElement('dvr', element)
+          mediaControl.putElement('dvr', $(element))
           expect(mediaControl.el.innerHTML).toMatchSnapshot()
           expect(mediaControl.$el.find('.media-control-left-panel .my-dvr-controls').length).toEqual(1)
         })
@@ -100,7 +100,7 @@ describe('MediaControl', () => {
           const element = document.createElement('div')
           element.className = 'my-dvr-controls'
           element.textContent = 'live'
-          mediaControl.putElement('dvr', element)
+          mediaControl.putElement('dvr', $(element))
           expect(mediaControl.el.innerHTML).toMatchSnapshot()
           expect(mediaControl.$el.find('.media-control-left-panel .my-dvr-controls').length).toEqual(0)
         })

package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap

@@ -193,6 +193,8 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
     
         <div class="media-control-left-panel" data-media-control="">
             
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color paused" data-playpause="" aria-label="playpause">/assets/icons/new/play.svg</button>
+    
         <div class="drawer-container" data-volume="">
             <div class="drawer-icon-container" data-volume="">
                 <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
@@ -255,6 +257,8 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
     
         <div class="media-control-left-panel" data-media-control="">
             
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color paused" data-playpause="" aria-label="playpause">/assets/icons/new/play.svg</button>
+    
         <div class="drawer-container" data-volume="">
             <div class="drawer-icon-container" data-volume="">
                 <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>

package/src/plugins/picture-in-picture/PictureInPicture.ts

@@ -6,6 +6,7 @@ import { CLAPPR_VERSION } from '../../build.js';
 import pipIcon from '../../../assets/icons/new/pip.svg';
 import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
 import '../../../assets/picture-in-picture/button.scss';
+import assert from 'assert';
 
 const VERSION = '0.0.1';
 
@@ -68,7 +69,11 @@ export class PictureInPicture extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+    this.listenToOnce(this.core, Events.CORE_READY, () => {
+      const mediaControl = this.core.getPlugin('media_control');
+      assert(mediaControl, 'media_control plugin is required');
+      this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+    });
   }
 
   private isPiPSupported() {
@@ -92,7 +97,7 @@ export class PictureInPicture extends UICorePlugin {
 
     const mediaControl = this.core.getPlugin('media_control');
     if (mediaControl) {
-      mediaControl.putElement('pip', this.el);
+      mediaControl.putElement('pip', this.$el);
     }
 
     return this;