@gcorevideo/player 2.22.15 → 2.22.16

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

@@ -50,14 +50,13 @@ export type MediaControlLeftElement =
   | 'playstop'
   | 'position'
   | 'volume'
+  | 'clips'
 
 /**
  * Media control elements that appear in main layer, spanning the entire width of the player.
  * @beta
  */
-export type MediaControlLayerElement =
-  | 'seekbar'
-  | 'seekBarContainer' // TODO rename seekbar
+export type MediaControlLayerElement = 'seekbar' | 'seekBarContainer' // TODO rename seekbar
 
 /**
  * Media control elements that appear in the right area.
@@ -96,9 +95,7 @@ export type MediaControlSettings = {
 
 const DEFAULT_SETTINGS: MediaControlSettings = {
   default: [],
-  left: [
-    'dvr'
-  ], 
+  left: ['dvr'],
   right: [
     'audiotracks',
     'cc',
@@ -114,12 +111,9 @@ const DEFAULT_SETTINGS: MediaControlSettings = {
 }
 
 const INITIAL_SETTINGS: MediaControlSettings = {
-  left: [
-  ],
-  right: [
-  ],
-  default: [
-  ],
+  left: [],
+  right: [],
+  default: [],
   seekEnabled: false,
 }
 
@@ -155,13 +149,13 @@ type DisabledClickable = {
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
- * 
+ *
  * Configuration options:
  *
  * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
  *
  * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
- * 
+ *
  * - `chromeless`: boolean
  */
 export class MediaControl extends UICorePlugin {
@@ -213,10 +207,6 @@ export class MediaControl extends UICorePlugin {
 
   private verticalVolume = false
 
-  private $clipText: ZeptoResult | null = null
-
-  private $clipTextContainer: ZeptoResult | null = null
-
   private $duration: ZeptoResult | null = null
 
   private $fullscreenToggle: ZeptoResult | null = null
@@ -499,13 +489,9 @@ export class MediaControl extends UICorePlugin {
       Events.CONTAINER_LOADEDMETADATA,
       this.onLoadedMetadata,
     )
-    this.listenTo(
-      this.core,
-      Events.CONTAINER_DESTROYED,
-      () => {
-        this.cancelRenderTimer()
-      },
-    )
+    this.listenTo(this.core, Events.CONTAINER_DESTROYED, () => {
+      this.cancelRenderTimer()
+    })
   }
 
   /**
@@ -516,7 +502,7 @@ export class MediaControl extends UICorePlugin {
     this.userDisabled = true // TODO distinguish between user and system (e.g., unplayable) disabled?
     this.hide()
     this.unbindKeyEvents()
-    this.$el.hide()
+    this.$el.hide() // TODO why?
   }
 
   /**
@@ -1080,13 +1066,12 @@ export class MediaControl extends UICorePlugin {
     )
     trace(`${T} updateSettings`, { newSettings })
 
-
+    newSettings.left.push('clips') // TODO
     // TODO make order controlled via CSS
     newSettings.left = orderByOrderPattern(
-      [...newSettings.left, 'clipsText', 'volume'],
+      [...newSettings.left, 'volume', 'clips'],
       LEFT_ORDER,
     )
-
     if (
       this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
       this.core.activePlayback.dvrEnabled
@@ -1098,8 +1083,7 @@ export class MediaControl extends UICorePlugin {
     newSettings.right = DEFAULT_SETTINGS.right // TODO get from the options
 
     if (
-      (!this.fullScreenOnVideoTagSupported &&
-        !fullscreenEnabled()) ||
+      (!this.fullScreenOnVideoTagSupported && !fullscreenEnabled()) ||
       this.options.fullscreenDisable
     ) {
       trace(`${T} updateSettings removing fullscreen`, {
@@ -1163,11 +1147,6 @@ export class MediaControl extends UICorePlugin {
     this.$multiCameraSelector = this.$el.find(
       '.media-control-multicamera[data-multicamera]',
     )
-    this.$clipText = this.$el.find('.media-clip-text[data-clipstext]') // TODO
-    this.$clipTextContainer = this.$el.find(
-      '.media-clip-container[data-clipstext]',
-    )
-
     this.resetIndicators()
     this.initializeIcons()
   }
@@ -1183,26 +1162,14 @@ export class MediaControl extends UICorePlugin {
    * ```ts
    * class MyPlugin extends UICorePlugin {
    *   override render() {
-   *     const mediaControl = this.core.getPlugin('media_control')
-   *     const clipText = mediaControl.getElement('clipText')
-   *     clipText?.el.text('Here we go')
+   *     this.$el.html('<div data-clips>Here we go</div>')
+   *     this.core.getPlugin('media_control').mount('clips', this.$el)
    *     return this
    *   }
    * }
    * ```
    */
-  getElement(name: MediaControlElement): ZeptoResult | null {
-    switch (name) {
-      case 'audiotracks':
-        return null
-      case 'clipText':
-        return this.$clipText
-      case 'seekBarContainer':
-        return this.$seekBarContainer
-    }
-  }
-
-  putElement(name: MediaControlElement, element: ZeptoResult) {
+  mount(name: MediaControlElement, element: ZeptoResult) {
     const panel = this.getElementLocation(name)
     trace(`${T} putElement`, { name, panel: !!panel })
     if (panel) {
@@ -1221,6 +1188,10 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  putElement(name: MediaControlElement, element: ZeptoResult) {
+    this.mount(name, element)
+  }
+
   /**
    * Toggle the visibility of a media control element
    * @param name - The name of the media control element
@@ -1284,12 +1255,12 @@ export class MediaControl extends UICorePlugin {
       return
     }
 
-    const currentTime = this.container.getCurrentTime()
-    const duration = this.container.getDuration()
+    const currentTime = this.core.activeContainer.getCurrentTime()
+    const duration = this.core.activeContainer.getDuration()
     let position = Math.min(Math.max(currentTime + delta, 0), duration)
 
     position = Math.min((position * 100) / duration, 100)
-    this.container.seekPercentage(position)
+    this.core.activeContainer.seekPercentage(position)
   }
 
   private bindKeyAndShow(key: string, callback: () => boolean | undefined) {
@@ -1427,7 +1398,10 @@ export class MediaControl extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`, { needsUpdate: this.hasUpdate, metadataLoaded: this.metadataLoaded })
+    trace(`${T} render`, {
+      needsUpdate: this.hasUpdate,
+      metadataLoaded: this.metadataLoaded,
+    })
     if (!this.hasUpdate || !this.metadataLoaded) {
       return this
     }
@@ -1491,7 +1465,7 @@ export class MediaControl extends UICorePlugin {
 
     this.rendered = true
     this.updateVolumeUI()
-    
+
     this.hasUpdate = false
     // TODO setTimeout?
     this.trigger(Events.MEDIACONTROL_RENDERED)
@@ -1615,8 +1589,7 @@ MediaControl.extend = function (properties) {
 }
 
 function serializeSettings(s: MediaControlSettings) {
-  return (s.left
-    .slice() as MediaControlElement[])
+  return (s.left.slice() as MediaControlElement[])
     .sort()
     .concat(s.right.slice().sort())
     .concat(s.default.slice().sort())

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
 }