@gcorevideo/player 2.22.22 → 2.22.23

package/src/plugins/audio-selector/__tests__/{AudioSelector.test.ts → AudioTracks.test.ts}

@@ -1,23 +1,23 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { Events } from '@clappr/core'
 
-import { AudioTracks } from '../AudioSelector'
+import { AudioTracks } from '../AudioTracks'
 
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
 // import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
 
 // Logger.enable('*')
-// setTracer(new LogTracer('AudioSelector.test'))
+// setTracer(new LogTracer('AudioTracks.test'))
 
 const TRACKS = [
   { id: '1', label: 'English', language: 'en', track: {} },
   { id: '2', label: 'Spanish', language: 'es', track: {} },
 ]
 
-describe('AudioSelector', () => {
+describe('AudioTracks', () => {
   let core: any
   let mediaControl: any
-  let audioSelector: AudioTracks
+  let audioTracks: AudioTracks
   beforeEach(() => {
     core = createMockCore()
     mediaControl = createMockMediaControl(core)
@@ -25,7 +25,7 @@ describe('AudioSelector', () => {
       if (name === 'media_control') return mediaControl
       return null
     })
-    audioSelector = new AudioTracks(core)
+    audioTracks = new AudioTracks(core)
     core.emit(Events.CORE_READY)
     core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
   })
@@ -47,7 +47,7 @@ describe('AudioSelector', () => {
     it('should attach to the media control', () => {
       expect(mediaControl.mount).toHaveBeenCalledWith(
         'audiotracks',
-        audioSelector.$el,
+        audioTracks.$el,
       )
     })
   })
@@ -56,31 +56,31 @@ describe('AudioSelector', () => {
       emitTracksAvailable(core, TRACKS)
     })
     it('should render button', () => {
-      expect(audioSelector.$el.find('#audiotracks-button').length).toBe(1)
+      expect(audioTracks.$el.find('#audiotracks-button').length).toBe(1)
     })
     it('should render menu hidden', () => {
-      expect(audioSelector.el.innerHTML).toMatchSnapshot()
+      expect(audioTracks.el.innerHTML).toMatchSnapshot()
       expect(
-        audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
+        audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
       ).toBe(true)
-      const trackItems = audioSelector.$el.find('#audiotracks-select li')
+      const trackItems = audioTracks.$el.find('#audiotracks-select li')
       expect(trackItems.length).toBe(2)
       expect(trackItems.eq(0).text().trim()).toBe('English')
       expect(trackItems.eq(1).text().trim()).toBe('Spanish')
     })
     describe('when button is clicked', () => {
       beforeEach(() => {
-        audioSelector.$el.find('#audiotracks-button').click()
+        audioTracks.$el.find('#audiotracks-button').click()
       })
       it('should show menu', () => {
-        expect(audioSelector.$el.html()).toMatchSnapshot()
+        expect(audioTracks.$el.html()).toMatchSnapshot()
         expect(
-          audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
+          audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
         ).toBe(false)
       })
       describe('when audio track is selected', () => {
         beforeEach(() => {
-          audioSelector.$el
+          audioTracks.$el
             .find('#audiotracks-select [data-audiotracks-select="2"]')
             .click()
         })
@@ -90,14 +90,14 @@ describe('AudioSelector', () => {
           )
         })
         it('should hide the menu', () => {
-          expect(audioSelector.$el.html()).toMatchSnapshot()
+          expect(audioTracks.$el.html()).toMatchSnapshot()
           expect(
-            audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
+            audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
           ).toBe(true)
         })
         it('should add changing class to the button', () => {
           expect(
-            audioSelector.$el.find('#audiotracks-button').hasClass('changing'),
+            audioTracks.$el.find('#audiotracks-button').hasClass('changing'),
           ).toBe(true)
         })
         describe('when current audio track changes', () => {
@@ -115,14 +115,14 @@ describe('AudioSelector', () => {
           })
           it('should update button class', () => {
             expect(
-              audioSelector.$el
+              audioTracks.$el
                 .find('#audiotracks-button')
                 .hasClass('changing'),
             ).toBe(false)
           })
           it('should update button label', () => {
             expect(
-              audioSelector.$el
+              audioTracks.$el
                 .find('#audiotracks-button')
                 .text()
                 .replace(/\/assets.*\.svg/g, '')
@@ -130,7 +130,7 @@ describe('AudioSelector', () => {
             ).toBe('Spanish')
           })
           it('should highlight the selected menu item', () => {
-            const selectedItem = audioSelector.$el.find(
+            const selectedItem = audioTracks.$el.find(
               '#audiotracks-select .current',
             )
             expect(selectedItem.text().trim()).toBe('Spanish')
@@ -142,10 +142,10 @@ describe('AudioSelector', () => {
           })
           it('should unhighlight any previously highlighted menu item', () => {
             expect(
-              audioSelector.$el.find('#audiotracks-select li.current').length,
+              audioTracks.$el.find('#audiotracks-select li.current').length,
             ).toBe(1)
             expect(
-              audioSelector.$el.find(
+              audioTracks.$el.find(
                 '#audiotracks-select a.gcore-skin-active[data-audiotracks-select]',
               ).length,
             ).toBe(1)
@@ -156,8 +156,8 @@ describe('AudioSelector', () => {
   })
   describe('when audio tracks are not available', () => {
     it('should not render the button', () => {
-      expect(audioSelector.$el.find('#audiotracks-button').length).toBe(0)
-      expect(audioSelector.$el.find('#audiotracks-select').length).toBe(0)
+      expect(audioTracks.$el.find('#audiotracks-button').length).toBe(0)
+      expect(audioTracks.$el.find('#audiotracks-select').length).toBe(0)
     })
   })
 })

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

@@ -65,3 +65,69 @@ exports[`AudioSelector > given that audio tracks are available > when button is
 </ul>
 "
 `;
+
+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/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,
@@ -312,7 +312,7 @@ export class NerdStats extends UICorePlugin {
 
   private updateMetrics(metrics: PerfMetrics) {
     trace(`${T} updateMetrics`, { custom: this.speedtestMetrics })
-    Object.assign(this.metrics, metrics) // TODO no Object.assign
+    Object.assign(this.metrics, metrics)
     this.metrics.custom = {
       ...this.speedtestMetrics,
     }
@@ -394,9 +394,15 @@ export class NerdStats extends UICorePlugin {
   }
 
   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))
+    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() {
@@ -465,7 +471,7 @@ 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,7 +116,6 @@ 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/utils.ts

@@ -71,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/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')