@gcorevideo/player 2.20.1 → 2.20.4

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

@@ -1,191 +1,212 @@
-import { Events, template, UICorePlugin, Utils } from '@clappr/core';
-import { trace } from '@gcorevideo/utils';
+import { Events, template, UICorePlugin, Utils } from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
 
-import { CLAPPR_VERSION } from '../../build.js';
-import { ZeptoResult } from "../../utils/types.js";
+import { CLAPPR_VERSION } from '../../build.js'
+import { ZeptoResult } from '../../utils/types.js'
 
-import volumeMuteIcon from '../../../assets/icons/new/volume-off.svg';
-import pluginHtml from '../../../assets/big-mute-button/big-mute-button.ejs';
-import '../../../assets/big-mute-button/big-mute-button.scss';
+import volumeMuteIcon from '../../../assets/icons/new/volume-off.svg'
+import pluginHtml from '../../../assets/big-mute-button/big-mute-button.ejs'
+import '../../../assets/big-mute-button/big-mute-button.scss'
 
-const T = "plugins.big_mute_button";
+const T = 'plugins.big_mute_button'
+
+// TODO rewrite as a container plugin
 
 /**
+ * Displays a big mute button over the video when it's muted.
+ * Once pressed, it unmutes the video.
  * @beta
  */
 export class BigMuteButton extends UICorePlugin {
-  private isBigMuteButtonHidden = false;
+  private isBigMuteButtonHidden = false
 
-  private _adIsPlaying = false;
+  private _adIsPlaying = false
 
-  private $bigMuteBtnContainer: ZeptoResult | null = null;
+  private $bigMuteBtnContainer: ZeptoResult | null = null
 
-  private $bigMuteButton: ZeptoResult | null = null;
+  private $bigMuteButton: ZeptoResult | null = null
 
+  /**
+   * @internal
+   */
   get name() {
-    return 'big_mute_button';
+    return 'big_mute_button'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
-  get template() {
-    return template(pluginHtml);
-  }
+  private static readonly template = template(pluginHtml)
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       'click .big-mute-icon': 'handleBigMuteBtnClick',
       'click .big-mute-icon-wrapper': 'destroyBigMuteBtn',
-    };
+    }
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
-    super.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);
+    super.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,
-    });
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.mediaControlRendered);
-  }
-
-  private unBindEvents() {
-    // @ts-ignore
-    this.stopListening(this.core, Events.CORE_READY);
-    this.stopListening(this.core, 'core:advertisement:start', this.onStartAd);
-    this.stopListening(this.core, 'core:advertisement:finish', this.onFinishAd);
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.mediaControlRendered);
-
-    const container = this.core.activeContainer;
-
-    if (container) {
-      this.stopListening(container.playback, Events.PLAYBACK_PLAY, this.render);
-    }
+    })
+    this.listenTo(
+      this.core.mediaControl,
+      Events.MEDIACONTROL_RENDERED,
+      this.mediaControlRendered,
+    )
   }
 
   private onCoreReady() {
-    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_VOLUME,
+      this.onContainerVolume,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_READY,
+      this.onContainerStart,
+    )
+    this.listenTo(
+      this.core.activePlayback,
+      Events.PLAYBACK_ENDED,
+      this.onPlaybackEnded,
+    )
   }
 
   private onContainerVolume(value: number) {
     if (value !== 0) {
-      this.destroyBigMuteBtn();
+      this.destroyBigMuteBtn()
     }
   }
 
   private onContainerStart() {
     if (this.isBigMuteButtonHidden) {
-      this.showBigMuteBtn();
+      this.showBigMuteBtn()
     }
   }
 
   private onPlaybackEnded() {
-    this.hideBigMuteBtn();
+    this.hideBigMuteBtn()
   }
 
   private mediaControlRendered() {
-    const container = this.core.activeContainer;
+    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();
-      });
+        trace(`${T} PLAYBACK_PLAY`)
+        this.render()
+      })
     }
   }
 
   private onStartAd() {
-    this._adIsPlaying = true;
+    this._adIsPlaying = true
     if (this.$bigMuteBtnContainer) {
-      this.$bigMuteBtnContainer.addClass('hide');
+      this.$bigMuteBtnContainer.addClass('hide')
     }
   }
 
   private onFinishAd() {
-    this._adIsPlaying = false;
+    this._adIsPlaying = false
     if (this.$bigMuteBtnContainer) {
-      this.$bigMuteBtnContainer.removeClass('hide');
+      this.$bigMuteBtnContainer.removeClass('hide')
     }
   }
 
   private shouldRender() {
-    const container = this.core.activeContainer;
+    const container = this.core.activeContainer
 
     if (!container) {
-      return false;
+      return false
     }
 
-    const { autoPlay, wasMuted } = this.options;
-    const volume = container.volume;
+    const { autoPlay, wasMuted } = this.options
+    const volume = container.volume
 
     trace(`${T} shouldRender`, {
       autoPlay,
       wasMuted,
       volume,
-    });
+    })
 
-    return autoPlay && !wasMuted && volume === 0;
+    return autoPlay && !wasMuted && volume === 0
   }
 
+  /**
+   * @internal
+   */
   override render() {
     if (this.shouldRender()) {
       trace(`${T} render`, {
         el: !!this.$el,
-      });
-      this.$el.html(this.template());
+      })
+      this.$el.html(BigMuteButton.template())
 
-      this.$bigMuteBtnContainer = this.$el.find('.big-mute-icon-wrapper[data-big-mute]');
-      this._adIsPlaying && this.$bigMuteBtnContainer.addClass('hide');
+      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);
+      this.$bigMuteButton = this.$bigMuteBtnContainer.find('.big-mute-icon')
+      this.$bigMuteButton.append(volumeMuteIcon)
 
-      const container = this.core.activeContainer;
+      const container = this.core.activeContainer
 
-      container.$el.append(this.$el.get(0));
+      container.$el.append(this.$el.get(0))
     }
 
-    return this;
+    return this
   }
 
   private hideBigMuteBtn() {
-    this.isBigMuteButtonHidden = true;
-    this.$bigMuteBtnContainer?.addClass('hide');
+    this.isBigMuteButtonHidden = true
+    this.$bigMuteBtnContainer?.addClass('hide')
   }
 
   private showBigMuteBtn() {
-    this.isBigMuteButtonHidden = false;
+    this.isBigMuteButtonHidden = false
     if (this.$bigMuteBtnContainer) {
-      this.$bigMuteBtnContainer.removeClass('hide');
+      this.$bigMuteBtnContainer.removeClass('hide')
     }
   }
 
   private destroyBigMuteBtn(e?: MouseEvent) {
-    this.hideBigMuteBtn();
+    this.hideBigMuteBtn()
 
     if (e && e.stopPropagation) {
-      e.stopPropagation();
+      e.stopPropagation()
     }
 
-    this.destroy();
+    this.destroy()
   }
 
   private handleBigMuteBtnClick(e: MouseEvent) {
-    const localVolume = Utils.Config.restore('volume');
-    const volume = !isNaN(localVolume) ? localVolume : 100;
+    const localVolume = Utils.Config.restore('volume')
+    const volume = !isNaN(localVolume) ? localVolume : 100
 
     // TODO use container.setVolume() instead
-    this.core.mediaControl.setVolume(volume === 0 ? 100 : volume);
+    this.core.mediaControl.setVolume(volume === 0 ? 100 : volume)
 
-    this.destroyBigMuteBtn(e);
+    this.destroyBigMuteBtn(e)
   }
 }

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

@@ -17,6 +17,7 @@ const T = 'plugins.bottom_gear';
 
 /**
  * Custom events emitted by the plugin
+ * @beta
  */
 export enum GearEvents {
   /**

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

@@ -23,7 +23,10 @@ type UriToMeasureBandwidth = {
 const updateMetrics = () => {};
 
 /**
+ * Collects useful statistics about playback performance.
  * @beta
+ * @remarks
+ * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.
  */
 export class ClapprStats extends ContainerPlugin {
   private bwMeasureCount = 0;
@@ -60,19 +63,25 @@ export class ClapprStats extends ContainerPlugin {
 
   private uriToMeasureLatency: string | undefined;
 
+  /**
+   * @internal
+   */
   get name() {
     return 'clappr_stats';
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION };
   }
 
-  get _playbackName() {
+  private get _playbackName() {
     return String(this.container.playback.name || '');
   }
 
-  get _playbackType() {
+  private get _playbackType() {
     return this.container.getPlaybackType();
   }
 
@@ -100,11 +109,15 @@ export class ClapprStats extends ContainerPlugin {
     this.metrics.timers[timer] += this._now() - this.timers[timer];
   }
 
+  /**
+   * Registers a callback to receive the metrics.
+   * @param updateMetricsFn
+   */
   setUpdateMetrics(updateMetricsFn: MetricsUpdateFn) {
     this.updateFn = updateMetricsFn;
   }
 
-  _defaultReport(metrics: Metrics) {
+  private _defaultReport(metrics: Metrics) {
     this.updateFn(metrics);
   }
 
@@ -122,6 +135,9 @@ export class ClapprStats extends ContainerPlugin {
     };
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
     this.listenTo(this.container, CoreEvents.CONTAINER_BITRATE, this.onBitrate);
     this.listenTo(this.container, CoreEvents.CONTAINER_STOP, this.stopReporting);
@@ -141,11 +157,18 @@ export class ClapprStats extends ContainerPlugin {
     this.listenTo(this.container.playback, CoreEvents.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
   }
 
+  /**
+   * @internal
+   */
   override destroy() {
     this.stopReporting();
     super.destroy();
   }
 
+  /**
+   * Returns the collected metrics.
+   * @returns The collected metrics
+   */
   exportMetrics() {
     return structuredClone(this.metrics);
   }
@@ -166,7 +189,7 @@ export class ClapprStats extends ContainerPlugin {
     this._inc('changeLevel');
   }
 
-  stopReporting() {
+  private stopReporting() {
     this._buildReport();
 
     if (this.intervalId !== null) {
@@ -175,25 +198,26 @@ export class ClapprStats extends ContainerPlugin {
     }
     this._newMetrics();
 
+    // TODO
     // @ts-ignore
     this.stopListening();
     this.bindEvents();
   }
 
-  startTimers() {
+  private startTimers() {
     this.intervalId = setInterval(this._buildReport.bind(this), this.runEach);
     this.start('session');
     this.start('startup');
   }
 
-  onFirstPlaying() {
+  private onFirstPlaying() {
     this.listenTo(this.container, CoreEvents.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
 
     this.start('watch');
     this._stop('startup');
   }
 
-  playAfterPause() {
+  private playAfterPause() {
     this.listenTo(this.container, CoreEvents.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
     this._stop('pause');
     this.start('watch');
@@ -280,7 +304,7 @@ export class ClapprStats extends ContainerPlugin {
     }
   }
 
-  _buildReport() {
+  private _buildReport() {
     this._stop('session');
     this.start('session');
 

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

@@ -1,3 +1,7 @@
+
+/**
+ * @beta
+ */
 export type Metrics = {
   counters: {
     play: number;
@@ -37,6 +41,9 @@ export type Metrics = {
   custom: Record<string, unknown>;
 };
 
+/**
+ * @beta
+ */
 export type BitrateTrackRecord = {
   start: number;
   end?: number;
@@ -44,8 +51,14 @@ export type BitrateTrackRecord = {
   bitrate: number;
 }
 
+/**
+ * @beta
+ */
 export type MetricsUpdateFn = (metrics: Metrics) => void;
 
+/**
+ * @beta
+ */
 export enum ClapprStatsEvents {
   REPORT_EVENT = 'clappr:stats:report',
   PERCENTAGE_EVENT = 'clappr:stats:percentage',

package/src/plugins/click-to-pause/ClickToPause.ts

@@ -1,63 +1,74 @@
 //Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
+// license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE.
 
-import { ContainerPlugin, Events, Playback } from '@clappr/core';
-import { trace } from '@gcorevideo/utils';
+import { ContainerPlugin, Events, Playback } from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
 
-import { CLAPPR_VERSION } from '../../build.js';
+import { CLAPPR_VERSION } from '../../build.js'
 
-// const VERSION = '0.0.1';
+type Timer = ReturnType<typeof setTimeout>
 
-type Timer = ReturnType<typeof setTimeout>;
-
-const T = 'plugins.click_to_pause_custom';
+const T = 'plugins.click_to_pause_custom'
 
+/**
+ * Adds a behavior of toggling the playback state on click over the container
+ * @beta
+ */
 export class ClickToPause extends ContainerPlugin {
-  private pointerEnabled = false;
+  private pointerEnabled = false
 
-  private timer: Timer | null = null;
+  private timer: Timer | null = null
 
+  /**
+   * @internal
+   */
   get name() {
-    return 'click_to_pause_custom';
+    return 'click_to_pause_custom'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
-  }
-
-  get config() {
-    return this.container.options.clickToPauseConfig || {};
+    return { min: CLAPPR_VERSION }
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
-    this.listenTo(this.container, Events.CONTAINER_CLICK, this.click);
-    this.listenTo(this.container, Events.CONTAINER_SETTINGSUPDATE, this.settingsUpdate);
+    this.listenTo(this.container, Events.CONTAINER_CLICK, this.click)
+    this.listenTo(
+      this.container,
+      Events.CONTAINER_SETTINGSUPDATE,
+      this.settingsUpdate,
+    )
   }
 
   private click() {
-    const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE;
-    const isDvrEnabled = this.container.isDvrEnabled();
+    const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE
+    const isDvrEnabled = this.container.isDvrEnabled()
 
     trace(`${T} click`, {
       isLivePlayback,
       isDvrEnabled,
-    });
+    })
 
     if (isLivePlayback && !isDvrEnabled) {
-      this.togglePlay(true);
+      this.togglePlay(true)
     } else if (!isLivePlayback || isDvrEnabled) {
-      this.clearTimer();
+      this.clearTimer()
       this.timer = setTimeout(() => {
         this.timer = null
-        this.togglePlay(false);
-      }, 300);
+        this.togglePlay(false)
+      }, 300)
     }
   }
 
   private settingsUpdate() {
-    const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE;
-    const pointerEnabled = !isLivePlayback || this.container.isDvrEnabled();
+    const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE
+    const pointerEnabled = !isLivePlayback || this.container.isDvrEnabled()
 
     trace(`${T} settingsUpdate`, {
       isLivePlayback,
@@ -65,29 +76,29 @@ export class ClickToPause extends ContainerPlugin {
     })
 
     if (pointerEnabled === this.pointerEnabled) {
-      return;
+      return
     }
 
-    const method = pointerEnabled ? 'addClass' : 'removeClass';
+    const method = pointerEnabled ? 'addClass' : 'removeClass'
 
-    this.container.$el[method]('pointer-enabled');
-    this.pointerEnabled = pointerEnabled;
+    this.container.$el[method]('pointer-enabled')
+    this.pointerEnabled = pointerEnabled
   }
 
   private togglePlay(useStop: boolean) {
-    const isPlaying = this.container && this.container.isPlaying();
+    const isPlaying = this.container && this.container.isPlaying()
 
     if (isPlaying) {
-      useStop ? this.container.stop() : this.container.pause();
+      useStop ? this.container.stop() : this.container.pause()
     } else {
-      this.container.play();
+      this.container.play()
     }
   }
 
   private clearTimer() {
     if (this.timer) {
-      clearTimeout(this.timer);
-      this.timer = null;
+      clearTimeout(this.timer)
+      this.timer = null
     }
   }
 }