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

package/src/moderation-plugin.tsx

@@ -1,35 +1,13 @@
 import {h, ComponentChild} from 'preact';
-import {
-  ContribPluginManager,
-  CorePlugin,
-  OnMediaLoad,
-  OnMediaUnload,
-  OnPluginSetup,
-  ContribServices,
-  ContribPluginData,
-  ContribPluginConfigs,
-} from '@playkit-js-contrib/plugin';
-import {
-  UpperBarItem,
-  OverlayItem,
-  OverlayPositions,
-  ToastSeverity,
-} from '@playkit-js-contrib/ui';
-import {getContribLogger} from '@playkit-js-contrib/common';
-import {KalturaModerationFlagType} from 'kaltura-typescript-client/api/types/KalturaModerationFlagType';
-import {BaseEntryFlagAction} from 'kaltura-typescript-client/api/types/BaseEntryFlagAction';
-import {KalturaClient} from 'kaltura-typescript-client';
-import {KalturaModerationFlag} from 'kaltura-typescript-client/api/types/KalturaModerationFlag';
 import {Moderation, ModerateOption} from './components/moderation';
 import {PluginButton} from './components/plugin-button';
 import * as styles from './moderation-plugin.scss';
-
-const pluginName = `playkit-js-moderation`;
-
-const logger = getContribLogger({
-  class: 'ModerationPlugin',
-  module: 'moderation-plugin',
-});
+import {ui} from 'kaltura-player-js';
+import {ContribServices, ToastSeverity, OnClickEvent} from '@playkit-js/common';
+import {ReportLoader, KalturaModerationFlag} from './providers';
+import {ErrorIcon} from './components/icons/error-icon';
+import {SuccessIcon} from './components/icons/success-icon';
+const {ReservedPresetAreas, ReservedPresetNames} = ui;
 
 interface ModerationPluginConfig {
   reportLength: number;
@@ -41,139 +19,133 @@ interface ModerationPluginConfig {
   tooltipMessage: string;
 }
 
-export class ModerationPlugin
-  implements OnMediaLoad, OnMediaUnload, OnPluginSetup {
-  private _upperBarItem: UpperBarItem | null = null;
-  private _moderationOverlay: OverlayItem | null = null;
-  private _wasPlayed = false; // keep state of the player so we can resume if needed
-  private _kalturaClient = new KalturaClient();
-
-  constructor(
-    private _corePlugin: CorePlugin,
-    private _contribServices: ContribServices,
-    private _configs: ContribPluginConfigs<ModerationPluginConfig>,
-    private _player: KalturaPlayerTypes.Player
-  ) {}
-
-  onPluginSetup(): void {
-    const {playerConfig} = this._configs;
+export class ModerationPlugin extends KalturaPlayer.core.BasePlugin {
+  static defaultConfig: ModerationPluginConfig = {
+    reportLength: 500,
+    onReportSentMessage: 'The report sent',
+    onReportErrorMessage: 'The report failed to send',
+    subtitle: '',
+    notificatonDuration: 5000,
+    tooltipMessage: 'Send report',
+    moderateOptions: [
+      {id: 1, label: 'Sexual Content'},
+      {id: 2, label: 'Violent Or Repulsive'},
+      {id: 3, label: 'Harmful Or Dangerous Act'},
+      {id: 4, label: 'Spam / Commercials'}
+    ]
+  };
 
-    this._kalturaClient.setOptions({
-      clientTag: 'playkit-js-transcript',
-      endpointUrl: playerConfig.provider.env.serviceUrl,
-    });
+  private _moderationOverlay = null;
+  private _wasPlayed = false; // keep state of the player so we can resume if needed
+  private _removeActiveOverlay: null | Function = null;
+  private _removePluginIcon: null | Function = null;
+  private _contribServices: ContribServices;
 
-    this._kalturaClient.setDefaultRequestOptions({
-      ks: playerConfig.session.ks,
-    });
+  constructor(name: string, private _player: KalturaPlayerTypes.Player, config: ModerationPluginConfig) {
+    super(name, _player, config);
+    this._contribServices = ContribServices.get({kalturaPlayer: _player});
   }
 
-  onMediaLoad(): void {
-    logger.trace('Moderation plugin loaded', {
-      method: 'onMediaLoad',
+  loadMedia(): void {
+    this.logger.debug('Moderation plugin loaded', {
+      method: 'loadMedia'
     });
     this._addPluginIcon();
   }
 
-  onMediaUnload(): void {
-    if (this._upperBarItem) {
-      logger.trace('Moderation plugin unloaded', {
-        method: 'onMediaUnload',
-      });
-      this._moderationOverlay = null;
-    }
+  // TODO: remove once contribServices migrated to BasePlugin
+  getUIComponents(): any[] {
+    return this._contribServices.register();
   }
 
-  private _sentReport = (
-    contentType: KalturaModerationFlagType,
-    content: string,
-    callback?: () => void
-  ) => {
-    const {
-      playerConfig,
-      pluginConfig: {onReportSentMessage, onReportErrorMessage},
-    } = this._configs;
-    const request = new BaseEntryFlagAction({
-      moderationFlag: new KalturaModerationFlag({
-        flaggedEntryId: playerConfig.sources.id,
-        flagType: contentType,
-        comments: content,
-      }),
-    });
-
-    this._kalturaClient.request(request).then(
-      () => {
-        logger.trace('Moderation plugin submit OK', {
-          method: 'handleSubmit',
-        });
-        this._toggleOverlay();
-        this._displayToast({
-          text: onReportSentMessage,
-          icon: (
-            <div className={[styles.toastIcon, styles.success].join(' ')} />
-          ),
-          severity: ToastSeverity.Success,
-        });
-        if (this._wasPlayed) {
-          this._player.play();
-        }
-        if (callback) {
-          callback();
+  private _sentReport = (contentType: number, content: string, callback?: () => void) => {
+    const {onReportSentMessage, onReportErrorMessage} = this.config;
+    const {sources} = this._player;
+    return this._player.provider
+      .doRequest([{loader: ReportLoader, params: {comments: content, flagType: contentType, flaggedEntryId: sources.id}}])
+      .then((data: Map<string, any>) => {
+        if (data && data.has(ReportLoader.id)) {
+          const reportLoader = data.get(ReportLoader.id);
+          const moderationFlag: KalturaModerationFlag = reportLoader?.response?.moderationFlag;
+          if (moderationFlag) {
+            this.logger.debug('Moderation plugin submit OK');
+            this._toggleOverlay();
+            this._displayToast({
+              text: onReportSentMessage,
+              icon: (
+                <div className={styles.toastIcon}>
+                  <SuccessIcon />
+                </div>
+              ),
+              severity: ToastSeverity.Success
+            });
+            if (this._wasPlayed) {
+              this._player.play();
+            }
+            if (callback) {
+              callback();
+            }
+          }
         }
-      },
-      error => {
-        logger.trace('Moderation plugin submit failed', {
-          method: 'handleSubmit',
-          data: error,
-        });
+      })
+      .catch((e: any) => {
+        this.logger.warn(e);
         this._toggleOverlay();
         this._displayToast({
           text: onReportErrorMessage,
-          icon: <div className={[styles.toastIcon, styles.error].join(' ')} />,
-          severity: ToastSeverity.Error,
+          icon: (
+            <div className={styles.toastIcon}>
+              <ErrorIcon />
+            </div>
+          ),
+          severity: ToastSeverity.Error
         });
-      }
-    );
+      });
   };
 
-  private _displayToast = (options: {
-    text: string;
-    icon: ComponentChild;
-    severity: ToastSeverity;
-  }): void => {
-    const {notificatonDuration} = this._configs.pluginConfig;
-    //display toast
+  private _displayToast = (options: {text: string; icon: ComponentChild; severity: ToastSeverity}): void => {
+    const {notificatonDuration} = this.config;
     this._contribServices.toastManager.add({
       title: 'Report Content',
       text: options.text,
       icon: options.icon,
       duration: notificatonDuration,
-      severity: ToastSeverity.Success || ToastSeverity.Error,
+      severity: options.severity,
       onClick: () => {
-        logger.trace(`Moderation clicked on toast`, {
-          method: '_displayToast',
+        this.logger.debug(`Moderation clicked on toast`, {
+          method: '_displayToast'
         });
-      },
+      }
     });
   };
 
-  private _toggleOverlay = (event?: MouseEvent) => {
+  private _toggleOverlay = (event?: OnClickEvent, byKeyboard?: boolean) => {
+    if (this._removeActiveOverlay !== null) {
+      this._removeOverlay();
+
+      if (this._wasPlayed) {
+        this._player.play();
+        this._wasPlayed = false;
+      }
+      return;
+    }
+
     let closeButtonSelected = false;
-    if (event && event.x === 0 && event.y === 0) {
-      // triggered by keyboard
+    if (byKeyboard) {
       closeButtonSelected = true;
     }
-    const {reportLength, moderateOptions, subtitle, tooltipMessage} = this._configs.pluginConfig;
+    const {reportLength, moderateOptions, subtitle, tooltipMessage} = this.config;
     const isPlaying = !(this._player as any).paused;
-    logger.trace(`Moderation toggle overlay player`, {
-      method: '_toggleOverlay',
+
+    this.logger.debug(`Moderation toggle overlay player`, {
+      method: '_toggleOverlay'
     });
+
     if (this._moderationOverlay) {
-      this._contribServices.overlayManager.remove(this._moderationOverlay);
       this._moderationOverlay = null;
       if (this._wasPlayed) {
-        logger.trace(`Moderation plugin paused player`, {
-          method: '_toggleOverlay',
+        this.logger.debug(`Moderation plugin paused player`, {
+          method: '_toggleOverlay'
         });
         this._wasPlayed = false;
         this._player.play();
@@ -185,10 +157,11 @@ export class ModerationPlugin
       this._player.pause();
     }
 
-    this._moderationOverlay = this._contribServices.overlayManager.add({
+    this._removeActiveOverlay = this._player.ui.addComponent({
       label: 'moderation-overlay',
-      position: OverlayPositions.PlayerArea,
-      renderContent: () => (
+      area: ReservedPresetAreas.PlayerArea,
+      presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
+      get: () => (
         <Moderation
           onClick={this._toggleOverlay}
           onSubmit={this._sentReport}
@@ -198,44 +171,42 @@ export class ModerationPlugin
           moderateOptions={moderateOptions}
           closeButtonSelected={closeButtonSelected}
         />
-      ),
+      )
     });
   };
 
   private _addPluginIcon(): void {
-    const {} = this._configs.pluginConfig;
-    this._upperBarItem = this._contribServices.upperBarManager.add({
+    const {tooltipMessage} = this.config;
+    if (this._removePluginIcon) {
+      return;
+    }
+    this._removePluginIcon = this._player.ui.addComponent({
       label: 'Moderation',
-      onClick: this._toggleOverlay,
-      renderItem: () => <PluginButton />,
+      area: ReservedPresetAreas.TopBarRightControls,
+      presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
+      get: () => <PluginButton onClick={this._toggleOverlay} label={tooltipMessage} />
     });
   }
-}
 
-ContribPluginManager.registerPlugin(
-  pluginName,
-  (data: ContribPluginData<ModerationPluginConfig>) => {
-    return new ModerationPlugin(
-      data.corePlugin,
-      data.contribServices,
-      data.configs,
-      data.player
-    );
-  },
-  {
-    defaultConfig: {
-      reportLength: 500,
-      onReportSentMessage: 'Send report',
-      onReportErrorMessage: 'The report failed to send',
-      subtitle: '',
-      notificatonDuration: 5000,
-      tooltipMessage: 'Send report',
-      moderateOptions: [
-        {id: 1, label: 'Sexual Content'},
-        {id: 2, label: 'Violent Or Repulsive'},
-        {id: 3, label: 'Harmful Or Dangerous Act'},
-        {id: 4, label: 'Spam / Commercials'},
-      ],
-    },
+  private _removeOverlay = () => {
+    if (this._removeActiveOverlay) {
+      this._removeActiveOverlay();
+      this._removeActiveOverlay = null;
+    }
+  };
+
+  static isValid(): boolean {
+    return true;
   }
-);
+
+  reset(): void {
+    this._contribServices.reset();
+  }
+
+  destroy(): void {
+    this._removeOverlay();
+    if (this._removePluginIcon) {
+      this._removePluginIcon();
+    }
+  }
+}

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export * from './report-loader';
+export * from './response-types';

package/src/providers/report-loader.ts

@@ -0,0 +1,69 @@
+import ILoader = KalturaPlayerTypes.ILoader;
+import {KalturaModerationFlag, KalturaModerationFlagType, ObjectType, KalturaModerationFlagResponse} from './response-types';
+const {RequestBuilder} = KalturaPlayer.providers;
+
+interface ReportLoaderParams {
+  comments: string;
+  flagType: KalturaModerationFlagType;
+  flaggedEntryId: string;
+}
+
+interface ReportResponse {
+  moderationFlag?: KalturaModerationFlag;
+}
+
+export class ReportLoader implements ILoader {
+  _comments: string;
+  _flagType: KalturaModerationFlagType;
+  _flaggedEntryId: string;
+  _requests: typeof RequestBuilder[] = [];
+  _response: ReportResponse = {};
+
+  static get id(): string {
+    return 'report';
+  }
+
+  constructor({comments, flagType, flaggedEntryId}: ReportLoaderParams) {
+    this._comments = comments;
+    this._flagType = flagType;
+    this._flaggedEntryId = flaggedEntryId;
+
+    const headers: Map<string, string> = new Map();
+
+    const moderationFlagRequest = new RequestBuilder(headers);
+    moderationFlagRequest.service = 'baseentry';
+    moderationFlagRequest.action = 'flag';
+    moderationFlagRequest.params = {
+      moderationFlag: {
+        comments: this._comments,
+        flagType: this._flagType,
+        flaggedEntryId: this._flaggedEntryId,
+        objectType: ObjectType.KalturaModerationFlag
+      }
+    };
+    this.requests.push(moderationFlagRequest);
+  }
+
+  set requests(requests: any[]) {
+    this._requests = requests;
+  }
+
+  get requests(): any[] {
+    return this._requests;
+  }
+
+  set response(response: any) {
+    const moderationFlagRequestResponse = new KalturaModerationFlagResponse(response[0]?.data);
+    if (moderationFlagRequestResponse) {
+      this._response.moderationFlag = moderationFlagRequestResponse?.data;
+    }
+  }
+
+  get response(): any {
+    return this._response;
+  }
+
+  isValid(): boolean {
+    return Boolean(this._flagType && this._flaggedEntryId);
+  }
+}

package/src/providers/response-types/index.ts

@@ -0,0 +1,2 @@
+export * from './kaltura-moderation-flag';
+export * from './kaltura-moderation-flag-response';

package/src/providers/response-types/kaltura-moderation-flag-response.ts

@@ -0,0 +1,13 @@
+import {KalturaModerationFlag} from './kaltura-moderation-flag';
+const {BaseServiceResult} = KalturaPlayer.providers.ResponseTypes;
+
+export class KalturaModerationFlagResponse extends BaseServiceResult {
+  data?: KalturaModerationFlag;
+
+  constructor(responseObj: any) {
+    super(responseObj);
+    if (!this.hasError && responseObj.id) {
+      this.data = new KalturaModerationFlag(responseObj);
+    }
+  }
+}

package/src/providers/response-types/kaltura-moderation-flag.ts

@@ -0,0 +1,51 @@
+export enum ObjectType {
+  KalturaModerationFlag = 'KalturaModerationFlag'
+}
+
+export enum KalturaModerationFlagType {
+  SEXUAL_CONTENT = 1,
+  VIOLENT_REPULSIVE = 2,
+  HARMFUL_DANGEROUS = 3,
+  SPAM_COMMERCIALS = 4,
+  COPYRIGHT = 5,
+  TERMS_OF_USE_VIOLATION = 6
+}
+
+enum KalturaModerationObjectType {
+  ENTRY = 2,
+  USER = 3
+}
+
+enum KalturaModerationFlagStatus {
+  PENDING = 1,
+  MODERATED = 2
+}
+
+export interface KalturaModerationFlagArgs {
+  comments: string;
+  objectType: ObjectType;
+  createdAt: number;
+  updatedAt: number;
+  flagType: KalturaModerationFlagType;
+  flaggedEntryId: string;
+  id: number;
+  moderationObjectType: KalturaModerationObjectType;
+  partnerId: number;
+  status: KalturaModerationFlagStatus;
+}
+
+export class KalturaModerationFlag {
+  comments: string;
+  objectType: ObjectType;
+  id: number;
+  status: KalturaModerationFlagStatus;
+  flagType: KalturaModerationFlagType;
+
+  constructor(moderationFlag: KalturaModerationFlagArgs) {
+    this.comments = moderationFlag.comments;
+    this.objectType = moderationFlag.objectType;
+    this.id = moderationFlag.id;
+    this.status = moderationFlag.status;
+    this.flagType = moderationFlag.flagType;
+  }
+}

package/src/variables.scss

@@ -5,4 +5,7 @@ $semigray-color: #666666;
 $character-counter-color: #ebebeb;
 $focus-color: #00cbff;
 $submit-button-color: #01819a;
-$root-background: rgba($color: $black-color, $alpha: 0.7);
+$root-background: rgba(
+  $color: $black-color,
+  $alpha: 0.7
+);

package/src/assets/close.svg

@@ -1,10 +0,0 @@
-<?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

@@ -1,9 +0,0 @@
-<?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

@@ -1,3 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-<?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>