@gcorevideo/player 2.24.1 → 2.24.3

package/src/plugins/big-mute-button/BigMuteButton.ts

@@ -1,11 +1,11 @@
 import { Events, template, UICorePlugin, Utils } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
+import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
-import { ZeptoResult } from '../../types.js'
 
 import volumeMuteIcon from '../../../assets/icons/new/volume-off.svg'
-import pluginHtml from '../../../assets/big-mute-button/big-mute-button.ejs'
+import templateHtml from '../../../assets/big-mute-button/big-mute-button.ejs'
 import '../../../assets/big-mute-button/big-mute-button.scss'
 
 const T = 'plugins.big_mute_button'
@@ -13,19 +13,22 @@ const T = 'plugins.big_mute_button'
 // TODO rewrite as a container plugin
 
 /**
- * `PLUGIN` that displays a big mute button over the video when it's muted.
- * Once pressed, it unmutes the video.
+ * `PLUGIN` that displays a big mute button over the video when it's being played muted.
  * @beta
+ * @remarks
+ * When pressed, it unmutes the video.
+ * @example
+ * ```ts
+ * import { BigMuteButton } from '@gcorevideo/player'
+ * Player.registerPlugin(BigMuteButton)
+ * ```
  */
 export class BigMuteButton extends UICorePlugin {
-  private isBigMuteButtonHidden = false
+  private hidden = false
 
+  // TODO get back to the ads-related logic later
   private _adIsPlaying = false
 
-  private $bigMuteBtnContainer: ZeptoResult | null = null
-
-  private $bigMuteButton: ZeptoResult | null = null
-
   /**
    * @internal
    */
@@ -40,15 +43,14 @@ export class BigMuteButton extends UICorePlugin {
     return { min: CLAPPR_VERSION }
   }
 
-  private static readonly template = template(pluginHtml)
+  private static readonly template = template(templateHtml)
 
   /**
    * @internal
    */
   override get events() {
     return {
-      'click .big-mute-icon': 'clicked',
-      'click .big-mute-icon-wrapper': 'destroyBigMuteBtn',
+      'click': 'clicked',
     }
   }
 
@@ -57,156 +59,119 @@ export class BigMuteButton extends UICorePlugin {
    */
   override bindEvents() {
     this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
+    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged)
     this.listenTo(this.core, 'core:advertisement:start', this.onStartAd)
     this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd)
-    trace(`${T} bindEvents`, {
-      mediacontrol: !!this.core.mediaControl,
-    })
-    // TOOD use core.getPlugin('media_control')
-    this.listenTo(
-      this.core.mediaControl,
-      Events.MEDIACONTROL_RENDERED,
-      this.mediaControlRendered,
-    )
   }
 
   private onCoreReady() {
+    
+  }
+
+  private onContainerChanged() {
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_VOLUME,
       this.onContainerVolume,
     )
-    this.listenTo(
-      this.core.activeContainer,
-      Events.CONTAINER_READY,
-      this.onContainerStart,
-    )
+    // this.listenTo(
+    //   this.core.activeContainer,
+    //   Events.CONTAINER_READY,
+    //   this.onContainerReady,
+    // )
     this.listenTo(
       this.core.activePlayback,
       Events.PLAYBACK_ENDED,
       this.onPlaybackEnded,
     )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PLAY,
+      this.onPlay
+    )
   }
 
-  private onContainerVolume(value: number) {
-    if (value !== 0) {
-      this.destroyBigMuteBtn()
+  private onPlay(_: string, { autoPlay }: { autoPlay?: boolean}) {
+    const container = this.core.activeContainer
+    const { volume } = container
+    const { wasMuted } = this.options
+    trace(`${T} onPlay`, {
+      autoPlay,
+      wasMuted,
+      volume,
+    })
+    if (autoPlay && !wasMuted && volume === 0) {
+      this.mount()
+    } else {
+      this.destroy()
     }
   }
 
-  private onContainerStart() {
-    if (this.isBigMuteButtonHidden) {
-      this.showBigMuteBtn()
+  private onContainerVolume(value: number) {
+    if (value !== 0) {
+      this.destroy()
     }
   }
 
   private onPlaybackEnded() {
-    this.hideBigMuteBtn()
-  }
-
-  private mediaControlRendered() {
-    const container = this.core.activeContainer
-
-    trace(`${T} mediaControlRendered`, {
-      container: !!container,
-    })
-
-    if (container) {
-      this.listenTo(container.playback, Events.PLAYBACK_PLAY, () => {
-        trace(`${T} PLAYBACK_PLAY`)
-        this.render()
-      })
-    }
+    this.hide()
   }
 
   private onStartAd() {
     this._adIsPlaying = true
-    if (this.$bigMuteBtnContainer) {
-      this.$bigMuteBtnContainer.addClass('hide')
-    }
+    this.hide()
   }
 
   private onFinishAd() {
     this._adIsPlaying = false
-    if (this.$bigMuteBtnContainer) {
-      this.$bigMuteBtnContainer.removeClass('hide')
-    }
-  }
-
-  private shouldRender() {
-    const container = this.core.activeContainer
-
-    if (!container) {
-      return false
-    }
-
-    const { autoPlay, wasMuted } = this.options
-    const volume = container.volume
-
-    trace(`${T} shouldRender`, {
-      autoPlay,
-      wasMuted,
-      volume,
-    })
-
-    return autoPlay && !wasMuted && volume === 0
+    this.show()
   }
 
   /**
    * @internal
    */
   override render() {
-    if (this.shouldRender()) {
-      trace(`${T} render`, {
-        el: !!this.$el,
-      })
-      this.$el.html(BigMuteButton.template())
-
-      this.$bigMuteBtnContainer = this.$el.find(
-        '.big-mute-icon-wrapper[data-big-mute]',
-      )
-      this._adIsPlaying && this.$bigMuteBtnContainer.addClass('hide')
-
-      this.$bigMuteButton = this.$bigMuteBtnContainer.find('.big-mute-icon')
-      this.$bigMuteButton.append(volumeMuteIcon)
-
-      const container = this.core.activeContainer
-
-      container.$el.append(this.$el.get(0))
-    }
+    trace(`${T} render`)
+    this.$el.html(BigMuteButton.template())
+    this.$el.find('#gplayer-big-mute-icon').append(volumeMuteIcon)
+    
+    // TODO
+    // this._adIsPlaying && this.hide()
 
     return this
   }
 
-  private hideBigMuteBtn() {
-    this.isBigMuteButtonHidden = true
-    this.$bigMuteBtnContainer?.addClass('hide')
+  private mount() {
+    this.core.activeContainer.$el.append(this.$el)
+    this.show()
   }
 
-  private showBigMuteBtn() {
-    this.isBigMuteButtonHidden = false
-    if (this.$bigMuteBtnContainer) {
-      this.$bigMuteBtnContainer.removeClass('hide')
-    }
+  private hide() {
+    this.hidden = true
+    this.$el.find('#gplayer-big-mute-button')?.addClass('hide')
   }
 
-  private destroyBigMuteBtn(e?: MouseEvent) {
-    this.hideBigMuteBtn()
-
-    if (e && e.stopPropagation) {
-      e.stopPropagation()
-    }
-
-    this.destroy()
+  private show() {
+    this.hidden = false
+    this.$el.find('#gplayer-big-mute-button')?.removeClass('hide')
   }
 
   private clicked(e: MouseEvent) {
+    trace(`${T} clicked`)
+    const mediaControl = this.core.getPlugin('media_control')
+    // TODO delegate to media_control plugin
     const localVolume = Utils.Config.restore('volume')
     const volume = !isNaN(localVolume) ? localVolume : 100
+    const unmuted = volume === 0 ? 100 : volume
 
-    // TODO use container.setVolume() instead
-    this.core.mediaControl.setVolume(volume === 0 ? 100 : volume)
+    if (mediaControl) {
+      mediaControl.setVolume(unmuted)
+    } else {
+      this.core.activeContainer.setVolume(unmuted)
+    }
+
+    e.stopPropagation?.()
 
-    this.destroyBigMuteBtn(e)
+    this.destroy()
   }
 }

package/src/plugins/big-mute-button/__tests__/BigMuteButton.test.ts

@@ -0,0 +1,38 @@
+import { beforeEach, describe, it, expect } from 'vitest'
+import { Events } from '@clappr/core'
+
+import { BigMuteButton } from '../BigMuteButton.js'
+import { createMockCore } from '../../../testUtils.js'
+
+describe('BigMuteButton', () => {
+  let core: any
+  let bmb: BigMuteButton
+  describe('basically', () => {
+    beforeEach(() => {
+      core = createMockCore({})
+      bmb = new BigMuteButton(core)
+      // core.emit('core:ready')
+      // core.emit('core:active:container:changed')
+    })
+    it('should render', () => {
+      expect(bmb.$el.html()).toMatchSnapshot()
+    })
+  })
+  describe('when container starts playing', () => {
+    describe.each([
+      ['muted autoplay', 0, { autoPlay: true }, true],
+      ['audible autoplay', 50, { autoPlay: true }, false],
+      ['muted not autoplay', 0, { }, false],
+      ['audible not autoplay', 1, {}, false],
+    ])("%s", (_, volume, playMetadata, shouldMount) => {
+      beforeEach(() => {
+        core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+        core.activeContainer.volume = volume
+        core.activeContainer.emit(Events.CONTAINER_PLAY, 'Container', playMetadata)
+      })
+      it(`should ${shouldMount ? 'mount' : 'not mount'} to container`, () => {
+        expect(core.activeContainer.$el.find('#gplayer-big-mute-button').length).toBe(shouldMount ? 1 : 0)
+      })
+    })
+  })
+})

package/src/plugins/big-mute-button/__tests__/__snapshots__/BigMuteButton.test.ts.snap

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BigMuteButton > basically > should render 1`] = `
+"<div class="big-mute-icon-wrapper" data-big-mute="" id="gplayer-big-mute-button">
+    <div class="big-mute-icon gcore-skin-border-color" data-big-mute-icon="" id="gplayer-big-mute-icon">/assets/icons/new/volume-off.svg</div>
+</div>
+"
+`;

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

@@ -1,4 +1,10 @@
-import { UICorePlugin, template, Events as ClapprEvents, $, Container } from '@clappr/core'
+import {
+  UICorePlugin,
+  template,
+  Events as ClapprEvents,
+  $,
+  Container,
+} from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
@@ -16,6 +22,9 @@ const VERSION = '2.19.12'
 
 const T = 'plugins.bottom_gear'
 
+const MENU_VMARGIN = 12
+const MENU_BACKLINK_HEIGHT = 44
+
 /**
  * Events triggered by the plugin
  * @beta
@@ -27,8 +36,6 @@ export enum GearEvents {
   RENDERED = 'rendered',
 }
 
-// TODO disabled if no items added
-
 /**
  * `PLUGIN` that adds a button to extend the media controls UI with extra options.
  * @beta
@@ -100,9 +107,9 @@ export enum GearEvents {
 export class BottomGear extends UICorePlugin {
   private hd = false
 
-  private numItems = 0;
+  private numItems = 0
 
-  private collapsed = true;
+  private collapsed = true
 
   /**
    * @internal
@@ -175,7 +182,7 @@ export class BottomGear extends UICorePlugin {
    * ```
    */
   addItem(name: string, $subMenu?: ZeptoResult): ZeptoResult {
-    const $existingItem = this.$el.find(`#gear-options li[data-${name}`)
+    const $existingItem = this.$el.find(`#gear-options li[data-${name}]`)
     if ($existingItem.length) {
       trace(`${T} addItem already exists`, { name })
       return $existingItem
@@ -190,21 +197,18 @@ export class BottomGear extends UICorePlugin {
         .hide()
         .appendTo(this.$el.find('#gear-options-wrapper'))
       $item.on('click', (e: MouseEvent) => {
-        trace(`${T} addItem submenu clicked`, { name })
         e.stopPropagation()
+        this.alignSubmenu($subMenu)
         $subMenu.show()
         this.$el.find('#gear-options').hide()
       })
     }
-    this.numItems++;
-    if (this.numItems > 0) {
-      this.$el.show()
-    }
+    this.numItems++
+    this.$el.show()
     return $item
   }
 
   private bindContainerEvents(container: Container) {
-    trace(`${T} bindContainerEvents`)
     this.listenTo(
       container,
       ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE,
@@ -225,14 +229,13 @@ export class BottomGear extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`)
     const mediaControl = this.core.getPlugin('media_control')
     if (!mediaControl) {
       return this // TODO test
     }
     const icon = this.hd ? gearHdIcon : gearIcon
-    this.collapsed = true;
-    this.numItems = 0;
+    this.collapsed = true
+    this.numItems = 0
     this.$el
       .html(BottomGear.template({ icon }))
       .hide() // until numItems > 0
@@ -264,19 +267,19 @@ export class BottomGear extends UICorePlugin {
     this.core
       .getPlugin('media_control')
       .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name)
-    this.collapsed = !this.collapsed;
+    this.collapsed = !this.collapsed
     if (this.collapsed) {
       this.$el.find('#gear-options-wrapper').hide()
     } else {
       this.$el.find('#gear-options-wrapper').show()
     }
-    this.$el.find('#gear-button').attr('aria-expanded', (!this.collapsed).toString())
-    trace(`${T} toggleMenu`, { hidden: this.collapsed })
+    this.$el
+      .find('#gear-button')
+      .attr('aria-expanded', (!this.collapsed).toString())
   }
 
   private collapse() {
-    trace(`${T} collapse`)
-    this.collapsed = true;
+    this.collapsed = true
     this.$el.find('#gear-options-wrapper').hide()
     this.$el.find('#gear-button').attr('aria-expanded', 'false')
     // TODO hide submenus
@@ -284,7 +287,6 @@ export class BottomGear extends UICorePlugin {
   }
 
   private onCoreReady() {
-    trace(`${T} onCoreReady`)
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
     this.listenTo(
@@ -293,9 +295,13 @@ export class BottomGear extends UICorePlugin {
       this.onMediaControlRendered,
     )
     this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.collapse)
-    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_CONTAINERCHANGED, () => {
-      this.bindContainerEvents(mediaControl.container)
-    })
+    this.listenTo(
+      mediaControl,
+      ClapprEvents.MEDIACONTROL_CONTAINERCHANGED,
+      () => {
+        this.bindContainerEvents(mediaControl.container)
+      },
+    )
     this.listenTo(
       mediaControl,
       ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
@@ -309,15 +315,21 @@ export class BottomGear extends UICorePlugin {
   }
 
   private onMediaControlRendered() {
-    trace(`${T} onMediaControlRendered`)
     this.mount()
   }
 
   private mount() {
-    trace(`${T} mount`, {
-      numItems: this.numItems,
-    })
     const mediaControl = this.core.getPlugin('media_control')
     mediaControl.mount('gear', this.$el)
   }
+
+  private alignSubmenu($subMenu: ZeptoResult) {
+    const availableHeight =
+      this.core.getPlugin('media_control').getAvailableHeight() -
+      MENU_VMARGIN * 2
+    $subMenu.css('max-height', `${availableHeight}px`)
+    $subMenu
+      .find('.gear-sub-menu')
+      .css('max-height', `${availableHeight - MENU_BACKLINK_HEIGHT}px`)
+  }
 }

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

@@ -31,6 +31,15 @@ describe('BottomGear', () => {
       bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
       core.emit(Events.CORE_READY)
       bottomGear.addItem('test', null).html('<button>test</button>')
+      const $moreOptions = $(
+        `<div>
+      <button id="more-options-back">&lt; back</button>
+      <ul class="gear-sub-menu" id="more-options"><li>Item</li><li>Item</li><li>Item</li></ul>
+    </div>`,
+      )
+      bottomGear
+        .addItem('more', $moreOptions)
+        .html('<button id="more-button">more options</button>')
     })
     it('should render', () => {
       expect(bottomGear.el.innerHTML).toMatchSnapshot()
@@ -99,6 +108,26 @@ describe('BottomGear', () => {
         )
       })
     })
+    describe('when submenu is open', () => {
+      beforeEach(async () => {
+        mediaControl.getAvailableHeight.mockReturnValue(198)
+        bottomGear.$el.find('#gear-button').click()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        bottomGear.$el.find('#more-button').click()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+      })
+      it('should show submenu', () => {
+        expect(
+          bottomGear.$el.find('#more-options').parent().css('display'),
+        ).not.toBe('none')
+      })
+      it('should align nicely within container', () => {
+        const submenu = bottomGear.$el.find('#more-options')
+        const wrapper = submenu.parent()
+        expect(wrapper.css('max-height')).toBe('174px') // available height minus vertical margins
+        expect(submenu.css('max-height')).toBe('130px') // wrapper height minus backlink height
+      })
+    })
   })
   describe('when there are no items', () => {
     beforeEach(() => {
@@ -128,9 +157,9 @@ describe('BottomGear', () => {
         await new Promise((resolve) => setTimeout(resolve, 0))
       })
       it('should collapse the gear menu', () => {
-        expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-          'none',
-        )
+        expect(
+          bottomGear.$el.find('#gear-options-wrapper').css('display'),
+        ).toBe('none')
         expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
           'false',
         )
@@ -140,14 +169,12 @@ describe('BottomGear', () => {
     describe('when submenu is open', () => {
       beforeEach(async () => {
         // bottomGear.$el.find('#test-submenu').click()
-        bottomGear.$el.find('#test-options').show(); // as if it was clicked
+        bottomGear.$el.find('#test-options').show() // as if it was clicked
         await new Promise((resolve) => setTimeout(resolve, 0))
         mediaControl.container.trigger(Events.CONTAINER_CLICK)
       })
       it('should collapse it as well', () => {
-        expect(bottomGear.$el.find('#test-options').css('display')).toBe(
-          'none',
-        )
+        expect(bottomGear.$el.find('#test-options').css('display')).toBe('none')
         expect(bottomGear.$el.find('#gear-options').css('display')).not.toBe(
           'none',
         )

package/src/plugins/bottom-gear/__tests__/__snapshots__/BottomGear.test.ts.snap

@@ -5,7 +5,10 @@ exports[`BottomGear > basically > should render 1`] = `
     /assets/icons/new/gear.svg
 </button>
 <div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display: none;">
-    <ul class="gear-options-list" id="gear-options" role="menu"><li data-test=""><button>test</button></li></ul>
-</div>
+    <ul class="gear-options-list" id="gear-options" role="menu"><li data-test=""><button>test</button></li><li data-more=""><button id="more-button">more options</button></li></ul>
+<div class="gear-sub-menu-wrapper" style="display: none;">
+      <button id="more-options-back">&lt; back</button>
+      <ul class="gear-sub-menu" id="more-options"><li>Item</li><li>Item</li><li>Item</li></ul>
+    </div></div>
 "
 `;

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

@@ -20,7 +20,11 @@ import { isFullscreen } from '../utils/fullscreen.js'
 
 // const T = 'plugins.clappr_stats'
 
-export type ClapprStatsSettings = {
+/**
+ * Config options for the {@link ClapprStats} plugin
+ * @beta
+ */
+export interface ClapprStatsSettings {
   /**
    * The interval in milliseconds of periodic measurements.
    * The plugin will emit a {@link ClapprStatsEvents.REPORT} event with the collected metrics at the specified interval.

package/src/plugins/clips/Clips.ts

@@ -17,7 +17,7 @@ const T = 'plugins.clips'
  */
 export interface ClipsPluginSettings {
   /**
-   * The compiled text of the clips description, one clip per line in format  :
+   * The compiled text of the clips description, one clip per line in format:
    * `HH:MM:SS text` or `MM:SS text` or `SS text`
    */
   text: string
@@ -123,7 +123,8 @@ export class Clips extends UICorePlugin {
    * @returns The text of the clip at the given time
    */
   getText(time: TimeValue): string | undefined {
-    return this.clips.find((clip) => clip.start <= time && clip.end >= time)?.text
+    return this.clips.find((clip) => clip.start <= time && clip.end >= time)
+      ?.text
   }
 
   private onCoreReady() {