@gcorevideo/player 2.22.20 → 2.22.22

package/src/plugins/clappr-nerd-stats/NerdStats.ts

@@ -312,8 +312,12 @@ export class NerdStats extends UICorePlugin {
 
   private updateMetrics(metrics: PerfMetrics) {
     trace(`${T} updateMetrics`, { custom: this.speedtestMetrics })
-    Object.assign(this.metrics, metrics)
-    this.updateEstimatedQuality()
+    Object.assign(this.metrics, metrics) // TODO no Object.assign
+    this.metrics.custom = {
+      ...this.speedtestMetrics,
+    }
+
+    this.updateCustomMetrics()
 
     this.$el
       .find('#nerd-stats-current-time')
@@ -382,17 +386,19 @@ export class NerdStats extends UICorePlugin {
 
     this.setStatsBoxSize()
     drawSpeedTestResults()
-    drawSummary(
-      this.speedtestMetrics,
-      this.$el.find('#nerd-stats-quality-vod'),
-      this.$el.find('#nerd-stats-quality-live'),
-    )
+    this.updateEstimatedQuality()
 
     if (!this.open) {
       this.hide()
     }
   }
 
+  private updateCustomMetrics() {
+    this.$el.find('#nerd-stats-dl-text').text(this.metrics.custom.connectionSpeed.toFixed(2))
+    this.$el.find('#nerd-stats-ping-text').text(this.metrics.custom.ping.toFixed(2))
+    this.$el.find('#nerd-stats-jitter-text').text(this.metrics.custom.jitter.toFixed(2))
+  }
+
   private updateEstimatedQuality() {
     this.estimateQuality()
     this.$el
@@ -401,6 +407,12 @@ export class NerdStats extends UICorePlugin {
     this.$el
       .find('#nerd-stats-quality-live-text')
       .html(this.metrics.custom.liveQuality)
+
+    drawSummary(
+      this.speedtestMetrics,
+      this.$el.find('#nerd-stats-quality-vod'),
+      this.$el.find('#nerd-stats-quality-live'),
+    )
   }
 
   private setStatsBoxSize() {
@@ -453,8 +465,9 @@ export class NerdStats extends UICorePlugin {
     this.speedtestMetrics.connectionSpeed = 0
     this.speedtestMetrics.ping = 0
     this.speedtestMetrics.jitter = 0
-
+    
     if (clapprStats) {
+      clapprStats.clearMetrics()
       this.updateMetrics(clapprStats.exportMetrics())
     }
   }

package/src/plugins/clappr-nerd-stats/speedtest/Speedtest.ts

@@ -116,6 +116,7 @@ export class Speedtest {
 
   addTestPoint(server: Server) {
     this._checkServerDefinition(server)
+    console.log('Speedtest addTestPoint %o', server)
     if (this._state === 0) {
       this._state = 1
     }

package/src/plugins/clappr-nerd-stats/speedtest/index.ts

@@ -37,7 +37,7 @@ const getColor = (speedValue: number): string => {
 };
 
 export function drawSpeedTestResults() {
-  const canvas = document.getElementById('speedTestCanvas');
+  const canvas = document.getElementById('nerd-stats-speed-test-canvas');
   if (!canvas) {
     return;
   }

package/src/plugins/clappr-nerd-stats/utils.ts

@@ -10,31 +10,41 @@ const qualityClasses = [
 ]
 
 export const getDownloadQuality = (speedValue: number): number => {
+  if (!speedValue) {
+    return 0
+  }
   if (speedValue < 3) {
     return 1
-  } else if (speedValue < 7) {
+  }
+  if (speedValue < 7) {
     return 2
-  } else if (speedValue < 13) {
+  }
+  if (speedValue < 13) {
     return 3
-  } else if (speedValue < 25) {
+  }
+  if (speedValue < 25) {
     return 4
-  } else {
-    return 5
   }
+  return 5
 }
 
 export const getPingQuality = (pingValue: number): number => {
+  if (!pingValue) {
+    return 0
+  }
   if (pingValue < 20) {
     return 5
-  } else if (pingValue < 50) {
+  }
+  if (pingValue < 50) {
     return 4
-  } else if (pingValue < 100) {
+  }
+  if (pingValue < 100) {
     return 3
-  } else if (pingValue < 150) {
+  }
+  if (pingValue < 150) {
     return 2
-  } else {
-    return 1
   }
+  return 1
 }
 
 export const generateQualityHtml = (quality: number): string => {
@@ -61,9 +71,9 @@ export const drawSummary = (
 ) => {
   const { connectionSpeed, ping } = customMetrics
 
-  if (!connectionSpeed || !ping) {
-    return
-  }
+  // if (!connectionSpeed || !ping) {
+  //   return
+  // }
   const downloadQuality = getDownloadQuality(connectionSpeed)
   const pingQuality = getPingQuality(ping)
   const liveQuality = Math.min(downloadQuality, pingQuality)

package/src/plugins/clappr-stats/ClapprStats.ts

@@ -172,6 +172,10 @@ export class ClapprStats extends ContainerPlugin {
     return structuredClone(this.metrics)
   }
 
+  clearMetrics() {
+    this.metrics = newMetrics()
+  }
+
   private onBitrate(newBitrate: QualityLevel) {
     const bitrate = newBitrate.bitrate
     const now = this.now()

package/src/plugins/click-to-pause/ClickToPause.ts

@@ -58,13 +58,13 @@ export class ClickToPause extends ContainerPlugin {
 
     if (isLivePlayback && !isDvrEnabled) {
       this.togglePlay(true)
-    } else if (!isLivePlayback || isDvrEnabled) {
-      this.clearTimer()
-      this.timer = setTimeout(() => {
-        this.timer = null
-        this.togglePlay(false)
-      }, 300)
+      return
     }
+    this.clearTimer()
+    this.timer = setTimeout(() => {
+      this.timer = null
+      this.togglePlay(false)
+    }, 300)
   }
 
   private settingsUpdate() {

package/src/plugins/level-selector/__tests__/__snapshots__/QualityLevels.test.ts.snap

@@ -154,7 +154,7 @@ exports[`QualityLevels > options.restrictResolution > given vertical video forma
 `;
 
 exports[`QualityLevels > options.restrictResolution > initially > should render the restricted quality level label 1`] = `
-"<button class="gplayer-lite-btn gcore-skin-text-color gear-option" aria-haspopup="menu">
+"<button class="gplayer-lite-btn gcore-skin-text-color gear-option" aria-haspopup="menu" id="quality-levels">
     <span class="gear-option_icon hidden">/assets/icons/new/hd.svg</span>
     <span class="gear-option_label">quality</span>
     <span class="gear-option_value">360p</span>

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

@@ -136,6 +136,10 @@ const LEFT_ORDER = [
   'dvr',
 ]
 
+export enum ExtendedEvents {
+  MEDIACONTROL_VOLUME = 'mediacontrol:volume',
+}
+
 const { Config, Fullscreen, formatTime, extend, removeArrayItem } = Utils
 
 function orderByOrderPattern(arr: string[], order: string[]): string[] {
@@ -793,16 +797,17 @@ export class MediaControl extends UICorePlugin {
     // if the container is not ready etc
     this.intendedVolume = value
     this.persistConfig && !isInitialVolume && Config.persist('volume', value)
-    // TODO
     const setWhenContainerReady = () => {
       if (this.core.activeContainer && this.core.activeContainer.isReady) {
         this.core.activeContainer.setVolume(value)
+        this.trigger(ExtendedEvents.MEDIACONTROL_VOLUME, value)
       } else {
         this.listenToOnce(
           this.core.activeContainer,
           Events.CONTAINER_READY,
           () => {
             this.core.activeContainer.setVolume(value)
+            this.trigger(ExtendedEvents.MEDIACONTROL_VOLUME, value)
           },
         )
       }

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,133 @@ export enum VolumeFadeEvents {
   FADE = 'core:volume:fade',
 }
 
+const T = 'plugins.volume_fade'
+
+const DEFAULT_DURATION = 600
+const DEFAULT_VOLUME_LEVEL = 80
+
 /**
- * `PLUGIN` that applies fade effect to the player's volume change.
  * @beta
  */
-export class VolumeFade extends UICorePlugin {
-  private _aboveBorderVolume = 0;
+export type VolumeFadeSettings = {
+  /**
+   * Initial active volume level, effective until volume is changed via media control
+   */
+  level?: number
+  /**
+   * Fade duration, ms
+   */
+  duration?: number
+}
 
-  private container: Container | null = null;
+/**
+ * `PLUGIN` that mutes the sound and fades it in when the mouse is over the player.
+ * @beta
+ *
+ * @remarks
+ * When the user moves the mouse over and away from the player, the sound is unmuted and unmuted with a fade effect.
+ *
+ * Depends on {@link MediaControl} plugin.
+ * Configuration options - {@link VolumeFadeSettings}
+ */
+export class VolumeFade extends UICorePlugin {
+  private activeVolume = 0
 
-  private delay = 0;
+  private duration = 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
+          : DEFAULT_VOLUME_LEVEL
     }
-    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",
@@ -1925,6 +1925,44 @@
             "endIndex": 2
           }
         },
+        {
+          "kind": "Enum",
+          "canonicalReference": "@gcorevideo/player!ExtendedEvents:enum",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare enum ExtendedEvents "
+            }
+          ],
+          "fileUrlPath": "src/plugins/media-control/MediaControl.ts",
+          "releaseTag": "Public",
+          "name": "ExtendedEvents",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "EnumMember",
+              "canonicalReference": "@gcorevideo/player!ExtendedEvents.MEDIACONTROL_VOLUME:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "MEDIACONTROL_VOLUME = "
+                },
+                {
+                  "kind": "Content",
+                  "text": "\"mediacontrol:volume\""
+                }
+              ],
+              "initializerTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "name": "MEDIACONTROL_VOLUME"
+            }
+          ]
+        },
         {
           "kind": "Class",
           "canonicalReference": "@gcorevideo/player!Favicon:class",
@@ -2019,7 +2057,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 +3314,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 +3410,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 +3571,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",
@@ -9818,7 +9856,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@gcorevideo/player!VolumeFade:class",
-          "docComment": "/**\n * `PLUGIN` that applies fade effect to the player's volume change.\n *\n * @beta\n */\n",
+          "docComment": "/**\n * `PLUGIN` that mutes the sound and fades it in when the mouse is over the player.\n *\n * @remarks\n *\n * When the user moves the mouse over and away from the player, the sound is unmuted and unmuted with a fade effect.\n *\n * Depends on {@link MediaControl} plugin. Configuration options - {@link VolumeFadeSettings}\n *\n * @beta\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -9839,7 +9877,41 @@
           "isAbstract": false,
           "name": "VolumeFade",
           "preserveMemberOrder": false,
-          "members": [],
+          "members": [
+            {
+              "kind": "Constructor",
+              "canonicalReference": "@gcorevideo/player!VolumeFade:constructor(1)",
+              "docComment": "/**\n * Constructs a new instance of the `VolumeFade` class\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "constructor(core: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Core",
+                  "canonicalReference": "@clappr/core!default:class"
+                },
+                {
+                  "kind": "Content",
+                  "text": ");"
+                }
+              ],
+              "releaseTag": "Beta",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "core",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": false
+                }
+              ]
+            }
+          ],
           "extendsTokenRange": {
             "startIndex": 1,
             "endIndex": 2
@@ -9884,6 +9956,32 @@
             }
           ]
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@gcorevideo/player!VolumeFadeSettings:type",
+          "docComment": "/**\n * @beta\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type VolumeFadeSettings = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    level?: number;\n    duration?: number;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/plugins/volume-fade/VolumeFade.ts",
+          "releaseTag": "Beta",
+          "name": "VolumeFadeSettings",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@gcorevideo/player!WatchEventData:interface",