@gcorevideo/player 2.22.17 → 2.22.20

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

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`MediaControl > putElement > audiotracks > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > audiotracks > 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="">
@@ -26,9 +26,9 @@ exports[`MediaControl > putElement > audiotracks > should put the element in the
             
     <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 class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -55,7 +55,7 @@ exports[`MediaControl > putElement > audiotracks > should put the element in the
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > putElement > cc > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > 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="">
@@ -81,9 +81,9 @@ exports[`MediaControl > putElement > cc > should put the element in the right pa
             
     <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 class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -110,7 +110,7 @@ exports[`MediaControl > putElement > cc > should put the element in the right pa
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > putElement > gear > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > 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="">
@@ -136,9 +136,9 @@ exports[`MediaControl > putElement > gear > should put the element in the right
             
     <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 class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -165,7 +165,7 @@ exports[`MediaControl > putElement > gear > should put the element in the right
 <style>:root {}</style>"
 `;
 
-exports[`MediaControl > putElement > pip > should put the element in the right panel 1`] = `
+exports[`MediaControl > mount > 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="">
@@ -191,9 +191,9 @@ exports[`MediaControl > putElement > pip > should put the element in the right p
             
     <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 class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -248,9 +248,9 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
             
     <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 class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -271,11 +271,11 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
         <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-fill-2 gcore-skin-main-color" data-seekbar="" style="width: 0%;"></div>
                 <div class="bar-hover" data-seekbar=""></div>
             </div>
         </div>
-        <div class="bar-scrubber" data-seekbar="" style="">
+        <div class="bar-scrubber" data-seekbar="" style="left: 0%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-seekbar=""></div>
         </div>
     
@@ -324,9 +324,9 @@ exports[`MediaControl > updateSettings > dvr > when disabled > should disable DV
             
     <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 class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>
@@ -385,9 +385,9 @@ exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR
             
     <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 class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>
-        <div class="bar-scrubber" data-volume="" style="">
+        <div class="bar-scrubber" data-volume="" style="left: 100%;">
             <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
         </div>
     </div>

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

@@ -97,7 +97,7 @@ export class PictureInPicture extends UICorePlugin {
 
     const mediaControl = this.core.getPlugin('media_control');
     if (mediaControl) {
-      mediaControl.putElement('pip', this.$el);
+      mediaControl.mount('pip', this.$el);
     }
 
     return this;

package/src/plugins/seek-time/SeekTime.ts

@@ -3,7 +3,7 @@
 // license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE
 
 import { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core';
-import { TimeUpdate } from '../../playback.types.js';
+import { TimePosition } from '../../playback.types.js';
 
 import { CLAPPR_VERSION } from '../../build.js';
 
@@ -79,7 +79,7 @@ export class SeekTime extends UICorePlugin {
     this.listenTo(this.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.onContainerChanged);
     if (this.mediaControlContainer) {
       this.listenTo(this.mediaControlContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.update);
-      this.listenTo(this.mediaControlContainer, Events.CONTAINER_TIMEUPDATE, this.updateDuration);
+      this.listenTo(this.mediaControlContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
     }
   }
 
@@ -89,9 +89,8 @@ export class SeekTime extends UICorePlugin {
     this.bindEvents();
   }
 
-  private updateDuration(timeProgress: TimeUpdate) {
-    this.duration = timeProgress.total;
-    // this.firstFragDateTime = timeProgress.firstFragDateTime;
+  private onTimeUpdate({ total }: TimePosition) {
+    this.duration = total;
     this.update();
   }
 

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -337,7 +337,7 @@ export class ClosedCaptions extends UICorePlugin {
     this.resizeFont()
 
     this.core.activeContainer.$el.append(this.$line)
-    mediaControl.putElement('cc', this.$el)
+    mediaControl.mount('cc', this.$el)
 
     this.updateSelection()
 

package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts

@@ -53,7 +53,7 @@ describe('ClosedCaptions', () => {
     it('should render', () => {
       expect(cc.el.innerHTML).toMatchSnapshot()
       expect(cc.$el.find('[data-cc-button]').length).toEqual(1)
-      expect(mediaControl.putElement).toHaveBeenCalledWith('cc', cc.$el)
+      expect(mediaControl.mount).toHaveBeenCalledWith('cc', cc.$el)
     })
   })
 })

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

@@ -627,7 +627,7 @@ export class VastAds extends UICorePlugin {
 
     // Attempt to get click-to-pause plugin. (May interfere with advert click handling)
     this._clickToPausePlugin = this._container?.getPlugin(
-      'click_to_pause_custom',
+      'click_to_pause',
     )
 
     assert(this.playback, 'playback is not defined')

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

@@ -72,7 +72,7 @@ export default class RollManager extends Events {
     this._playback = this.core.activePlayback;
     this._contentElement = this._playback.el as HTMLMediaElement;
     this._posterPlugin = this._container.getPlugin('poster');
-    this._clickToPausePlugin = this._container.getPlugin('click_to_pause_custom');
+    this._clickToPausePlugin = this._container.getPlugin('click_to_pause');
     this._adContainer = _adContainer;
     this._events = {};
     this._pr = Math.floor(Math.random() * 1000000);

package/src/testUtils.ts

@@ -100,7 +100,7 @@ export function createMockCore(
       ...options,
     },
     configure: vi.fn(),
-    getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
+    getPlaybackType: vi.fn(),
     getPlugin: vi.fn(),
     load: vi.fn(),
     trigger: emitter.emit,
@@ -140,7 +140,7 @@ export function createMockPlayback(name = 'mock') {
     getDuration: vi.fn().mockImplementation(() => 100),
     enterPiP: vi.fn(),
     exitPiP: vi.fn(),
-    getPlaybackType: vi.fn().mockImplementation(() => Playback.LIVE),
+    getPlaybackType: vi.fn(),
     getStartTimeOffset: vi.fn().mockImplementation(() => 0),
     getCurrentTime: vi.fn().mockImplementation(() => 0),
     isHighDefinitionInUse: vi.fn().mockImplementation(() => false),
@@ -157,7 +157,10 @@ export function createMockPlayback(name = 'mock') {
   })
 }
 
-export function createMockContainer(options: Record<string, unknown> = {}, playback: any = createMockPlayback()) {
+export function createMockContainer(
+  options: Record<string, unknown> = {},
+  playback: any = createMockPlayback(),
+) {
   const el = playback.el
   const emitter = new Events()
   return Object.assign(emitter, {
@@ -167,7 +170,7 @@ export function createMockContainer(options: Record<string, unknown> = {}, playb
     $el: $(el),
     getDuration: vi.fn().mockReturnValue(0),
     getPlugin: vi.fn(),
-    getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
+    getPlaybackType: vi.fn(),
     isDvrInUse: vi.fn().mockReturnValue(false),
     isDvrEnabled: vi.fn().mockReturnValue(false),
     isPlaying: vi.fn().mockReturnValue(false),
@@ -202,7 +205,10 @@ export function createMockBottomGear(core: any) {
     if (existing.length) {
       return existing
     }
-    return $('<li></li>').attr(`data-${name}`, '').append($el).appendTo(plugin.$el)
+    return $('<li></li>')
+      .attr(`data-${name}`, '')
+      .append($el)
+      .appendTo(plugin.$el)
   })
   plugin.refresh = vi.fn()
   return plugin

package/src/types.ts

@@ -163,7 +163,7 @@ export interface PlayerConfig extends Record<string, unknown> {
 
   /**
    * Stream type.
-   * @remark
+   * @remarks
    * Should only be set if known in advance, as it should not change once determined.
    * Otherwise it might cause inconsistencies in the UI plugins behavior, for instance, glitches with rendering of the DVR controls or seek bar.
    */