@gcorevideo/player 2.22.0 → 2.22.1

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

@@ -1,31 +1,36 @@
-import { UICorePlugin, template, Events as ClapprEvents } from '@clappr/core';
-import { trace } from '@gcorevideo/utils';
-import assert from 'assert';
+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 '../../types.js';
-import { MediaControlEvents } from '../media-control/MediaControl';
+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 '../../types.js'
+import { MediaControlEvents } from '../media-control/MediaControl'
 
-const VERSION = '2.19.12';
+const VERSION = '2.19.12'
 
-const T = 'plugins.bottom_gear';
+const T = 'plugins.bottom_gear'
+
+export enum GearEvents {
+  RENDERED = 'rendered',
+}
 
 /**
  * An element inside the gear menu
  * @beta
+ * @deprecated
  */
-export type GearOptionsItem = 'quality' | 'rate' | 'nerd';
+export type GearOptionsItem = 'quality' | 'rate' | 'nerd'
 
 /**
  * @deprecated Use {@link GearOptionsItem} instead
  */
-export type GearItemElement = GearOptionsItem;
+export type GearItemElement = GearOptionsItem
 
 // TODO disabled if no items added
 
@@ -34,33 +39,90 @@ export type GearItemElement = GearOptionsItem;
  * @beta
  * @remarks
  * The plugins provides a base for attaching custom settings UI in the gear menu
- * 
+ *
  * Depends on:
  *
  * - {@link MediaControl}
+ *
+ * @example
+ * You can use bottom gear to add custom settings UI to the gear menu.
+ *
+ * ```ts
+ * import { BottomGear } from '@gcorevideo/player/plugins/bottom-gear';
+ *
+ * class CustomOptionsPlugin extends UICorePlugin {
+ *   // ...
+ *
+ *   override get events() {
+ *     return {
+ *       'click #my-button': 'doMyAction',
+ *     }
+ *   }
+ *
+ *   private doMyAction() {
+ *     // ...
+ *   }
+ *
+ *   override render() {
+ *     const bottomGear = this.core.getPlugin('bottom_gear');
+ *     if (!bottomGear) {
+ *       return this;
+ *     }
+ *     this.$el.html('<button class="custom-option">Custom option</button>');
+ *     // Put rendered element into the gear menu
+ *     bottomGear.addItem('custom').html(this.$el)
+ *     return this;
+ *   }
+ *
+ *   // alternatively, add an option with a submenu
+ *   override render() {
+ *     this.$el.html(template(templateHtml)({
+ *       // ...
+ *     })));
+ *     return this;
+ *   }
+ *
+ *   private addGearOption() {
+ *     this.core.getPlugin('bottom_gear')
+ *       .addItem('custom', this.$el)
+ *       .html($('<button class="custom-option">Custom option</button>'))
+ *   }
+ *
+ *   override bindEvents() {
+ *     this.listenToOnce(this.core, ClapprEvents.CORE_READY, () => {
+ *       const bottomGear = this.core.getPlugin('bottom_gear');
+ *       assert(bottomGear, 'bottom_gear plugin is required');
+ *       // simple case
+ *       this.listenTo(bottomGear, GearEvents.RENDERED, this.render);
+ *       // or with a submenu
+ *       this.listenTo(bottomGear, GearEvents.RENDERED, this.addGearOption);
+ *      });
+ *   }
+ * }
+ * ```
  */
 export class BottomGear extends UICorePlugin {
-  private isHd = false;
+  private isHd = false
 
   /**
    * @internal
    */
   get name() {
-    return 'bottom_gear';
+    return 'bottom_gear'
   }
 
   /**
    * @internal
    */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   /**
    * @internal
    */
   static get version() {
-    return VERSION;
+    return VERSION
   }
 
   private static readonly template = template(pluginHtml)
@@ -70,8 +132,8 @@ export class BottomGear extends UICorePlugin {
    */
   override get attributes() {
     return {
-      'class': 'media-control-gear',
-    };
+      class: 'media-control-gear',
+    }
   }
 
   /**
@@ -79,94 +141,122 @@ export class BottomGear extends UICorePlugin {
    */
   override get events() {
     return {
-      'click .button-gear': 'toggleGearMenu',
-    };
+      'click #gear-button': 'toggleGearMenu',
+    }
   }
 
   /**
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core, ClapprEvents.CORE_READY, this.onCoreReady)
-    this.listenTo(this.core, ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
+    this.listenToOnce(this.core, ClapprEvents.CORE_READY, this.onCoreReady)
+    this.listenTo(
+      this.core,
+      ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.onActiveContainerChanged,
+    )
   }
 
-  /**
-   * @param name - Name of a gear menu placeholder item to attach custom UI
-   * @returns Zepto result of the element
-   */
-  getElement(name: GearOptionsItem): ZeptoResult | null {
-    return this.$el.find(`.gear-options-list [data-${name}]`);
-  }
-
-  // TODO implement putElement/addElement method
-
-  /**
-   * Replaces the content of the gear menu
-   * @param content - Zepto result of the element
-   */
-  setContent(content: ZeptoResult) {
-    this.$el.find('.gear-wrapper').html(content);
+  addItem(name: string, $subMenu?: ZeptoResult): ZeptoResult {
+    const $existingItem = this.$el.find(`#gear-options li[data-${name}`)
+    if ($existingItem.length) {
+      trace(`${T} addItem already exists`, { name })
+      return $existingItem
+    }
+    const $item = $('<li></li>')
+      .attr(`data-${name}`, '')
+      .appendTo(this.$el.find('#gear-options'))
+    if ($subMenu) {
+      trace(`${T} addItem adding submenu`, { name })
+      $subMenu
+        .addClass('gear-sub-menu-wrapper')
+        .hide()
+        .appendTo(this.$el.find('#gear-options-wrapper'))
+      $item.on('click', (e: MouseEvent) => {
+        trace(`${T} addItem submenu clicked`, { name })
+        e.stopPropagation()
+        $subMenu.show()
+        this.$el.find('#gear-options').hide()
+      })
+    }
+    return $item
   }
 
   private onActiveContainerChanged() {
-    trace(`${T} onActiveContainerChanged`);
-    this.bindContainerEvents();
+    trace(`${T} onActiveContainerChanged`)
+    this.bindContainerEvents()
   }
 
   private bindContainerEvents() {
-    trace(`${T} bindContainerEvents`);
-    this.listenTo(this.core.activeContainer, ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+    trace(`${T} bindContainerEvents`)
+    this.listenTo(
+      this.core.activeContainer,
+      ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE,
+      this.highDefinitionUpdate,
+    )
   }
 
   private highDefinitionUpdate(isHd: boolean) {
-    trace(`${T} highDefinitionUpdate`, { isHd });
-    this.isHd = isHd;
-    this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
+    trace(`${T} highDefinitionUpdate`, { isHd })
+    this.isHd = isHd
+    this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon)
   }
 
   /**
    * @internal
    */
   override render() {
-    const mediaControl = this.core.getPlugin('media_control');
+    trace(`${T} render`)
+    const mediaControl = this.core.getPlugin('media_control')
+    if (!mediaControl) {
+      return this // TODO test
+    }
+    const icon = this.isHd ? gearHdIcon : gearIcon
+    this.$el
+      .html(BottomGear.template({ icon }))
+      .find('#gear-sub-menu-wrapper')
+      .hide()
+
+    // TODO make non-clickable when there are no items
+    mediaControl.putElement('gear', this.$el)
 
-    // TODO use options.mediaControl.gear.items
-    const items: GearOptionsItem[] = [
-      'quality',
-      'rate',
-      'nerd',
-    ];
-    const icon = this.isHd ? gearHdIcon : gearIcon;
-    this.$el.html(BottomGear.template({ icon, items }));
+    setTimeout(() => {
+      this.trigger(GearEvents.RENDERED)
+    }, 0)
 
-    mediaControl.putElement('gear', this.el);
-    mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
-    return this;
+    return this
   }
 
   /**
-   * Re-renders the gear menu.
-   * It fires the {@link MediaControlEvents.MEDIACONTROL_GEAR_RENDERED | MEDIACONTROL_GEAR_RENDERED} event,
-   * which the plugins that attach to the gear menu can listen to to re-render themselves.
+   * Collapses any submenu open back to the gear menu
    */
   refresh() {
-    this.render();
-    this.$el.find('.gear-wrapper').show();
+    this.$el.find('.gear-sub-menu-wrapper').hide()
+    this.$el.find('#gear-options').show()
   }
 
   private toggleGearMenu() {
-    this.$el.find('.gear-wrapper').toggle();
+    this.$el.find('#gear-options-wrapper').toggle()
   }
 
   private hide() {
-    this.$el.find('.gear-wrapper').hide();
+    this.$el.find('#gear-options-wrapper').hide()
   }
 
   private onCoreReady() {
-    const mediaControl = this.core.getPlugin('media_control');
-    assert(mediaControl, 'media_control plugin is required');
-    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.render);
-    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
+    trace(`${T} onCoreReady`)
+    const mediaControl = this.core.getPlugin('media_control')
+    assert(mediaControl, 'media_control plugin is required')
+    this.listenTo(
+      mediaControl,
+      ClapprEvents.MEDIACONTROL_RENDERED,
+      this.onMediaControlRendered,
+    )
+    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide)
+  }
+
+  private onMediaControlRendered() {
+    trace(`${T} onMediaControlRendered`)
+    this.render()
   }
 }

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

@@ -1,8 +1,7 @@
 import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { BottomGear } from '../BottomGear'
+import { BottomGear, GearEvents } from '../BottomGear'
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
-import { MediaControlEvents } from '../../media-control/MediaControl'
 
 describe('BottomGear', () => {
   let mediaControl: any
@@ -19,16 +18,33 @@ describe('BottomGear', () => {
       )
     bottomGear = new BottomGear(core)
     onGearRendered = vi.fn()
-    mediaControl.on(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, onGearRendered, null)
+    bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
     bottomGear.render()
   })
   it('should render', () => {
     expect(bottomGear.el.innerHTML).toMatchSnapshot()
   })
   it('should attach to media control', () => {
-    expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.el)
+    expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.$el)
   })
-  it('should emit event', () => {
+  it('should emit event in the next cycle', async () => {
+    expect(onGearRendered).not.toHaveBeenCalled()
+    await new Promise((resolve) => setTimeout(resolve, 0))
     expect(onGearRendered).toHaveBeenCalled()
   })
+  it('should render the gear menu hidden', () => {
+    expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+      'none',
+    )
+  })
+  describe('when clicked', () => {
+    beforeEach(() => {
+      bottomGear.$el.find('#gear-button').click()
+    })
+    it('should toggle the gear menu', () => {
+      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+        'block',
+      )
+    })
+  })
 })

package/src/plugins/bottom-gear/__tests__/__snapshots__/BottomGear.test.ts.snap

@@ -1,18 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BottomGear > should render 1`] = `
-"<button type="button" class="button-gear media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" data-gear-button="-1" id="gear-button">
+"<button type="button" class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button">
     /assets/icons/new/gear.svg
 </button>
-<div class="gear-wrapper gcore-skin-bg-color">
-    <ul class="gear-options-list" id="gear-options">
-        
-            <li data-quality=""></li>
-        
-            <li data-rate=""></li>
-        
-            <li data-nerd=""></li>
-        
-    </ul>
-</div>"
+<div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display: none;">
+    <ul class="gear-options-list" id="gear-options"></ul>
+</div>
+"
 `;

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

@@ -1,5 +1,5 @@
 import { UICorePlugin, Events, template, Core, Container } from '@clappr/core'
-import { reportError } from '@gcorevideo/utils'
+import { reportError, trace } from '@gcorevideo/utils'
 import Mousetrap from 'mousetrap'
 
 import { CLAPPR_VERSION } from '../../build.js'
@@ -24,8 +24,8 @@ 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 } from '../bottom-gear/BottomGear.js'
-import { MediaControl, MediaControlEvents } from '../media-control/MediaControl.js'
+import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js'
+import { MediaControl } from '../media-control/MediaControl.js'
 import assert from 'assert'
 
 const qualityClasses = [
@@ -114,7 +114,7 @@ type Metrics = BaseMetrics & {
   }
 }
 
-// const T = 'plugins.clappr_nerd_stats';
+const T = 'plugins.clappr_nerd_stats'
 
 /**
  * `PLUGIN` that displays useful network-related statistics.
@@ -123,8 +123,6 @@ type Metrics = BaseMetrics & {
  * @remarks
  * Depends on:
  *
- * - {@link MediaControl}
- *
  * - {@link BottomGear}
  *
  * - {@link ClapprStats}
@@ -151,6 +149,8 @@ export class ClapprNerdStats extends UICorePlugin {
 
   private iconPosition: IconPosition
 
+  private static readonly buttonTemplate = template(buttonHtml)
+
   /**
    * @internal
    */
@@ -224,17 +224,15 @@ export class ClapprNerdStats extends UICorePlugin {
    * @internal
    */
   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(
-      mediaControl,
-      MediaControlEvents.MEDIACONTROL_GEAR_RENDERED,
-      this.addToBottomGear,
-    )
+    this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady)
   }
 
-  private init() {
+  private onCoreReady() {
+    const bottomGear = this.core.getPlugin('bottom_gear') as BottomGear
+    assert(bottomGear, 'bottom_gear plugin is required')
+
+    this.listenTo(bottomGear, GearEvents.RENDERED, this.addToBottomGear)
+
     this.container = this.core.activeContainer
     const clapprStats = this.container?.getPlugin('clappr_stats')
 
@@ -375,6 +373,7 @@ export class ClapprNerdStats extends UICorePlugin {
    * @internal
    */
   override render() {
+    trace(`${T} render`)
     // TODO append to the container
     this.core.$el.append(this.$el[0])
     this.hide()
@@ -383,17 +382,20 @@ export class ClapprNerdStats extends UICorePlugin {
   }
 
   private addToBottomGear() {
+    trace(`${T} addToBottomGear`)
     const gear = this.core.getPlugin('bottom_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', (e: MouseEvent) => {
-      e.stopPropagation()
-      this.toggle()
-    })
+    const $button = gear
+      .addItem('nerd')
+      .html(
+        ClapprNerdStats.buttonTemplate({
+          icon: statsIcon,
+          i18n: this.core.i18n,
+        }),
+      )
+      .on('click', (e: MouseEvent) => {
+        e.stopPropagation()
+        this.toggle()
+      })
   }
 
   private clearCustomMetrics() {

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

@@ -129,7 +129,7 @@ export class DvrControls extends UICorePlugin {
         i18n: this.core.i18n,
       }),
     )
-    mediaControl.putElement('dvr', this.el)
+    mediaControl.putElement('dvr', this.$el)
 
     return this
   }

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

@@ -50,7 +50,7 @@ describe('DvrControls', () => {
         expect(mediaControl.toggleElement).toHaveBeenCalledWith('position', false)
       })
       it('should render to the media control', () => {
-        expect(mediaControl.putElement).toHaveBeenCalledWith('dvr', dvrControls.el)
+        expect(mediaControl.putElement).toHaveBeenCalledWith('dvr', dvrControls.$el)
       })
     })
     describe('when back_to_live button is clicked', () => {