@gcorevideo/player 2.21.3 → 2.21.6

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

@@ -0,0 +1,132 @@
+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'
+
+Logger.enable('*')
+setTracer(new LogTracer('MediaControl.test'))
+
+describe('MediaControl', () => {
+  let core: any
+  let mediaControl: MediaControl
+
+  beforeEach(() => {
+    core = createMockCore()
+  })
+  describe('playback type', () => {
+    beforeEach(() => {
+      mediaControl = new MediaControl(core)
+      core.emit('core:ready')
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+    })
+    describe('when live', () => {
+      beforeEach(() => {
+        core.activeContainer.getPlaybackType.mockReturnValue(Playback.LIVE)
+        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+      })
+      it('should apply live style class', () => {
+        expect(mediaControl.$el.hasClass('live')).toBe(true)
+      })
+    })
+    describe('when vod', () => {
+      beforeEach(() => {
+        core.activeContainer.getPlaybackType.mockReturnValue(Playback.VOD)
+        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+      })
+      it('should not apply live style class', () => {
+        expect(mediaControl.$el.hasClass('live')).toBe(false)
+      })
+    })
+  })
+  describe('putElement', () => {
+    beforeEach(() => {
+      mediaControl = new MediaControl(core)
+      core.emit('core:ready')
+      core.activeContainer.settings = {}
+      core.emit('core:active:container:changed', core.activeContainer)
+    })
+    describe.each([
+      ['pip' as MediaControlElement],
+      ['gear' as MediaControlElement],
+      ['cc' as MediaControlElement],
+      // ['multicamera' as MediaControlElement],
+      // ['playbackrate' as MediaControlElement],
+      // ['vr' as MediaControlElement],
+      // ['audiotracks' as MediaControlElement],
+      // dvr controls
+    ])('%s', (mcName) => {
+      it('should put the element in the right panel', () => {
+        const element = document.createElement('div')
+        element.className = 'my-media-control'
+        element.textContent = 'test'
+        mediaControl.putElement(mcName, element)
+
+        expect(mediaControl.el.innerHTML).toMatchSnapshot()
+        expect(mediaControl.$el.find('.media-control-right-panel .my-media-control').length).toEqual(1)
+      })
+    })
+  })
+  describe('updateSettings', () => {
+    beforeEach(() => {
+      mediaControl = new MediaControl(core)
+      core.emit('core:ready')
+    })
+    describe('dvr', () => {
+      beforeEach(() => {
+        core.activeContainer.settings = {
+          left: ['playpause', 'position', 'duration'],
+          seekEnabled: true,
+        }
+        core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+      })
+      describe('when enabled', () => {
+        beforeEach(() => {
+          core.activePlayback.dvrEnabled = true
+          core.activeContainer.isDvrEnabled.mockReturnValue(true)
+          core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE, true)
+        })
+        it('should enable DVR controls', () => {
+          const element = document.createElement('div')
+          element.className = 'my-dvr-controls'
+          element.textContent = 'live'
+          mediaControl.putElement('dvr', element)
+          expect(mediaControl.el.innerHTML).toMatchSnapshot()
+          expect(mediaControl.$el.find('.media-control-left-panel .my-dvr-controls').length).toEqual(1)
+        })
+      })
+      describe('when disabled', () => {
+        it('should disable DVR controls', () => {
+          const element = document.createElement('div')
+          element.className = 'my-dvr-controls'
+          element.textContent = 'live'
+          mediaControl.putElement('dvr', element)
+          expect(mediaControl.el.innerHTML).toMatchSnapshot()
+          expect(mediaControl.$el.find('.media-control-left-panel .my-dvr-controls').length).toEqual(0)
+        })
+      })
+    })
+  })
+  describe('dvr mode', () => {
+    beforeEach(() => {
+      mediaControl = new MediaControl(core)
+      core.emit(Events.CORE_READY)
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+    })
+    describe('by default', () => {
+      it('should not apply DVR style class', () => {
+        expect(mediaControl.$el.hasClass('dvr')).toBe(false)
+      })
+    })
+    describe('when in use', () => {
+      beforeEach(() => {
+        core.activeContainer.isDvrInUse.mockReturnValue(true)
+        core.activePlayback.dvrInUse = true
+        core.activeContainer.emit(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, true)
+      })
+      it('should apply DVR style class', () => {
+        expect(mediaControl.$el.hasClass('dvr')).toBe(true)
+      })
+    })
+  })
+})

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

@@ -0,0 +1,299 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MediaControl > putElement > cc > should put the element in the right panel 1`] = `
+"<div class="media-control-background" data-background=""></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <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>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+
+        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
+            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
+        </div>
+    
+        </div>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        <div class="my-media-control" data-cc="">test</div></div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+exports[`MediaControl > putElement > gear > should put the element in the right panel 1`] = `
+"<div class="media-control-background" data-background=""></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <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>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+
+        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
+            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
+        </div>
+    
+        </div>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        <div class="my-media-control" data-gear="">test</div></div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+exports[`MediaControl > putElement > pip > should put the element in the right panel 1`] = `
+"<div class="media-control-background" data-background=""></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <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>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+
+        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
+            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
+        </div>
+    
+        </div>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        <div class="my-media-control" data-pip="">test</div></div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+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="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <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>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+        <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
+    
+        <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
+    
+
+        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
+            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
+        </div>
+    
+        </div>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        </div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+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="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <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>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+        <div class="media-control-indicator gcore-skin-text-color" data-position="">00:00</div>
+    
+        <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</div>
+    
+
+        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
+            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
+        </div>
+    
+        <div class="my-dvr-controls" data-dvr="">live</div></div>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        </div>
+    
+</div>
+<style>:root {}</style>"
+`;

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

@@ -43,6 +43,8 @@ export class PictureInPicture extends UICorePlugin {
     return VERSION;
   }
 
+  private static buttonTemplate = template(buttonHtml);
+
   /**
    * @internal
    */
@@ -71,8 +73,8 @@ export class PictureInPicture extends UICorePlugin {
 
   private isPiPSupported() {
     trace(`${T} isPiPSupported`, {
-      pictureInPictureEnabled: document.pictureInPictureEnabled,
-      requestPictureInPicture: HTMLVideoElement.prototype.requestPictureInPicture,
+      pictureInPictureEnabled: !!document.pictureInPictureEnabled,
+      requestPictureInPicture: !!HTMLVideoElement.prototype.requestPictureInPicture,
     });
 
     return document.pictureInPictureEnabled && !!HTMLVideoElement.prototype.requestPictureInPicture;
@@ -86,9 +88,7 @@ export class PictureInPicture extends UICorePlugin {
       return this;
     }
 
-    const t = template(buttonHtml);
-
-    this.$el.html(t({ pipIcon }));
+    this.$el.html(PictureInPicture.buttonTemplate({ pipIcon }));
 
     const mediaControl = this.core.getPlugin('media_control');
     if (mediaControl) {