@gcorevideo/player 2.19.15 → 2.20.1

package/src/plugins/clappr-nerd-stats/ClapprNerdStats.ts

@@ -1,11 +1,14 @@
-import { UICorePlugin, Events, template, Core, Container } from '@clappr/core';
-import { reportError } from '@gcorevideo/utils';
-import Mousetrap from 'mousetrap';
-
-import { CLAPPR_VERSION } from '../../build.js';
-import { ClapprStatsEvents, Metrics as BaseMetrics } from '../clappr-stats/types.js';
-import { newMetrics as newBaseMetrics } from '../clappr-stats/utils.js';
-import Formatter from './formatter.js';
+import { UICorePlugin, Events, template, Core, Container } from '@clappr/core'
+import { reportError } from '@gcorevideo/utils'
+import Mousetrap from 'mousetrap'
+
+import { CLAPPR_VERSION } from '../../build.js'
+import {
+  ClapprStatsEvents,
+  Metrics as BaseMetrics,
+} from '../clappr-stats/types.js'
+import { newMetrics as newBaseMetrics } from '../clappr-stats/utils.js'
+import Formatter from './formatter.js'
 import {
   clearSpeedTestResults,
   configureSpeedTest,
@@ -13,105 +16,126 @@ import {
   initSpeedTest,
   startSpeedtest,
   stopSpeedtest,
-} from './speedtest/index.js';
-import { CustomMetrics } from './speedtest/types.js';
-import { ZeptoResult } from '../../utils/types.js';
-
-import '../../../assets/clappr-nerd-stats/clappr-nerd-stats.scss';
-import pluginHtml from '../../../assets/clappr-nerd-stats/clappr-nerd-stats.ejs';
-import buttonHtml from '../../../assets/clappr-nerd-stats/button.ejs';
-import statsIcon from '../../../assets/icons/new/stats.svg';
-import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js';
-import { MediaControl } from '../media-control/MediaControl.js';
-import assert from 'assert';
+} from './speedtest/index.js'
+import { CustomMetrics } from './speedtest/types.js'
+import { ZeptoResult } from '../../utils/types.js'
+
+import '../../../assets/clappr-nerd-stats/clappr-nerd-stats.scss'
+import pluginHtml from '../../../assets/clappr-nerd-stats/clappr-nerd-stats.ejs'
+import buttonHtml from '../../../assets/clappr-nerd-stats/button.ejs'
+import statsIcon from '../../../assets/icons/new/stats.svg'
+import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js'
+import { MediaControl } from '../media-control/MediaControl.js'
+import assert from 'assert'
 
 const qualityClasses = [
   'speedtest-quality-value-1',
   'speedtest-quality-value-2',
   'speedtest-quality-value-3',
   'speedtest-quality-value-4',
-  'speedtest-quality-value-5'
-];
+  'speedtest-quality-value-5',
+]
 
 const getDownloadQuality = (speedValue: number): number => {
   if (speedValue < 3) {
-    return 1;
+    return 1
   } else if (speedValue < 7) {
-    return 2;
+    return 2
   } else if (speedValue < 13) {
-    return 3;
+    return 3
   } else if (speedValue < 25) {
-    return 4;
+    return 4
   } else {
-    return 5;
+    return 5
   }
-};
+}
 
 const getPingQuality = (pingValue: number): number => {
   if (pingValue < 20) {
-    return 5;
+    return 5
   } else if (pingValue < 50) {
-    return 4;
+    return 4
   } else if (pingValue < 100) {
-    return 3;
+    return 3
   } else if (pingValue < 150) {
-    return 2;
+    return 2
   } else {
-    return 1;
+    return 1
   }
-};
+}
 
 const generateQualityHtml = (quality: number): string => {
-  const html = [];
-  const qualityClassName = qualityClasses[quality - 1];
+  const html = []
+  const qualityClassName = qualityClasses[quality - 1]
 
   for (let i = 0; i < qualityClasses.length; i++) {
     if (i < quality) {
-      html.push(`<div class="speedtest-quality-content-item ${qualityClassName}"></div>`);
+      html.push(
+        `<div class="speedtest-quality-content-item ${qualityClassName}"></div>`,
+      )
     } else {
-      html.push('<div class="speedtest-quality-content-item"></div>');
+      html.push('<div class="speedtest-quality-content-item"></div>')
     }
   }
 
-  return html.join('');
-};
+  return html.join('')
+}
 
-const drawSummary = (customMetrics: CustomMetrics, vodContainer: ZeptoResult, liveContainer: ZeptoResult) => {
-  const { connectionSpeed, ping } = customMetrics;
+const drawSummary = (
+  customMetrics: CustomMetrics,
+  vodContainer: ZeptoResult,
+  liveContainer: ZeptoResult,
+) => {
+  const { connectionSpeed, ping } = customMetrics
 
   if (!connectionSpeed || !ping) {
-    return;
+    return
   }
-  const downloadQuality = getDownloadQuality(connectionSpeed);
-  const pingQuality = getPingQuality(ping);
-  const liveQuality = Math.min(downloadQuality, pingQuality);
-  const vodHtml = generateQualityHtml(downloadQuality);
-  const liveHtml = generateQualityHtml(liveQuality);
-
-  vodContainer.html(vodHtml);
-  liveContainer.html(liveHtml);
-};
+  const downloadQuality = getDownloadQuality(connectionSpeed)
+  const pingQuality = getPingQuality(ping)
+  const liveQuality = Math.min(downloadQuality, pingQuality)
+  const vodHtml = generateQualityHtml(downloadQuality)
+  const liveHtml = generateQualityHtml(liveQuality)
+
+  vodContainer.html(vodHtml)
+  liveContainer.html(liveHtml)
+}
 
-type IconPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type IconPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
 
 type Metrics = BaseMetrics & {
   general: {
-    displayResolution?: string;
-    volume?: number;
-  },
+    displayResolution?: string
+    volume?: number
+  }
   custom: CustomMetrics & {
-    vodQuality?: string;
-    liveQuality?: string;
-  };
+    vodQuality?: string
+    liveQuality?: string
+  }
 }
 
 // const T = 'plugins.clappr_nerd_stats';
 
 /**
+ * Displays useful network-related statistics.
  * @beta
+ *
+ * @remarks
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * - {@link BottomGear}
+ *
+ * - {@link ClapprStats}
+ *
+ * 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,
+ * and recommended quality level.
  */
 export class ClapprNerdStats extends UICorePlugin {
-  private container: Container | null = null;
+  private container: Container | null = null
 
   private customMetrics: CustomMetrics = {
     connectionSpeed: 0,
@@ -119,238 +143,281 @@ export class ClapprNerdStats extends UICorePlugin {
     jitter: 0,
   }
 
-  private metrics: Metrics = newMetrics();
+  private metrics: Metrics = newMetrics()
 
-  private showing = false;
+  private showing = false
 
-  private shortcut: string[];
+  private shortcut: string[]
 
-  private iconPosition: IconPosition;
+  private iconPosition: IconPosition
 
+  /**
+   * @internal
+   */
   get name() {
-    return 'nerd_stats';
+    return 'nerd_stats'
   }
 
+  /**
+   * @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 attributes() {
     return {
       'data-clappr-nerd-stats': '',
-      'class': 'clappr-nerd-stats'
-    };
+      class: 'clappr-nerd-stats',
+    }
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       'click [data-show-stats-button]': 'showOrHide',
       'click [data-close-button]': 'hide',
       'click [data-refresh-button]': 'refreshSpeedTest',
-    };
+    }
   }
 
-  get statsBoxElem() {
-    return '.clappr-nerd-stats[data-clappr-nerd-stats] .stats-box';
+  private get statsBoxElem() {
+    return '.clappr-nerd-stats[data-clappr-nerd-stats] .stats-box'
   }
 
-  get statsBoxWidthThreshold() {
-    return 720;
+  private get statsBoxWidthThreshold() {
+    return 720
   }
 
-  get playerWidth() {
-    return this.core.$el.width();
+  private get playerWidth() {
+    return this.core.$el.width()
   }
 
-  get playerHeight() {
-    return this.core.$el.height();
+  private get playerHeight() {
+    return this.core.$el.height()
   }
 
   constructor(core: Core) {
-    super(core);
-    this.shortcut = core.options.clapprNerdStats?.shortcut ?? ['command+shift+s', 'ctrl+shift+s'];
-    this.iconPosition = core.options.clapprNerdStats?.iconPosition ?? 'bottom-right';
+    super(core)
+    this.shortcut = core.options.clapprNerdStats?.shortcut ?? [
+      'command+shift+s',
+      'ctrl+shift+s',
+    ]
+    this.iconPosition =
+      core.options.clapprNerdStats?.iconPosition ?? 'bottom-right'
     this.customMetrics = {
       connectionSpeed: 0,
       ping: 0,
       jitter: 0,
-    };
-    configureSpeedTest(core.options.clapprNerdStats?.speedTestServers ?? []);
+    }
+    configureSpeedTest(core.options.clapprNerdStats?.speedTestServers ?? [])
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
-    const mediaControl = this.core.getPlugin('media_control') as MediaControl;
-    assert(mediaControl, 'media_control plugin is required');
-    this.listenToOnce(this.core, Events.CORE_READY, this.init);
-    this.listenTo(mediaControl, GearEvents.MEDIACONTROL_GEAR_RENDERED, this.addToBottomGear);
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
+    assert(mediaControl, 'media_control plugin is required')
+    this.listenToOnce(this.core, Events.CORE_READY, this.init)
+    this.listenTo(
+      mediaControl,
+      GearEvents.MEDIACONTROL_GEAR_RENDERED,
+      this.addToBottomGear,
+    )
   }
 
   private init() {
-    this.container = this.core.activeContainer;
-    const clapprStats = this.container?.getPlugin('clappr_stats');
+    this.container = this.core.activeContainer
+    const clapprStats = this.container?.getPlugin('clappr_stats')
 
     if (!clapprStats) {
       reportError({
         message: 'clappr_stats plugin is not available',
-      });
-      console.error('clappr-stats not available. Please, include it as a plugin of your Clappr instance.\n' +
-        'For more info, visit: https://github.com/clappr/clappr-stats.');
-      this.disable();
+      })
+      console.error(
+        'clappr-stats not available. Please, include it as a plugin of your Clappr instance.\n' +
+          'For more info, visit: https://github.com/clappr/clappr-stats.',
+      )
+      this.disable()
     } else {
-      Mousetrap.bind(this.shortcut, () => this.toggle());
-      this.listenTo(this.core, Events.CORE_RESIZE, this.onPlayerResize);
+      Mousetrap.bind(this.shortcut, () => this.toggle())
+      this.listenTo(this.core, Events.CORE_RESIZE, this.onPlayerResize)
       // TODO: fix
-      this.listenTo(clapprStats, ClapprStatsEvents.REPORT_EVENT, this.updateMetrics);
-      clapprStats.setUpdateMetrics(this.updateMetrics.bind(this));
-      this.updateMetrics(clapprStats.exportMetrics());
-      this.render();
+      this.listenTo(
+        clapprStats,
+        ClapprStatsEvents.REPORT_EVENT,
+        this.updateMetrics,
+      )
+      clapprStats.setUpdateMetrics(this.updateMetrics.bind(this))
+      this.updateMetrics(clapprStats.exportMetrics())
+      this.render()
     }
   }
 
   private toggle() {
     if (this.showing) {
-      this.hide();
+      this.hide()
     } else {
-      this.show();
+      this.show()
     }
   }
 
   private show() {
-    this.core.$el.find(this.statsBoxElem).show();
-    this.showing = true;
-
-    this.refreshSpeedTest();
-    initSpeedTest(this.customMetrics).then(() => {
-      startSpeedtest();
-    }).catch(e => {
-      reportError(e);
-      this.disable();
-    })
+    this.core.$el.find(this.statsBoxElem).show()
+    this.showing = true
+
+    this.refreshSpeedTest()
+    initSpeedTest(this.customMetrics)
+      .then(() => {
+        startSpeedtest()
+      })
+      .catch((e) => {
+        reportError(e)
+        this.disable()
+      })
   }
 
   private hide() {
-    this.core.$el.find(this.statsBoxElem).hide();
-    this.showing = false;
-    stopSpeedtest();
+    this.core.$el.find(this.statsBoxElem).hide()
+    this.showing = false
+    stopSpeedtest()
   }
 
   private onPlayerResize() {
-    this.setStatsBoxSize();
+    this.setStatsBoxSize()
   }
 
   private addGeneralMetrics() {
     this.metrics.general = {
-      displayResolution: (this.playerWidth + 'x' + this.playerHeight),
-      volume: this.container?.volume
-    };
+      displayResolution: this.playerWidth + 'x' + this.playerHeight,
+      volume: this.container?.volume,
+    }
   }
 
   private addCustomMetrics() {
-    this.metrics.custom = this.customMetrics;
-    const videoQualityNames = ['SD (480p)', 'HD (720p)', 'Full HD (1080p)', '2K (1440p)', '4K (2160p)'];
-    const { connectionSpeed, ping } = this.customMetrics;
+    this.metrics.custom = this.customMetrics
+    const videoQualityNames = [
+      'SD (480p)',
+      'HD (720p)',
+      'Full HD (1080p)',
+      '2K (1440p)',
+      '4K (2160p)',
+    ]
+    const { connectionSpeed, ping } = this.customMetrics
 
     if (!connectionSpeed || !ping) {
-      const calculatingText = 'Calculating... Please wait.';
+      const calculatingText = 'Calculating... Please wait.'
 
-      this.metrics.custom.vodQuality = calculatingText;
-      this.metrics.custom.liveQuality = calculatingText;
+      this.metrics.custom.vodQuality = calculatingText
+      this.metrics.custom.liveQuality = calculatingText
 
-      return;
+      return
     }
-    const downloadQuality = getDownloadQuality(connectionSpeed);
-    const pingQuality = getPingQuality(ping);
-    const liveQuality = Math.min(downloadQuality, pingQuality);
+    const downloadQuality = getDownloadQuality(connectionSpeed)
+    const pingQuality = getPingQuality(ping)
+    const liveQuality = Math.min(downloadQuality, pingQuality)
 
-    const prefix = 'Optimal for ';
+    const prefix = 'Optimal for '
 
-    this.metrics.custom.vodQuality = prefix + videoQualityNames[downloadQuality - 1];
-    this.metrics.custom.liveQuality = prefix + videoQualityNames[liveQuality - 1];
+    this.metrics.custom.vodQuality =
+      prefix + videoQualityNames[downloadQuality - 1]
+    this.metrics.custom.liveQuality =
+      prefix + videoQualityNames[liveQuality - 1]
   }
 
   private updateMetrics(metrics: BaseMetrics) {
-    Object.assign(this.metrics, metrics);
-    this.addGeneralMetrics();
-    this.addCustomMetrics();
-
-    const scrollTop = this.core.$el.find(this.statsBoxElem).scrollTop();
-
-    this.$el.html(this.template({
-      metrics: Formatter.format(this.metrics),
-      iconPosition: this.iconPosition
-    }));
-    this.setStatsBoxSize();
-    drawSpeedTestResults();
+    Object.assign(this.metrics, metrics)
+    this.addGeneralMetrics()
+    this.addCustomMetrics()
+
+    const scrollTop = this.core.$el.find(this.statsBoxElem).scrollTop()
+
+    this.$el.html(
+      ClapprNerdStats.template({
+        metrics: Formatter.format(this.metrics),
+        iconPosition: this.iconPosition,
+      }),
+    )
+    this.setStatsBoxSize()
+    drawSpeedTestResults()
     drawSummary(
       this.metrics?.custom,
       this.$el.find('.speedtest-quality-content[data-streaming-type="vod"]'),
-      this.$el.find('.speedtest-quality-content[data-streaming-type="live"]')
-    );
+      this.$el.find('.speedtest-quality-content[data-streaming-type="live"]'),
+    )
 
-    this.core.$el.find(this.statsBoxElem).scrollTop(scrollTop);
+    this.core.$el.find(this.statsBoxElem).scrollTop(scrollTop)
 
     if (!this.showing) {
-      this.hide();
+      this.hide()
     }
   }
 
   private setStatsBoxSize() {
     if (this.playerWidth >= this.statsBoxWidthThreshold) {
-      this.$el.find(this.statsBoxElem).addClass('wide');
-      this.$el.find(this.statsBoxElem).removeClass('narrow');
+      this.$el.find(this.statsBoxElem).addClass('wide')
+      this.$el.find(this.statsBoxElem).removeClass('narrow')
     } else {
-      this.$el.find(this.statsBoxElem).removeClass('wide');
-      this.$el.find(this.statsBoxElem).addClass('narrow');
+      this.$el.find(this.statsBoxElem).removeClass('wide')
+      this.$el.find(this.statsBoxElem).addClass('narrow')
     }
   }
 
+  /**
+   * @internal
+   */
   override render() {
-    this.core.$el.append(this.$el[0]);
-    this.hide();
+    // TODO append to the container
+    this.core.$el.append(this.$el[0])
+    this.hide()
 
-    return this;
+    return this
   }
 
   private addToBottomGear() {
-    const gear = this.core.getPlugin('bottom_gear') as BottomGear;
+    const gear = this.core.getPlugin('bottom_gear') as BottomGear
     const $el = gear.getElement('nerd')
     $el.html(buttonHtml)
-    const $button = $el.find('.nerd-button');
+    const $button = $el.find('.nerd-button')
 
-    $button.find('.stats-icon').html(statsIcon);
+    $button.find('.stats-icon').html(statsIcon)
 
     $button.on('click', (e: MouseEvent) => {
-      e.stopPropagation();
-      this.toggle();
-    });
+      e.stopPropagation()
+      this.toggle()
+    })
   }
 
   private clearCustomMetrics() {
-    const clapprStats = this.container?.getPlugin('clappr_stats');
+    const clapprStats = this.container?.getPlugin('clappr_stats')
 
-    this.customMetrics.connectionSpeed = 0;
-    this.customMetrics.ping = 0;
-    this.customMetrics.jitter = 0;
+    this.customMetrics.connectionSpeed = 0
+    this.customMetrics.ping = 0
+    this.customMetrics.jitter = 0
 
     if (clapprStats) {
-      this.updateMetrics(clapprStats.exportMetrics());
+      this.updateMetrics(clapprStats.exportMetrics())
     }
   }
 
   private refreshSpeedTest() {
-    stopSpeedtest();
+    stopSpeedtest()
     setTimeout(() => {
-      this.clearCustomMetrics();
-      clearSpeedTestResults();
-      drawSpeedTestResults();
-    }, 200);
+      this.clearCustomMetrics()
+      clearSpeedTestResults()
+      drawSpeedTestResults()
+    }, 200)
     setTimeout(() => {
-      startSpeedtest();
-    }, 800);
+      startSpeedtest()
+    }, 800)
   }
 }
 

package/src/plugins/dvr-controls/DvrControls.ts

@@ -11,8 +11,11 @@ import '../../../assets/dvr-controls/dvr_controls.scss';
  * @beta
  *
  * @remarks
- * The plugin is rendered in the {@link MediaControl | media control} UI.
- * It renders the live stream indicator and the DVR seek bar if DVR is enabled.
+ * Depends on:
+ *
+ * - {@link MediaControl | media_control}
+ *
+ * The plugin renders the live stream indicator and the DVR seek bar, if DVR is enabled, in the media control UI.
  */
 export class DvrControls extends UICorePlugin {
   private static readonly template = template(dvrHTML);

package/src/plugins/error-screen/ErrorScreen.ts

@@ -29,6 +29,11 @@ type PresentationalError = {
 
 const T = 'plugins.error_screen'
 
+/**
+ * Displays a descriptive error in the overlay on top of the player.
+ * @beta
+ * TODO
+ */
 export class ErrorScreen extends UICorePlugin {
   private _retry = 0;
 

package/src/plugins/index.ts

@@ -31,12 +31,11 @@ export * from "./poster/Poster.js";
 export * from "./seek-time/SeekTime.js";
 export * from "./share/Share.js";
 export * from "./skip-time/SkipTime.js";
+export * from "./source-controller/SourceController.js";
 export * from "./spinner-three-bounce/SpinnerThreeBounce.js";
-export * from "./statistics/Statistics.js";
 export * from "./subtitles/Subtitles.js";
+export * from "./telemetry/Telemetry.js";
 export * from "./thumbnails/Thumbnails.js";
-export { setTracer} from "@gcorevideo/utils";
-export * from "./source-controller/SourceController.js";
 // _ vast-ads
 // _ video360
 export * from "./volume-fade/VolumeFade.js";