@playkit-js/moderation 2.0.10

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@playkit-js/moderation",
+  "version": "2.0.10",
+  "private": false,
+  "bugs": {
+    "url": "https://github.com/kaltura/playkit-js-moderation/issues"
+  },
+  "homepage": "https://github.com/kaltura/playkit-js-moderation#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kaltura/playkit-js-moderation.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@playkit-js-contrib/cli": "1.1.0",
+    "@playkit-js-contrib/common": "^4.1.10",
+    "@playkit-js-contrib/plugin": "^4.1.12",
+    "@playkit-js-contrib/ui": "^4.1.12",
+    "classnames": "2.2.6",
+    "kaltura-typescript-client": "file:libs/kaltura-typescript-client-7.0.0-v20190324-101134.tgz",
+    "null": "^2.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "8.3.5",
+    "@commitlint/config-conventional": "8.3.4",
+    "@types/classnames": "2.2.9",
+    "@types/node": "13.7.6",
+    "@typescript-eslint/eslint-plugin": "2.21.0",
+    "@typescript-eslint/parser": "2.21.0",
+    "husky": "3.1.0",
+    "preact": "^10.4.1",
+    "tslint": "5.20.1",
+    "typescript": "3.8.2"
+  },
+  "license": "AGPL-3.0",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "reset": "npm run clean && rm -rf node_modules",
+    "build": "kcontrib build",
+    "build:dev": "kcontrib build --dev",
+    "bump-canary": "standard-version --prerelease canary --skip.commit=true --skip.tag=true",
+    "serve": "kcontrib serve",
+    "serve:update-modes": "kcontrib serve --update-modes",
+    "serve:update-player": "kcontrib serve --update-player",
+    "analyze": "npm run build && npx source-map-explorer dist/playkit-moderation.js",
+    "lint": "tsc --noEmit && eslint ./src --ext .ts,.tsx",
+    "lint:fix": "tsc --noEmit && eslint ./src --ext .ts,.tsx --fix",
+    "husky:pre-commit": "lint-staged",
+    "husky:commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+    "deploy:prepare": "kcontrib deploy --prepare",
+    "deploy:publish-to-npm": "kcontrib deploy --publish",
+    "deploy:next:prepare": "kcontrib deploy --prepare --prerelease next",
+    "contrib:latest": "kcontrib infra --type=latest",
+    "infra:latest": "kcontrib infra --type=latest",
+    "infra:next": "kcontrib infra --type=next",
+    "infra:local": "kcontrib infra --type=local",
+    "infra:add": "kcontrib infra --add"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/src/assets/close.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>Icons/32/Close</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Icons/32/Close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Bounds" x="0" y="0" width="32" height="32"></rect>
+        <path d="M17.9113162,16 L24.6072325,9.30408374 C25.1313645,8.77995172 25.1287183,7.92687249 24.6009229,7.3990771 C24.0694478,6.86760201 23.220227,6.86845682 22.6959163,7.39276754 L16,14.0886838 L9.30408374,7.39276754 C8.77995172,6.86863552 7.92687249,6.8712817 7.3990771,7.3990771 C6.86760201,7.93055219 6.86845682,8.77977302 7.39276754,9.30408374 L14.0886838,16 L7.39276754,22.6959163 C6.86863552,23.2200483 6.8712817,24.0731275 7.3990771,24.6009229 C7.93055219,25.132398 8.77977302,25.1315432 9.30408374,24.6072325 L16,17.9113162 L22.6959163,24.6072325 C23.2200483,25.1313645 24.0731275,25.1287183 24.6009229,24.6009229 C25.132398,24.0694478 25.1315432,23.220227 24.6072325,22.6959163 L17.9113162,16 Z" id="Close" fill="rgba(255,255,255,0.8)"></path>
+    </g>
+</svg>

package/src/assets/down.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>Icons/16/Arrow/down</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Icons/16/Arrow/down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z" id="Path-2" fill="#ffffff"></path>
+    </g>
+</svg>

package/src/assets/error.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#CCC" fill-rule="evenodd" d="M8 2c3.314 0 6 2.686 6 6s-2.686 6-6 6-6-2.686-6-6 2.686-6 6-6zm0 8c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1zm0-6c-.552 0-1 .444-1 1v3c0 .513.383.936.883.993L8 9c.552 0 1-.444 1-1V5c0-.513-.383-.936-.883-.993L8 4z"/>
+</svg>

package/src/assets/flag.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0H32V32H0z"/>
+        <path fill="#FFF" d="M8.378 7.084l5.175 19.314c.134.497-.126 1.005-.594 1.19l-.112.037c-.533.143-1.08-.165-1.225-.71L6.447 7.603c-.134-.497.126-1.005.594-1.19l.112-.037c.533-.143 1.08.165 1.225.71zM21.882 7c1.878 0 2.79 1.622 1.84 3.239l-1.386 2.36 2.94 3.246C26.6 17.31 25.842 19 23.868 19h-10.21c-.452 0-.848-.304-.966-.741l-2.68-10c-.17-.635.31-1.259.967-1.259h10.902zm.211 1.994l-.21.006h-9.6l2.144 8h9.196l-3.263-3.604c-.293-.324-.342-.8-.12-1.178l1.757-2.992c.114-.194.168-.23.096-.232z" opacity=".8"/>
+    </g>
+</svg>

package/src/assets/report.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#CCC" fill-rule="evenodd" d="M3.292 1.488L6.69 14.172c.086.32-.076.646-.371.774l-.093.032c-.35.094-.712-.122-.805-.466L2.023 1.828c-.086-.32.076-.646.371-.774l.093-.032c.35-.094.712.122.805.466zm8.868-.055c1.233 0 1.832 1.065 1.208 2.127l-.91 1.55 1.93 2.132c.87.961.373 2.071-.923 2.071H6.76c-.297 0-.558-.2-.635-.486l-1.76-6.568c-.111-.417.203-.826.635-.826h7.16z"/>
+</svg>

package/src/components/moderation/assets/down.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>Icons/16/Arrow/down</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Icons/16/Arrow/down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z" id="Path-2" fill="#FFFFFF"></path>
+    </g>
+</svg>

package/src/components/moderation/index.ts

@@ -0,0 +1 @@
+export * from "./moderation";

package/src/components/moderation/moderation.scss

@@ -0,0 +1,195 @@
+@import '../../variables.scss';
+
+.root {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 60px 32px 32px 32px;
+  color: $white-color;
+  background-color: $root-background;
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+  .close-button {
+    position: absolute;
+    top: 32px;
+    right: 32px;
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    cursor: pointer;
+    background-image: url('../../assets/close.svg');
+    &:focus {
+      outline: 1px solid $focus-color;
+    }
+}
+  .main-wrapper {
+    height: 100%;
+    width: 400px;
+    .title {
+      margin-bottom: 8px;
+      font-size: 28px;
+      font-weight: bold;
+      text-align: center;
+    }
+    .subtitle {
+      margin-top: 16px;
+      opacity: 0.7;
+      font-size: 15px;
+      line-height: 1.6;
+    }
+    .report-popover {
+      width: 100%;
+      max-width: 280px;
+    }
+    .popover-menu-item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 36px;
+      padding: 0 16px;
+      font-size: 15px;
+      color: $white-color;
+      &:hover {
+        cursor: pointer;
+        background-color: $semigray-color;
+      }
+      &:focus {
+          outline: 1px solid $focus-color;
+      }
+    }
+    .select-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      margin-top: 24px;
+      margin-bottom: 16px;
+      cursor: pointer;
+      padding: 0;
+      background: initial;
+      color: $white-color;
+      border: none;
+      &:focus {
+        outline: 1px solid $focus-color;
+      }
+      .select {
+        opacity: 0.8;
+        font-size: 15px;
+        line-height: 1.6;
+        font-weight: bold;
+      }
+      .down-arrow {
+        width: 10px;
+        height: 10px;
+        margin-left: 10px;
+        background-image: url('../../assets/down.svg');
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+    }
+    .textarea {
+      resize: none;
+      width: 100%;
+      height: 72px;
+      margin-bottom: 12px;
+      padding: 7px 8px;
+      font-size: 15px;
+      color: $gray-color;
+      background-color: rgba(255, 255, 255, 0.16);
+      border-radius: 4px;
+      border: solid 1px rgba($color: $white-color, $alpha: 0.4);
+      overflow-y: auto;
+      &.active {
+        background-color: $black-color;
+      }
+      &:-ms-input-placeholderr { /* Internet Explorer 10-11 */
+        color: $gray-color !important;
+        font-size: 15px;
+        opacity: 1;
+      }
+      &::-ms-input-placeholder { /* Microsoft Edge */
+        color: $gray-color;
+      }
+      &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+        color: $gray-color;
+        opacity: 1; /* Firefox */
+      }
+      &::selection {
+        border-radius: 2px;
+        background-color: #5b80a7;
+      }
+      &::-webkit-scrollbar {
+        width: 11px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 8px;
+        background-color: rgba(255, 255, 255, 0.3);
+        border: 4px solid rgba(0, 0, 0, 0);
+        background-clip: padding-box;
+      }
+    }
+    .submit-wrapper {
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .character-counter {
+        font-size: 14px;
+        text-align: right;
+        margin-right: 12px;
+        color: $character-counter-color;
+      }
+      .submit-button {
+        width: 88px;
+        height: 32px;
+        border-radius: 18px;
+        color: $white-color;
+        text-align: center;
+        font-size: 15px;
+        font-weight: bold;
+        background-color: $submit-button-color;
+        border: none;
+        outline: none !important; // overwrites player styles
+        cursor: pointer;
+        &.disabled {
+          background-color: $semigray-color;
+        }
+        &:hover:not(.disabled) {
+          background-color: darken($color: $submit-button-color, $amount: 10);
+        }
+        &:focus {
+          box-shadow: 0px 0px 0px 1px $focus-color;
+        }
+      }
+    }
+  }
+}
+
+:global {
+  .kaltura-moderation__root .playkit-tooltip {
+    width: auto;
+  }
+  .playkit-player.playkit-size-sm,
+  .playkit-player.playkit-size-xs {
+    .kaltura-moderation__close-button {
+      top: 10px;
+      right: 16px;
+    }
+    .kaltura-moderation__root {
+      padding: 14px 16px;
+      .kaltura-moderation__title {
+        margin-bottom: 16px;
+        font-size: 20px;
+        text-align: left;
+      }
+    }
+  }
+  .playkit-player.playkit-size-ty {
+    .kaltura-moderation__root {
+      display: none;
+    }
+  }
+}

package/src/components/moderation/moderation.tsx

@@ -0,0 +1,239 @@
+import {h, Component, Fragment} from 'preact';
+import {getContribLogger, ObjectUtils} from '@playkit-js-contrib/common';
+import {
+  KeyboardKeys,
+  Popover,
+  PopoverHorizontalPositions,
+  PopoverVerticalPositions,
+} from '@playkit-js-contrib/ui';
+import {KalturaModerationFlagType} from 'kaltura-typescript-client/api/types';
+import {PopoverMenu, PopoverMenuItem} from '../popover-menu';
+import * as styles from './moderation.scss';
+const {get} = ObjectUtils;
+const {Tooltip} = KalturaPlayer.ui.components;
+
+export interface ModerateOption {
+  id: number;
+  label: string;
+}
+
+interface ModerationProps {
+  onClick: () => void;
+  onSubmit: (contentType: KalturaModerationFlagType, content: string, callBack: () => void) => void;
+  reportLength: number;
+  moderateOptions: ModerateOption[];
+  subtitle: string;
+  tooltipMessage: string;
+  closeButtonSelected: boolean;
+}
+
+interface ModerationState {
+  reportContentType: number;
+  reportContent: string;
+  isTextareaActive: boolean;
+}
+
+const logger = getContribLogger({
+  class: 'Info',
+  module: 'info-plugin',
+});
+
+const DEFAULT_CONTENT_TYPE = 'Choose a reason for reporting this content';
+
+const initialState: ModerationState = {
+  reportContent: '',
+  reportContentType: -1,
+  isTextareaActive: false,
+};
+
+export class Moderation extends Component<ModerationProps, ModerationState> {
+  _closeButtonNode: null | HTMLDivElement = null;
+
+  state: ModerationState = { ...initialState };
+
+  componentDidMount(): void {
+    logger.trace('Moderation plugin mount', {
+      method: 'componentDidMount',
+    });
+    if (this._closeButtonNode && this.props.closeButtonSelected) {
+      this._closeButtonNode.focus();
+    }
+  }
+
+  private _onContentTypeChange = (id: number) => {
+    this.setState({
+      reportContentType: id,
+    });
+  };
+
+  private _onContentChange = (event: any) => {
+    this.setState({
+      reportContent: event.target.value,
+    });
+  };
+
+  private _handleFocus = () => {
+    this.setState({
+      isTextareaActive: true,
+    });
+  };
+
+  private _handleBlur = () => {
+    this.setState((state: ModerationState) => ({
+      isTextareaActive: state.reportContent.length > 0,
+    }));
+  };
+
+  private _handleSubmit = (event: any) => {
+    event.preventDefault();
+    const {reportContent, reportContentType} = this.state;
+    logger.trace('Moderation plugin submit click', {
+      method: 'handleSubmit',
+    });
+    if (reportContentType === -1) {
+      logger.trace('Moderation User did not select reason', {
+        method: 'handleSubmit',
+      });
+      return;
+    }
+    this.props.onSubmit(reportContentType, reportContent, () => {
+      this.setState({...initialState});
+    });
+  };
+
+  private _onKeyDown = (e: KeyboardEvent, callBack: Function) => {
+    if (e.keyCode !== KeyboardKeys.Enter && e.keyCode !== KeyboardKeys.Esc) {
+      // don't stopPropagation on ESC and Enter pressed as it prevent the popup closing
+      e.stopPropagation();
+    }
+    switch (e.keyCode) {
+      case 13: // Enter pressed
+        callBack();
+        break;
+    }
+  };
+
+  private _popoverMenuItemRenderer = (el: PopoverMenuItem) => (
+    <div
+      tabIndex={1}
+      role="button"
+      onClick={() => el.onMenuChosen()}
+      onKeyDown={e => this._onKeyDown(e, el.onMenuChosen)}
+      className={styles.popoverMenuItem}>
+      {el.label}
+    </div>
+  );
+
+  private _getPopoverMenuOptions = () => {
+    return this.props.moderateOptions.map(({label, id}: ModerateOption) => ({
+      label: label || '',
+      onMenuChosen: () => this._onContentTypeChange(id || -1),
+    }));
+  };
+
+  private _popoverContent = () => {
+    return (
+      <PopoverMenu
+        itemRenderer={this._popoverMenuItemRenderer}
+        options={this._getPopoverMenuOptions()}
+      />
+    );
+  };
+
+  private _getContentType = () => {
+    return (
+      this.props.moderateOptions.find(
+        (moderateOption: ModerateOption) =>
+          moderateOption.id === this.state.reportContentType
+      ) || {}
+    );
+  };
+
+  private _handleClose = (event: MouseEvent | KeyboardEvent) => {
+    if (
+      event.type === 'keypress' &&
+      get(event, 'keyCode', null) !== KeyboardKeys.Enter
+    ) {
+      return;
+    }
+    this.props.onClick();
+  };
+
+  render(props: ModerationProps) {
+    const {reportLength, subtitle, tooltipMessage} = props;
+    const {reportContent, reportContentType, isTextareaActive} = this.state;
+    return (
+      <div className={[styles.root, 'kaltura-moderation__root'].join(' ')}>
+        <div
+          className={[
+            styles.closeButton,
+            'kaltura-moderation__close-button',
+          ].join(' ')}
+          role="button"
+          tabIndex={1}
+          onClick={this._handleClose}
+          onKeyPress={this._handleClose}
+          ref={(node: HTMLDivElement | null) => {
+            this._closeButtonNode = node;
+          }}
+        />
+        <div className={styles.mainWrapper}>
+          <div
+            className={[styles.title, 'kaltura-moderation__title'].join(' ')}>
+            What’s wrong with this content?
+          </div>
+          {subtitle ? (
+            <div className={[styles.subtitle].join(' ')}>{subtitle}</div>
+          ) : null}
+          <Popover
+            className={styles.reportPopover}
+            verticalPosition={PopoverVerticalPositions.Bottom}
+            horizontalPosition={PopoverHorizontalPositions.Right}
+            content={this._popoverContent()}>
+            <Fragment>
+              <button className={styles.selectWrapper} tabIndex={1}>
+                <div className={styles.select}>
+                  {reportContentType > -1
+                    ? get(this._getContentType(), 'label', '')
+                    : DEFAULT_CONTENT_TYPE}
+                </div>
+                <div className={styles.downArrow} />
+              </button>
+            </Fragment>
+          </Popover>
+          <form onSubmit={this._handleSubmit}>
+            <textarea
+              className={[
+                styles.textarea,
+                isTextareaActive ? styles.active : '',
+              ].join(' ')}
+              onInput={this._onContentChange}
+              onFocus={this._handleFocus}
+              onBlur={this._handleBlur}
+              tabIndex={1}
+              placeholder="Describe what you saw..."
+              value={reportContent}
+              maxLength={reportLength}
+            />
+            <div className={styles.submitWrapper}>
+              <div className={styles.characterCounter}>
+                {`${reportContent.length}/${reportLength}`}
+              </div>
+              <Tooltip label={tooltipMessage} classNames={styles.tooltip}>
+                <button
+                  className={[
+                    styles.submitButton,
+                    reportContentType === -1 ? styles.disabled : '',
+                  ].join(' ')}
+                  tabIndex={1}
+                  type="submit">
+                  Report
+                </button>
+              </Tooltip>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}

package/src/components/plugin-button/index.ts

@@ -0,0 +1 @@
+export * from "./plugin-button";

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

@@ -0,0 +1,14 @@
+.moderation-icon {
+    background-image: url("../../assets/flag.svg");
+    width: 32px;
+    height: 32px;
+    opacity: 0.8;
+    cursor: pointer;
+    background-color: inherit;
+    border: none;
+    padding: 0;
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+}

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

@@ -0,0 +1,6 @@
+import {h} from 'preact';
+import * as styles from './plugin-button.scss';
+
+export const PluginButton = () => (
+  <button className={styles.moderationIcon} tabIndex={1} />
+);

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

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

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

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

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

@@ -0,0 +1,52 @@
+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>
+        );
+    }
+}

package/src/global.d.ts

@@ -0,0 +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 "*.svg" {
+    const content: any;
+    export default content;
+}

package/src/index.ts

@@ -0,0 +1 @@
+import "./moderation-plugin";