@gcorevideo/player 2.22.14 → 2.22.16

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

@@ -56,14 +56,26 @@ describe('MediaControl', () => {
         core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
         core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
       })
-      it('should wait a delay before rendering anything', async () => { 
+      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)
+        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)
       })
     })
   })
@@ -72,9 +84,7 @@ describe('MediaControl', () => {
       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))
+      await runMetadataLoaded(core)
     })
     describe.each([
       [
@@ -92,20 +102,29 @@ describe('MediaControl', () => {
         core.activePlayback.emit(Events.PLAYBACK_SETTINGSUPDATE)
         core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE)
       })
-      it.each(
-        settings.left
-      )("should render %s control", (element) => {
-        const el = mediaControl.$el.find(`.media-control-left-panel [data-${element}]`)
+      it.each(settings.left)('should render %s control', (element) => {
+        const el = mediaControl.$el.find(
+          `.media-control-left-panel [data-${element}]`,
+        )
         expect(el.length).toBeGreaterThan(0)
       })
       it.each(
-        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}]`)
+        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)
       })
-      it(`should ${settings.seekEnabled ? '' : 'not '}render the seek bar`, () => {
-        const seekbar = mediaControl.$el.find('.media-control-center-panel [data-seekbar]')
+      it(`should ${
+        settings.seekEnabled ? '' : 'not '
+      }render the seek bar`, () => {
+        const seekbar = mediaControl.$el.find(
+          '.media-control-center-panel [data-seekbar]',
+        )
         expect(seekbar.length).toBeGreaterThan(1)
         if (settings.seekEnabled) {
           expect(seekbar.hasClass('seek-disabled')).toBe(false)
@@ -113,7 +132,9 @@ describe('MediaControl', () => {
           expect(seekbar.hasClass('seek-disabled')).toBe(true)
         }
       })
-      it(`should ${settings.left.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.left.includes('volume')) {
           expect(volume.length).toEqual(1)
@@ -121,8 +142,12 @@ describe('MediaControl', () => {
           expect(volume.length).toEqual(0)
         }
       })
-      it(`should ${settings.right.includes('fullscreen') ? '' : 'not '}render the fullscreen control`, () => {
-        const fullscreen = mediaControl.$el.find('.media-control-right-panel [data-fullscreen]')
+      it(`should ${
+        settings.right.includes('fullscreen') ? '' : 'not '
+      }render the fullscreen control`, () => {
+        const fullscreen = mediaControl.$el.find(
+          '.media-control-right-panel [data-fullscreen]',
+        )
         if (settings.right.includes('fullscreen')) {
           expect(fullscreen.length).toEqual(1)
         } else {
@@ -138,12 +163,13 @@ describe('MediaControl', () => {
       core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
     })
     describe('when live', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         core.activeContainer.getPlaybackType.mockReturnValue(Playback.LIVE)
         core.activePlayback.getPlaybackType.mockReturnValue(Playback.LIVE)
         core.getPlaybackType.mockReturnValue(Playback.LIVE)
-        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
-        core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+        // This is not strictly necessary as the CSS class is applied on the root element and does not require rendering.
+        // However, it makes the scenario more realistic
+        await runMetadataLoaded(core)
         // TODO playback.settings
         core.activePlayback.emit(Events.PLAYBACK_SETTINGSUPDATE)
       })
@@ -152,11 +178,11 @@ describe('MediaControl', () => {
       })
     })
     describe('when vod', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         core.activeContainer.getPlaybackType.mockReturnValue(Playback.VOD)
         core.activePlayback.getPlaybackType.mockReturnValue(Playback.VOD)
         core.getPlaybackType.mockReturnValue(Playback.VOD)
-        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+        await runMetadataLoaded(core)
       })
       it('should not apply live style class', () => {
         expect(mediaControl.$el.hasClass('live')).toBe(false)
@@ -164,11 +190,13 @@ describe('MediaControl', () => {
     })
   })
   describe('putElement', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mediaControl = new MediaControl(core)
-      core.emit('core:ready')
+      core.emit(Events.CORE_READY)
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
       core.activeContainer.settings = {}
-      core.emit('core:active:container:changed', core.activeContainer)
+      core.emit(Events.CONTAINER_SETTINGSUPDATE)
+      await runMetadataLoaded(core)
     })
     describe.each([
       ['pip' as MediaControlElement],
@@ -200,12 +228,13 @@ describe('MediaControl', () => {
       core.emit(Events.CORE_READY)
     })
     describe('dvr', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         core.activeContainer.settings = {
           left: ['playpause', 'position', 'duration'],
           seekEnabled: true,
         }
         core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+        await runMetadataLoaded(core)
       })
       describe('when enabled', () => {
         beforeEach(() => {
@@ -241,10 +270,11 @@ describe('MediaControl', () => {
     })
   })
   describe('dvr mode', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mediaControl = new MediaControl(core)
       core.emit(Events.CORE_READY)
       core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+      await runMetadataLoaded(core)
     })
     describe('by default', () => {
       it('should not apply DVR style class', () => {
@@ -270,3 +300,9 @@ describe('MediaControl', () => {
 function arraySubtract<T extends string>(arr1: T[], arr2: T[]) {
   return arr1.filter((item) => !arr2.includes(item))
 }
+
+function runMetadataLoaded(core: any) {
+  core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+  core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+  return new Promise((resolve) => setTimeout(resolve, 25))
+}

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

@@ -13,7 +13,6 @@ exports[`MediaControl > putElement > audiotracks > should put the element in the
     
     
     
-    
 
     
     
@@ -36,10 +35,7 @@ exports[`MediaControl > putElement > audiotracks > should put the element in the
     
         </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="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -72,7 +68,6 @@ exports[`MediaControl > putElement > cc > should put the element in the right pa
     
     
     
-    
 
     
     
@@ -95,10 +90,7 @@ exports[`MediaControl > putElement > cc > should put the element in the right pa
     
         </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="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -131,7 +123,6 @@ exports[`MediaControl > putElement > gear > should put the element in the right
     
     
     
-    
 
     
     
@@ -154,10 +145,7 @@ exports[`MediaControl > putElement > gear > should put the element in the right
     
         </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="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -190,7 +178,6 @@ exports[`MediaControl > putElement > pip > should put the element in the right p
     
     
     
-    
 
     
     
@@ -213,10 +200,7 @@ exports[`MediaControl > putElement > pip > should put the element in the right p
     
         </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="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -249,7 +233,6 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
     
     
     
-    
 
     
     
@@ -278,10 +261,7 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
     
         <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="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -329,7 +309,6 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
     
     
     
-    
 
     
     
@@ -358,10 +337,7 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
     
         <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="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         </div>
     
@@ -394,7 +370,6 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
     
     
     
-    
 
     
     
@@ -423,10 +398,7 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
     
         <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="media-control-indicator gcore-skin-text-color" data-clips=""></div>
     
         <div class="my-dvr-controls" data-dvr="">live</div></div>
     

package/src/plugins/utils.ts

@@ -6,7 +6,15 @@ export function getLocation(href: string) {
   return l;
 }
 
-export function strtimeToMiliseconds(str: string): number {
+/**
+ * Parse a time string in the format "hh:mm:ss" or "mm:ss" or "ss" to seconds.
+ * @param str - The time string to parse.
+ * @returns The time in seconds.
+ * @example "01:01:00" -> 3660
+ * @example "01:00" -> 60
+ * @example "33" -> 33
+ */
+export function parseClipTime(str: string): number {
   if (!str) {
     return 0;
   }
@@ -15,19 +23,13 @@ export function strtimeToMiliseconds(str: string): number {
 
   if (arr.length >= 3) {
     h = parseInt(arr[arr.length - 3]) * 60 * 60;
-  } else {
-    h = 0;
   }
   if (arr.length >= 2) {
     m = parseInt(arr[arr.length - 2]) * 60;
-  } else {
-    m = 0;
   }
 
   if (arr.length >= 1) {
     s = parseInt(arr[arr.length - 1]);
-  } else {
-    s = 0;
   }
 
   return (h + m + s);

package/src/plugins/vast-ads/loaderxml.ts

@@ -2,7 +2,7 @@ import { reportError } from '@gcorevideo/utils';
 import assert from 'assert';
 import URLHandler from './urlhandler.js';
 import MergeVast from './xmlmerge.js';
-import { strtimeToMiliseconds } from '../utils.js';
+import { parseClipTime } from '../utils.js';
 
 export default class LoaderXML {
   private config: string = '';
@@ -104,7 +104,7 @@ export default class LoaderXML {
     }
 
     if (linearSkipOffset && linearSkipOffset.length > 1) {
-      timeOffset = strtimeToMiliseconds(linearSkipOffset[1]);
+      timeOffset = parseClipTime(linearSkipOffset[1]);
       this.config = this.config.replace(/<Linear skipoffset="(\d+:\d+:\d+)".*?>/g, '<Linear>');
     }
 

package/src/testUtils.ts

@@ -184,14 +184,11 @@ export function createMockMediaControl(core: any) {
     <div class="media-control-right-panel" data-media-control></div>
     <div class="media-control-center-panel" data-media-control></div>`,
   )
-  const elements = {
-    gear: $(document.createElement('div')),
-  }
-  // @ts-ignore
-  mediaControl.getElement = vi.fn().mockImplementation((name) => elements[name])
   // @ts-ignore
   mediaControl.putElement = vi.fn()
   // @ts-ignore
+  mediaControl.mount = vi.fn()
+  // @ts-ignore
   mediaControl.toggleElement = vi.fn()
   return mediaControl
 }