@gcorevideo/player 2.19.15 → 2.20.3

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

@@ -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}
+ *
+ * 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);
@@ -21,7 +24,7 @@ export class DvrControls extends UICorePlugin {
    * @internal
    */
   get name() {
-    return 'media_control_dvr';
+    return 'dvr_controls';
   }
 
   /**
@@ -59,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) {
@@ -124,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());
@@ -147,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

@@ -29,6 +29,10 @@ type PresentationalError = {
 
 const T = 'plugins.error_screen'
 
+/**
+ * Displays a descriptive error in the overlay on top of the player.
+ * @beta
+ */
 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";
@@ -31,12 +30,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";

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

@@ -44,6 +44,7 @@ describe('LevelSelector', () => {
       const activeContainer = createContainer()
       activePlayback = createPlayback()
       let mediaControl: UICorePlugin | null = null
+      let bottomGear: UICorePlugin | null = null
       core = Object.assign(new EventLite(), {
         activeContainer,
         activePlayback,
@@ -57,10 +58,14 @@ describe('LevelSelector', () => {
           if (name === 'media_control') {
             return mediaControl
           }
+          if (name === 'bottom_gear') {
+            return bottomGear
+          }
           return null
         }),
       })
       mediaControl = createMediaControl(core)
+      bottomGear = createBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
     describe('initially', () => {
@@ -71,29 +76,15 @@ describe('LevelSelector', () => {
         await clock.tickAsync(1)
       })
       it('should render the proper level label', () => {
+        // @ts-ignore
         expect(levelSelector.el.textContent).toMatchQualityLevelLabel('Auto')
       })
     })
     describe.each([
-      [
-        'auto',
-        LEVELS,
-        -1,
-        'Auto',
-      ],
-      [
-        'standard label',
-        LEVELS,
-        0,
-        '360p',
-      ],
-      [
-        'custom label',
-        LEVELS,
-        1,
-        'HD',
-      ],
-    ])("%s", (_, levels, current, label) => {
+      ['auto', LEVELS, -1, 'Auto'],
+      ['standard label', LEVELS, 0, '360p'],
+      ['custom label', LEVELS, 1, 'HD'],
+    ])('%s', (_, levels, current, label) => {
       beforeEach(async () => {
         core.emit('core:active:container:changed')
         await clock.tickAsync(1)
@@ -102,14 +93,19 @@ describe('LevelSelector', () => {
         await clock.tickAsync(1)
         levelSelector.$el.find('.gear-option').click()
         await clock.tickAsync(1)
-        levelSelector.$el.find(`.gear-sub-menu_btn[data-id="${current}"]`).click()
+        levelSelector.$el
+          .find(`.gear-sub-menu_btn[data-id="${current}"]`)
+          .click()
         await clock.tickAsync(1)
       })
       it('should render the proper level labels', () => {
         expect(levelSelector.el.innerHTML).toMatchSnapshot()
       })
       it('should render the selected level', () => {
-        expect(levelSelector.$el.find('ul.gear-sub-menu .current')[0].textContent).toMatchQualityLevelOption(label)
+        expect(
+          levelSelector.$el.find('ul.gear-sub-menu .current')[0].textContent,
+          // @ts-ignore
+        ).toMatchQualityLevelOption(label)
       })
     })
   })
@@ -118,6 +114,7 @@ describe('LevelSelector', () => {
       const activeContainer = createContainer()
       activePlayback = createPlayback()
       let mediaControl: UICorePlugin | null = null
+      let bottomGear: UICorePlugin | null = null
       core = Object.assign(new EventLite(), {
         activeContainer,
         activePlayback,
@@ -131,10 +128,14 @@ describe('LevelSelector', () => {
           if (name === 'media_control') {
             return mediaControl
           }
+          if (name === 'bottom_gear') {
+            return bottomGear
+          }
           return null
         }),
       })
       mediaControl = createMediaControl(core)
+      bottomGear = createBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
     describe('basically', () => {
@@ -146,7 +147,8 @@ describe('LevelSelector', () => {
       })
       it('should render the restricted quality level label', () => {
         expect(
-          levelSelector.el.textContent
+          levelSelector.el.textContent,
+          // @ts-ignore
         ).toMatchQualityLevelLabel('360p')
 
         expect(levelSelector.el.innerHTML).toMatchSnapshot()
@@ -185,7 +187,10 @@ describe('LevelSelector', () => {
         expect(levelSelector.el.innerHTML).toMatchSnapshot()
       })
       it('should properly apply the restriction', () => {
-        expect(levelSelector.$el.find('li:not(.level-disabled)')[0].textContent).toMatchQualityLevelOption('360p')
+        expect(
+          levelSelector.$el.find('li:not(.level-disabled)')[0].textContent,
+          // @ts-ignore
+        ).toMatchQualityLevelOption('360p')
       })
     })
   })
@@ -217,7 +222,10 @@ expect.extend({
       .trim()
     return {
       pass: rendered.includes(`Quality ${expected}`),
-      message: () => `Quality label must${isNot ? ' not' : ''} be ${expected} in "${rendered}"`,
+      message: () =>
+        `Quality label must${
+          isNot ? ' not' : ''
+        } be ${expected} in "${rendered}"`,
     }
   },
   toMatchQualityLevelOption(received, expected) {
@@ -228,13 +236,26 @@ expect.extend({
       .trim()
     return {
       pass: rendered === expected,
-      message: () => `Quality option must${isNot ? ' not' : ''} be ${expected} in "${rendered}"`,
+      message: () =>
+        `Quality option must${
+          isNot ? ' not' : ''
+        } be ${expected} in "${rendered}"`,
     }
-  }
+  },
 })
 
 function createMediaControl(core: any) {
   const mediaControl = new UICorePlugin(core)
+  // @ts-ignore
   mediaControl.getElement = vi.fn().mockReturnValue(null)
   return mediaControl
 }
+
+function createBottomGear(core: any) {
+  const bottomGear = new UICorePlugin(core)
+  // @ts-ignore
+  bottomGear.getElement = vi.fn().mockReturnValue(null)
+  // @ts-ignore
+  bottomGear.setContent = vi.fn()
+  return bottomGear
+}