@gcorevideo/player 2.19.11 → 2.19.13

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

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

@@ -43,6 +43,7 @@ describe('LevelSelector', () => {
     beforeEach(() => {
       const activeContainer = createContainer()
       activePlayback = createPlayback()
+      let mediaControl: UICorePlugin | null = null
       core = Object.assign(new EventLite(), {
         activeContainer,
         activePlayback,
@@ -52,8 +53,14 @@ describe('LevelSelector', () => {
             labels: { 360: '360p', 720: 'HD' },
           },
         },
+        getPlugin: vi.fn().mockImplementation((name: string) => {
+          if (name === 'media_control') {
+            return mediaControl
+          }
+          return null
+        }),
       })
-      core.mediaControl = new UICorePlugin(core)
+      mediaControl = createMediaControl(core)
       levelSelector = new LevelSelector(core)
     })
     describe('initially', () => {
@@ -110,6 +117,7 @@ describe('LevelSelector', () => {
     beforeEach(() => {
       const activeContainer = createContainer()
       activePlayback = createPlayback()
+      let mediaControl: UICorePlugin | null = null
       core = Object.assign(new EventLite(), {
         activeContainer,
         activePlayback,
@@ -119,8 +127,14 @@ describe('LevelSelector', () => {
             labels: { 360: '360p', 720: '720p' },
           },
         },
+        getPlugin: vi.fn().mockImplementation((name: string) => {
+          if (name === 'media_control') {
+            return mediaControl
+          }
+          return null
+        }),
       })
-      core.mediaControl = new UICorePlugin(core)
+      mediaControl = createMediaControl(core)
       levelSelector = new LevelSelector(core)
     })
     describe('basically', () => {
@@ -218,3 +232,9 @@ expect.extend({
     }
   }
 })
+
+function createMediaControl(core: any) {
+  const mediaControl = new UICorePlugin(core)
+  mediaControl.getElement = vi.fn().mockReturnValue(null)
+  return mediaControl
+}

package/src/plugins/logo/Logo.ts

@@ -1,6 +1,6 @@
 import { UIContainerPlugin, Events, template as t, Container } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import { calculateSize } from './utils/index.js';
 import { ZeptoResult } from '../../utils/types.js';
 

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

@@ -13,12 +13,12 @@ import {
   $,
   Core,
 } from '@clappr/core'
-import { reportError } from '@gcorevideo/utils';
+import { reportError } from '@gcorevideo/utils'
 import { type TimeProgress } from '../../playback.types.js'
 
 import { Kibo } from '../kibo/index.js'
 
-import { CLAPPR_VERSION } from '../build.js'
+import { CLAPPR_VERSION } from '../../build.js'
 import { ZeptoResult } from '../../utils/types.js'
 import { getPageX, isFullscreen } from '../utils.js'
 
@@ -35,9 +35,15 @@ import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg'
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg'
 
 /**
+ * Media control elements, mount points for additional plugins
  * @beta
  */
-export type MediaControlElement = 'clipText' | 'pip' | 'seekBarContainer'
+export type MediaControlElement =
+  | 'bottomGear'
+  | 'clipText'
+  | 'pip'
+  | 'playbackRate'
+  | 'seekBarContainer'
 
 const T = 'plugins.media_control'
 
@@ -67,11 +73,17 @@ type DisabledClickable = {
 }
 
 /**
- * The MediaControl is responsible for displaying the Player controls.
+ * The MediaControl provides a foundation for developing custom media controls UI.
  * @beta
  * @remarks
- * This plugin provides a foundation for developing a media controls UI via additional plugins.
  * The methods exposed are to be used by the other plugins that extend the media control UI.
+ * The plugin registration should be arranged so that MediaControl is initialized before every other plugin that depends on it.
+ * @example
+ * ```ts
+ * Player.registerPlugin(MediaControl) // <--- This must go first
+ * Player.registerPlugin(LevelSelector) // a media control plugin
+ * Player.registerPlugin(NerdStats) // another media control plugin
+ * ```
  */
 export class MediaControl extends UICorePlugin {
   private advertisementPlaying = false
@@ -112,8 +124,6 @@ export class MediaControl extends UICorePlugin {
 
   private settings: Record<string, unknown> = {}
 
-  private svgMask: ZeptoResult | null = null
-
   private userDisabled = false
 
   private userKeepVisible = false
@@ -170,29 +180,46 @@ export class MediaControl extends UICorePlugin {
 
   private static readonly template = template(mediaControlHTML)
 
+  /**
+   * @internal
+   */
   get name() {
     return 'media_control'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION }
   }
 
-  get disabled() {
+  private get disabled() {
     const playbackIsNOOP =
       this.container && this.container.getPlaybackType() === Playback.NO_OP
 
     return this.userDisabled || playbackIsNOOP
   }
 
+  /**
+   * @internal
+   * @deprecated
+   */
   get container() {
     return this.core && this.core.activeContainer
   }
 
+  /**
+   * @internal
+   * @deprecated
+   */
   get playback() {
     return this.core && this.core.activePlayback
   }
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
       class: 'media-control-skin-1',
@@ -200,6 +227,9 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       'click [data-play]': 'play',
@@ -231,11 +261,11 @@ export class MediaControl extends UICorePlugin {
   }
 
   /**
-   * Current volume
+   * Current volume [0..100]
    */
-  get volume() {
-    return this.container && this.container.isReady
-      ? this.container.volume
+  get volume(): number {
+    return this.core.activeContainer.isReady
+      ? this.core.activeContainer.volume
       : this.intendedVolume
   }
 
@@ -256,7 +286,7 @@ export class MediaControl extends UICorePlugin {
 
     this.userDisabled = false
     if (
-      (this.container && this.container.mediaControlDisabled) ||
+      this.core.activeContainer.mediaControlDisabled ||
       this.options.chromeless
     ) {
       this.disable()
@@ -269,6 +299,9 @@ export class MediaControl extends UICorePlugin {
     $(document).bind('touchmove', this.updateDrag)
   }
 
+  /**
+   * @internal
+   */
   override getExternalInterface() {
     return {
       setVolume: this.setVolume,
@@ -276,6 +309,9 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
     // @ts-ignore
     this.stopListening()
@@ -318,7 +354,7 @@ export class MediaControl extends UICorePlugin {
     // }
   }
 
-  bindContainerEvents() {
+  private bindContainerEvents() {
     if (!this.container) {
       return
     }
@@ -382,6 +418,9 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  /**
+   * Disables the plugin and unmounts its UI
+   */
   override disable() {
     this.userDisabled = true
     this.hide()
@@ -389,6 +428,9 @@ export class MediaControl extends UICorePlugin {
     this.$el.hide()
   }
 
+  /**
+   * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
+   */
   override enable() {
     if (this.options.chromeless) {
       return
@@ -398,27 +440,6 @@ export class MediaControl extends UICorePlugin {
     this.show()
   }
 
-  /**
-   * Start the playback
-   */
-  play() {
-    this.container && this.container.play()
-  }
-
-  /**
-   * Pause the playback
-   */
-  pause() {
-    this.container && this.container.pause()
-  }
-
-  /**
-   * Stop the playback
-   */
-  stop() {
-    this.container && this.container.stop()
-  }
-
   /**
    * Set the initial volume, which is preserved when playback is interrupted by an advertisement
    */
@@ -1053,14 +1074,31 @@ export class MediaControl extends UICorePlugin {
   /**
    * Get a media control element DOM node
    * @param name - The name of the media control element
-   * @returns The DOM node to render the media control element
+   * @returns The DOM node to render to or extend
+   * @remarks
+   * Use this method to render custom media control UI in a plugin
+   * @example
+   * ```ts
+   * class MyPlugin extends UICorePlugin {
+   *   override render() {
+   *     const mediaControl = this.core.getPlugin('media_control')
+   *     const clipText = mediaControl.getElement('clipText')
+   *     clipText?.el.text('Here we go')
+   *     return this
+   *   }
+   * }
+   * ```
    */
   getElement(name: MediaControlElement): ZeptoResult | null {
     switch (name) {
       case 'clipText':
         return this.$clipText
+      case 'bottomGear':
+        return this.$bottomGear
       case 'pip':
         return this.$pip
+      case 'playbackRate':
+        return this.$playbackRate
       case 'seekBarContainer':
         return this.$seekBarContainer
     }
@@ -1223,6 +1261,9 @@ export class MediaControl extends UICorePlugin {
       $(element).find('svg path').css({ fill: this.buttonsColor })
   }
 
+  /**
+   * @internal
+   */
   override destroy() {
     $(document).unbind('mouseup', this.stopDrag)
     $(document).unbind('mousemove', this.updateDrag)
@@ -1237,6 +1278,9 @@ export class MediaControl extends UICorePlugin {
     this.trigger(Events.MEDIACONTROL_OPTIONS_CHANGE)
   }
 
+  /**
+   * @internal
+   */
   override render() {
     const timeout = this.options.hideMediaControlDelay || 2000
 
@@ -1343,11 +1387,6 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
-  // TODO
-  setMuted(value: boolean) {
-    this.container.options.mute = value
-  }
-
   private static getPageX(event: MouseEvent | TouchEvent): number {
     return getPageX(event)
   }
@@ -1367,7 +1406,7 @@ export class MediaControl extends UICorePlugin {
   }
 
   /**
-   * Enable the control button
+   * Enable the user interaction disabled earlier
    */
   enableControlButton() {
     this.disabledClickableList.forEach((element) => {
@@ -1376,7 +1415,7 @@ export class MediaControl extends UICorePlugin {
   }
 
   /**
-   * Disable the control button
+   * Disable the user interaction for the control buttons
    */
   disabledControlButton() {
     this.disabledClickableList.forEach((element) => {
@@ -1393,7 +1432,6 @@ export class MediaControl extends UICorePlugin {
   }
 }
 
-// TODO drop?
 MediaControl.extend = function (properties) {
   return extend(MediaControl, properties)
 }

package/src/plugins/multi-camera/MultiCamera.ts

@@ -1,7 +1,7 @@
 import { Browser, Core, Events, Playback, template, UICorePlugin } from '@clappr/core';
 import { reportError, trace } from '@gcorevideo/utils';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import pluginHtml from '../../../assets/multi-camera/multicamera.ejs';
 import '../../../assets/multi-camera/style.scss';
@@ -23,7 +23,7 @@ type MediaSourceInfo = {
 
 const VERSION = '0.0.1';
 
-const T = 'plugins.multicamera';
+const T = 'plugins.media_control_multicamera';
 
 export class MultiCamera extends UICorePlugin {
   private currentCamera: MediaSourceInfo | null = null;
@@ -37,7 +37,7 @@ export class MultiCamera extends UICorePlugin {
   private noActiveStreams = false;
 
   get name() {
-    return 'multicamera';
+    return 'media_control_multicamera';
   }
 
   get supportedVersion() {