@gcorevideo/player 2.22.14 → 2.22.16

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/level-selector/__tests__/__snapshots__/QualityLevels.test.ts.snap

@@ -8,7 +8,7 @@ exports[`QualityLevels > basically > auto > should render the selected level 1`]
 <ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="-1" id="level_selector_auto">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="-1" id="level_selector_auto" aria-checked="true" role="menuitemradio">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 auto
             </a>
@@ -16,21 +16,21 @@ exports[`QualityLevels > basically > auto > should render the selected level 1`]
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 Full HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -48,7 +48,7 @@ exports[`QualityLevels > basically > custom label > should render the selected l
 <ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto" aria-checked="true" role="menuitemradio">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 auto
             </a>
@@ -56,21 +56,21 @@ exports[`QualityLevels > basically > custom label > should render the selected l
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 Full HD
             </a>
         </li>
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="1" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="1" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -88,7 +88,7 @@ exports[`QualityLevels > basically > standard label > should render the selected
 <ul class="gear-sub-menu quality-levels" id="level-selector-menu" role="menu">
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto" aria-checked="true" role="menuitemradio">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 auto
             </a>
@@ -96,21 +96,21 @@ exports[`QualityLevels > basically > standard label > should render the selected
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 Full HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" data-disabled="false" data-checked="false" role="menuitemradio" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" aria-disabled="false" aria-checked="false" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -129,21 +129,21 @@ exports[`QualityLevels > options.restrictResolution > given vertical video forma
     
     
         <li class=" disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" aria-disabled="true" aria-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class=" disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" aria-disabled="true" aria-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 720p
             </a>
         </li>
     
         <li class=" current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" data-disabled="false" data-checked="true" role="menuitemradio" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" aria-disabled="false" aria-checked="true" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -172,21 +172,21 @@ exports[`QualityLevels > options.restrictResolution > initially > when opened >
     
     
         <li class=" disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_1080">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" aria-disabled="true" aria-checked="false" role="menuitemradio" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class=" disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" data-disabled="true" data-checked="false" role="menuitemradio" id="level_selector_720">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" aria-disabled="true" aria-checked="false" role="menuitemradio" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 720p
             </a>
         </li>
     
         <li class=" current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" data-disabled="false" data-checked="true" role="menuitemradio" id="level_selector_360">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" aria-disabled="false" aria-checked="true" role="menuitemradio" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>

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

@@ -50,14 +50,13 @@ export type MediaControlLeftElement =
   | 'playstop'
   | 'position'
   | 'volume'
+  | 'clips'
 
 /**
  * Media control elements that appear in main layer, spanning the entire width of the player.
  * @beta
  */
-export type MediaControlLayerElement =
-  | 'seekbar'
-  | 'seekBarContainer' // TODO rename seekbar
+export type MediaControlLayerElement = 'seekbar' | 'seekBarContainer' // TODO rename seekbar
 
 /**
  * Media control elements that appear in the right area.
@@ -96,9 +95,7 @@ export type MediaControlSettings = {
 
 const DEFAULT_SETTINGS: MediaControlSettings = {
   default: [],
-  left: [
-    'dvr'
-  ], 
+  left: ['dvr'],
   right: [
     'audiotracks',
     'cc',
@@ -114,12 +111,9 @@ const DEFAULT_SETTINGS: MediaControlSettings = {
 }
 
 const INITIAL_SETTINGS: MediaControlSettings = {
-  left: [
-  ],
-  right: [
-  ],
-  default: [
-  ],
+  left: [],
+  right: [],
+  default: [],
   seekEnabled: false,
 }
 
@@ -155,13 +149,13 @@ type DisabledClickable = {
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
- * 
+ *
  * Configuration options:
  *
  * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
  *
  * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
- * 
+ *
  * - `chromeless`: boolean
  */
 export class MediaControl extends UICorePlugin {
@@ -213,10 +207,6 @@ export class MediaControl extends UICorePlugin {
 
   private verticalVolume = false
 
-  private $clipText: ZeptoResult | null = null
-
-  private $clipTextContainer: ZeptoResult | null = null
-
   private $duration: ZeptoResult | null = null
 
   private $fullscreenToggle: ZeptoResult | null = null
@@ -499,13 +489,9 @@ export class MediaControl extends UICorePlugin {
       Events.CONTAINER_LOADEDMETADATA,
       this.onLoadedMetadata,
     )
-    this.listenTo(
-      this.core,
-      Events.CONTAINER_DESTROYED,
-      () => {
-        this.cancelRenderTimer()
-      },
-    )
+    this.listenTo(this.core, Events.CONTAINER_DESTROYED, () => {
+      this.cancelRenderTimer()
+    })
   }
 
   /**
@@ -516,7 +502,7 @@ export class MediaControl extends UICorePlugin {
     this.userDisabled = true // TODO distinguish between user and system (e.g., unplayable) disabled?
     this.hide()
     this.unbindKeyEvents()
-    this.$el.hide()
+    this.$el.hide() // TODO why?
   }
 
   /**
@@ -1080,13 +1066,12 @@ export class MediaControl extends UICorePlugin {
     )
     trace(`${T} updateSettings`, { newSettings })
 
-
+    newSettings.left.push('clips') // TODO
     // TODO make order controlled via CSS
     newSettings.left = orderByOrderPattern(
-      [...newSettings.left, 'clipsText', 'volume'],
+      [...newSettings.left, 'volume', 'clips'],
       LEFT_ORDER,
     )
-
     if (
       this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
       this.core.activePlayback.dvrEnabled
@@ -1098,8 +1083,7 @@ export class MediaControl extends UICorePlugin {
     newSettings.right = DEFAULT_SETTINGS.right // TODO get from the options
 
     if (
-      (!this.fullScreenOnVideoTagSupported &&
-        !fullscreenEnabled()) ||
+      (!this.fullScreenOnVideoTagSupported && !fullscreenEnabled()) ||
       this.options.fullscreenDisable
     ) {
       trace(`${T} updateSettings removing fullscreen`, {
@@ -1163,11 +1147,6 @@ export class MediaControl extends UICorePlugin {
     this.$multiCameraSelector = this.$el.find(
       '.media-control-multicamera[data-multicamera]',
     )
-    this.$clipText = this.$el.find('.media-clip-text[data-clipstext]') // TODO
-    this.$clipTextContainer = this.$el.find(
-      '.media-clip-container[data-clipstext]',
-    )
-
     this.resetIndicators()
     this.initializeIcons()
   }
@@ -1183,26 +1162,14 @@ export class MediaControl extends UICorePlugin {
    * ```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')
+   *     this.$el.html('<div data-clips>Here we go</div>')
+   *     this.core.getPlugin('media_control').mount('clips', this.$el)
    *     return this
    *   }
    * }
    * ```
    */
-  getElement(name: MediaControlElement): ZeptoResult | null {
-    switch (name) {
-      case 'audiotracks':
-        return null
-      case 'clipText':
-        return this.$clipText
-      case 'seekBarContainer':
-        return this.$seekBarContainer
-    }
-  }
-
-  putElement(name: MediaControlElement, element: ZeptoResult) {
+  mount(name: MediaControlElement, element: ZeptoResult) {
     const panel = this.getElementLocation(name)
     trace(`${T} putElement`, { name, panel: !!panel })
     if (panel) {
@@ -1221,6 +1188,10 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  putElement(name: MediaControlElement, element: ZeptoResult) {
+    this.mount(name, element)
+  }
+
   /**
    * Toggle the visibility of a media control element
    * @param name - The name of the media control element
@@ -1284,12 +1255,12 @@ export class MediaControl extends UICorePlugin {
       return
     }
 
-    const currentTime = this.container.getCurrentTime()
-    const duration = this.container.getDuration()
+    const currentTime = this.core.activeContainer.getCurrentTime()
+    const duration = this.core.activeContainer.getDuration()
     let position = Math.min(Math.max(currentTime + delta, 0), duration)
 
     position = Math.min((position * 100) / duration, 100)
-    this.container.seekPercentage(position)
+    this.core.activeContainer.seekPercentage(position)
   }
 
   private bindKeyAndShow(key: string, callback: () => boolean | undefined) {
@@ -1427,7 +1398,10 @@ export class MediaControl extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`, { needsUpdate: this.hasUpdate, metadataLoaded: this.metadataLoaded })
+    trace(`${T} render`, {
+      needsUpdate: this.hasUpdate,
+      metadataLoaded: this.metadataLoaded,
+    })
     if (!this.hasUpdate || !this.metadataLoaded) {
       return this
     }
@@ -1491,7 +1465,7 @@ export class MediaControl extends UICorePlugin {
 
     this.rendered = true
     this.updateVolumeUI()
-    
+
     this.hasUpdate = false
     // TODO setTimeout?
     this.trigger(Events.MEDIACONTROL_RENDERED)
@@ -1615,8 +1589,7 @@ MediaControl.extend = function (properties) {
 }
 
 function serializeSettings(s: MediaControlSettings) {
-  return (s.left
-    .slice() as MediaControlElement[])
+  return (s.left.slice() as MediaControlElement[])
     .sort()
     .concat(s.right.slice().sort())
     .concat(s.default.slice().sort())