@playkit-js/moderation 3.0.0 → 3.1.0-canary.10-08b2d40

package/src/components/popover/popover.tsx

@@ -1,169 +1,84 @@
-import {h, Component, ComponentChild} from 'preact';
+import {h, Component, VNode} from 'preact';
+import {A11yWrapper, OnClickEvent} from '@playkit-js/common';
 import * as styles from './popover.scss';
 
-export enum PopoverVerticalPositions {
-  Top = 'top',
-  Bottom = 'bottom',
-}
-export enum PopoverHorizontalPositions {
-  Left = 'left',
-  Right = 'right',
-}
-export enum PopoverTriggerMode {
-  Click = 'click',
-  Hover = 'hover',
-}
+const {ESC, TAB} = KalturaPlayer.ui.utils.KeyMap;
 
-export enum KeyboardKeys {
-  Esc = 27,
-  Enter = 13,
-  Tab = 9,
-  Space = 32,
-  End = 35,
-  Home = 36,
+export interface PopoverMenuItem {
+  label?: string;
+  onMenuChosen: () => void;
 }
 
-const CLOSE_ON_HOVER_DELAY = 500;
-
-const defaultProps = {
-  verticalPosition: PopoverVerticalPositions.Top,
-  horizontalPosition: PopoverHorizontalPositions.Left,
-  triggerMode: PopoverTriggerMode.Click,
-  className: 'popover',
-  closeOnEsc: true,
-  closeOnClick: true,
-};
-
 interface PopoverProps {
-  onClose?: () => void;
-  onOpen?: () => void;
-  closeOnClick: boolean;
-  closeOnEsc: boolean;
-  verticalPosition: PopoverVerticalPositions;
-  horizontalPosition: PopoverHorizontalPositions;
-  className: string;
-  triggerMode: PopoverTriggerMode;
-  content: ComponentChild;
-  children: ComponentChild;
+  options: Array<PopoverMenuItem>;
+  children: VNode;
 }
 
 interface PopoverState {
   open: boolean;
 }
 
-/**
- * Popover renders popup with a target.
- * Properties description:
- *   onOpen - function that will be executed when popover opens;
- *   onClose - function that will be executed when popover closes;
- *   closeOnClick - close the popover on mouse click;
- *   verticalPosition - vertical position of popover relative to target ("top" or "bottom"), default - "top";
- *   horizontalPosition - horizontal position of popover relative to target ("left" or "right"), default - "left";
- *   !!! known limitation of popover positions: if popover opens beyond the visible area of the player - the popover will be overlapped by player
- *   className - popover class, can be use for popover styling, default - 'popover';
- *   closeOnEsc - handle ESC keyboard pressed event and close popover, default - true;
- *   triggerMode - popover support 2 ways for opening: click (keyPress) and mouse hover ("click" or "hover"), default - "click";
- *   content - content of popover. Can be any valid Preact node, ex:
- *      <select>
- *          <option>Option 1</option>
- *          ...
- *          <option>Option n</option>
- *      </select>
- *   children - popover target. Can be any valid Preact node, ex:
- *      <button>
- *          <i className="icon" />
- *      </button>
- */
-
 export class Popover extends Component<PopoverProps, PopoverState> {
-  private _closeTimeout: any = null;
-  private _controlElement = null;
-  static defaultProps = {
-    ...defaultProps,
-  };
+  private _controlElementRef: HTMLDivElement | null = null;
+  private _popoverElementRef: HTMLDivElement | null = null;
+  private _optionsRefMap: Map<number, HTMLDivElement | null> = new Map();
+
   state = {
-    open: false,
+    open: false
   };
 
   componentWillUnmount() {
     this._removeListeners();
+    this._optionsRefMap = new Map();
   }
 
-  private _clearTimeout = () => {
-    clearTimeout(this._closeTimeout);
-    this._closeTimeout = null;
-  };
-
   private _handleMouseEvent = (event: MouseEvent) => {
-    if (
-      // @ts-ignore
-      !this._controlElement.contains(event.target) &&
-      this.props.closeOnClick
-    ) {
+    if (!this._controlElementRef?.contains(event.target as Node | null)) {
       this._closePopover();
     }
   };
 
   private _handleKeyboardEvent = (event: KeyboardEvent) => {
-    if (
-      // @ts-ignore
-      this._controlElement.contains(event.target) &&
-      event.keyCode === KeyboardKeys.Enter
-    ) {
-      // handle Enter key pressed on Target icon to prevent triggering of _closePopover twice
-      return;
-    }
-    if (
-      (this.props.closeOnEsc && event.keyCode === KeyboardKeys.Esc) ||
-      event.keyCode === KeyboardKeys.Enter
-    ) {
-      // handle if ESC or Enter button presesd
+    if (event.keyCode === ESC || !this._popoverElementRef?.contains(event.target as Node | null)) {
       this._closePopover();
     }
   };
 
-  private _openPopover = () => {
-    const {onOpen} = this.props;
-    this._clearTimeout();
+  private _getOptionRef = (index: number) => {
+    return this._optionsRefMap.get(index);
+  };
+
+  private _setOptionRef = (index: number, ref: HTMLDivElement | null) => {
+    return this._optionsRefMap.set(index, ref);
+  };
+
+  private _handleUpKeyPressed = (currentIndex: number) => () => {
+    this._getOptionRef(currentIndex - 1)?.focus();
+  };
+
+  private _handleDownKeyPressed = (currentIndex: number) => () => {
+    this._getOptionRef(currentIndex + 1)?.focus();
+  };
+
+  private _openPopover = (byKeyboard?: boolean) => {
     this.setState({open: true}, () => {
       this._addListeners();
-      if (onOpen) {
-        onOpen();
+      if (byKeyboard) {
+        this._getOptionRef(0)?.focus();
       }
     });
   };
 
   private _closePopover = () => {
-    const {onClose} = this.props;
-    this._clearTimeout();
-    this.setState({open: false}, () => {
-      this._removeListeners();
-      if (onClose) {
-        onClose();
-      }
-    });
+    this._removeListeners();
+    this.setState({open: false});
   };
 
-  private _togglePopover = (e: MouseEvent | KeyboardEvent) => {
+  private _togglePopover = (e: MouseEvent | KeyboardEvent, byKeyboard?: boolean) => {
     if (this.state.open) {
       this._closePopover();
     } else {
-      this._openPopover();
-    }
-  };
-  private _handleMouseEnter = () => {
-    if (!this.state.open) {
-      this._openPopover();
-    }
-  };
-  private _handleMouseLeave = () => {
-    this._closeTimeout = setTimeout(this._closePopover, CLOSE_ON_HOVER_DELAY);
-  };
-  private _handleHoverOnPopover = () => {
-    if (this.state.open && this._closeTimeout) {
-      this._clearTimeout();
-    } else {
-      this._closePopover();
+      this._openPopover(byKeyboard);
     }
   };
   private _addListeners = () => {
@@ -174,48 +89,51 @@ export class Popover extends Component<PopoverProps, PopoverState> {
     document.removeEventListener('click', this._handleMouseEvent);
     document.removeEventListener('keydown', this._handleKeyboardEvent);
   };
-  private _getHoverEvents = () => {
-    if (this.props.triggerMode === PopoverTriggerMode.Hover) {
-      return {
-        targetEvents: {
-          onMouseEnter: this._handleMouseEnter,
-          onMouseLeave: this._handleMouseLeave,
-        },
-        popoverEvents: {
-          onMouseEnter: this._handleHoverOnPopover,
-          onMouseLeave: this._handleHoverOnPopover,
-        },
-      };
-    }
-    return {targetEvents: {onClick: this._togglePopover}, popoverEvents: {}};
+
+  private _handleClickOnOption = (cb: (byKeyboard?: boolean) => void) => (event: OnClickEvent, byKeyboard?: boolean) => {
+    this._closePopover();
+    cb(byKeyboard);
   };
+
   render(props: PopoverProps) {
-    if (!props.content || !props.children) {
-      return null;
-    }
-    const {targetEvents, popoverEvents} = this._getHoverEvents();
+    const {open} = this.state;
     return (
       <div className={styles.popoverContainer}>
         <div
           className="popover-anchor-container"
           ref={node => {
-            // @ts-ignore
-            this._controlElement = node;
-          }}
-          {...targetEvents}>
-          {props.children}
+            this._controlElementRef = node;
+          }}>
+          <A11yWrapper onClick={this._togglePopover}>{props.children}</A11yWrapper>;
         </div>
-        {this.state.open && (
+        {open && (
           <div
-            aria-expanded="true"
-            className={[
-              props.className,
-              styles.popoverComponent,
-              styles[props.verticalPosition],
-              styles[props.horizontalPosition],
-            ].join(' ')}
-            {...popoverEvents}>
-            {props.content}
+            aria-expanded={open}
+            ref={node => {
+              this._popoverElementRef = node;
+            }}
+            className={[styles.reportPopover, styles.popoverComponent, styles.bottom, styles.right].join(' ')}>
+            <div role="menu" className={styles.popoverMenu}>
+              {props.options.map((el, index) => {
+                return (
+                  <A11yWrapper
+                    onClick={this._handleClickOnOption(el.onMenuChosen)}
+                    onDownKeyPressed={this._handleDownKeyPressed(index)}
+                    onUpKeyPressed={this._handleUpKeyPressed(index)}>
+                    <div
+                      tabIndex={0}
+                      role="menuitem"
+                      aria-label={el.label}
+                      className={styles.popoverMenuItem}
+                      ref={node => {
+                        this._setOptionRef(index, node);
+                      }}>
+                      {el.label}
+                    </div>
+                  </A11yWrapper>
+                );
+              })}
+            </div>
           </div>
         )}
       </div>

package/src/moderation-plugin.tsx

@@ -3,7 +3,9 @@ import {Moderation, ModerateOption} from './components/moderation';
 import {PluginButton} from './components/plugin-button';
 import * as styles from './moderation-plugin.scss';
 import {ui} from 'kaltura-player-js';
+import {icons} from './components/icons';
 import {ContribServices, ToastSeverity, OnClickEvent} from '@playkit-js/common';
+import {UpperBarManager} from '@playkit-js/ui-managers';
 import {ReportLoader, KalturaModerationFlag} from './providers';
 import {ErrorIcon} from './components/icons/error-icon';
 import {SuccessIcon} from './components/icons/success-icon';
@@ -38,7 +40,7 @@ export class ModerationPlugin extends KalturaPlayer.core.BasePlugin {
   private _moderationOverlay = null;
   private _wasPlayed = false; // keep state of the player so we can resume if needed
   private _removeActiveOverlay: null | Function = null;
-  private _removePluginIcon: null | Function = null;
+  private _pluginIcon = -1;
   private _contribServices: ContribServices;
 
   constructor(name: string, private _player: KalturaPlayerTypes.Player, config: ModerationPluginConfig) {
@@ -46,10 +48,15 @@ export class ModerationPlugin extends KalturaPlayer.core.BasePlugin {
     this._contribServices = ContribServices.get({kalturaPlayer: _player});
   }
 
+  get upperBarManager() {
+    return this.player.getService('upperBarManager') as UpperBarManager | undefined;
+  }
+
   loadMedia(): void {
-    this.logger.debug('Moderation plugin loaded', {
-      method: 'loadMedia'
-    });
+    if (!this.upperBarManager) {
+      this.logger.warn('upperBarManager service not registered');
+      return;
+    }
     this._addPluginIcon();
   }
 
@@ -177,14 +184,16 @@ export class ModerationPlugin extends KalturaPlayer.core.BasePlugin {
 
   private _addPluginIcon(): void {
     const {tooltipMessage} = this.config;
-    if (this._removePluginIcon) {
+    if (this._pluginIcon > 0) {
       return;
     }
-    this._removePluginIcon = this._player.ui.addComponent({
-      label: 'Moderation',
-      area: ReservedPresetAreas.TopBarRightControls,
-      presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
-      get: () => <PluginButton onClick={this._toggleOverlay} label={tooltipMessage} />
+    this.player.ready().then(() => {
+      this._pluginIcon = this.upperBarManager!.add({
+        label: 'Moderation',
+        component: () => <PluginButton onClick={this._toggleOverlay} label={tooltipMessage} />,
+        svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
+        onClick: this._toggleOverlay
+      }) as number;
     });
   }
 
@@ -200,13 +209,14 @@ export class ModerationPlugin extends KalturaPlayer.core.BasePlugin {
   }
 
   reset(): void {
+    this._removeOverlay();
     this._contribServices.reset();
   }
 
   destroy(): void {
-    this._removeOverlay();
-    if (this._removePluginIcon) {
-      this._removePluginIcon();
+    if (this._pluginIcon > 0) {
+      this.upperBarManager!.remove(this._pluginIcon);
+      this._pluginIcon = -1;
     }
   }
 }

package/src/components/plugin-button/plugin-button.scss

@@ -1,14 +0,0 @@
-.pluginButton {
-  display: flex;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-:global(.playkit-player .playkit-top-bar .playkit-right-controls) {
-  display: flex;
-}

package/src/components/popover/popover-menu.scss

@@ -1,4 +0,0 @@
-.popover-menu {
-    padding-top: 6px;
-    padding-bottom: 6px;
-}

package/src/components/popover/popover-menu.tsx

@@ -1,57 +0,0 @@
-import {h, Component, ComponentChild} from 'preact';
-import * as styles from './popover-menu.scss';
-
-export interface PopoverMenuItem {
-  label?: string;
-  onMenuChosen?: Function;
-  customRenderer?: (el: PopoverMenuItem) => ComponentChild;
-}
-
-interface PopoverMenuProps {
-  options: Array<PopoverMenuItem>;
-  itemRenderer?: (el: PopoverMenuItem) => ComponentChild;
-}
-
-/**
- * Popover menu renders list of options.
- *  options example:
- *   [
- *    {label: 'option_1', onMenuChosen: () => console.log('selected first')},
- *    {label: 'option_2', onMenuChosen: () => console.log('selected second')}
- *   ]
- * In case when 'itemRenderer' properdy hasn't provided - PopoverMenu renders
- * div with class "popover-menu-item" that contain label for the current option.
- * Default render of options can be changed by providing 'itemRenderer' - it should be
- * function that takes current option and returns valid 'preact' node.
- * If some option need to be rendered with a different method - specific render
- * method can be provided with 'customRenderer' property for the current option.
- *  option example with specific render method:
- *   { label: 'specific render', onMenuChosen: () => {}, customRenderer: el => (<span>{el.label}</span>)}
- */
-
-export class PopoverMenu extends Component<PopoverMenuProps> {
-  render(props: any) {
-    return (
-      <div className={styles.popoverMenu}>
-        {props.options.map((el: PopoverMenuItem) => {
-          if (el.customRenderer) {
-            return el.customRenderer(el);
-          }
-          if (props.itemRenderer) {
-            return props.itemRenderer(el);
-          }
-          return (
-            <div
-              className="popover-menu-item"
-              onClick={() => {
-                // @ts-ignore
-                el.onMenuChosen(el)
-              }}>
-              {el.label}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-}

package/src/components/popover-menu/index.ts

@@ -1 +0,0 @@
-export * from './popover-menu';

package/src/components/popover-menu/popover-menu.scss

@@ -1,4 +0,0 @@
-.popover-menu {
-    padding-top: 6px;
-    padding-bottom: 6px;
-}

package/src/components/popover-menu/popover-menu.tsx

@@ -1,52 +0,0 @@
-import { h, Component, ComponentChild } from "preact";
-import * as styles from "./popover-menu.scss";
-
-export interface PopoverMenuItem {
-    label: string;
-    onMenuChosen: Function;
-    customRenderer?: (el: PopoverMenuItem) => ComponentChild;
-}
-
-interface PopoverMenuProps {
-    options: Array<PopoverMenuItem>;
-    itemRenderer?: (el: PopoverMenuItem) => ComponentChild;
-}
-
-/**
- * Popover menu renders list of options.
- *  options example:
- *   [
- *    {label: 'option_1', onMenuChosen: () => console.log('selected first')},
- *    {label: 'option_2', onMenuChosen: () => console.log('selected second')}
- *   ]
- * In case when 'itemRenderer' properdy hasn't provided - PopoverMenu renders
- * div with class "popover-menu-item" that contain label for the current option.
- * Default render of options can be changed by providing 'itemRenderer' - it should be
- * function that takes current option and returns valid 'preact' node.
- * If some option need to be rendered with a different method - specific render
- * method can be provided with 'customRenderer' property for the current option.
- *  option example with specific render method:
- *   { label: 'specific render', onMenuChosen: () => {}, customRenderer: el => (<span>{el.label}</span>)}
- */
-
-export class PopoverMenu extends Component<PopoverMenuProps> {
-    render(props: PopoverMenuProps) {
-        return (
-            <div className={styles.popoverMenu}>
-                {props.options.map((el: PopoverMenuItem) => {
-                    if (el.customRenderer) {
-                        return el.customRenderer(el);
-                    }
-                    if (props.itemRenderer) {
-                        return props.itemRenderer(el);
-                    }
-                    return (
-                        <div className="popover-menu-item" onClick={() => el.onMenuChosen(el)}>
-                            {el.label}
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    }
-}