@gcorevideo/player 2.22.18 → 2.22.21

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/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/plugins/volume-fade/VolumeFade.ts

@@ -1,7 +1,8 @@
-import { UICorePlugin, Events, Browser, $, Container } from '@clappr/core';
-import { reportError } from '@gcorevideo/utils';
+import { UICorePlugin, Events, Browser, $, Core } from '@clappr/core'
+import { reportError, trace } from '@gcorevideo/utils'
 
-import { TimerId } from '../../utils/types.js';
+import { TimerId } from '../../utils/types.js'
+import { ExtendedEvents } from '../media-control/MediaControl.js'
 
 /**
  * Events emitted by the VolumeFade plugin.
@@ -11,114 +12,130 @@ export enum VolumeFadeEvents {
   FADE = 'core:volume:fade',
 }
 
+const T = 'plugins.volume_fade'
+
+const DEFAULT_DURATION = 600
+
+/**
+ * @beta
+ */
+export type VolumeFadeSettings = {
+  /**
+   * Initial active volume level, effective until volume is changed via media control
+   */
+  level?: number
+  /**
+   * Fade duration, ms
+   */
+  duration?: number
+}
+
 /**
  * `PLUGIN` that applies fade effect to the player's volume change.
  * @beta
+ *
+ * @remarks
+ * Depends on {@link MediaControl} plugin.
+ * Configuration options - {@link VolumeFadeSettings}
  */
 export class VolumeFade extends UICorePlugin {
-  private _aboveBorderVolume = 0;
+  private activeVolume = 0
 
-  private container: Container | null = null;
+  private duration = 0
 
-  private delay = 0;
-
-  private interval: TimerId | null = null;
+  private timerId: TimerId | null = null
 
   /**
    * @internal
    */
   get name() {
-    return 'volume_fade';
+    return 'volume_fade'
+  }
+
+  constructor(core: Core) {
+    super(core)
+    if (typeof this.options.volumeFade?.level === 'number') {
+      this.activeVolume = this.options.volumeFade.level
+    }
   }
 
   /**
    * @internal
    */
   override bindEvents() {
-    // TODO on container changed
-    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
-    if (this.core.mediaControl) {
-      this.listenTo(this.core.mediaControl, 'mediacontrol:volume:user', this._onUserChangeVolume);
-    }
-    // this.listenTo(this.core, 'core:volume:config', this._onVolumeConfig);
-  }
-
-  private unBindEvents() {
-    this.core.$el.off('mouseleave.volume');
-    this.core.$el.off('mouseenter.volume');
-  }
-
-  private _onUserChangeVolume(volume: number) {
-    this._aboveBorderVolume = volume;
-  }
-
-  private _onVolumeConfig(value: number) {
-    this._aboveBorderVolume = value;
-    this.container?.setVolume(0);
+    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
   }
 
   private onCoreReady() {
-    this.unBindEvents();
-    this.container = this.core.activeContainer;
-    if (this.core && this.core.$el) {
-      // TODO find out why options.playerElement instead of this.core.$el or this.container.$el
-      $(this.options.playerElement).on('mouseenter.volume', () => {
-        this.onEnter();
-      });
-      $(this.options.playerElement).on('mouseleave.volume', () => {
-        this.onLeave();
-      });
+    const mediaControl = this.core.getPlugin('media_control')
+    if (Browser.isMobile) {
+      this.destroy()
+      return
     }
-    if (!this._aboveBorderVolume) {
-      this._aboveBorderVolume = this.container?.volume && !isNaN(this.container.volume) ? this.container.volume : 80;
+    if (mediaControl) {
+      this.listenTo(
+        mediaControl,
+        ExtendedEvents.MEDIACONTROL_VOLUME,
+        this.onVolumeChange,
+      )
     }
-    if (this.options.mute || Browser.isMobile) {
-      this.destroy();
-
-      return;
+    $(this.core.$el).on('mouseenter', () => this.onEnter())
+    $(this.core.$el).on('mouseleave', () => this.onLeave())
+    if (!this.activeVolume) {
+      this.activeVolume =
+        this.core.activeContainer?.volume &&
+        !isNaN(this.core.activeContainer.volume)
+          ? this.core.activeContainer.volume
+          : 80
     }
-    this.delay = this.options.volumeFade && this.options.volumeFade.delay || 600;
-    this.container?.setVolume(0);
-  }
 
-  private onEnter() {
-    this.numberTo(this.delay);
+    this.duration = this.options.volumeFade?.duration || DEFAULT_DURATION
+    // TODO check if mute must be respected
+    this.core.activeContainer?.setVolume(this.activeVolume)
+    this.core.activePlayback.volume(0)
   }
 
-  private numberTo(duration: number, contra = 0) {
-    this.clearCurrentInterval();
-    const start = new Date().getTime();
+  private onVolumeChange(volume: number) {
+    trace(`${T} onVolumeChange`, { volume })
+    this.activeVolume = volume
+  }
 
-    this.interval = setInterval(() => {
-      let now = (new Date().getTime()) - start;
+  private onEnter() {
+    trace(`${T} onEnter`)
+    this.fade(this.duration, 1)
+  }
 
-      if (now > duration) {
-        now = duration;
-      }
-      const progress = Math.abs(contra - now / duration);
+  private onLeave() {
+    trace(`${T} onLeave`)
+    this.fade(this.duration, 0)
+  }
 
+  private fade(duration: number, to: 0 | 1) {
+    this.stopFade()
+    const start = new Date().getTime()
+    const from = 1 - to
+    this.timerId = setInterval(() => {
+      const delta = new Date().getTime() - start
+      const progress = Math.min(1, delta / duration)
+      const normVol = progress * to + (1 - progress) * from
+      const volume = normVol * this.activeVolume
+      this.core.activePlayback.volume(volume)
       try {
-        this.container?.setVolume(progress * this._aboveBorderVolume);
-        this.core.trigger(VolumeFadeEvents.FADE, progress * this._aboveBorderVolume);
+        this.core.trigger(VolumeFadeEvents.FADE, volume)
       } catch (error) {
-        // LogManager.exception(error);
-        reportError(error);
-        this.clearCurrentInterval();
+        reportError(error)
       }
-      if (progress >= 1 || progress <= 0) {
-        this.clearCurrentInterval();
+      if (progress >= 1) {
+        this.stopFade()
       }
-    }, 10);
+    }, 10)
   }
 
-  private clearCurrentInterval() {
-    if (this.interval !== null) {
-      clearInterval(this.interval);
-      this.interval = null;
+  private stopFade() {
+    trace(`${T} stopFade`)
+    if (this.timerId !== null) {
+      clearInterval(this.timerId)
+      this.timerId = null
     }
   }
-
-  private onLeave() {
-    this.numberTo(this.delay, 1);
-  }
 }

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.
    */