@gcorevideo/player 2.22.14 → 2.22.15

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

@@ -1,20 +1,34 @@
-import {
-  Events,
-  template,
-  $,
-  Container,
-  UIContainerPlugin,
-} from '@clappr/core'
+import { Events, template, $, 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
+/**
+ * @beta
+ */
+export type MenuOption = {
+  /**
+   * Menu item label text. One of `label` or `labelKey` must be specified.
+   */
+  label?: string
+  /**
+   * Menu item label localisation key, if specified, the `label` will be ignored
+   */
+  labelKey?: string
+  /**
+   * Menu item name. Must be unique.
+   */
   name: string
+  /**
+   * Menu item handler function
+   */
+  handler?: () => void
+  /**
+   * Menu item icon, plain HTML string
+   */
+  icon?: string
 }
 
 /**
@@ -22,23 +36,21 @@ type MenuOption = {
  * @beta
  */
 export interface ContextMenuPluginSettings {
-  label?: string
-  url?: string
-  preventShowContextMenu?: boolean
+  options?: MenuOption[]
 }
 
+const T = 'plugins.context_menu'
+
 /**
  * `PLUGIN` that displays a small context menu when clicked on the player container.
  * @beta
  * @remarks
  * Configuration options - {@link ContextMenuPluginSettings}
+ *
+ * Should not be used together with {@link ClickToPause} plugin
  */
 export class ContextMenu extends UIContainerPlugin {
-  private _label: string = ''
-
-  private _url: string = ''
-
-  private menuOptions: MenuOption[] = []
+  private open = false
 
   /**
    * @internal
@@ -63,38 +75,17 @@ export class ContextMenu extends UIContainerPlugin {
 
   private static readonly template = template(templateHtml)
 
-  private get label() {
-    return this._label || 'Gcore player ver. ' + version().gplayer
-  }
-
-  private get url() {
-    return this._url || 'https://gcore.com/'
-  }
-
-  private get exposeVersion() {
-    return {
-      label: this.label,
-      name: 'version',
-    }
-  }
-
   /**
    * @internal
    */
   override get events() {
     return {
-      'click [data-version]': 'onOpenMainPage',
+      'click [role="menuitem"]': 'runAction',
     }
   }
 
   constructor(container: Container) {
     super(container)
-    if (this.options.contextMenu && 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.render()
     $('body').on('click', this.hideOnBodyClick)
   }
@@ -106,9 +97,9 @@ export class ContextMenu extends UIContainerPlugin {
     this.listenTo(
       this.container,
       Events.CONTAINER_CONTEXTMENU,
-      this.toggleContextMenu,
+      this.onContextMenu,
     )
-    this.listenTo(this.container, Events.CONTAINER_CLICK, this.hide)
+    this.listenTo(this.container, Events.CONTAINER_CLICK, this.onContainerClick)
   }
 
   /**
@@ -119,41 +110,66 @@ export class ContextMenu extends UIContainerPlugin {
     return super.destroy()
   }
 
-  private toggleContextMenu(event: MouseEvent) {
+  private onContainerClick() {
+    this.hide()
+  }
+
+  private onContextMenu(event: MouseEvent) {
+    if (!this.options.contextMenu?.options?.length) {
+      return
+    }
     event.preventDefault()
-    const offset = this.container?.$el.offset()
+    event.stopPropagation()
 
+    const offset = this.container?.$el.offset()
     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.open = true
     this.$el.css({ top, left })
     this.$el.show()
   }
 
   private hide() {
+    this.open = false
     this.$el.hide()
   }
 
-  private onOpenMainPage() {
-    window.open(this.url, '_blank')
+  private runAction(event: MouseEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const itemName = (event.currentTarget as HTMLButtonElement).dataset.name
+    if (!itemName) {
+      return
+    }
+    const item = this.options.contextMenu?.options.find(
+      (option: MenuOption) => option.name === itemName,
+    )
+    if (item?.handler) {
+      item.handler()
+    }
+    this.hide()
   }
 
   /**
    * @internal
    */
   override render() {
-    this.menuOptions = [this.exposeVersion]
-    this.$el.html(ContextMenu.template({ options: this.menuOptions }))
+    if (!this.options.contextMenu?.options?.length) {
+      return this
+    }
+    const options = this.options.contextMenu.options
+    this.$el.html(
+      ContextMenu.template({
+        options,
+        i18n: this.container.i18n,
+        iconic: options.some((option: MenuOption) => option.icon),
+      }),
+    )
     this.container.$el.append(this.$el) // TODO append to the container, turn into a container plugin
-    this.hide()
+    this.$el.hide()
 
     return this
   }

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

@@ -56,14 +56,26 @@ describe('MediaControl', () => {
         core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
         core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
       })
-      it('should wait a delay before rendering anything', async () => { 
+      it('should wait a delay before rendering anything', async () => {
         expect(mediaControl.el.innerHTML).toBe('')
         await new Promise((resolve) => setTimeout(resolve, 35))
         expect(mediaControl.el.innerHTML).toMatchSnapshot()
-        expect(mediaControl.$el.find('.media-control-left-panel [data-playpause]').length).toBeGreaterThan(0)
-        expect(mediaControl.$el.find('.media-control-left-panel [data-volume]').length).toBeGreaterThan(0)
-        expect(mediaControl.$el.find('.media-control-center-panel [data-seekbar]').length).toBeGreaterThan(0)
-        expect(mediaControl.$el.find('.media-control-right-panel [data-fullscreen]').length).toBeGreaterThan(0)
+        expect(
+          mediaControl.$el.find('.media-control-left-panel [data-playpause]')
+            .length,
+        ).toBeGreaterThan(0)
+        expect(
+          mediaControl.$el.find('.media-control-left-panel [data-volume]')
+            .length,
+        ).toBeGreaterThan(0)
+        expect(
+          mediaControl.$el.find('.media-control-center-panel [data-seekbar]')
+            .length,
+        ).toBeGreaterThan(0)
+        expect(
+          mediaControl.$el.find('.media-control-right-panel [data-fullscreen]')
+            .length,
+        ).toBeGreaterThan(0)
       })
     })
   })
@@ -72,9 +84,7 @@ describe('MediaControl', () => {
       mediaControl = new MediaControl(core)
       core.emit(Events.CORE_READY)
       core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
-      core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
-      core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
-      await new Promise((resolve) => setTimeout(resolve, 25))
+      await runMetadataLoaded(core)
     })
     describe.each([
       [
@@ -92,20 +102,29 @@ describe('MediaControl', () => {
         core.activePlayback.emit(Events.PLAYBACK_SETTINGSUPDATE)
         core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE)
       })
-      it.each(
-        settings.left
-      )("should render %s control", (element) => {
-        const el = mediaControl.$el.find(`.media-control-left-panel [data-${element}]`)
+      it.each(settings.left)('should render %s control', (element) => {
+        const el = mediaControl.$el.find(
+          `.media-control-left-panel [data-${element}]`,
+        )
         expect(el.length).toBeGreaterThan(0)
       })
       it.each(
-        arraySubtract(['playpause', 'playstop', 'position', 'duration', 'volume'], settings.left)
-      )("should not render %s control", (element) => {
-        const el = mediaControl.$el.find(`.media-control-left-panel [data-${element}]`)
+        arraySubtract(
+          ['playpause', 'playstop', 'position', 'duration', 'volume'],
+          settings.left,
+        ),
+      )('should not render %s control', (element) => {
+        const el = mediaControl.$el.find(
+          `.media-control-left-panel [data-${element}]`,
+        )
         expect(el.length).toEqual(0)
       })
-      it(`should ${settings.seekEnabled ? '' : 'not '}render the seek bar`, () => {
-        const seekbar = mediaControl.$el.find('.media-control-center-panel [data-seekbar]')
+      it(`should ${
+        settings.seekEnabled ? '' : 'not '
+      }render the seek bar`, () => {
+        const seekbar = mediaControl.$el.find(
+          '.media-control-center-panel [data-seekbar]',
+        )
         expect(seekbar.length).toBeGreaterThan(1)
         if (settings.seekEnabled) {
           expect(seekbar.hasClass('seek-disabled')).toBe(false)
@@ -113,7 +132,9 @@ describe('MediaControl', () => {
           expect(seekbar.hasClass('seek-disabled')).toBe(true)
         }
       })
-      it(`should ${settings.left.includes('volume') ? '' : 'not '}render the volume control`, () => {
+      it(`should ${
+        settings.left.includes('volume') ? '' : 'not '
+      }render the volume control`, () => {
         const volume = mediaControl.$el.find('.drawer-container[data-volume]')
         if (settings.left.includes('volume')) {
           expect(volume.length).toEqual(1)
@@ -121,8 +142,12 @@ describe('MediaControl', () => {
           expect(volume.length).toEqual(0)
         }
       })
-      it(`should ${settings.right.includes('fullscreen') ? '' : 'not '}render the fullscreen control`, () => {
-        const fullscreen = mediaControl.$el.find('.media-control-right-panel [data-fullscreen]')
+      it(`should ${
+        settings.right.includes('fullscreen') ? '' : 'not '
+      }render the fullscreen control`, () => {
+        const fullscreen = mediaControl.$el.find(
+          '.media-control-right-panel [data-fullscreen]',
+        )
         if (settings.right.includes('fullscreen')) {
           expect(fullscreen.length).toEqual(1)
         } else {
@@ -138,12 +163,13 @@ describe('MediaControl', () => {
       core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
     })
     describe('when live', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         core.activeContainer.getPlaybackType.mockReturnValue(Playback.LIVE)
         core.activePlayback.getPlaybackType.mockReturnValue(Playback.LIVE)
         core.getPlaybackType.mockReturnValue(Playback.LIVE)
-        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
-        core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+        // This is not strictly necessary as the CSS class is applied on the root element and does not require rendering.
+        // However, it makes the scenario more realistic
+        await runMetadataLoaded(core)
         // TODO playback.settings
         core.activePlayback.emit(Events.PLAYBACK_SETTINGSUPDATE)
       })
@@ -152,11 +178,11 @@ describe('MediaControl', () => {
       })
     })
     describe('when vod', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         core.activeContainer.getPlaybackType.mockReturnValue(Playback.VOD)
         core.activePlayback.getPlaybackType.mockReturnValue(Playback.VOD)
         core.getPlaybackType.mockReturnValue(Playback.VOD)
-        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+        await runMetadataLoaded(core)
       })
       it('should not apply live style class', () => {
         expect(mediaControl.$el.hasClass('live')).toBe(false)
@@ -164,11 +190,13 @@ describe('MediaControl', () => {
     })
   })
   describe('putElement', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mediaControl = new MediaControl(core)
-      core.emit('core:ready')
+      core.emit(Events.CORE_READY)
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
       core.activeContainer.settings = {}
-      core.emit('core:active:container:changed', core.activeContainer)
+      core.emit(Events.CONTAINER_SETTINGSUPDATE)
+      await runMetadataLoaded(core)
     })
     describe.each([
       ['pip' as MediaControlElement],
@@ -200,12 +228,13 @@ describe('MediaControl', () => {
       core.emit(Events.CORE_READY)
     })
     describe('dvr', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         core.activeContainer.settings = {
           left: ['playpause', 'position', 'duration'],
           seekEnabled: true,
         }
         core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+        await runMetadataLoaded(core)
       })
       describe('when enabled', () => {
         beforeEach(() => {
@@ -241,10 +270,11 @@ describe('MediaControl', () => {
     })
   })
   describe('dvr mode', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mediaControl = new MediaControl(core)
       core.emit(Events.CORE_READY)
       core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+      await runMetadataLoaded(core)
     })
     describe('by default', () => {
       it('should not apply DVR style class', () => {
@@ -270,3 +300,9 @@ describe('MediaControl', () => {
 function arraySubtract<T extends string>(arr1: T[], arr2: T[]) {
   return arr1.filter((item) => !arr2.includes(item))
 }
+
+function runMetadataLoaded(core: any) {
+  core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+  core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+  return new Promise((resolve) => setTimeout(resolve, 25))
+}