@playkit-js/moderation 3.2.13 → 3.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/moderation",
-  "version": "3.2.13",
+  "version": "3.2.14",
   "main": "dist/playkit-moderation.js",
   "private": false,
   "bugs": {
@@ -16,6 +16,8 @@
   },
   "devDependencies": {
     "@playkit-js/kaltura-player-js": "canary",
+    "@playkit-js/playkit-js-ui": "^0.77.3",
+    "@playkit-js/ui-managers": "1.4.3-canary.0-b33eab0",
     "conventional-github-releaser": "3.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
@@ -32,9 +34,7 @@
     "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.0",
-    "@playkit-js/playkit-js-ui": "^0.77.3",
-    "@playkit-js/ui-managers": "1.4.3-canary.0-b33eab0"
+    "webpack-dev-server": "^4.9.0"
   },
   "peerDependencies": {
     "@playkit-js/kaltura-player-js": "canary"
@@ -77,7 +77,7 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "^1.2.10"
+    "@playkit-js/common": "^1.5.3"
   },
   "kaltura": {
     "name": "playkit-js-moderation",

package/src/components/moderation/moderation.scss

@@ -133,30 +133,7 @@
         color: white;
       }
       .submit-button {
-        height: 32px;
-        border-radius: $roundness-1;
-        color: $primary-text-contrast-color;
-        text-align: center;
-        font-size: 14px;
-        font-weight: 700;
-        line-height: 17px;
-        background-color: $primary-color;
-        padding-left: 12px;
-        padding-right: 12px;
-        border: none;
-        outline: none !important; // overwrites player styles
-        cursor: pointer;
-        &.disabled {
-          background-color: rgba(0, 0, 0, 0);
-          padding-left: 11px;
-          padding-right: 11px;
-          color: $tone-4-color;
-          border: 1px solid $tone-4-color;
-        }
-        &:focus {
-          background-color: $primary-brighter-color;
-          box-shadow: 0px 0px 0px 1px $primary-color;
-        }
+        min-width: 64px;
       }
       :global(.playkit-tooltip) {
         width: auto;

package/src/components/moderation/moderation.tsx

@@ -19,7 +19,7 @@ export interface ModerateOption {
 
 interface ModerationProps {
   onClick: OnClick;
-  onSubmit: (contentType: number, content: string, event: KeyboardEvent, byKeyboard:boolean, callBack: () => void) => void;
+  onSubmit: (contentType: number, content: string, event: KeyboardEvent, byKeyboard: boolean) => void;
   reportLength: number;
   moderateOptions: ModerateOption[];
   subtitle: string;
@@ -42,14 +42,15 @@ interface ModerationState {
   reportContent: string;
   isTextareaActive: boolean;
   open: boolean;
-
+  loading: boolean;
 }
 
 const initialState: ModerationState = {
   reportContent: '',
   reportContentType: -1,
   isTextareaActive: false,
-  open: false
+  open: false,
+  loading: false
 };
 
 const translates = ({moderateOptions}: ModerationProps) => {
@@ -108,13 +109,12 @@ export class Moderation extends Component<MergedProps, ModerationState> {
 
   private _handleSubmit = (event: any, bykeyboard: boolean) => {
     event.preventDefault();
-    const {reportContent, reportContentType} = this.state;
-    if (reportContentType === -1) {
+    const {reportContent, reportContentType, loading} = this.state;
+    if (reportContentType === -1 || loading) {
       return;
     }
-    this.props.onSubmit(reportContentType, reportContent, event, bykeyboard,() => {
-      this.setState({...initialState});
-    });
+    this.setState({loading: true});
+    this.props.onSubmit(reportContentType, reportContent, event, bykeyboard);
   };
 
   private _getPopoverMenuOptions = () => {
@@ -140,7 +140,7 @@ export class Moderation extends Component<MergedProps, ModerationState> {
 
   render(props: MergedProps) {
     const {playerSize = '', reportLength, subtitle, onClick} = props;
-    const {reportContent, reportContentType, isTextareaActive} = this.state;
+    const {reportContent, reportContentType, isTextareaActive, loading} = this.state;
     if (playerSize === PLAYER_SIZE.TINY) {
       return null;
     }
@@ -189,8 +189,10 @@ export class Moderation extends Component<MergedProps, ModerationState> {
                   <Button
                     onClick={this._handleSubmit}
                     tooltip={{label: this.props.sendReportLabel!, className: styles.tooltip}}
+                    className={styles.submitButton}
                     disabled={submitButtonDisabled}
                     ariaLabel={this.props.sendReportLabel}
+                    loading={loading}
                     testId={'submitButton'}>
                     {this.props.sendReportLabel}
                   </Button>

package/src/moderation-plugin.tsx

@@ -63,8 +63,8 @@ export class ModerationPlugin extends KalturaPlayer.core.BasePlugin {
     this._addPluginIcon();
   }
 
-  private _sentReport = (contentType: number, content: string, event: KeyboardEvent, byKeyboard:boolean, callback?: () => void) => {
-    this.player.dispatchEvent(new FakeEvent(ModerationEvent.REPORT_SUBMITTED, {reportType: contentType}))
+  private _sentReport = (contentType: number, content: string, event: KeyboardEvent, byKeyboard: boolean) => {
+    this.player.dispatchEvent(new FakeEvent(ModerationEvent.REPORT_SUBMITTED, {reportType: contentType}));
     const {sources} = this._player;
     return this._player.provider
       .doRequest([{loader: ReportLoader, params: {comments: content, flagType: contentType, flaggedEntryId: sources.id}}])
@@ -86,9 +86,6 @@ export class ModerationPlugin extends KalturaPlayer.core.BasePlugin {
             if (this._wasPlayed) {
               this._player.play();
             }
-            if (callback) {
-              callback();
-            }
           }
         }
       })
@@ -106,7 +103,7 @@ export class ModerationPlugin extends KalturaPlayer.core.BasePlugin {
       })
       .finally(() => {
         this._toggleOverlay(event, byKeyboard);
-      })
+      });
   };
 
   private _displayToast = (options: {text: string; icon: ComponentChild; severity: ToastSeverity}): void => {
@@ -137,10 +134,10 @@ export class ModerationPlugin extends KalturaPlayer.core.BasePlugin {
         this._player.play();
         this._wasPlayed = false;
       }
-      if(byKeyboard){
+      if (byKeyboard) {
         // TODO: add focusElement to ts-typed
         // @ts-ignore
-        KalturaPlayer.ui.utils.focusElement(this._pluginButtonRef, 100)
+        KalturaPlayer.ui.utils.focusElement(this._pluginButtonRef, 100);
       }
       return;
     }
@@ -198,7 +195,7 @@ export class ModerationPlugin extends KalturaPlayer.core.BasePlugin {
     this.player.ready().then(() => {
       this._pluginIcon = this.upperBarManager!.add({
         label: 'Moderation',
-        component: () => <PluginButton setRef={this._setPluginButtonRef}/>,
+        component: () => <PluginButton setRef={this._setPluginButtonRef} />,
         svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
         onClick: this._toggleOverlay
       }) as number;