@gcorevideo/player 2.22.22 → 2.22.24

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'
 
@@ -61,7 +62,7 @@ export type ClosedCaptionsPluginSettings = {
 export class ClosedCaptions extends UICorePlugin {
   private isPreselectedApplied = false
 
-  private isShowing = false
+  private active = false
 
   private track: TextTrackItem | null = null
 
@@ -108,13 +109,17 @@ export class ClosedCaptions extends UICorePlugin {
    */
   override get events() {
     return {
-      'click [data-cc-select]': 'onItemSelect',
-      'click [data-cc-button]': 'toggleMenu',
+      'click #cc-select li a': 'onItemSelect',
+      'click #cc-button': 'toggleMenu',
     }
   }
 
   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 ??
+      ''
+    )
   }
 
   /**
@@ -134,11 +139,18 @@ export class ClosedCaptions extends UICorePlugin {
     trace(`${T} onCoreReady`)
     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_RENDERED, this.render) // TODO mount to media control
+    this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, () => {
+      this.hideMenu()
+    })
     this.listenTo(
       mediaControl,
-      Events.MEDIACONTROL_HIDE,
-      this.hideMenu,
+      ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+      (from: string) => {
+        if (from !== this.name) {
+          this.hideMenu()
+        }
+      },
     )
   }
 
@@ -229,7 +241,7 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private onStartAd() {
-    if (this.isShowing && this.core.activeContainer) {
+    if (this.active && this.core.activeContainer) {
       this.hide()
       this.listenTo(
         this.core.activeContainer,
@@ -256,7 +268,7 @@ export class ClosedCaptions extends UICorePlugin {
       this.track &&
       this.track.track.mode &&
       Browser.isiOS &&
-      this.isShowing
+      this.active
 
     if (shouldShow) {
       this.show()
@@ -273,7 +285,7 @@ export class ClosedCaptions extends UICorePlugin {
    * Hides the subtitles menu and the subtitles.
    */
   hide() {
-    this.isShowing = false
+    this.active = false
     this.renderIcon()
     this.$line.hide()
     if (this.tracks) {
@@ -287,7 +299,7 @@ export class ClosedCaptions extends UICorePlugin {
    * Shows the subtitles menu and the subtitles.
    */
   show() {
-    this.isShowing = true
+    this.active = true
     this.renderIcon()
     if (
       this.core.activeContainer &&
@@ -331,7 +343,8 @@ export class ClosedCaptions extends UICorePlugin {
 
     const mediaControl = this.core.getPlugin('media_control')
 
-    this.$el.html(ClosedCaptions.template({ tracks: this.tracks }))
+    this.$el.html(ClosedCaptions.template({ tracks: this.tracks, i18n: this.core.i18n }))
+    this.$el.find('#cc-select').hide()
     this.core.activeContainer.$el.find('#cc-line').remove()
     this.$line = $(ClosedCaptions.templateString())
     this.resizeFont()
@@ -354,7 +367,6 @@ export class ClosedCaptions extends UICorePlugin {
     this.clearSubtitleText()
     this.track = item
 
-    this.hideMenu()
     this.updateSelection()
   }
 
@@ -365,7 +377,7 @@ export class ClosedCaptions extends UICorePlugin {
 
     localStorage.setItem(LOCAL_STORAGE_CC_ID, id)
     this.selectItem(this.findById(Number(id)))
-
+    this.hideMenu()
     return false
   }
 
@@ -386,22 +398,25 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private hideMenu() {
-    ;(this.$('[data-cc] ul') as ZeptoResult).hide()
+    trace(`${T} hideMenu`)
+    this.$el.find('#cc-select').hide()
   }
 
   private toggleMenu() {
-    trace(`${T} toggleMenu`)
-    ;(this.$('[data-cc] ul') as ZeptoResult).toggle()
+    trace(`${T} toggleMenu`, {display: this.$el.find('#cc-select').css('display')})
+    this.core
+      .getPlugin('media_control')
+      .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name)
+    this.$el.find('#cc-select').toggle()
+    // TODO hold state, add aria-expanded to the button, add active state to the button
   }
 
   private itemElement(id: number): ZeptoResult {
-    return (
-      this.$(`ul li a[data-cc-select="${id}"]`) as ZeptoResult
-    ).parent()
+    return this.$el.find(`#cc-select li a[data-cc-select="${id}"]`).parent()
   }
 
   private allItemElements(): ZeptoResult {
-    return this.$('[data-cc] li')
+    return this.$('#cc-select li')
   }
 
   private selectSubtitles() {
@@ -453,7 +468,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')
@@ -461,7 +478,7 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private renderIcon() {
-    const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon
+    const icon = this.active ? subtitlesOnIcon : subtitlesOffIcon
 
     this.$el.find('span.cc-text').html(icon)
   }

package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts

@@ -1,12 +1,19 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { ClosedCaptions } from '../ClosedCaptions.js'
-import { createMockCore, createMockMediaControl } from '../../../testUtils.js';
+import { createMockCore, createMockMediaControl } from '../../../testUtils.js'
+import { ExtendedEvents } from '../../media-control/MediaControl.js'
+
+import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+// import { Events } from '@clappr/core';
+
+// Logger.enable('*')
+// setTracer(new LogTracer('ClosedCaptions.test'))
 
 describe('ClosedCaptions', () => {
-  let core: any;
-  let mediaControl: any;
-  let cc: ClosedCaptions;
+  let core: any
+  let mediaControl: any
+  let cc: ClosedCaptions
   beforeEach(() => {
     core = createMockCore()
     mediaControl = createMockMediaControl(core)
@@ -20,9 +27,9 @@ describe('ClosedCaptions', () => {
   })
   describe('basically', () => {
     beforeEach(() => {
-      core.emit('core:ready')
+      core.emit(Events.CORE_READY)
       core.activePlayback.el = document.createElement('video')
-      core.emit('core:active:container:changed', core.activeContainer)
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
       core.activePlayback.closedCaptionsTracks = [
         {
           id: 1,
@@ -33,7 +40,7 @@ describe('ClosedCaptions', () => {
             label: 'English',
             mode: 'hidden',
             cues: [],
-          }
+          },
         },
         {
           id: 2,
@@ -44,16 +51,47 @@ describe('ClosedCaptions', () => {
             label: 'Spanish',
             mode: 'hidden',
             cues: [],
-          }
-        }
+          },
+        },
       ]
-      core.activePlayback.emit('playback:subtitle:available')
-      core.activeContainer.emit('container:subtitle:available')
+      core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_AVAILABLE)
+      core.activeContainer.emit(Events.CONTAINER_SUBTITLE_AVAILABLE)
     })
     it('should render', () => {
       expect(cc.el.innerHTML).toMatchSnapshot()
-      expect(cc.$el.find('[data-cc-button]').length).toEqual(1)
+      expect(cc.$el.find('#cc-button').length).toEqual(1)
       expect(mediaControl.mount).toHaveBeenCalledWith('cc', cc.$el)
     })
+    describe('when button is clicked', () => {
+      beforeEach(() => {
+        cc.$el.find('#cc-button').click()
+      })
+      it('should open menu', () => {
+        expect(cc.$el.find('#cc-select').css('display')).not.toBe('none')
+      })
+      it('should collapse all other menus', () => {
+        expect(mediaControl.trigger).toHaveBeenCalledWith(
+          ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+          'cc',
+        )
+      })
+    })
+    describe('when clicked twice', () => {
+      beforeEach(() => {
+        cc.$el.find('#cc-button').click().click()
+      })
+      it('should collapse the menu', () => {
+        expect(cc.$el.find('#cc-select').css('display')).toBe('none')
+      })
+    })
+    describe('when media control is hidden', () => {
+      beforeEach(() => {
+        cc.$el.find('#cc-button').click()
+        mediaControl.trigger(Events.MEDIACONTROL_HIDE)
+      })
+      it('should hide menu', () => {
+        expect(cc.$el.find('#cc-select').css('display')).toBe('none')
+      })
+    })
   })
-})
+})

package/src/plugins/subtitles/__tests__/__snapshots__/ClosedCaptions.test.ts.snap

@@ -5,21 +5,21 @@ exports[`ClosedCaptions > basically > should render 1`] = `
     <span class="cc-text">/assets/icons/new/subtitles-off.svg</span>
 </button>
 
-<ul class="gcore-skin-bg-color" id="cc-select">
+<ul class="gcore-skin-bg-color" id="cc-select" style="display: none;">
     
-        <li>
+        <li class="">
             <a href="#" class="gcore-skin-text-color" data-cc-select="1">
                 English
             </a>
         </li>
     
-        <li>
+        <li class="">
             <a href="#" class="gcore-skin-text-color" data-cc-select="2">
                 Spanish
             </a>
         </li>
     
-    <li class="current"><a href="#" class="gcore-skin-text-color gcore-skin-active" data-cc-select="-1">Off</a></li>
+    <li class="current"><a href="#" class="gcore-skin-text-color gcore-skin-active" data-cc-select="-1">off</a></li>
 </ul>
 "
 `;

package/src/testUtils.ts

@@ -194,6 +194,7 @@ export function createMockMediaControl(core: any) {
   mediaControl.mount = vi.fn()
   // @ts-ignore
   mediaControl.toggleElement = vi.fn()
+  vi.spyOn(mediaControl, 'trigger')
   return mediaControl
 }