@gcorevideo/player 2.22.21 → 2.22.23

package/src/plugins/audio-selector/__tests__/__snapshots__/AudioTracks.test.ts.snap

@@ -0,0 +1,67 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AudioTracks > given that audio tracks are available > should render menu hidden 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="false">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;
+
+exports[`AudioTracks > given that audio tracks are available > when button is clicked > should show menu 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu" id="audiotracks-select" role="menu">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;
+
+exports[`AudioTracks > given that audio tracks are available > when button is clicked > when audio track is selected > should hide the menu 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1" role="menuitemradio" aria-checked="false">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2" role="menuitemradio" aria-checked="false">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;

package/src/plugins/bottom-gear/BottomGear.ts

@@ -10,6 +10,7 @@ import '../../../assets/bottom-gear/gear-sub-menu.scss'
 import gearIcon from '../../../assets/icons/new/gear.svg'
 import gearHdIcon from '../../../assets/icons/new/gear-hd.svg'
 import { ZeptoResult } from '../../types.js'
+import { ExtendedEvents } from '../media-control/MediaControl.js'
 
 const VERSION = '2.19.12'
 
@@ -254,10 +255,14 @@ export class BottomGear extends UICorePlugin {
   }
 
   private toggleGearMenu() {
+    this.core
+      .getPlugin('media_control')
+      .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE)
     this.$el.find('#gear-options-wrapper').toggle()
   }
 
   private hide() {
+    trace(`${T} hide`)
     this.$el.find('#gear-options-wrapper').hide()
   }
 
@@ -271,6 +276,11 @@ export class BottomGear extends UICorePlugin {
       this.onMediaControlRendered,
     )
     this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide)
+    this.listenTo(
+      mediaControl,
+      ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+      this.hide,
+    )
   }
 
   private onMediaControlRendered() {

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

@@ -71,7 +71,7 @@ const T = 'plugins.nerd_stats'
  * - {@link BottomGear} - where the button is attached
  *
  * - {@link ClapprStats} - to get the metrics from
-*
+ *
  * The plugin is rendered as an item in the gear menu.
  *
  * When clicked, it shows an overlay window with the information about the network speed, latency, etc,
@@ -313,7 +313,11 @@ export class NerdStats extends UICorePlugin {
   private updateMetrics(metrics: PerfMetrics) {
     trace(`${T} updateMetrics`, { custom: this.speedtestMetrics })
     Object.assign(this.metrics, metrics)
-    this.updateEstimatedQuality()
+    this.metrics.custom = {
+      ...this.speedtestMetrics,
+    }
+
+    this.updateCustomMetrics()
 
     this.$el
       .find('#nerd-stats-current-time')
@@ -382,17 +386,25 @@ 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 +413,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() {
@@ -455,6 +473,7 @@ export class NerdStats extends UICorePlugin {
     this.speedtestMetrics.jitter = 0
 
     if (clapprStats) {
+      clapprStats.clearMetrics()
       this.updateMetrics(clapprStats.exportMetrics())
     }
   }

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,6 @@ export const drawSummary = (
 ) => {
   const { connectionSpeed, ping } = customMetrics
 
-  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/media-control/MediaControl.ts

@@ -138,6 +138,7 @@ const LEFT_ORDER = [
 
 export enum ExtendedEvents {
   MEDIACONTROL_VOLUME = 'mediacontrol:volume',
+  MEDIACONTROL_MENU_COLLAPSE = 'mediacontrol:menu:collapse',
 }
 
 const { Config, Fullscreen, formatTime, extend, removeArrayItem } = Utils

package/src/plugins/skip-time/SkipTime.ts

@@ -1,113 +1,120 @@
-import { UICorePlugin as UICorePluginOriginal, Browser, Playback, Events, template } from '@clappr/core';
+import { UICorePlugin, Browser, Playback, Events, template } from '@clappr/core'
 
-import { CLAPPR_VERSION } from '../../build.js';
+import { CLAPPR_VERSION } from '../../build.js'
 
-import pluginHtml from '../../../assets/skip-time/skip-time.ejs';
-import '../../../assets/skip-time/style.scss';
+import pluginHtml from '../../../assets/skip-time/skip-time.ejs'
+import '../../../assets/skip-time/style.scss'
 
-type Position = 'mid' | 'left' | 'right';
+type Position = 'mid' | 'left' | 'right'
 
 /**
  * `PLUGIN` that adds skip controls to the media control UI.
  * @beta
  */
-export class SkipTime extends UICorePluginOriginal {
+export class SkipTime extends UICorePlugin {
   get name() {
-    return 'skip_time';
+    return 'skip_time'
   }
 
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   get container() {
-    return this.core && this.core.activeContainer;
+    return this.core && this.core.activeContainer
   }
 
   get template() {
-    return template(pluginHtml);
+    return template(pluginHtml)
   }
 
   override get attributes() {
     return {
-      'class': this.name + '_plugin',
-      'data-skip-time': ''
-    };
+      class: this.name + '_plugin',
+      'data-skip-time': '',
+    }
   }
 
-  private position: Position = 'mid';
+  private position: Position = 'mid'
 
   override get events() {
     return {
       'click [data-skip-left]': 'setBack',
       'click [data-skip-mid]': 'setMidClick',
       'click [data-skip-right]': 'setForward',
-    };
+    }
   }
 
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_READY, this.render);
+    this.listenTo(this.core, Events.CORE_READY, this.render)
     if (!this.container) {
-      return;
+      return
     }
-    this.listenTo(this.container, Events.CONTAINER_DBLCLICK, this.handleRewindClicks);
+    this.listenTo(
+      this.container,
+      Events.CONTAINER_DBLCLICK,
+      this.handleRewindClicks,
+    )
   }
 
   setBack() {
-    this.position = 'left';
+    this.position = 'left'
   }
 
   handleRewindClicks() {
-    if (this.core.getPlaybackType() === Playback.LIVE && !this.container.isDvrEnabled()) {
-      this.toggleFullscreen();
+    if (
+      this.core.getPlaybackType() === Playback.LIVE &&
+      !this.container.isDvrEnabled()
+    ) {
+      this.toggleFullscreen()
 
-      return;
+      return
     }
     if (Browser.isMobile) {
       if (this.position === 'left') {
-        const seekPos = this.container.getCurrentTime() - 10;
+        const seekPos = this.container.getCurrentTime() - 10
 
         if (seekPos < 0) {
-          return;
+          return
         }
-        this.container.seek(seekPos);
+        this.container.seek(seekPos)
       } else if (this.position === 'right') {
-        const seekPos = this.container.getCurrentTime() + 30;
+        const seekPos = this.container.getCurrentTime() + 30
 
         if (seekPos > this.container.getDuration()) {
-          return;
+          return
         }
 
-        this.container.seek(seekPos);
+        this.container.seek(seekPos)
       } else {
-        this.toggleFullscreen();
+        this.toggleFullscreen()
       }
     }
   }
 
   setMidClick() {
-    this.position = 'mid';
+    this.position = 'mid'
   }
 
   setForward() {
-    this.position = 'right';
+    this.position = 'right'
   }
 
   toggleFullscreen() {
-    this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name);
-    this.container.fullscreen();
-    this.core.toggleFullscreen();
+    this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name)
+    this.container.fullscreen()
+    this.core.toggleFullscreen()
   }
 
   override render() {
-    this.$el.html(template(pluginHtml));
+    this.$el.html(template(pluginHtml))
 
     if (this.core.activeContainer) {
-      this.core.activeContainer.$el.append(this.el);
+      this.core.activeContainer.$el.append(this.el)
     }
 
-    this.bindEvents();
+    this.bindEvents()
 
-    return this;
+    return this
   }
 }

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -13,6 +13,7 @@ import stringHTML from '../../../assets/subtitles/string.ejs'
 
 import { isFullscreen } from '../utils/fullscreen.js'
 import type { ZeptoResult } from '../../types.js'
+import { ExtendedEvents } from '../media-control/MediaControl.js'
 
 const VERSION: string = '2.19.14'
 
@@ -114,7 +115,11 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private get preselectedLanguage(): string {
-    return this.core.options.cc?.language ?? this.core.options.subtitles?.language ?? ''
+    return (
+      this.core.options.cc?.language ??
+      this.core.options.subtitles?.language ??
+      ''
+    )
   }
 
   /**
@@ -135,9 +140,10 @@ export class ClosedCaptions extends UICorePlugin {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
     this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render)
+    this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
     this.listenTo(
       mediaControl,
-      Events.MEDIACONTROL_HIDE,
+      ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
       this.hideMenu,
     )
   }
@@ -386,18 +392,20 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private hideMenu() {
+    trace(`${T} hideMenu`)
     ;(this.$('[data-cc] ul') as ZeptoResult).hide()
   }
 
   private toggleMenu() {
     trace(`${T} toggleMenu`)
-    ;(this.$('[data-cc] ul') as ZeptoResult).toggle()
+    this.core
+      .getPlugin('media_control')
+      .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE)
+    this.$el.find('[data-cc] ul').toggle()
   }
 
   private itemElement(id: number): ZeptoResult {
-    return (
-      this.$(`ul li a[data-cc-select="${id}"]`) as ZeptoResult
-    ).parent()
+    return (this.$(`ul li a[data-cc-select="${id}"]`) as ZeptoResult).parent()
   }
 
   private allItemElements(): ZeptoResult {
@@ -453,7 +461,9 @@ export class ClosedCaptions extends UICorePlugin {
     trace(`${T} highlightCurrentSubtitles`, {
       track: this.track?.id,
     })
-    const currentLevelElement = this.itemElement(this.track ? this.track.id : -1)
+    const currentLevelElement = this.itemElement(
+      this.track ? this.track.id : -1,
+    )
     currentLevelElement
       .addClass('current')
       .find('a')

package/src/plugins/volume-fade/VolumeFade.ts

@@ -15,6 +15,7 @@ export enum VolumeFadeEvents {
 const T = 'plugins.volume_fade'
 
 const DEFAULT_DURATION = 600
+const DEFAULT_VOLUME_LEVEL = 80
 
 /**
  * @beta
@@ -31,10 +32,12 @@ export type VolumeFadeSettings = {
 }
 
 /**
- * `PLUGIN` that applies fade effect to the player's volume change.
+ * `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}
  */
@@ -86,11 +89,11 @@ export class VolumeFade extends UICorePlugin {
         this.core.activeContainer?.volume &&
         !isNaN(this.core.activeContainer.volume)
           ? this.core.activeContainer.volume
-          : 80
+          : DEFAULT_VOLUME_LEVEL
     }
 
     this.duration = this.options.volumeFade?.duration || DEFAULT_DURATION
-    // TODO check if mute must be respected
+    // TODO check if `mute` must be respected
     this.core.activeContainer?.setVolume(this.activeVolume)
     this.core.activePlayback.volume(0)
   }

package/temp/player.api.json

@@ -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",
@@ -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",