@gcorevideo/player 2.22.20 → 2.22.21

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/temp/player.api.json

@@ -234,32 +234,6 @@
           },
           "implementsTokenRanges": []
         },
-        {
-          "kind": "TypeAlias",
-          "canonicalReference": "@gcorevideo/player!BitrateTrackRecord:type",
-          "docComment": "/**\n * @beta\n */\n",
-          "excerptTokens": [
-            {
-              "kind": "Content",
-              "text": "export type BitrateTrackRecord = "
-            },
-            {
-              "kind": "Content",
-              "text": "{\n    start: number;\n    end?: number;\n    time?: number;\n    bitrate: number;\n}"
-            },
-            {
-              "kind": "Content",
-              "text": ";"
-            }
-          ],
-          "fileUrlPath": "src/plugins/clappr-stats/types.ts",
-          "releaseTag": "Beta",
-          "name": "BitrateTrackRecord",
-          "typeTokenRange": {
-            "startIndex": 1,
-            "endIndex": 2
-          }
-        },
         {
           "kind": "Class",
           "canonicalReference": "@gcorevideo/player!BottomGear:class",
@@ -486,6 +460,32 @@
           },
           "implementsTokenRanges": []
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@gcorevideo/player!ClapprStatsBitrateTrack:type",
+          "docComment": "/**\n * @beta\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type ClapprStatsBitrateTrack = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    start: number;\n    end?: number;\n    time?: number;\n    bitrate: number;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/plugins/clappr-stats/types.ts",
+          "releaseTag": "Beta",
+          "name": "ClapprStatsBitrateTrack",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
         {
           "kind": "Enum",
           "canonicalReference": "@gcorevideo/player!ClapprStatsChronograph:enum",
@@ -1053,8 +1053,8 @@
             },
             {
               "kind": "Reference",
-              "text": "BitrateTrackRecord",
-              "canonicalReference": "@gcorevideo/player!BitrateTrackRecord:type"
+              "text": "ClapprStatsBitrateTrack",
+              "canonicalReference": "@gcorevideo/player!ClapprStatsBitrateTrack:type"
             },
             {
               "kind": "Content",
@@ -2019,7 +2019,7 @@
             {
               "kind": "EnumMember",
               "canonicalReference": "@gcorevideo/player!GearEvents.RENDERED:member",
-              "docComment": "/**\n * Use this event to accurately attach an item to the gear menu\n */\n",
+              "docComment": "/**\n * Subscribe to this event to accurately attach an item to the gear menu\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -3276,7 +3276,7 @@
             {
               "kind": "Method",
               "canonicalReference": "@gcorevideo/player!MediaControl#mount:member(1)",
-              "docComment": "/**\n * Get a media control element DOM node\n *\n * @remarks\n *\n * Use this method to render custom media control UI in a plugin\n *\n * @deprecated\n *\n * Use {@link MediaControl.putElement} instead\n *\n * @param name - The name of the media control element\n *\n * @returns The DOM node to render to or extend\n *\n * @example\n * ```ts\n * class MyPlugin extends UICorePlugin {\n *   override render() {\n *     this.$el.html('<div data-clips>Here we go</div>')\n *     this.core.getPlugin('media_control').mount('clips', this.$el)\n *     return this\n *   }\n * }\n * ```\n *\n */\n",
+              "docComment": "/**\n * Get a media control element DOM node\n *\n * @remarks\n *\n * Use this method to render custom media control UI in a plugin\n *\n * @param name - The name of the media control element\n *\n * @returns The DOM node to render to or extend\n *\n * @example\n * ```ts\n * class MyPlugin extends UICorePlugin {\n *   override render() {\n *     this.$el.html('<div data-clips>Here we go</div>')\n *     this.core.getPlugin('media_control').mount('clips', this.$el)\n *     return this\n *   }\n * }\n * ```\n *\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -3372,7 +3372,7 @@
             {
               "kind": "Method",
               "canonicalReference": "@gcorevideo/player!MediaControl#putElement:member(1)",
-              "docComment": "",
+              "docComment": "/**\n * @deprecated\n *\n * Use {@link MediaControl.mount} instead\n *\n * @param name - \n *\n * @param element - \n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -3533,7 +3533,7 @@
             {
               "kind": "Method",
               "canonicalReference": "@gcorevideo/player!MediaControl#toggleElement:member(1)",
-              "docComment": "/**\n * Toggle the visibility of a media control element\n *\n * @param name - The name of the media control element\n *\n * @param show - Whether to show or hide the element\n */\n",
+              "docComment": "/**\n * Toggle the visibility of a media control element\n *\n * @param name - The name of the media control element\n *\n * @param show - Visibility state\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",