@gcorevideo/player 2.19.12 → 2.19.14

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,16 @@ 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' // an alias of gear
+  | 'clipText'
+  | 'gear'
+  | 'pip'
+  | 'playbackRate'
+  | 'seekBarContainer'
 
 const T = 'plugins.media_control'
 
@@ -67,11 +74,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 +125,6 @@ export class MediaControl extends UICorePlugin {
 
   private settings: Record<string, unknown> = {}
 
-  private svgMask: ZeptoResult | null = null
-
   private userDisabled = false
 
   private userKeepVisible = false
@@ -170,29 +181,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 +228,9 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       'click [data-play]': 'play',
@@ -231,11 +262,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 +287,6 @@ export class MediaControl extends UICorePlugin {
 
     this.userDisabled = false
     if (
-      (this.container && this.container.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,32 @@ 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':
+      case 'gear':
+        return this.$bottomGear
       case 'pip':
         return this.$pip
+      case 'playbackRate':
+        return this.$playbackRate
       case 'seekBarContainer':
         return this.$seekBarContainer
     }
@@ -1223,6 +1262,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 +1279,9 @@ export class MediaControl extends UICorePlugin {
     this.trigger(Events.MEDIACONTROL_OPTIONS_CHANGE)
   }
 
+  /**
+   * @internal
+   */
   override render() {
     const timeout = this.options.hideMediaControlDelay || 2000
 
@@ -1343,11 +1388,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 +1407,7 @@ export class MediaControl extends UICorePlugin {
   }
 
   /**
-   * Enable the control button
+   * Enable the user interaction disabled earlier
    */
   enableControlButton() {
     this.disabledClickableList.forEach((element) => {
@@ -1376,7 +1416,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 +1433,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() {

package/src/plugins/picture-in-picture/PictureInPicture.ts

@@ -1,7 +1,7 @@
 import { UICorePlugin, template, Events } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import pipIcon from '../../../assets/icons/new/pip.svg';
 import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
@@ -9,11 +9,11 @@ import '../../../assets/picture-in-picture/button.scss';
 
 const VERSION = '0.0.1';
 
-const T = `plugins.picture_in_picture`;
+const T = `plugins.media_control_pip`;
 
 export class PictureInPicture extends UICorePlugin {
   get name() {
-    return 'picture_in_picture';
+    return 'media_control_pip';
   }
 
   get supportedVersion() {

package/src/plugins/playback-rate/PlaybackRate.ts

@@ -1,6 +1,6 @@
 import { Events, UICorePlugin, Playback, template } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import type { ZeptoResult } from '../../utils/types.js';
 
 import pluginHtml from '../../../assets/playback-rate/playback-rate-selector.ejs';
@@ -28,6 +28,7 @@ const DEFAULT_PLAYBACK_RATES = [
 
 const DEFAULT_PLAYBACK_RATE = '1.0';
 
+// TODO
 const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
 
 export class PlaybackRate extends UICorePlugin {
@@ -40,7 +41,7 @@ export class PlaybackRate extends UICorePlugin {
   private selectedRate: string = DEFAULT_PLAYBACK_RATE;
 
   get name() {
-    return 'playback_rate';
+    return 'media_control_playback_rate';
   }
 
   get supportedVersion() {
@@ -265,5 +266,3 @@ export class PlaybackRate extends UICorePlugin {
     currentLevelElement.find('a').addClass('gcore-skin-active');
   }
 }
-
-// PlaybackRate.MEDIACONTROL_PLAYBACKRATE = 'playbackRate';

package/src/plugins/poster/Poster.ts

@@ -13,7 +13,7 @@ import {
 } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
 
-import { CLAPPR_VERSION } from '../build.js'
+import { CLAPPR_VERSION } from '../../build.js'
 import type { ZeptoResult } from '../../utils/types.js'
 
 import '../../../assets/poster/poster.scss'
@@ -23,6 +23,33 @@ import { PlaybackError } from '../../playback.types.js'
 
 const T = 'plugins.poster_custom'
 
+/**
+ * Displays a poster image in the background and a big play button on top when playback is stopped
+ * @beta
+ * @remarks
+ * When the playback is stopped, media control UI is disabled.
+ *
+ * Configuration options:
+ *
+ * - `poster.custom` - custom CSS background
+ *
+ * - `poster.showForNoOp` - whether to show the poster when the playback is not started
+ *
+ * - `poster.url` - the URL of the poster image
+ *
+ * - `poster.showOnVideoEnd` - whether to show the poster when the playback is ended
+ *
+ * @example
+ * ```ts
+ * new Player({
+ *  ...
+ *  poster: {
+ *    showForNoOp: true,
+ *    url: 'https://via.placeholder.com/150.png',
+ *  }
+ * })
+ * ```
+ */
 export class Poster extends UIContainerPlugin {
   private hasFatalError = false
 
@@ -34,27 +61,26 @@ export class Poster extends UIContainerPlugin {
 
   private $playWrapper: ZeptoResult | null = null
 
+  /**
+   * @internal
+   */
   get name() {
     return 'poster_custom'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION }
   }
 
-  get template() {
-    return template(posterHTML)
-  }
+  private static readonly template = template(posterHTML)
 
-  get shouldRender() {
+  private get shouldRender() {
     if (!this.enabled) {
       return false
     }
-    // const showOnError = this.options.poster?.showOnError !== false
-    trace(`${T} shouldRender`, {
-      hasFatalError: this.hasFatalError,
-    })
-
     const showForNoOp = !!this.options.poster?.showForNoOp
     return (
       this.container.playback.name !== 'html_img' &&
@@ -63,6 +89,9 @@ export class Poster extends UIContainerPlugin {
     )
   }
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
       class: 'player-poster',
@@ -70,16 +99,22 @@ export class Poster extends UIContainerPlugin {
     }
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       click: 'clicked',
     }
   }
 
-  get showOnVideoEnd() {
+  private get showOnVideoEnd() {
     return this.options.poster?.showOnVideoEnd !== false
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
     this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop)
     this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay)
@@ -97,12 +132,18 @@ export class Poster extends UIContainerPlugin {
     this.listenTo(this.container, Events.PLAYBACK_PLAY_INTENT, this.onPlayIntent)
   }
 
+  /**
+   * Reenables earlier disabled plugin
+   */
   override enable() {
     super.enable()
     this.hasStartedPlaying = this.container.playback.isPlaying()
     this.update()
   }
 
+  /**
+   * Disables the plugin, unmounting it from the DOM
+   */
   override disable() {
     trace(`${T} disable`)
     this.hasStartedPlaying = false
@@ -252,12 +293,15 @@ export class Poster extends UIContainerPlugin {
     }
   }
 
+  /**
+   * @internal
+   */
   override render() {
     if (!this.shouldRender) {
       return this
     }
 
-    this.$el.html(this.template())
+    this.$el.html(Poster.template())
 
     const isRegularPoster =
       this.options.poster && this.options.poster.custom === undefined
@@ -291,6 +335,9 @@ export class Poster extends UIContainerPlugin {
     return this
   }
 
+  /**
+   * @internal
+   */
   override destroy() {
     this.container.$el.removeClass('container-with-poster-clickable')
     return this

package/src/plugins/seek-time/SeekTime.ts

@@ -5,7 +5,7 @@
 import { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core';
 import { TimeUpdate } from '../../playback.types.js';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import seekTimeHTML from '../../../assets/seek-time/seek-time.html';
 import '../../../assets/seek-time/seek-time.scss';
@@ -15,7 +15,7 @@ const { formatTime } = Utils;
 
 export class SeekTime extends UICorePlugin {
   get name() {
-    return 'seek_time';
+    return 'media_control_seek_time';
   }
 
   get supportedVersion() {

package/src/plugins/share/Share.ts

@@ -1,6 +1,6 @@
 import { Container, Events, UICorePlugin, template } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import pluginHtml from '../../../assets/share/share.ejs';
 import '../../../assets/share/style.scss';
@@ -15,7 +15,7 @@ export class Share extends UICorePlugin {
   private container: Container | null = null;
 
   get name() {
-    return 'share';
+    return 'media_control_share';
   }
 
   get supportedVersion() {

package/src/plugins/skip-time/SkipTime.ts

@@ -1,6 +1,6 @@
 import { UICorePlugin as UICorePluginOriginal, Browser, Playback, Events, template } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import pluginHtml from '../../../assets/skip-time/skip-time.ejs';
 import '../../../assets/skip-time/style.scss';

package/src/plugins/source-controller/SourceController.ts

@@ -12,7 +12,7 @@ import {
 } from '../../types.js'
 import { trace } from '@gcorevideo/utils'
 
-import { CLAPPR_VERSION } from '../build'
+import { CLAPPR_VERSION } from '../../build.js'
 
 const T = 'plugins.source_controller'