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

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@playkit-js/moderation",
-  "version": "2.1.1",
+  "version": "2.2.0-canary.10-af41e17",
+  "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",
+    "prettier": "^2.6.2",
+    "sass": "^1.52.3",
+    "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,30 @@
     "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"
+  ],
+  "dependencies": {
+    "@playkit-js/common": "^1.0.2"
   }
 }

package/src/components/icons/error-icon.tsx

@@ -0,0 +1,11 @@
+import {h} from 'preact';
+
+export const ErrorIcon = () => (
+  <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/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/icons/success-icon.tsx

@@ -0,0 +1,11 @@
+import {h} from 'preact';
+
+export const SuccessIcon = () => (
+  <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/down-icon.tsx

@@ -0,0 +1,12 @@
+import {h} from 'preact';
+
+export const DownIcon = () => (
+  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+    <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/moderation.scss

@@ -8,32 +8,36 @@
   height: 100%;
   display: flex;
   justify-content: center;
+  align-items: center;
   padding: 60px 32px 32px 32px;
   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;
-    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;
+    width: 60%;
     .title {
       margin-bottom: 8px;
       font-size: 28px;
       font-weight: bold;
-      text-align: center;
+      text-align: left;
+      line-height: 32px;
     }
     .subtitle {
       margin-top: 16px;
@@ -58,7 +62,7 @@
         background-color: $semigray-color;
       }
       &:focus {
-          outline: 1px solid $focus-color;
+        outline: 1px solid $focus-color;
       }
     }
     .select-wrapper {
@@ -82,12 +86,12 @@
         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;
+        width: 14px;
+        margin-left: 8px;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
     }
     .textarea {
@@ -105,15 +109,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 */
       }
@@ -143,22 +150,24 @@
         color: $character-counter-color;
       }
       .submit-button {
-        width: 88px;
         height: 32px;
-        border-radius: 18px;
-        color: $white-color;
+        border-radius: 4px;
+        color: white;
         text-align: center;
-        font-size: 15px;
+        font-size: 14px;
         font-weight: bold;
-        background-color: $submit-button-color;
+        background-color: #006EFA;
+        padding-left: 12px;
+        padding-right: 12px;
         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);
+          background-color: rgba(0,0,0,0);
+          padding-left: 11px;
+          padding-right: 11px;
+          color: #888888;
+          border: 1px solid #888888;
         }
         &:focus {
           box-shadow: 0px 0px 0px 1px $focus-color;
@@ -166,6 +175,12 @@
       }
     }
   }
+
+  // TODO: remove once player fix the font
+  * {
+    font-family: sans-serif;
+    font-style: normal;
+  }
 }
 
 :global {
@@ -193,3 +208,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,13 @@
 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 '@playkit-js/common';
+import {icons} from '../icons';
 import * as styles from './moderation.scss';
-const {get} = ObjectUtils;
-const {Tooltip} = KalturaPlayer.ui.components;
+import {DownIcon} from './down-icon';
+
+const {Tooltip, Icon} = KalturaPlayer.ui.components;
+const {withText, Text} = KalturaPlayer.ui.preacti18n;
 
 export interface ModerateOption {
   id: number;
@@ -18,13 +15,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 +35,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 +63,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 +102,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 +122,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 +166,32 @@ 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 className={styles.select}>{reportContentType > -1 ? this._getContentType()?.label || '' : this.props.defaultContentType}</div>
+                <div className={styles.downArrow}>
+                  <DownIcon />
                 </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 '@playkit-js/common';
 
-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>
+  );
+};