@playkit-js/moderation 2.1.1 → 2.2.0-canary.10-af41e17

package/src/components/popover/index.ts

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

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

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

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

@@ -0,0 +1,57 @@
+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/popover.scss

@@ -0,0 +1,30 @@
+.popover-container {
+    position: relative;
+    .popover-component {
+        background-color: #222222;
+        border-radius: 4px;
+        position: absolute;
+        right: 0px;
+        font-size: 15px;
+        display: block;
+        &.visible {
+            visibility: visible;
+            opacity: 1;
+            z-index: 10;
+        }
+        &.top {
+            bottom: 100%;
+            margin-bottom: 6px;
+        }
+        &.bottom {
+            top: 100%;
+            margin-top: 6px;
+        }
+        &.right {
+            left: 0px;
+        }
+        &.left {
+            right: 0px;
+        }
+    }
+}

package/src/components/popover/popover.tsx

@@ -0,0 +1,224 @@
+import {h, Component, ComponentChild} from 'preact';
+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',
+}
+
+export enum KeyboardKeys {
+  Esc = 27,
+  Enter = 13,
+  Tab = 9,
+  Space = 32,
+  End = 35,
+  Home = 36,
+}
+
+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;
+}
+
+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,
+  };
+  state = {
+    open: false,
+  };
+
+  componentWillUnmount() {
+    this._removeListeners();
+  }
+
+  private _clearTimeout = () => {
+    clearTimeout(this._closeTimeout);
+    this._closeTimeout = null;
+  };
+
+  private _handleMouseEvent = (event: MouseEvent) => {
+    if (
+      // @ts-ignore
+      !this._controlElement.contains(event.target) &&
+      this.props.closeOnClick
+    ) {
+      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
+      this._closePopover();
+    }
+  };
+
+  private _openPopover = () => {
+    const {onOpen} = this.props;
+    this._clearTimeout();
+    this.setState({open: true}, () => {
+      this._addListeners();
+      if (onOpen) {
+        onOpen();
+      }
+    });
+  };
+
+  private _closePopover = () => {
+    const {onClose} = this.props;
+    this._clearTimeout();
+    this.setState({open: false}, () => {
+      this._removeListeners();
+      if (onClose) {
+        onClose();
+      }
+    });
+  };
+
+  private _togglePopover = (e: MouseEvent | KeyboardEvent) => {
+    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();
+    }
+  };
+  private _addListeners = () => {
+    document.addEventListener('click', this._handleMouseEvent);
+    document.addEventListener('keydown', this._handleKeyboardEvent);
+  };
+  private _removeListeners = () => {
+    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: {}};
+  };
+  render(props: PopoverProps) {
+    if (!props.content || !props.children) {
+      return null;
+    }
+    const {targetEvents, popoverEvents} = this._getHoverEvents();
+    return (
+      <div className={styles.popoverContainer}>
+        <div
+          className="popover-anchor-container"
+          ref={node => {
+            // @ts-ignore
+            this._controlElement = node;
+          }}
+          {...targetEvents}>
+          {props.children}
+        </div>
+        {this.state.open && (
+          <div
+            aria-expanded="true"
+            className={[
+              props.className,
+              styles.popoverComponent,
+              styles[props.verticalPosition],
+              styles[props.horizontalPosition],
+            ].join(' ')}
+            {...popoverEvents}>
+            {props.content}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

package/src/global.d.ts

@@ -1,11 +1,11 @@
 /// <reference path="../node_modules/@playkit-js-contrib/common/global-types/index.d.ts" />
 
-declare module "*.scss" {
-    const content: { [className: string]: string };
-    export = content;
+declare module '*.scss' {
+  const content: {[className: string]: string};
+  export = content;
 }
 
-declare module "*.svg" {
-    const content: any;
-    export default content;
+declare module '*.svg' {
+  const content: any;
+  export default content;
 }

package/src/index.ts

@@ -1 +1,14 @@
-import "./moderation-plugin";
+import {ModerationPlugin} from './moderation-plugin';
+
+declare var __VERSION__: string;
+declare var __NAME__: string;
+
+const VERSION = __VERSION__;
+const NAME = __NAME__;
+
+export {ModerationPlugin as Plugin};
+export {VERSION, NAME};
+
+const pluginName: string = 'playkit-js-moderation';
+
+KalturaPlayer.core.registerPlugin(pluginName, ModerationPlugin);

package/src/moderation-plugin.scss

@@ -1,13 +1,5 @@
 .toast-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 7px;
-    background-position: center;
-    background-repeat: no-repeat;
-    &.success {
-        background-image: url('./assets/report.svg');
-    }
-    &.error {
-        background-image: url('./assets/error.svg');
-    }
-}
+  width: 16px;
+  height: 16px;
+  margin-right: 7px;
+}