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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/moderation",
-  "version": "3.0.0",
+  "version": "3.1.0-canary.10-08b2d40",
   "main": "dist/playkit-moderation.js",
   "private": false,
   "bugs": {
@@ -74,6 +74,13 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "^1.0.2"
+    "@playkit-js/common": "^1.0.14",
+    "@playkit-js/ui-managers": "^1.3.0"
+  },
+  "kaltura": {
+    "name": "playkit-js-moderation",
+    "dependencies": {
+      "playkit-ui-managers": "1.3.0"
+    }
   }
 }

package/src/components/moderation/moderation.scss

@@ -1,37 +1,37 @@
 @import '../../variables.scss';
 
 .root {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  position: relative;
   height: 100%;
+  width: 100%;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
-  padding: 60px 32px 32px 32px;
+  justify-content: center;
   color: $white-color;
-  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;
-    padding: 0;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    &:focus {
-      outline: 1px solid $focus-color;
+
+  &.extrasmall,
+  &.small {
+    .main-wrapper .title {
+      margin-bottom: 12px;
+      font-size: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
+
+  div {
+    margin: 0px;
+  }
+  * {
+    font-family: Lato, sans-serif;
+    font-style: normal;
+  }
+
   .main-wrapper {
-    width: 60%;
+    width: 100%;
+    max-width: 461px;
     .title {
       margin-bottom: 8px;
       font-size: 28px;
@@ -45,26 +45,6 @@
       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;
@@ -84,6 +64,9 @@
         font-size: 15px;
         line-height: 1.6;
         font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       .down-arrow {
         width: 14px;
@@ -156,14 +139,14 @@
         text-align: center;
         font-size: 14px;
         font-weight: bold;
-        background-color: #006EFA;
+        background-color: #006efa;
         padding-left: 12px;
         padding-right: 12px;
         border: none;
         outline: none !important; // overwrites player styles
         cursor: pointer;
         &.disabled {
-          background-color: rgba(0,0,0,0);
+          background-color: rgba(0, 0, 0, 0);
           padding-left: 11px;
           padding-right: 11px;
           color: #888888;
@@ -173,44 +156,9 @@
           box-shadow: 0px 0px 0px 1px $focus-color;
         }
       }
-    }
-  }
-
-  // TODO: remove once player fix the font
-  * {
-    font-family: sans-serif;
-    font-style: normal;
-  }
-}
-
-: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;
+      :global(.playkit-tooltip) {
+        width: auto;
       }
     }
   }
-  .playkit-player.playkit-size-ty {
-    .kaltura-moderation__root {
-      display: none;
-    }
-  }
-}
-
-// 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,13 +1,14 @@
-import {h, Component, Fragment} from 'preact';
-import {KeyboardKeys, Popover, PopoverHorizontalPositions, PopoverVerticalPositions} from '../popover';
-import {PopoverMenu, PopoverMenuItem} from '../popover-menu';
-import {OnClick, A11yWrapper} from '@playkit-js/common';
-import {icons} from '../icons';
+import {h, Component} from 'preact';
+import {Popover} from '../popover';
+import {OnClick, A11yWrapper, OverlayPortal} from '@playkit-js/common';
 import * as styles from './moderation.scss';
 import {DownIcon} from './down-icon';
 
-const {Tooltip, Icon} = KalturaPlayer.ui.components;
+const {Tooltip, Overlay, PLAYER_SIZE} = KalturaPlayer.ui.components;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
+const {
+  redux: {connect}
+} = KalturaPlayer.ui;
 
 export interface ModerateOption {
   id: number;
@@ -29,6 +30,12 @@ interface ModerationProps {
   reportTitle?: string;
 }
 
+interface ConnectProps {
+  playerSize?: string;
+}
+
+type MergedProps = ModerationProps & ConnectProps;
+
 interface ModerationState {
   reportContentType: number;
   reportContent: string;
@@ -49,15 +56,21 @@ const translates = {
   reportTitle: <Text id="moderation.report_title">What’s wrong with this content?</Text>
 };
 
+const mapStateToProps = (state: Record<string, any>) => ({
+  playerSize: state.shell.playerSize
+});
+
 @withText(translates)
-export class Moderation extends Component<ModerationProps, ModerationState> {
-  _closeButtonNode: null | HTMLButtonElement = null;
+@connect(mapStateToProps)
+export class Moderation extends Component<MergedProps, ModerationState> {
+  _buttonRef: null | HTMLButtonElement = null;
+  _textAreaElementRef: null | HTMLTextAreaElement = null;
 
   state: ModerationState = {...initialState};
 
   componentDidMount(): void {
-    if (this._closeButtonNode && this.props.closeButtonSelected) {
-      this._closeButtonNode.focus();
+    if (this._buttonRef && this.props.closeButtonSelected) {
+      this._buttonRef.focus();
     }
   }
 
@@ -96,107 +109,84 @@ export class Moderation extends Component<ModerationProps, ModerationState> {
     });
   };
 
-  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 KeyboardKeys.Enter: // 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)
+      onMenuChosen: (byKeyboard?: boolean) => {
+        this._onContentTypeChange(id || -1);
+        if (byKeyboard) {
+          this._textAreaElementRef?.focus();
+        }
+      }
     }));
   };
 
-  private _popoverContent = () => {
-    return <PopoverMenu itemRenderer={this._popoverMenuItemRenderer} options={this._getPopoverMenuOptions()} />;
-  };
-
   private _getContentType = (): any => {
     return this.props.moderateOptions.find((moderateOption: ModerateOption) => moderateOption.id === this.state.reportContentType) || {};
   };
 
-  render(props: ModerationProps) {
-    const {reportLength, subtitle, tooltipMessage, onClick, closeLabel} = props;
+  render(props: MergedProps) {
+    const {playerSize = '', reportLength, subtitle, tooltipMessage, onClick} = props;
     const {reportContent, reportContentType, isTextareaActive} = this.state;
+    if (playerSize === PLAYER_SIZE.TINY) {
+      return null;
+    }
+    const submitButtonDisabled = reportContentType === -1;
     return (
-      <div className={[styles.root, 'kaltura-moderation__root'].join(' ')}>
-        <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(' ')}>{this.props.reportTitle}</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 ? this._getContentType()?.label || '' : this.props.defaultContentType}</div>
-                <div className={styles.downArrow}>
-                  <DownIcon />
+      <OverlayPortal>
+        <Overlay open onClose={onClick}>
+          <div className={[styles.root, styles[playerSize]].join(' ')}>
+            <div className={styles.mainWrapper}>
+              <div className={styles.title}>{this.props.reportTitle}</div>
+              {subtitle ? <div className={[styles.subtitle].join(' ')}>{subtitle}</div> : null}
+              <Popover options={this._getPopoverMenuOptions()}>
+                <button
+                  className={styles.selectWrapper}
+                  tabIndex={0}
+                  ref={node => {
+                    this._buttonRef = node;
+                  }}>
+                  <div className={styles.select}>{reportContentType > -1 ? this._getContentType()?.label || '' : this.props.defaultContentType}</div>
+                  <div className={styles.downArrow}>
+                    <DownIcon />
+                  </div>
+                </button>
+              </Popover>
+              <form>
+                <textarea
+                  className={[styles.textarea, isTextareaActive ? styles.active : ''].join(' ')}
+                  onInput={this._onContentChange}
+                  onFocus={this._handleFocus}
+                  onBlur={this._handleBlur}
+                  tabIndex={0}
+                  placeholder={this.props.reportPlaceholder}
+                  aria-label={this.props.reportPlaceholder}
+                  value={reportContent}
+                  maxLength={reportLength}
+                  ref={node => {
+                    this._textAreaElementRef = node;
+                  }}
+                />
+                <div className={styles.submitWrapper}>
+                  <div className={styles.characterCounter}>{`${reportContent.length}/${reportLength}`}</div>
+                  <Tooltip label={tooltipMessage} classNames={styles.tooltip}>
+                    <A11yWrapper onClick={this._handleSubmit}>
+                      <button
+                        role="button"
+                        aria-disabled={submitButtonDisabled}
+                        aria-label={this.props.sendReportLabel}
+                        className={[styles.submitButton, submitButtonDisabled ? styles.disabled : ''].join(' ')}
+                        tabIndex={0}>
+                        {this.props.sendReportLabel}
+                      </button>
+                    </A11yWrapper>
+                  </Tooltip>
                 </div>
-              </button>
-            </Fragment>
-          </Popover>
-          <form>
-            <textarea
-              className={[styles.textarea, isTextareaActive ? styles.active : ''].join(' ')}
-              onInput={this._onContentChange}
-              onFocus={this._handleFocus}
-              onBlur={this._handleBlur}
-              tabIndex={1}
-              placeholder={this.props.reportPlaceholder}
-              value={reportContent}
-              maxLength={reportLength}
-            />
-            <div className={styles.submitWrapper}>
-              <div className={styles.characterCounter}>{`${reportContent.length}/${reportLength}`}</div>
-              <Tooltip label={tooltipMessage} classNames={styles.tooltip}>
-                <A11yWrapper onClick={this._handleSubmit}>
-                  <button className={[styles.submitButton, reportContentType === -1 ? styles.disabled : ''].join(' ')} tabIndex={1}>
-                    {this.props.sendReportLabel}
-                  </button>
-                </A11yWrapper>
-              </Tooltip>
+              </form>
             </div>
-          </form>
-        </div>
-      </div>
+          </div>
+        </Overlay>
+      </OverlayPortal>
     );
   }
 }

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

@@ -1,6 +1,6 @@
 import {h} from 'preact';
-import * as styles from './plugin-button.scss';
 import {icons} from '../icons';
+import {ui} from 'kaltura-player-js';
 import {A11yWrapper, OnClick} from '@playkit-js/common';
 
 const {Tooltip, Icon} = KalturaPlayer.ui.components;
@@ -14,7 +14,7 @@ export const PluginButton = ({onClick, label}: PluginButtonProps) => {
   return (
     <Tooltip label={label} type="bottom">
       <A11yWrapper onClick={onClick}>
-        <button aria-label={label} className={styles.pluginButton}>
+        <button aria-label={label} className={ui.style.upperBarIcon}>
           <Icon
             id="moderation-plugin-button"
             height={icons.BigSize}

package/src/components/popover/popover.scss

@@ -1,6 +1,9 @@
+@import '../../variables.scss';
+
 .popover-container {
     position: relative;
     .popover-component {
+        z-index: 1;
         background-color: #222222;
         border-radius: 4px;
         position: absolute;
@@ -28,3 +31,27 @@
         }
     }
 }
+.popover-menu {
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+.popover-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 9px 24px 9px 16px;
+    white-space: nowrap;
+    min-height: 30px;
+    line-height: 18px;
+    font-size: 15px;
+    &:hover {
+        cursor: pointer;
+        background-color: $semigray-color;
+    }
+    &:focus {
+        outline: 1px solid $focus-color;
+    }
+}
+.report-popover {
+    width: 100%;
+    max-width: 280px;
+}