@gcorevideo/player 2.22.13 → 2.22.14

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

@@ -50,8 +50,6 @@ export type MediaControlLeftElement =
   | 'playstop'
   | 'position'
   | 'volume'
-  // | 'seekbar'
-  // | 'seekBarContainer' // TODO rename seekbar
 
 /**
  * Media control elements that appear in main layer, spanning the entire width of the player.
@@ -197,10 +195,14 @@ export class MediaControl extends UICorePlugin {
   private lastMouseX = 0
   private lastMouseY = 0
 
-  private needsUpdate = false
+  private metadataLoaded = false
+
+  private hasUpdate = false
 
   private persistConfig: boolean
 
+  private renderTimerId: ReturnType<typeof setTimeout> | null = null
+
   private rendered = false
 
   private settings: MediaControlSettings = INITIAL_SETTINGS
@@ -492,12 +494,18 @@ export class MediaControl extends UICorePlugin {
       Events.CONTAINER_OPTIONS_CHANGE,
       this.setInitialVolume,
     )
-    // wait until the metadata has loaded and then check if fullscreen on video tag is supported
-    this.listenToOnce(
+    this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_LOADEDMETADATA,
       this.onLoadedMetadata,
     )
+    this.listenTo(
+      this.core,
+      Events.CONTAINER_DESTROYED,
+      () => {
+        this.cancelRenderTimer()
+      },
+    )
   }
 
   /**
@@ -547,12 +555,16 @@ export class MediaControl extends UICorePlugin {
       // TODO sort out, use single utility function
       this.fullScreenOnVideoTagSupported = true
     }
-    this.updateSettings()
-    if (this.core.activeContainer.getPlaybackType() === Playback.LIVE) {
-      this.$el.addClass('live')
-    } else {
-      this.$el.removeClass('live')
-    }
+    this.renderTimerId = setTimeout(() => {
+      this.renderTimerId = null
+      this.metadataLoaded = true
+      this.render()
+      if (this.core.activeContainer.getPlaybackType() === Playback.LIVE) {
+        this.$el.addClass('live')
+      } else {
+        this.$el.removeClass('live')
+      }
+    }, 25)
   }
 
   private updateVolumeUI() {
@@ -822,6 +834,7 @@ export class MediaControl extends UICorePlugin {
 
   private onActiveContainerChanged() {
     this.fullScreenOnVideoTagSupported = false
+    this.metadataLoaded = false
     // set the new container to match the volume of the last one
     this.setInitialVolume()
     this.changeTogglePlay()
@@ -1113,7 +1126,7 @@ export class MediaControl extends UICorePlugin {
 
     if (settingsChanged) {
       this.settings = newSettings
-      this.needsUpdate = true
+      this.hasUpdate = true
       this.render()
     }
   }
@@ -1390,6 +1403,7 @@ export class MediaControl extends UICorePlugin {
    * @internal
    */
   override destroy() {
+    this.cancelRenderTimer()
     $(document).unbind('mouseup', this.stopDrag)
     $(document).unbind('mousemove', this.updateDrag)
     $(document).unbind('touchend', this.stopDrag)
@@ -1398,6 +1412,13 @@ export class MediaControl extends UICorePlugin {
     return super.destroy()
   }
 
+  private cancelRenderTimer() {
+    if (this.renderTimerId) {
+      clearTimeout(this.renderTimerId)
+      this.renderTimerId = null
+    }
+  }
+
   private configure() {
     this.trigger(Events.MEDIACONTROL_OPTIONS_CHANGE)
   }
@@ -1406,8 +1427,8 @@ export class MediaControl extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`, { needsUpdate: this.needsUpdate })
-    if (!this.needsUpdate) {
+    trace(`${T} render`, { needsUpdate: this.hasUpdate, metadataLoaded: this.metadataLoaded })
+    if (!this.hasUpdate || !this.metadataLoaded) {
       return this
     }
     const timeout = this.options.hideMediaControlDelay || 2000
@@ -1471,7 +1492,7 @@ export class MediaControl extends UICorePlugin {
     this.rendered = true
     this.updateVolumeUI()
     
-    this.needsUpdate = false
+    this.hasUpdate = false
     // TODO setTimeout?
     this.trigger(Events.MEDIACONTROL_RENDERED)
 

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

@@ -32,21 +32,57 @@ describe('MediaControl', () => {
       expect(mediaControl.el.innerHTML).toBe('')
     })
   })
-  describe('when container settings update', () => {
+  describe('rendering timing', () => {
     beforeEach(() => {
+      mediaControl = new MediaControl(core)
+      core.emit(Events.CORE_READY)
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+      core.activeContainer.settings = {
+        left: ['playpause', 'position', 'duration', 'volume'],
+        default: ['seekbar'],
+        right: ['fullscreen', 'hd-indicator'],
+        seekEnabled: true,
+      } as MediaControlSettings
+      core.activePlayback.emit(Events.PLAYBACK_SETTINGSUPDATE)
+      core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE)
+    })
+    describe('until metadata is loaded', () => {
+      it('should not render', () => {
+        expect(mediaControl.el.innerHTML).toBe('')
+      })
+    })
+    describe('once metadata is loaded', () => {
+      beforeEach(() => {
+        core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+      })
+      it('should wait a delay before rendering anything', async () => { 
+        expect(mediaControl.el.innerHTML).toBe('')
+        await new Promise((resolve) => setTimeout(resolve, 35))
+        expect(mediaControl.el.innerHTML).toMatchSnapshot()
+        expect(mediaControl.$el.find('.media-control-left-panel [data-playpause]').length).toBeGreaterThan(0)
+        expect(mediaControl.$el.find('.media-control-left-panel [data-volume]').length).toBeGreaterThan(0)
+        expect(mediaControl.$el.find('.media-control-center-panel [data-seekbar]').length).toBeGreaterThan(0)
+        expect(mediaControl.$el.find('.media-control-right-panel [data-fullscreen]').length).toBeGreaterThan(0)
+      })
+    })
+  })
+  describe('when container settings update', () => {
+    beforeEach(async () => {
       mediaControl = new MediaControl(core)
       core.emit(Events.CORE_READY)
       core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
       core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
       core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+      await new Promise((resolve) => setTimeout(resolve, 25))
     })
     describe.each([
       [
         'vod',
         {
-          left: ['playpause', 'position', 'duration'],
+          left: ['playpause', 'position', 'duration', 'volume'],
           default: ['seekbar'],
-          right: ['fullscreen', 'volume', 'hd-indicator'],
+          right: ['fullscreen', 'hd-indicator'],
           seekEnabled: true,
         } as MediaControlSettings,
       ],
@@ -56,17 +92,14 @@ describe('MediaControl', () => {
         core.activePlayback.emit(Events.PLAYBACK_SETTINGSUPDATE)
         core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE)
       })
-      it('should render', () => {
-        expect(mediaControl.el.innerHTML).toMatchSnapshot()
-      })
       it.each(
         settings.left
       )("should render %s control", (element) => {
         const el = mediaControl.$el.find(`.media-control-left-panel [data-${element}]`)
-        expect(el.length).toEqual(1)
+        expect(el.length).toBeGreaterThan(0)
       })
       it.each(
-        arraySubtract(['playpause', 'playstop', 'position', 'duration'], settings.left)
+        arraySubtract(['playpause', 'playstop', 'position', 'duration', 'volume'], settings.left)
       )("should not render %s control", (element) => {
         const el = mediaControl.$el.find(`.media-control-left-panel [data-${element}]`)
         expect(el.length).toEqual(0)
@@ -80,9 +113,9 @@ describe('MediaControl', () => {
           expect(seekbar.hasClass('seek-disabled')).toBe(true)
         }
       })
-      it(`should ${settings.right.includes('volume') ? '' : 'not '}render the volume control`, () => {
+      it(`should ${settings.left.includes('volume') ? '' : 'not '}render the volume control`, () => {
         const volume = mediaControl.$el.find('.drawer-container[data-volume]')
-        if (settings.right.includes('volume')) {
+        if (settings.left.includes('volume')) {
           expect(volume.length).toEqual(1)
         } else {
           expect(volume.length).toEqual(0)

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

@@ -236,7 +236,7 @@ exports[`MediaControl > putElement > pip > should put the element in the right p
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > updateSettings > dvr > when disabled > should disable DVR controls 1`] = `
+exports[`MediaControl > rendering timing > once metadata is loaded > should wait a delay before rendering anything 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -286,6 +286,21 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
         </div>
     
     
+        <div class="media-control-center-panel" data-media-control="">
+            
+        <div class="bar-container" data-seekbar="">
+            <div class="bar-background" data-seekbar="">
+                <div class="bar-fill-1" data-seekbar=""></div>
+                <div class="bar-fill-2 gcore-skin-main-color" data-seekbar="" style=""></div>
+                <div class="bar-hover" data-seekbar=""></div>
+            </div>
+        </div>
+        <div class="bar-scrubber" data-seekbar="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-seekbar=""></div>
+        </div>
+    
+        </div>
+    
     
         <div class="media-control-right-panel" data-media-control="">
             
@@ -301,7 +316,7 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR controls 1`] = `
+exports[`MediaControl > updateSettings > dvr > when disabled > should disable DVR controls 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -348,7 +363,7 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
             <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
         </div>
     
-        <div class="my-dvr-controls" data-dvr="">live</div></div>
+        </div>
     
     
     
@@ -366,7 +381,7 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > when container settings update > vod > should render 1`] = `
+exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR controls 1`] = `
 "<div class="media-control-background" data-background=""></div>
 
 <div class="media-control-layer gcore-skin-bg-color" data-controls="">
@@ -413,23 +428,8 @@ exports[`MediaControl > when container settings update > vod > should render 1`]
             <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
         </div>
     
-        </div>
-    
-    
-        <div class="media-control-center-panel" data-media-control="">
-            
-        <div class="bar-container" data-seekbar="">
-            <div class="bar-background" data-seekbar="">
-                <div class="bar-fill-1" data-seekbar=""></div>
-                <div class="bar-fill-2 gcore-skin-main-color" data-seekbar="" style=""></div>
-                <div class="bar-hover" data-seekbar=""></div>
-            </div>
-        </div>
-        <div class="bar-scrubber" data-seekbar="" style="">
-            <div class="bar-scrubber-icon gcore-skin-main-color" data-seekbar=""></div>
-        </div>
+        <div class="my-dvr-controls" data-dvr="">live</div></div>
     
-        </div>
     
     
         <div class="media-control-right-panel" data-media-control="">

package/src/plugins/playback-rate/PlaybackRate.ts

@@ -85,8 +85,6 @@ export class PlaybackRate extends UICorePlugin {
 
   private metadataLoaded = false
 
-  // private playbackSettingsUpdateReceived = false
-
   private mountTimerId: TimerId | null = null
 
   /**
@@ -167,14 +165,8 @@ export class PlaybackRate extends UICorePlugin {
   private onActiveContainerChange() {
     trace(`${T} onActiveContainerChange`)
     this.metadataLoaded = false
-    // this.playbackSettingsUpdateReceived = false
     this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop)
     this.listenTo(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay)
-    // this.listenTo(
-    //   this.core.activePlayback,
-    //   Events.PLAYBACK_SETTINGSUPDATE,
-    //   this.onSettingsUpdate,
-    // )
     this.listenTo(
       this.core.activePlayback,
       PlaybackEvents.PLAYBACK_RATE_CHANGED,
@@ -219,28 +211,13 @@ export class PlaybackRate extends UICorePlugin {
       )
   }
 
-  // private onSettingsUpdate() {
-  //   trace(`${T} onSettingsUpdate`, {
-  //     playbackType: this.core.activePlayback.getPlaybackType(),
-  //     dvrEnabled: this.core.activePlayback.dvrEnabled,
-  //   })
-  //   this.playbackSettingsUpdateReceived = true
-  //   if (this.metadataLoaded) {
-  //     if (this.mountTimerId) {
-  //       clearTimeout(this.mountTimerId)
-  //       this.mountTimerId = null
-  //     }
-  //     this.mount()
-  //   }
-  // }
-
   private onMetaDataLoaded() {
     trace(`${T} onMetaDataLoaded`, {
       playbackType: this.core.activePlayback.getPlaybackType(),
       dvrEnabled: this.core.activePlayback.dvrEnabled,
     })
-    this.metadataLoaded = true
     this.mountTimerId = setTimeout(() => {
+      this.metadataLoaded = true
       this.mountTimerId = null
       this.mount()
     }, 25)

package/src/plugins/playback-rate/__tests__/PlaybackRate.test.ts

@@ -89,11 +89,12 @@ describe('PlaybackRate', () => {
       })
     });
     describe('on playback rate select', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         core.activePlayback.dvrEnabled = true
         core.activeContainer.isDvrEnabled.mockReturnValue(true)
         core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
         core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+        await new Promise((resolve) => setTimeout(resolve, 25))
       })
       describe.each([[2], [1.5], [1.25], [0.75], [0.5]])('%s', (rate) => {
         beforeEach(() => {