@gcorevideo/player 2.19.12 → 2.19.14

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

@@ -1,38 +1,65 @@
-import { UICorePlugin, template, Events } from '@clappr/core';
+import { UICorePlugin, template, Events as ClapprEvents } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
+import assert from 'assert';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import pluginHtml from '../../../assets/bottom-gear/bottomgear.ejs';
 import '../../../assets/bottom-gear/gear.scss';
 import '../../../assets/bottom-gear/gear-sub-menu.scss';
 import gearIcon from '../../../assets/icons/new/gear.svg';
 import gearHdIcon from '../../../assets/icons/new/gear-hd.svg';
+import { ZeptoResult } from '../../utils/types.js';
 
-const VERSION = '0.0.1';
+const VERSION = '2.19.12';
+
+const T = 'plugins.media_control_gear';
+
+export enum Events {
+  MEDIACONTROL_GEAR_RENDERED = 'mediacontrol:gear:rendered',
+}
+
+/**
+ * An element inside the gear menu
+ * @beta
+ */
+export type GearItemElement = 'quality' | 'rate' | 'nerd';
 
 /**
+ * Adds the gear button that triggers extra options menu on the right side of the {@link MediaControl | media control} UI
  * @beta
+ * @remarks
+ * The plugins provides a base for attaching custom settings UI in the gear menu
  */
 export class BottomGear extends UICorePlugin {
   private isHd = false;
 
+  /**
+   * @internal
+   */
   get name() {
-    return 'gear';
+    return 'media_control_gear';
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION };
   }
 
+  /**
+   * @internal
+   */
   static get version() {
     return VERSION;
   }
 
-  get template() {
-    return template(pluginHtml);
-  }
+  private static readonly template = template(pluginHtml)
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
       'class': this.name,
@@ -40,47 +67,40 @@ export class BottomGear extends UICorePlugin {
     };
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       'click .button-gear': 'toggleGearMenu',
     };
   }
 
-  get container() {
-    return this.core && this.core.activeContainer;
-  }
-
+  /**
+   * @internal
+   */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-    this.listenTo(this.core, 'gear:refresh', this.refresh);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hide);
-    this.bindContainerEvents();
+    const mediaControl = this.core.getPlugin('media_control');
+    assert(mediaControl, 'media_control plugin is required');
+
+    this.listenTo(this.core, ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
+    this.listenTo(this.core, 'gear:refresh', this.refresh); // TODO use direct plugin method call
+    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.render);
+    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
   }
 
-  unBindEvents() {
-    this.stopListening(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hide);
+  getElement(name: GearItemElement): ZeptoResult | null {
+    return this.core.getPlugin('media_control')?.getElement('gear')?.find(`.gear-options-list [data-${name}]`);
   }
 
   private onActiveContainerChanged() {
-    this.bindEvents();
+    trace(`${T} onActiveContainerChanged`);
     this.bindContainerEvents();
   }
 
   private bindContainerEvents() {
-    if (!this.container) {
-      return;
-    }
-    this.listenTo(this.container, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
-  }
-
-  reload() {
-    this.unBindEvents();
-    this.bindEvents();
+    trace(`${T} bindContainerEvents`);
+    this.listenTo(this.core.activeContainer, ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
   }
 
   private highDefinitionUpdate(isHd: boolean) {
@@ -93,33 +113,38 @@ export class BottomGear extends UICorePlugin {
     }
   }
 
+  /**
+   * @internal
+   */
   override render() {
-    const items = [
+    const mediaControl = this.core.getPlugin('media_control');
+    assert(mediaControl, 'media_control plugin is required');
+
+    // TODO use options.mediaControl.gear.items
+    const items: GearItemElement[] = [
       'quality',
       'rate',
       'nerd',
     ];
-
     const icon = this.isHd ? gearHdIcon : gearIcon;
+    this.$el.html(BottomGear.template({ icon, items }));
 
-    this.$el.html(this.template({ icon, items }));
-
-    this.core.mediaControl.$bottomGear?.html(this.el);
-    this.core.trigger('gear:rendered');
-
+    mediaControl.getElement('gear')?.html(this.el);
+    this.core.trigger('gear:rendered'); // @deprecated
+    mediaControl.trigger(Events.MEDIACONTROL_GEAR_RENDERED);
     return this;
   }
 
-  refresh() {
+  private refresh() {
     this.render();
     this.$el.find('.gear-wrapper').show();
   }
 
-  toggleGearMenu() {
+  private toggleGearMenu() {
     this.$el.find('.gear-wrapper').toggle();
   }
 
-  hide() {
+  private hide() {
     this.$el.find('.gear-wrapper').hide();
   }
 }

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

@@ -2,7 +2,7 @@ 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 { 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';
@@ -21,6 +21,9 @@ 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, Events as BottomGearEvents } from '../bottom-gear/BottomGear.js';
+import { MediaControl } from '../media-control/MediaControl.js';
+import assert from 'assert';
 
 const qualityClasses = [
   'speedtest-quality-value-1',
@@ -125,7 +128,7 @@ export class ClapprNerdStats extends UICorePlugin {
   private iconPosition: IconPosition;
 
   get name() {
-    return 'clappr_nerd_stats';
+    return 'media_control_nerd_stats';
   }
 
   get supportedVersion() {
@@ -180,8 +183,10 @@ export class ClapprNerdStats extends UICorePlugin {
   }
 
   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(this.core, 'gear:rendered', this.addToBottomGear);
+    this.listenTo(mediaControl, BottomGearEvents.MEDIACONTROL_GEAR_RENDERED, this.addToBottomGear);
   }
 
   private init() {
@@ -196,33 +201,27 @@ export class ClapprNerdStats extends UICorePlugin {
         'For more info, visit: https://github.com/clappr/clappr-stats.');
       this.disable();
     } else {
-      Mousetrap.bind(this.shortcut, () => this.showOrHide());
+      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.$el.find('.speed-test-button').on('click', this.onSpeedTestClick.bind(this));
-      // this.$el.find('.close-speed-test').on('click', this.closeSpeedTest.bind(this));
-      // this.$el.find('.speed-test').hide();
     }
   }
 
-  private showOrHide(event?: MouseEvent) {
+  private toggle() {
     if (this.showing) {
-      this.hide(event);
+      this.hide();
     } else {
-      this.show(event);
+      this.show();
     }
   }
 
-  private show(event?: MouseEvent) {
+  private show() {
     this.core.$el.find(this.statsBoxElem).show();
     this.showing = true;
-    if (event) {
-      event.stopPropagation();
-    }
 
     this.refreshSpeedTest();
     initSpeedTest(this.customMetrics).then(() => {
@@ -233,13 +232,9 @@ export class ClapprNerdStats extends UICorePlugin {
     })
   }
 
-  private hide(event?: MouseEvent) {
+  private hide() {
     this.core.$el.find(this.statsBoxElem).hide();
     this.showing = false;
-    if (event) {
-      event.stopPropagation();
-    }
-
     stopSpeedtest();
   }
 
@@ -321,16 +316,16 @@ export class ClapprNerdStats extends UICorePlugin {
   }
 
   private addToBottomGear() {
-    this.core.mediaControl.$el?.find('.gear-options-list [data-nerd]').html(buttonHtml);
-
-    // this.core.$el.append(optionsList);
-    const $button = this.core.$el.find('.nerd-button');
+    const gear = this.core.getPlugin('media_control_gear') as BottomGear;
+    const $el = gear.getElement('nerd')
+    $el.html(buttonHtml)
+    const $button = $el.find('.nerd-button');
 
     $button.find('.stats-icon').html(statsIcon);
 
-    $button.on('click', () => {
-      // $optionsList.remove();
-      this.showOrHide();
+    $button.on('click', (e: MouseEvent) => {
+      e.stopPropagation();
+      this.toggle();
     });
   }
 

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

@@ -2,7 +2,7 @@ import { Container, ContainerPlugin, Events as CoreEvents, Log } from '@clappr/c
 import type { QualityLevel, TimePosition, TimeProgress } from '../../playback.types.js';
 import assert from 'assert';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import { TimerId } from '../../utils/types.js';
 import type { Metrics, MetricsUpdateFn } from './types.js';
 import { ClapprStatsEvents } from './types.js';

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

@@ -5,7 +5,7 @@
 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';
 

package/src/plugins/clips/Clips.ts

@@ -29,7 +29,7 @@ export class ClipsPlugin extends UICorePlugin {
   private svgMask: ZeptoResult | null = null;
 
   get name() {
-    return 'clips';
+    return 'media_control_clips';
   }
 
   override get attributes() {
@@ -154,7 +154,7 @@ export class ClipsPlugin extends UICorePlugin {
   }
 
   private setSVGMask(svg: string) {
-    this.core.mediaControl.setSVGMask(svg);
+    // this.core.mediaControl.setSVGMask(svg);
     if (this.svgMask) {
       this.svgMask.remove()
     }

package/src/plugins/context-menu/ContextMenu.ts

@@ -1,6 +1,6 @@
 import { UICorePlugin, Events, template, $, Core, Container } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import '../../../assets/context-menu/context_menu.scss';
 import templateHtml from '../../../assets/context-menu/context_menu.ejs';

package/src/plugins/disable-controls/DisableControls.ts

@@ -1,6 +1,6 @@
 import { UICorePlugin, Events } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 export class DisableControls extends UICorePlugin {
   get name() {

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

@@ -1,29 +1,48 @@
 import { Core, Events, Playback, UICorePlugin, template } from '@clappr/core';
+import assert from 'assert';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import dvrHTML from '../../../assets/dvr-controls/index.ejs';
 import '../../../assets/dvr-controls/dvr_controls.scss';
 
+/**
+ * Adds the DVR controls to the media control UI
+ * @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.
+ */
 export class DvrControls extends UICorePlugin {
-  get template() {
-    return template(dvrHTML);
-  }
+  private static readonly template = template(dvrHTML);
 
+  /**
+   * @internal
+   */
   get name() {
-    return 'dvr_controls';
+    return 'media_control_dvr';
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION };
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       'click .live-button': 'click'
     };
   }
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
       'class': 'dvr-controls',
@@ -36,6 +55,9 @@ export class DvrControls extends UICorePlugin {
     this.settingsUpdate();
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
     this.bindCoreEvents();
     this.bindContainerEvents();
@@ -86,9 +108,9 @@ export class DvrControls extends UICorePlugin {
     }
   }
 
-  click() {
-    const mediaControl = this.core.mediaControl;
-    const container = mediaControl.container;
+  private click() {
+    const mediaControl = this.core.getPlugin('media_control');
+    const container = this.core.activeContainer;
 
     if (!container.isPlaying()) {
       container.play();
@@ -99,9 +121,9 @@ export class DvrControls extends UICorePlugin {
     }
   }
 
-  settingsUpdate() {
+  private settingsUpdate() {
     // @ts-ignore
-    this.stopListening();
+    this.stopListening(); // TODO sort out
     this.core.mediaControl.$el.removeClass('live');
     if (this.shouldRender()) {
       this.render();
@@ -110,20 +132,26 @@ export class DvrControls extends UICorePlugin {
     this.bindEvents();
   }
 
-  shouldRender() {
+  private shouldRender() {
     const useDvrControls = this.core.options.useDvrControls === undefined || !!this.core.options.useDvrControls;
 
     return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
   }
 
+  /**
+   * @internal
+   */
   override render() {
-    this.$el.html(this.template({
+    this.$el.html(DvrControls.template({
       live: this.core.i18n.t('live'),
       backToLive: this.core.i18n.t('back_to_live')
     }));
     if (this.shouldRender()) {
-      this.core.mediaControl.$el.addClass('live');
-      this.core.mediaControl.$('.media-control-left-panel[data-media-control]').append(this.$el);
+      const mediaControl = this.core.mediaControl;
+      assert(mediaControl, 'media_control plugin is required');
+      // TODO don't tap into the $el directly
+      mediaControl.$el.addClass('live');
+      mediaControl.$('.media-control-left-panel[data-media-control]').append(this.$el);
     }
 
     return this;

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

@@ -1,7 +1,7 @@
 import { UICorePlugin, Events, template, PlayerError } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import type { TimerId, ZeptoResult } from '../../utils/types.js';
 
 import reloadIcon from '../../../assets/icons/old/reload.svg';
@@ -217,6 +217,7 @@ export class ErrorScreen extends UICorePlugin {
     if (err) {
       this.err = err;
     }
+    // TODO use container.disableMediaControl() instead
     this.core.mediaControl.disable();
     this.render();
     this.$el.show();

package/src/plugins/favicon/Favicon.ts

@@ -1,6 +1,6 @@
 import { CorePlugin, Events, $, Core, Container } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import { ZeptoResult } from '../../utils/types.js';
 
 import playIcon from '../../../assets/icons/new/play.svg';

package/src/plugins/google-analytics/GoogleAnalytics.ts

@@ -4,7 +4,7 @@
 
 import { Container, ContainerPlugin, Events } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 declare const _gaq: {
   push(args: string[]): void;

package/src/plugins/level-selector/LevelSelector.ts

@@ -2,8 +2,9 @@ import { Events, template, UICorePlugin } from '@clappr/core'
 import { reportError, trace } from '@gcorevideo/utils'
 
 import { type QualityLevel } from '../../playback.types.js'
-import { CLAPPR_VERSION } from '../build.js'
+import { CLAPPR_VERSION } from '../../build.js'
 import { ZeptoResult } from '../../utils/types.js'
+import { TemplateFunction } from '../types.js'
 
 import buttonHtml from '../../../assets/level-selector/button.ejs'
 import listHtml from '../../../assets/level-selector/list.ejs'
@@ -14,32 +15,31 @@ import checkIcon from '../../../assets/icons/new/check.svg'
 import '../../../assets/level-selector/style.scss'
 
 
-const T = 'plugins.level_selector'
+const T = 'plugins.media_control_level_selector'
 const VERSION = '2.19.4'
 
-type TemplateFunction = (data: Record<string, unknown>) => string
-
 /**
- * Allows to control the quality level of the playback.
+ * A {@link MediaControl | media control} plugin that provides a UI to control the quality level of the playback.
  * @beta
  *
  * @remarks
- * The plugin is rendered as a button in the gear menu.
+ * The plugin is rendered as a button in the {@link BottomGear | gear menu}.
  * When clicked, it shows a list of quality levels to choose from.
  *
  * Configuration options:
  *
- * - `labels`: The labels to show in the level selector. [vertical resolution]: string
+ * - `labels`: The labels to show in the level selector. [video resolution]: string
+ *
  * - `restrictResolution`: The maximum resolution to allow in the level selector.
  *
  * @example
  * ```ts
- * {
+ * new Player({
  *   levelSelector: {
  *     restrictResolution: 360,
- *     labels: { 360: '360p', 720: '720p' },
+ *     labels: { 360: 'SD', 720: 'HD' },
  *   },
- * }
+ * })
  * ```
  */
 export class LevelSelector extends UICorePlugin {
@@ -57,18 +57,30 @@ export class LevelSelector extends UICorePlugin {
 
   private listTemplate: TemplateFunction | null = null
 
+  /**
+   * @internal
+   */
   get name() {
-    return 'level_selector'
+    return 'media_control_level_selector'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION }
   }
 
+  /**
+   * @internal
+   */
   static get version() {
     return VERSION
   }
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
       class: this.name,
@@ -88,6 +100,9 @@ export class LevelSelector extends UICorePlugin {
     }
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
     this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, () => this.bindPlaybackEvents())
     this.listenTo(this.core, 'gear:rendered', this.render)
@@ -164,6 +179,9 @@ export class LevelSelector extends UICorePlugin {
     return !!(this.levels && this.levels.length > 1)
   }
 
+  /**
+   * @internal
+   */
   override render() {
     if (!this.shouldRender()) {
       return this
@@ -186,9 +204,10 @@ export class LevelSelector extends UICorePlugin {
         hdIcon,
       })
       this.$el.html(html)
-      this.core.mediaControl.$el
+      const mediaControl = this.core.getPlugin('media_control')
+      mediaControl.getElement('bottomGear')
         ?.find('.gear-options-list [data-quality]')
-        .html(this.el)
+        ?.html(this.el)
     }
   }
 
@@ -205,7 +224,8 @@ export class LevelSelector extends UICorePlugin {
       removeAuto: this.removeAuto,
     })
     this.$el.html(html)
-    this.core.mediaControl.$el?.find('.gear-wrapper').html(this.el)
+    const mediaControl = this.core.getPlugin('media_control')
+    mediaControl.getElement('bottomGear')?.find('.gear-wrapper').html(this.el)
   }
 
   private get maxLevel() {