@playkit-js/moderation 2.1.1 → 2.2.0-canary.2-223f8a4

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@playkit-js/moderation",
-  "version": "2.1.1",
+  "version": "2.2.0-canary.2-223f8a4",
+  "main": "dist/playkit-moderation.js",
   "private": false,
   "bugs": {
     "url": "https://github.com/kaltura/playkit-js-moderation/issues"
@@ -13,27 +14,32 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "@playkit-js-contrib/cli": "1.1.0",
-    "@playkit-js-contrib/common": "^4.1.10",
-    "@playkit-js-contrib/plugin": "^4.1.13",
-    "@playkit-js-contrib/ui": "^4.1.13",
-    "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",
-    "standard-version": "^6.0.1",
-    "typescript": "3.8.2"
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "conventional-github-releaser": "3.1.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.7.1",
+    "documentation": "^13.2.5",
+    "husky": "^8.0.1",
+    "jest": "^28.1.0",
+    "kaltura-player-js": "https://github.com/kaltura/kaltura-player-js.git#master",
+    "lint-staged": "^12.4.1",
+    "node-sass": "^7.0.1",
+    "prettier": "^2.6.2",
+    "sass-loader": "^12.6.0",
+    "standard-version": "^9.3.2",
+    "style-loader": "1.3.0",
+    "ts-loader": "^9.3.0",
+    "tslint": "^6.1.3",
+    "typescript": "^4.6.4",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0"
+  },
+  "peerDependencies": {
+    "kaltura-player-js": "https://github.com/kaltura/kaltura-player-js.git#master"
   },
   "license": "AGPL-3.0",
   "files": [
@@ -44,38 +50,27 @@
     "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"
+    "clean": "rm -rf ./dist",
+    "prebuild": "npm run clean",
+    "build": "webpack --mode production",
+    "dev": "webpack-dev-server --mode development",
+    "watch": "webpack --progress --color --watch --mode development",
+    "test": "jest",
+    "release": "standard-version",
+    "pushTaggedRelease": "git push --follow-tags --no-verify origin master",
+    "eslint": "eslint . --color",
+    "commit:dist": "git add --force --all dist && (git commit -m 'chore: update dist' || exit 0)",
+    "docs:generate": "documentation build flow-typed/** src/** -f md -o docs/configuration.md",
+    "docs:serve": "documentation serve flow-typed/** src/** --watch",
+    "precommit": "lint-staged",
+    "prettier:fix": "prettier --write ."
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+  "keywords": [
+    "moderation",
+    "kaltura",
+    "player",
+    "playkit-js",
+    "playkit-js-moderation",
+    "html5 player"
+  ]
 }

package/src/components/a11y-wrapper/a11y-wrapper.tsx

@@ -0,0 +1,26 @@
+import {cloneElement, VNode} from 'preact';
+
+const {ENTER, SPACE} = KalturaPlayer.ui.utils.KeyMap;
+
+export type OnClickEvent = KeyboardEvent | MouseEvent;
+export type OnClick = (e: OnClickEvent, byKeyboard?: boolean) => void;
+
+interface A11yWrapperProps {
+  children: VNode;
+  onClick: OnClick;
+}
+
+export const A11yWrapper = ({children, onClick}: A11yWrapperProps) => {
+  return cloneElement(children, {
+    onKeyDown: (e: KeyboardEvent) => {
+      if ([SPACE, ENTER].includes(e.keyCode)) {
+        e.preventDefault();
+        onClick(e, true);
+      }
+    },
+    onClick: (e: MouseEvent) => {
+      e.stopPropagation();
+      onClick(e);
+    }
+  });
+};

package/src/components/a11y-wrapper/index.ts

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

package/src/components/icons/index.ts

@@ -0,0 +1,9 @@
+export namespace icons {
+  export const PLUGIN_ICON =
+    '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';
+  export const CLOSE_ICON =
+    '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';
+  export const BigSize = 32;
+  export const MediumSize = 24;
+  export const SmallSize = 16;
+}

package/src/components/moderation/moderation.scss

@@ -13,19 +13,22 @@
   background-color: $root-background;
   -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
+  z-index: 1;
   .close-button {
     position: absolute;
     top: 32px;
     right: 32px;
+    display: flex;
     width: 32px;
     height: 32px;
-    min-width: 32px;
+    padding: 0;
+    background: transparent;
+    border: none;
     cursor: pointer;
-    background-image: url('../../assets/close.svg');
     &:focus {
       outline: 1px solid $focus-color;
     }
-}
+  }
   .main-wrapper {
     height: 100%;
     width: 400px;
@@ -58,7 +61,7 @@
         background-color: $semigray-color;
       }
       &:focus {
-          outline: 1px solid $focus-color;
+        outline: 1px solid $focus-color;
       }
     }
     .select-wrapper {
@@ -105,15 +108,18 @@
       &.active {
         background-color: $black-color;
       }
-      &:-ms-input-placeholderr { /* Internet Explorer 10-11 */
+      &:-ms-input-placeholderr {
+        /* Internet Explorer 10-11 */
         color: $gray-color !important;
         font-size: 15px;
         opacity: 1;
       }
-      &::-ms-input-placeholder { /* Microsoft Edge */
+      &::-ms-input-placeholder {
+        /* Microsoft Edge */
         color: $gray-color;
       }
-      &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+      &::placeholder {
+        /* Chrome, Firefox, Opera, Safari 10.1+ */
         color: $gray-color;
         opacity: 1; /* Firefox */
       }
@@ -166,6 +172,12 @@
       }
     }
   }
+
+  // TODO: remove once player fix the font
+  * {
+    font-family: sans-serif;
+    font-style: normal;
+  }
 }
 
 :global {
@@ -193,3 +205,9 @@
     }
   }
 }
+
+// TODO: remove once core team fix alignment of plugin icons
+:global(.playkit-player .playkit-top-bar .playkit-right-controls) {
+  display: flex;
+  flex-direction: row;
+}

package/src/components/moderation/moderation.tsx

@@ -1,16 +1,12 @@
 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 {KeyboardKeys, Popover, PopoverHorizontalPositions, PopoverVerticalPositions} from '../popover';
 import {PopoverMenu, PopoverMenuItem} from '../popover-menu';
+import {OnClick, A11yWrapper} from '../a11y-wrapper';
+import {icons} from '../icons';
 import * as styles from './moderation.scss';
-const {get} = ObjectUtils;
-const {Tooltip} = KalturaPlayer.ui.components;
+
+const {Tooltip, Icon} = KalturaPlayer.ui.components;
+const {withText, Text} = KalturaPlayer.ui.preacti18n;
 
 export interface ModerateOption {
   id: number;
@@ -18,13 +14,18 @@ export interface ModerateOption {
 }
 
 interface ModerationProps {
-  onClick: () => void;
-  onSubmit: (contentType: KalturaModerationFlagType, content: string, callBack: () => void) => void;
+  onClick: OnClick;
+  onSubmit: (contentType: number, content: string, callBack: () => void) => void;
   reportLength: number;
   moderateOptions: ModerateOption[];
   subtitle: string;
   tooltipMessage: string;
   closeButtonSelected: boolean;
+  sendReportLabel?: string;
+  closeLabel?: string;
+  reportPlaceholder?: string;
+  defaultContentType?: string;
+  reportTitle?: string;
 }
 
 interface ModerationState {
@@ -33,28 +34,27 @@ interface ModerationState {
   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,
+  isTextareaActive: false
+};
+
+const translates = {
+  sendReportLabel: <Text id="moderation.send_report">Report</Text>,
+  closeLabel: <Text id="moderation.close">Close</Text>,
+  reportPlaceholder: <Text id="moderation.report_placeholder">Describe what you saw...</Text>,
+  defaultContentType: <Text id="moderation.default_content_type">Choose a reason for reporting this content</Text>,
+  reportTitle: <Text id="moderation.report_title">What’s wrong with this content?</Text>
 };
 
+@withText(translates)
 export class Moderation extends Component<ModerationProps, ModerationState> {
-  _closeButtonNode: null | HTMLDivElement = null;
+  _closeButtonNode: null | HTMLButtonElement = null;
 
-  state: ModerationState = { ...initialState };
+  state: ModerationState = {...initialState};
 
   componentDidMount(): void {
-    logger.trace('Moderation plugin mount', {
-      method: 'componentDidMount',
-    });
     if (this._closeButtonNode && this.props.closeButtonSelected) {
       this._closeButtonNode.focus();
     }
@@ -62,38 +62,32 @@ export class Moderation extends Component<ModerationProps, ModerationState> {
 
   private _onContentTypeChange = (id: number) => {
     this.setState({
-      reportContentType: id,
+      reportContentType: id
     });
   };
 
   private _onContentChange = (event: any) => {
     this.setState({
-      reportContent: event.target.value,
+      reportContent: event.target.value
     });
   };
 
   private _handleFocus = () => {
     this.setState({
-      isTextareaActive: true,
+      isTextareaActive: true
     });
   };
 
   private _handleBlur = () => {
     this.setState((state: ModerationState) => ({
-      isTextareaActive: state.reportContent.length > 0,
+      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, () => {
@@ -107,7 +101,7 @@ export class Moderation extends Component<ModerationProps, ModerationState> {
       e.stopPropagation();
     }
     switch (e.keyCode) {
-      case 13: // Enter pressed
+      case KeyboardKeys.Enter: // Enter pressed
         callBack();
         break;
     }
@@ -127,64 +121,43 @@ export class Moderation extends Component<ModerationProps, ModerationState> {
   private _getPopoverMenuOptions = () => {
     return this.props.moderateOptions.map(({label, id}: ModerateOption) => ({
       label: label || '',
-      onMenuChosen: () => this._onContentTypeChange(id || -1),
+      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
-      ) || {}
-    );
+    return <PopoverMenu itemRenderer={this._popoverMenuItemRenderer} options={this._getPopoverMenuOptions()} />;
   };
 
-  private _handleClose = (event: MouseEvent | KeyboardEvent) => {
-    if (
-      event.type === 'keypress' &&
-      get(event, 'keyCode', null) !== KeyboardKeys.Enter
-    ) {
-      return;
-    }
-    this.props.onClick();
+  private _getContentType = (): any => {
+    return this.props.moderateOptions.find((moderateOption: ModerateOption) => moderateOption.id === this.state.reportContentType) || {};
   };
 
   render(props: ModerationProps) {
-    const {reportLength, subtitle, tooltipMessage} = props;
+    const {reportLength, subtitle, tooltipMessage, onClick, closeLabel} = 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;
-          }}
-        />
+        <A11yWrapper onClick={onClick}>
+          <button
+            aria-label={closeLabel}
+            className={[styles.closeButton, 'kaltura-moderation__close-button'].join(' ')}
+            tabIndex={1}
+            ref={node => {
+              this._closeButtonNode = node;
+            }}>
+            <Icon
+              id="moderation-plugin-close-button"
+              height={icons.BigSize}
+              width={icons.BigSize}
+              viewBox={`0 0 ${icons.BigSize} ${icons.BigSize}`}
+              path={icons.CLOSE_ICON}
+            />
+          </button>
+        </A11yWrapper>
         <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}
+          <div className={[styles.title, 'kaltura-moderation__title'].join(' ')}>{this.props.reportTitle}</div>
+          {subtitle ? <div className={[styles.subtitle].join(' ')}>{subtitle}</div> : null}
           <Popover
             className={styles.reportPopover}
             verticalPosition={PopoverVerticalPositions.Bottom}
@@ -192,43 +165,30 @@ export class Moderation extends Component<ModerationProps, ModerationState> {
             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.select}>{reportContentType > -1 ? this._getContentType()?.label || '' : this.props.defaultContentType}</div>
                 <div className={styles.downArrow} />
               </button>
             </Fragment>
           </Popover>
-          <form onSubmit={this._handleSubmit}>
+          <form>
             <textarea
-              className={[
-                styles.textarea,
-                isTextareaActive ? styles.active : '',
-              ].join(' ')}
+              className={[styles.textarea, isTextareaActive ? styles.active : ''].join(' ')}
               onInput={this._onContentChange}
               onFocus={this._handleFocus}
               onBlur={this._handleBlur}
               tabIndex={1}
-              placeholder="Describe what you saw..."
+              placeholder={this.props.reportPlaceholder}
               value={reportContent}
               maxLength={reportLength}
             />
             <div className={styles.submitWrapper}>
-              <div className={styles.characterCounter}>
-                {`${reportContent.length}/${reportLength}`}
-              </div>
+              <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>
+                <A11yWrapper onClick={this._handleSubmit}>
+                  <button className={[styles.submitButton, reportContentType === -1 ? styles.disabled : ''].join(' ')} tabIndex={1}>
+                    {this.props.sendReportLabel}
+                  </button>
+                </A11yWrapper>
               </Tooltip>
             </div>
           </form>

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

@@ -1,14 +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;
-    }
-}
+.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/plugin-button/plugin-button.tsx

@@ -1,6 +1,29 @@
 import {h} from 'preact';
 import * as styles from './plugin-button.scss';
+import {icons} from '../icons';
+import {A11yWrapper, OnClick} from '../a11y-wrapper';
 
-export const PluginButton = () => (
-  <button className={styles.moderationIcon} tabIndex={1} />
-);
+const {Tooltip, Icon} = KalturaPlayer.ui.components;
+
+interface PluginButtonProps {
+  onClick: OnClick;
+  label?: string;
+}
+
+export const PluginButton = ({onClick, label}: PluginButtonProps) => {
+  return (
+    <Tooltip label={label} type="bottom">
+      <A11yWrapper onClick={onClick}>
+        <button aria-label={label} className={styles.pluginButton}>
+          <Icon
+            id="moderation-plugin-button"
+            height={icons.BigSize}
+            width={icons.BigSize}
+            viewBox={`0 0 ${icons.BigSize} ${icons.BigSize}`}
+            path={icons.PLUGIN_ICON}
+          />
+        </button>
+      </A11yWrapper>
+    </Tooltip>
+  );
+};

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>
+    );
+  }
+}