@gcorevideo/player 2.20.1 → 2.20.3

package/src/plugins/clips/Clips.ts

@@ -1,115 +1,158 @@
-import { Container, Events, UICorePlugin, $ } from '@clappr/core';
+import { Container, Events, UICorePlugin, $ } from '@clappr/core'
 
-import { TimeProgress } from '../../playback.types.js';
-import type { ZeptoResult } from '../../utils/types.js';
-import { strtimeToMiliseconds } from '../utils.js';
-import '../../../assets/clips/clips.scss';
+import { TimeProgress } from '../../playback.types.js'
+import type { ZeptoResult } from '../../utils/types.js'
+import { strtimeToMiliseconds } from '../utils.js'
+import '../../../assets/clips/clips.scss'
+import assert from 'assert'
 
 type ClipDesc = {
-  start: number;
-  text: string;
-  end: number;
-  index: number;
+  start: number
+  text: string
+  end: number
+  index: number
 }
 
 type ClipItem = {
-  start: number;
-  text: string;
+  start: number
+  text: string
 }
 
+/**
+ * Configuration options
+ */
+export interface ClipsPluginSettings {
+  /**
+   * The text to display over the seekbar.
+   */
+  text: string
+}
+
+/**
+ * Adds a behavior of showing a text over the seekbar to indicate the current clip.
+ * @beta
+ * @remarks
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * Configuration options - {@link ClipsPluginSettings}
+ */
 export class ClipsPlugin extends UICorePlugin {
   private clips: Map<number, ClipDesc> = new Map()
 
-  private duration: number = 0;
+  private duration: number = 0
 
-  private durationGetting = false;
+  private durationGetting = false
 
-  private _oldContainer: Container | undefined;
+  private _oldContainer: Container | undefined
 
-  private svgMask: ZeptoResult | null = null;
+  private svgMask: ZeptoResult | null = null
 
+  /**
+   * @internal
+   */
   get name() {
-    return 'media_control_clips';
+    return 'clips'
   }
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
-      'class': this.name
-    };
+      class: this.name,
+    }
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
-    this.listenToOnce(this.core, Events.CORE_READY, this._onCoreReady);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged);
-    this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
+    const mediaControl = this.core.getPlugin('media_control')
+    assert(mediaControl, 'media_control plugin is required')
+    this.listenToOnce(this.core, Events.CORE_READY, this._onCoreReady)
+    // TODO listen to CORE_ACTIVE_CONTAINER_CHANGED
+    this.listenTo(
+      mediaControl,
+      Events.MEDIACONTROL_CONTAINERCHANGED,
+      this._onMediaControlContainerChanged,
+    )
+    this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize)
   }
 
   private _onCoreReady() {
     if (!this.options.clips) {
-      this.destroy();
+      this.destroy()
 
-      return;
+      return
     }
 
-    this.parseClips();
-  }
-
-  unbindEvents() {
-    // @ts-ignore
-    this.stopListening(this.core, Events.CORE_READY);
-    // @ts-ignore
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
+    this.parseClips()
   }
 
   private _onMediaControlContainerChanged() {
-    this._bindContainerEvents();
+    this._bindContainerEvents()
   }
 
   private playerResize() {
-    this.durationGetting = false;
+    this.durationGetting = false
     if (this.durationGetting) {
-      this.makeSvg(this.duration);
+      this.makeSvg(this.duration)
     }
   }
 
   private _bindContainerEvents() {
     if (this._oldContainer) {
-      this.stopListening(this._oldContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+      this.stopListening(
+        this._oldContainer,
+        Events.CONTAINER_TIMEUPDATE,
+        this.onTimeUpdate,
+      )
     }
 
-    this._oldContainer = this.core.mediaControl.container;
-    this.durationGetting = false;
-    this.listenTo(this.core.mediaControl.container, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+    const mediaControl = this.core.getPlugin('media_control')
+    this._oldContainer = mediaControl.container
+    this.durationGetting = false
+    this.listenTo(
+      mediaControl.container,
+      Events.CONTAINER_TIMEUPDATE,
+      this.onTimeUpdate,
+    )
   }
 
   private onTimeUpdate(event: TimeProgress) {
     if (!this.durationGetting) {
-      this.duration = event.total;
-      this.makeSvg(event.total);
-      this.durationGetting = true;
+      this.duration = event.total
+      this.makeSvg(event.total)
+      this.durationGetting = true
     }
 
     for (const value of this.clips.values()) {
       if (event.current >= value.start && event.current < value.end) {
-        this.setClipText(value.text);
-        break;
+        this.setClipText(value.text)
+        break
       }
     }
   }
 
   private parseClips() {
-    const textArr = this.options.clips.text.split('\n');
+    const textArr = this.options.clips.text.split('\n')
 
-    const clipsArr = textArr.map((val: string) => {
-      const matchRes = val.match(/(\d+:\d+|:\d+) (.+)/i);
+    const clipsArr = textArr
+      .map((val: string) => {
+        const matchRes = val.match(/(\d+:\d+|:\d+) (.+)/i)
 
-      return matchRes ? {
-        start: strtimeToMiliseconds(matchRes[1]),
-        text: matchRes[2],
-      } : null;
-    }).filter((clip: ClipItem | null) => clip !== null);
+        return matchRes
+          ? {
+              start: strtimeToMiliseconds(matchRes[1]),
+              text: matchRes[2],
+            }
+          : null
+      })
+      .filter((clip: ClipItem | null) => clip !== null)
 
-    clipsArr.sort((a: ClipDesc, b: ClipDesc) => a.start - b.start);
+    clipsArr.sort((a: ClipDesc, b: ClipDesc) => a.start - b.start)
 
     clipsArr.forEach((clip: ClipDesc, index: number) => {
       this.clips.set(clip.start, {
@@ -117,39 +160,49 @@ export class ClipsPlugin extends UICorePlugin {
         start: clip.start,
         text: clip.text,
         end: clipsArr[index + 1] ? clipsArr[index + 1].start : null,
-      });
-    });
+      })
+    })
   }
 
+  /**
+   * Returns the text of the current clip.
+   * @param time - The current time of the player.
+   * @returns The text of the current clip.
+   */
   getText(time: number) {
     for (const [key, value] of this.clips.entries()) {
       if (time >= value.start && time < value.end) {
-        return value.text;
+        return value.text
       }
     }
-    return '';
+    return ''
   }
 
-  makeSvg(duration: number) {
-    let svg = '<svg width="0" height="0">\n' + '<defs>\n' + '<clipPath id="myClip">\n';
-    const widthOfSeek = this.core.mediaControl.container.$el.width();
-    let finishValue = 0;
+  private makeSvg(duration: number) {
+    let svg =
+      '<svg width="0" height="0">\n' + '<defs>\n' + '<clipPath id="myClip">\n'
+    const widthOfSeek = this.core.activeContainer.$el.width()
+    let finishValue = 0
 
-    this.clips.forEach(val => {
-      let end = val.end;
+    this.clips.forEach((val) => {
+      let end = val.end
 
       if (!end) {
-        end = val.end = duration;
+        end = val.end = duration
       }
 
-      const widthChunk = (end - val.start) * widthOfSeek / duration;
+      const widthChunk = ((end - val.start) * widthOfSeek) / duration
 
-      svg += `<rect x="${finishValue}" y="0" width="${widthChunk - 2}" height="30"/>\n`;
-      finishValue += widthChunk;
-    });
+      svg += `<rect x="${finishValue}" y="0" width="${
+        widthChunk - 2
+      }" height="30"/>\n`
+      finishValue += widthChunk
+    })
 
-    svg += `<rect x="${finishValue}" y="0" width="${widthOfSeek - finishValue}" height="30"/>\n`;
-    svg += '</clipPath>' + '</defs>' + '</svg>';
+    svg += `<rect x="${finishValue}" y="0" width="${
+      widthOfSeek - finishValue
+    }" height="30"/>\n`
+    svg += '</clipPath>' + '</defs>' + '</svg>'
     this.setSVGMask(svg)
   }
 
@@ -159,7 +212,9 @@ export class ClipsPlugin extends UICorePlugin {
       this.svgMask.remove()
     }
 
-    const $seekBarContainer = this.core.mediaControl.getElement('seekBarContainer')
+    const mediaControl = this.core.getPlugin('media_control')
+    const $seekBarContainer =
+      mediaControl.getElement('seekBarContainer')
     if ($seekBarContainer?.get(0)) {
       $seekBarContainer.addClass('clips')
     }
@@ -169,7 +224,8 @@ export class ClipsPlugin extends UICorePlugin {
   }
 
   private setClipText(text: string) {
-    const $clipText = this.core.mediaControl.getElement('clipText')
+    const mediaControl = this.core.getPlugin('media_control')
+    const $clipText = mediaControl.getElement('clipText')
     if ($clipText && text) {
       $clipText.show()
       $clipText.text(`${text}`)

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

@@ -1,134 +1,163 @@
-import { UICorePlugin, Events, template, $, Core, Container } from '@clappr/core';
-
-import { CLAPPR_VERSION } from '../../build.js';
-
-import '../../../assets/context-menu/context_menu.scss';
-import templateHtml from '../../../assets/context-menu/context_menu.ejs';
+import {
+  UICorePlugin,
+  Events,
+  template,
+  $,
+  Core,
+  Container,
+  UIContainerPlugin,
+} from '@clappr/core'
+
+import { CLAPPR_VERSION } from '../../build.js'
+
+import '../../../assets/context-menu/context_menu.scss'
+import templateHtml from '../../../assets/context-menu/context_menu.ejs'
+import { version } from '../../version.js'
 
 type MenuOption = {
-  label: string;
-  name: string;
+  label: string
+  name: string
 }
 
-export class ContextMenu extends UICorePlugin {
-  private _label: string = '';
+export interface ContextMenuPluginSettings {
+  label?: string
+  url?: string
+  preventShowContextMenu?: boolean
+}
 
-  private _url: string = '';
+/**
+ * Displays a small context menu when clicked on the player container.
+ * @beta
+ * @remarks
+ * Configuration options - {@link ContextMenuPluginSettings}
+ */
+export class ContextMenu extends UIContainerPlugin {
+  private _label: string = ''
 
-  private container: Container | null = null;
+  private _url: string = ''
 
-  private menuOptions: MenuOption[] = [];
+  private menuOptions: MenuOption[] = []
 
+  /**
+   * @internal
+   */
   get name() {
-    return 'context_menu';
+    return 'context_menu'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
+  /**
+   * @internal
+   */
   override get attributes() {
-    return { 'class': 'context-menu' };
-  }
-
-  get mediaControl() {
-    return this.core.mediaControl;
+    return { class: 'context-menu' }
   }
 
-  get template() {
-    return template(templateHtml);
-  }
+  private static readonly template = template(templateHtml)
 
-  get label() {
-    return this._label || 'Gcore player ver. ' + process.env.VERSION;
+  private get label() {
+    return this._label || 'Gcore player ver. ' + version().gplayer
   }
 
-  get url() {
-    return this._url || 'https://gcore.com/';
+  private get url() {
+    return this._url || 'https://gcore.com/'
   }
 
-  get exposeVersion() {
+  private get exposeVersion() {
     return {
       label: this.label,
-      name: 'version'
-    };
+      name: 'version',
+    }
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
-      'click [data-version]': 'onOpenMainPage'
-    };
+      'click [data-version]': 'onOpenMainPage',
+    }
   }
 
-  constructor(core: Core) {
-    super(core);
+  constructor(container: Container) {
+    super(container)
     if (this.options.contextMenu && this.options.contextMenu.label) {
-      this._label = this.options.contextMenu.label;
+      this._label = this.options.contextMenu.label
     }
     if (this.options.contextMenu && this.options.contextMenu.url) {
-      this._url = this.options.contextMenu.url;
+      this._url = this.options.contextMenu.url
     }
-    this.render();
-    this.bindEvents();
+    this.render()
+    this.bindEvents()
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
-    if (this.mediaControl) {
-      this.listenTo(this.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.containerChanged);
-
-      if (this.container) {
-        this.listenTo(this.container, Events.CONTAINER_CONTEXTMENU, this.toggleContextMenu);
-        this.listenTo(this.container, Events.CONTAINER_CLICK, this.hide);
-      }
-    }
-    $('body').on('click', this.hide.bind(this));
-  }
-
+    this.listenTo(
+      this.container,
+      Events.CONTAINER_CONTEXTMENU,
+      this.toggleContextMenu,
+    )
+    this.listenTo(this.container, Events.CONTAINER_CLICK, this.hide)
+    $('body').on('click', this.hideOnBodyClick)
+  }
+
+  /**
+   * @internal
+   */
   override destroy() {
-    $('body').off('click', this.hide.bind(this));
-    // @ts-ignore
-    this.stopListening();
-    return super.destroy();
-  }
-
-  private containerChanged() {
-    this.container = this.core.activeContainer;
-    // @ts-ignore
-    this.stopListening();
-    this.bindEvents();
+    $('body').off('click', this.hideOnBodyClick)
+    return super.destroy()
   }
 
   private toggleContextMenu(event: MouseEvent) {
-    event.preventDefault();
-    const offset = this.container?.$el.offset();
+    event.preventDefault()
+    const offset = this.container?.$el.offset()
 
-    this.show(event.pageY - offset.top, event.pageX - offset.left);
+    this.show(event.pageY - offset.top, event.pageX - offset.left)
   }
 
   private show(top: number, left: number) {
-    this.hide();
-    if (this.options.contextMenu && this.options.contextMenu.preventShowContextMenu) {
-      return;
+    this.hide()
+    if (
+      this.options.contextMenu &&
+      this.options.contextMenu.preventShowContextMenu
+    ) {
+      return
     }
-    this.$el.css({ top, left });
-    this.$el.show();
+    this.$el.css({ top, left })
+    this.$el.show()
   }
 
   private hide() {
-    this.$el.hide();
+    this.$el.hide()
   }
 
   private onOpenMainPage() {
-    window.open(this.url, '_blank');
+    window.open(this.url, '_blank')
   }
 
+  /**
+   * @internal
+   */
   override render() {
-    this.menuOptions = [this.exposeVersion];
-    this.$el.html(this.template({ options: this.menuOptions }));
-    this.core.$el.append(this.$el);
-    this.hide();
-    this.disable();
+    this.menuOptions = [this.exposeVersion]
+    this.$el.html(ContextMenu.template({ options: this.menuOptions }))
+    this.container.$el.append(this.$el) // TODO append to the container, turn into a container plugin
+    this.hide()
+
+    return this
+  }
 
-    return this;
+  private hideOnBodyClick = () => {
+    this.hide()
   }
 }

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

@@ -13,7 +13,7 @@ import '../../../assets/dvr-controls/dvr_controls.scss';
  * @remarks
  * Depends on:
  *
- * - {@link MediaControl | media_control}
+ * - {@link MediaControl}
  *
  * The plugin renders the live stream indicator and the DVR seek bar, if DVR is enabled, in the media control UI.
  */
@@ -24,7 +24,7 @@ export class DvrControls extends UICorePlugin {
    * @internal
    */
   get name() {
-    return 'media_control_dvr';
+    return 'dvr_controls';
   }
 
   /**
@@ -62,35 +62,16 @@ export class DvrControls extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    this.bindCoreEvents();
-    this.bindContainerEvents();
-
-    if (this.core.activeContainer) {
-      this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.dvrChanged);
-    }
-  }
-
-  private bindCoreEvents() {
-    if (this.core.mediaControl.settings) {
-      this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.containerChanged);
-      this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.settingsUpdate);
-      this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render);
-    } else {
-      setTimeout(() => this.bindCoreEvents(), 100);
-    }
+    const mediaControl = this.core.getPlugin('media_control');
+    assert(mediaControl, 'media_control plugin is required');
+    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.settingsUpdate);
+    this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render);
+    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
   }
 
   private bindContainerEvents() {
-    if (this.core.activeContainer) {
-      this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
-      this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.dvrChanged);
-    }
-  }
-
-  private containerChanged() {
-    // @ts-ignore
-    this.stopListening();
-    this.bindEvents();
+    this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.dvrChanged);
   }
 
   private dvrChanged(dvrEnabled: boolean) {
@@ -127,7 +108,7 @@ export class DvrControls extends UICorePlugin {
   private settingsUpdate() {
     // @ts-ignore
     this.stopListening(); // TODO sort out
-    this.core.mediaControl.$el.removeClass('live');
+    this.core.getPlugin('media_control').$el.removeClass('live'); // TODO don't access directly
     if (this.shouldRender()) {
       this.render();
       this.$el.click(() => this.click());
@@ -150,7 +131,7 @@ export class DvrControls extends UICorePlugin {
       backToLive: this.core.i18n.t('back_to_live')
     }));
     if (this.shouldRender()) {
-      const mediaControl = this.core.mediaControl;
+      const mediaControl = this.core.getPlugin('media_control');
       assert(mediaControl, 'media_control plugin is required');
       // TODO don't tap into the $el directly
       mediaControl.$el.addClass('live');

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

@@ -32,7 +32,6 @@ 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/favicon/Favicon.ts

@@ -12,6 +12,10 @@ const FAVICON_SELECTOR = 'link[rel="shortcut icon"]';
 
 // const oldIcon = $(FAVICON_SELECTOR);
 
+/**
+ * The plugin adds custom favicon to the player's tab.
+ * @beta
+ */
 export class Favicon extends CorePlugin {
   private _container: Container | null = null;
 

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

@@ -1,6 +1,6 @@
 // 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 { Container, ContainerPlugin, Events } from '@clappr/core';
 
@@ -10,6 +10,10 @@ declare const _gaq: {
   push(args: string[]): void;
 };
 
+/**
+ * An example Google Analytics integration plugin
+ * @beta
+ */
 export class GoogleAnalytics extends ContainerPlugin {
   private account: string = '';
 

package/src/plugins/index.ts

@@ -14,7 +14,6 @@ export * from "./clappr-stats/ClapprStats.js";
 export * from "./click-to-pause/ClickToPause.js";
 export * from "./clips/Clips.js";
 export * from "./context-menu/ContextMenu.js";
-export * from "./disable-controls/DisableControls.js";
 export * from "./dvr-controls/DvrControls.js";
 export * from "./error-screen/ErrorScreen.js";
 export * from "./favicon/Favicon.js";

package/src/plugins/logo/Logo.ts

@@ -20,6 +20,10 @@ type LogoOptions = {
   objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
 };
 
+/**
+ * The plugin adds custom logo to the player.
+ * @beta
+ */
 export class Logo extends UIContainerPlugin {
   private hasStartedPlaying = false;