@gcorevideo/player 2.24.2 → 2.24.5

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,18 +13,23 @@ 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 autoPlay = false
 
-  private _adIsPlaying = false
-
-  private $bigMuteBtnContainer: ZeptoResult | null = null
+  private hidden = false
 
-  private $bigMuteButton: ZeptoResult | null = null
+  // TODO get back to the ads-related logic later
+  private _adIsPlaying = false
 
   /**
    * @internal
@@ -40,15 +45,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 +61,128 @@ export class BigMuteButton extends UICorePlugin {
    */
   override bindEvents() {
     this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
-    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,
+      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)
   }
 
-  private onCoreReady() {
+  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.activePlayback,
       Events.PLAYBACK_ENDED,
       this.onPlaybackEnded,
     )
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAY, this.onPlay)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.onStop)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.onPause)
   }
 
-  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
+    if (autoPlay) {
+      this.autoPlay = true
+    }
+    trace(`${T} onPlay`, {
+      autoPlay: this.autoPlay,
+      wasMuted,
+      volume,
+    })
+    if (this.autoPlay && !wasMuted && volume === 0) {
+      this.mount()
+    } else {
+      this.destroy()
     }
   }
 
-  private onContainerStart() {
-    if (this.isBigMuteButtonHidden) {
-      this.showBigMuteBtn()
+  private onStop(_: string, { ui }: { ui?: boolean }) {
+    trace(`${T} onStop`, { ui })
+    if (ui) {
+      this.destroy()
     }
   }
 
-  private onPlaybackEnded() {
-    this.hideBigMuteBtn()
+  private onPause() {
+    this.destroy()
   }
 
-  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()
-      })
+  private onContainerVolume(value: number) {
+    if (value !== 0) {
+      this.destroy()
     }
   }
 
+  private onPlaybackEnded() {
+    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')
+    trace(`${T} render`)
+    this.$el.html(BigMuteButton.template())
+    this.$el.find('#gplayer-big-mute-icon').append(volumeMuteIcon)
 
-      this.$bigMuteButton = this.$bigMuteBtnContainer.find('.big-mute-icon')
-      this.$bigMuteButton.append(volumeMuteIcon)
-
-      const container = this.core.activeContainer
-
-      container.$el.append(this.$el.get(0))
-    }
+    // 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,86 @@
+import { beforeEach, describe, it, expect } from 'vitest'
+import { Events } from '@clappr/core'
+
+import { BigMuteButton } from '../BigMuteButton.js'
+import { createMockCore } from '../../../testUtils.js'
+
+// import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
+
+// setTracer(new LogTracer('BigMuteButton.test'))
+// Logger.enable('*')
+
+describe('BigMuteButton', () => {
+  let core: any
+  let bmb: BigMuteButton
+  beforeEach(() => {
+    core = createMockCore({})
+    bmb = new BigMuteButton(core)
+  })
+  describe('basically', () => {
+    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', 50, {}, 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)
+      })
+    })
+  })
+  describe('when playback is stopped', () => {
+    describe.each([
+      ['from ui', { ui: true }, true],
+      ['algorithmically', {}, false],
+    ])('%s', (_, stopMetadata, shouldUnmount) => {
+      beforeEach(() => {
+        core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+        core.activeContainer.volume = 0
+        core.activeContainer.emit(Events.CONTAINER_PLAY, 'Container', {
+          autoPlay: true,
+        })
+        core.activeContainer.emit(
+          Events.CONTAINER_STOP,
+          'Container',
+          stopMetadata,
+        )
+      })
+      it(`should ${shouldUnmount ? 'unmount' : 'not unmount'}`, () => {
+        expect(
+          core.activeContainer.$el.find('#gplayer-big-mute-button').length,
+        ).toBe(shouldUnmount ? 0 : 1)
+      })
+    })
+  })
+  describe('when playback is paused', () => {
+    beforeEach(() => {
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+      core.activeContainer.volume = 0
+      core.activeContainer.emit(Events.CONTAINER_PLAY, 'Container', {
+        autoPlay: true,
+      })
+      core.activeContainer.emit(Events.CONTAINER_PAUSE, 'Container')
+    })
+    it('should unmount', () => {
+      expect(
+        core.activeContainer.$el.find('#gplayer-big-mute-button').length,
+      ).toBe(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/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/click-to-pause/ClickToPause.ts

@@ -85,7 +85,7 @@ export class ClickToPause extends ContainerPlugin {
     const isPlaying = this.container && this.container.isPlaying()
 
     if (isPlaying) {
-      useStop ? this.container.stop() : this.container.pause()
+      useStop ? this.container.stop({ ui: true }) : this.container.pause()
     } else {
       this.container.play()
     }

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() {

package/src/plugins/cmcd-config/CmcdConfig.ts

@@ -4,7 +4,6 @@ import { $, Container, Core, CorePlugin, Events } from '@clappr/core'
 
 import { generateSessionId } from './utils'
 import { CLAPPR_VERSION } from '../../build.js'
-import { CoreOptions } from 'src/internal.types'
 
 const CMCD_KEYS = [
   'br',
@@ -28,15 +27,16 @@ const CMCD_KEYS = [
 ]
 
 /**
+ * Config options for the {@link CmcdConfig} plugin
  * @beta
  */
-export type CmcdConfigPluginSettings = {
+export interface CmcdConfigOptions {
   /**
-   * Session ID. If ommitted, a random UUID will be generated
+   * `sid` value. If ommitted, a random UUID will be generated
    */
-  sessionId: string
+  sessionId?: string
   /**
-   * Content ID,
+   * `cid` value.
    * If ommitted, the pathname part of the first source URL will be used
    */
   contentId?: string
@@ -45,11 +45,23 @@ export type CmcdConfigPluginSettings = {
 // const T = 'plugins.cmcd'
 
 /**
- * A `PLUGIN` that configures CMCD for playback
+ * A `PLUGIN` that configures {@link https://cdn.cta.tech/cta/media/media/resources/standards/pdfs/cta-5004-final.pdf | CMCD} for playback
  * @beta
  * @remarks
- * Configuration options
- *   `cmcd`: {@link CmcdConfigPluginSettings}
+ * Configuration options - {@link CmcdConfigOptions}.
+ * @example
+ * ```ts
+ * import { CmcdConfig } from '@gcorevideo/player'
+ * Player.registerPlugin(CmcdConfig)
+ *
+ * const player = new Player({
+ *   source: 'https://example.com/video.mp4',
+ *   cmcd: {
+ *     sessionId: '1234567890',
+ *     contentId: 'f572d396fae9206628714fb2ce00f72e94f2258f',
+ *   },
+ * })
+ * ```
  */
 export class CmcdConfig extends CorePlugin {
   private sid: string
@@ -57,16 +69,22 @@ export class CmcdConfig extends CorePlugin {
   private cid = ''
 
   /**
-   * @inheritdocs
+   * @internal
    */
   get name() {
     return 'cmcd'
   }
 
+  /**
+   * @internal
+   */
   get version() {
     return '0.1.0'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return CLAPPR_VERSION
   }
@@ -78,7 +96,7 @@ export class CmcdConfig extends CorePlugin {
   }
 
   /**
-   * @inheritdocs
+   * @internal
    */
   override bindEvents() {
     this.listenTo(this.core, Events.CORE_CONTAINERS_CREATED, () =>
@@ -86,6 +104,11 @@ export class CmcdConfig extends CorePlugin {
     )
   }
 
+  /**
+   * Returns the current `sid` and `cid` values.
+   * Useful when the auto-generated values need to be known.
+   * @returns `sid` and `cid` values
+   */
   exportIds(): { sid: string; cid: string } {
     return {
       sid: this.sid,
@@ -123,23 +146,6 @@ export class CmcdConfig extends CorePlugin {
     }
   }
 
-  private updateHlsjsSettings(
-    options: CoreOptions,
-    { cid, sid }: { cid: string; sid: string },
-  ) {
-    $.extend(true, options, {
-      playback: {
-        hlsjsConfig: {
-          cmcd: {
-            includeKeys: CMCD_KEYS,
-            sessionId: sid,
-            contentId: cid,
-          },
-        },
-      },
-    })
-  }
-
   private generateContentId() {
     return new URL(
       this.core.options.source ?? this.core.options.sources[0].source,

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

@@ -136,6 +136,10 @@ const LEFT_ORDER = [
   'dvr',
 ]
 
+/**
+ * Extended events for the {@link MediaControl} plugin
+ * @beta
+ */
 export enum ExtendedEvents {
   MEDIACONTROL_VOLUME = 'mediacontrol:volume',
   MEDIACONTROL_MENU_COLLAPSE = 'mediacontrol:menu:collapse',
@@ -557,6 +561,7 @@ export class MediaControl extends UICorePlugin {
     this.updateVolumeUI()
   }
 
+  // TODO check if CONTAINER_SETTINGSUPDATE handler is sufficient
   private onLoadedMetadata() {
     const video = this.core.activePlayback?.el
 
@@ -718,7 +723,7 @@ export class MediaControl extends UICorePlugin {
   }
 
   private togglePlayStop() {
-    this.container.isPlaying() ? this.container.stop() : this.container.play()
+    this.container.isPlaying() ? this.container.stop({ ui: true }) : this.container.play()
   }
 
   private startSeekDrag(event: MouseEvent) {

package/src/plugins/poster/Poster.ts

@@ -19,7 +19,11 @@ import posterHTML from '../../../assets/poster/poster.ejs'
 import playIcon from '../../../assets/icons/new/play.svg'
 import { PlaybackError } from '../../playback.types.js'
 
-export type PosterPluginSettings = {
+/**
+ * Config options for the {@link Poster} plugin
+ * @beta
+ */
+export interface PosterPluginSettings {
   /**
    * Custom CSS background
    */
@@ -33,7 +37,7 @@ export type PosterPluginSettings = {
    */
   url?: string
   /**
-   * Whether to show the poster after playback has ended @default true
+   * Whether to show the poster after playback has ended, by default `true`
    */
   showOnVideoEnd?: boolean
 }