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

package/src/contrib-services/preset-item.tsx

@@ -0,0 +1,113 @@
+import {h, render} from 'preact';
+import {PresetItemData, RelativeToTypes} from './preset-item-data';
+import {ManagedComponent} from './managed-component';
+import {InjectedComponent} from './injected-component';
+export interface PresetItemOptions {
+  kalturaPlayer: KalturaPlayerTypes.Player;
+  data: PresetItemData;
+}
+
+export interface PresetItemProps {}
+
+export interface KalturaPlayerPresetComponent {
+  label: string;
+  presets: string[];
+  container: string;
+  get: () => () => ManagedComponent;
+  afterComponent?: string;
+  beforeComponent?: string;
+  replaceComponent?: string;
+}
+
+export class PresetItem {
+  private _options: PresetItemOptions;
+
+  constructor(options: PresetItemOptions) {
+    this._options = options;
+  }
+
+  get playerConfig(): KalturaPlayerPresetComponent[] {
+    const configs: KalturaPlayerPresetComponent[] = [];
+
+    for (const presetType in this._options.data.presetAreas) {
+      const presetContainer = this._options.data.presetAreas[presetType];
+      const {relativeTo} = this._options.data;
+
+      if (!presetContainer) {
+        continue;
+      }
+
+      const result: KalturaPlayerPresetComponent = {
+        label: this._options.data.label,
+        presets: [presetType],
+        container: presetContainer,
+        get: this._render,
+      };
+
+      if (relativeTo) {
+        switch (relativeTo.type) {
+          case RelativeToTypes.After:
+            result['afterComponent'] = relativeTo.name;
+            break;
+          case RelativeToTypes.Before:
+            result['beforeComponent'] = relativeTo.name;
+            break;
+          case RelativeToTypes.Replace:
+            result['replaceComponent'] = relativeTo.name;
+            break;
+        }
+      }
+
+      configs.push(result);
+    }
+
+    return configs;
+  }
+
+  private _render = (): any => {
+    if (this._options.data.isolateComponent) {
+      const {
+        data: {label, fillContainer},
+      } = this._options;
+
+      return (
+        <InjectedComponent
+          label={label}
+          fillContainer={fillContainer || false}
+          onCreate={this._onCreate}
+          onDestroy={this._onDestroy}
+        />
+      );
+    }
+
+    return this._options.data.renderChild();
+  };
+
+  private _onDestroy = (options: {
+    context?: any;
+    parent: HTMLElement;
+  }): void => {
+    // TODO sakal handle destroy
+    if (!options.parent) {
+      return;
+    }
+
+    render(null, options.parent);
+  };
+
+  private _onCreate = (options: {context?: any; parent: HTMLElement}): void => {
+    try {
+      if (!options.parent) {
+        return;
+      }
+      const child = this._options.data.renderChild();
+
+      if (!child) {
+        return;
+      }
+
+      render(child, options.parent);
+    } catch (error) {
+    }
+  };
+}

package/src/contrib-services/preset-manager.tsx

@@ -0,0 +1,153 @@
+import {h} from 'preact';
+import {PresetItemData} from './preset-item-data';
+import {KalturaPlayerPresetComponent, PresetItem} from './preset-item';
+import {EventsManager} from './events-manager';
+import {UIPlayerAdapter} from './ui-player-adapter';
+import {PresetsUtils} from './presets-utils';
+import {getContribConfig} from './contrib-utils';
+
+export interface PresetManagerOptions {
+  kalturaPlayer: KalturaPlayerTypes.Player;
+}
+
+export enum PresetManagerEventTypes {
+  PresetResizeEvent = 'PresetResizeEvent',
+  VideoResizeEvent = 'VideoResizeEvent',
+}
+
+export interface PresetResizeEvent {
+  type: PresetManagerEventTypes.PresetResizeEvent;
+}
+
+export interface VideoResizeEvent {
+  type: PresetManagerEventTypes.VideoResizeEvent;
+}
+
+export type PresetManagerEvents = PresetResizeEvent | VideoResizeEvent;
+
+const acceptableTypes = ['PlayerArea'];
+
+const defaultPresetConfig: any = {
+  presetAreasMapping: {
+    Playback: {
+      PlayerArea: 'PlayerArea',
+    },
+    Live: {
+      PlayerArea: 'PlayerArea',
+    },
+  },
+};
+
+export class PresetManager {
+  private _events: EventsManager<PresetManagerEvents> = new EventsManager<
+    PresetManagerEvents
+  >();
+  private _isLocked = false;
+  private _options: PresetManagerOptions;
+  private _items: PresetItem[] = [];
+  private _pendingItems: PresetItem[] = [];
+  private _presetConfig: any;
+
+  constructor(options: PresetManagerOptions) {
+    this._options = options;
+
+    this._presetConfig = getContribConfig(
+      this._options.kalturaPlayer,
+      'ui.preset',
+      defaultPresetConfig,
+      {
+        explicitMerge: ['presetAreasMapping'],
+      }
+    );
+
+    const groupedPresets = PresetsUtils.groupPresetAreasByType({
+      presetAreasMapping: this._presetConfig.presetAreasMapping,
+      acceptableTypes,
+    });
+
+    this.add({
+      label: 'preset-manager',
+      presetAreas: groupedPresets['PlayerArea'],
+      renderChild: () => (
+        <UIPlayerAdapter
+          onMount={this._registerToPlayer}
+          onUnmount={this._unregisterToPlayer}
+        />
+      ),
+    });
+  }
+
+  private _registerToPlayer = (player: KalturaPlayerTypes.Player) => {
+    player.addEventListener(
+      KalturaPlayer.ui.EventType.UI_PRESET_RESIZE,
+      this._notifyUIPresetResize
+    );
+
+    player.addEventListener(
+      KalturaPlayer.ui.EventType.VIDEO_RESIZE,
+      this._notifyVideoResize
+    );
+  };
+
+  private _notifyVideoResize = () => {
+    this._events.emit({
+      type: PresetManagerEventTypes.VideoResizeEvent,
+    });
+  };
+
+  private _notifyUIPresetResize = () => {
+    this._events.emit({
+      type: PresetManagerEventTypes.PresetResizeEvent,
+    });
+  };
+
+  private _unregisterToPlayer = (player: KalturaPlayerTypes.Player) => {
+
+    player.removeEventListener(
+      KalturaPlayer.ui.EventType.UI_PRESET_RESIZE,
+      this._notifyUIPresetResize
+    );
+
+    player.removeEventListener(
+      KalturaPlayer.ui.EventType.VIDEO_RESIZE,
+      this._notifyVideoResize
+    );
+  };
+
+  on: EventsManager<PresetManagerEvents>['on'] = this._events.on.bind(
+    this._events
+  );
+  off: EventsManager<PresetManagerEvents>['off'] = this._events.off.bind(
+    this._events
+  );
+
+  add<TProps>(data: PresetItemData): void {
+    if (this._isLocked) {
+      console.warn(
+        `cannot add new preset items once player completed its' setup phase`
+      );
+      // @ts-ignore
+      return null;
+    }
+    const component = new PresetItem({
+      kalturaPlayer: this._options.kalturaPlayer,
+      data,
+    });
+
+    this._pendingItems.push(component);
+  }
+
+  lockManager(): void {
+    this._isLocked = true;
+  }
+
+  registerComponents(): KalturaPlayerPresetComponent[] {
+    let configs: KalturaPlayerPresetComponent[] = [];
+    this._pendingItems.forEach(item => {
+      configs = [...configs, ...item.playerConfig];
+    });
+    this._items = [...this._items, ...this._pendingItems];
+    this._pendingItems = [];
+    return configs.filter(Boolean) as KalturaPlayerPresetComponent[];
+  }
+}

package/src/contrib-services/presets-utils.ts

@@ -0,0 +1,27 @@
+export interface GroupPresetAreasOptions {
+  presetAreasMapping: any;
+  acceptableTypes: string[];
+}
+
+export class PresetsUtils {
+  public static groupPresetAreasByType(
+    options: GroupPresetAreasOptions
+  ): any {
+    const {presetAreasMapping, acceptableTypes} = options;
+
+    const result = {};
+    // @ts-ignore
+    acceptableTypes.forEach(presetType => (result[presetType] = {}));
+    Object.keys(presetAreasMapping).forEach(presetName => {
+      Object.keys(presetAreasMapping[presetName]).forEach(presetType => {
+        if (acceptableTypes.indexOf(presetType) === -1) {
+        } else {
+          // @ts-ignore
+          result[presetType][presetName] =
+            presetAreasMapping[presetName][presetType];
+        }
+      });
+    });
+    return result;
+  }
+}

package/src/contrib-services/toast/_toast.scss

@@ -0,0 +1,93 @@
+.toastWrapper {
+  position: relative;
+  min-width: 120px;
+  max-width: 264px;
+  height: 100%;
+  border-radius: 4px;
+  background-color: #222222;
+  border-left-style: solid;
+  border-left-width: 4px;
+  text-align: left;
+}
+
+.infoToast {
+  border-left-color: #01ACCD;
+}
+
+.successToast {
+  border-left-color: #009E48;
+}
+
+.warnToast {
+  border-left-color: #F9A71B;
+}
+
+.errorToast {
+  border-left-color: #E7585D;
+}
+
+.closeButton {
+  position: absolute;
+  background-color: transparent;
+  top: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+  background-repeat: no-repeat;
+  border: none;
+  background-image: url("./assets/close.svg");
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.title {
+  font-size: 12px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.17;
+  letter-spacing: normal;
+  color: #cccccc;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: 4px;
+  padding-right: 16px;
+  padding-left: 12px;
+}
+
+.toastBody {
+  position: relative;
+  width: 100%;
+  padding: 2px 16px 5px 12px;
+}
+
+.iconContainer {
+  position: relative;
+  height: 16px;
+  width: 16px;
+  float: left;
+  margin-right: 7px;
+}
+
+.iconWrapper {
+  height: 16px;
+  width: 16px;
+}
+
+.text {
+  font-size: 14px;
+  font-weight: bold;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #cccccc;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+

package/src/contrib-services/toast/assets/close.svg

@@ -0,0 +1,9 @@
+<?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/Close</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Icons/16/Close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M8.8497789,8 L11.824005,10.9742261 C12.058665,11.2088861 12.058665,11.5893451 11.824005,11.824005 C11.5893451,12.058665 11.2088861,12.058665 10.9742261,11.824005 L8,8.8497789 L5.02577387,11.824005 C4.7911139,12.058665 4.41065493,12.058665 4.17599497,11.824005 C3.94133501,11.5893451 3.94133501,11.2088861 4.17599497,10.9742261 L7.1502211,8 L4.17599497,5.02577387 C3.94133501,4.7911139 3.94133501,4.41065493 4.17599497,4.17599497 C4.41065493,3.94133501 4.7911139,3.94133501 5.02577387,4.17599497 L8,7.1502211 L10.9742261,4.17599497 C11.2088861,3.94133501 11.5893451,3.94133501 11.824005,4.17599497 C12.058665,4.41065493 12.058665,4.7911139 11.824005,5.02577387 L8.8497789,8 Z" id="Path" fill="#cccccc"></path>
+    </g>
+</svg>

package/src/contrib-services/toast/index.ts

@@ -0,0 +1 @@
+import {Toast} from './toast';

package/src/contrib-services/toast/toast.tsx

@@ -0,0 +1,67 @@
+import {Component, h} from 'preact';
+import * as styles from './_toast.scss';
+import {ToastSeverity} from '../toast-manager';
+
+export interface ToastProps {
+  id: string;
+  title: string;
+  text: string;
+  icon: any;
+  severity: ToastSeverity;
+  onClose: (id: string) => void;
+  onClick: () => void;
+}
+
+interface ToastState {
+  isShown: boolean;
+}
+
+export class Toast extends Component<ToastProps, ToastState> {
+  state = {
+    isShown: true,
+  };
+
+  private _onClick = (e: any) => {
+    this.props.onClick();
+    this._onClose(e);
+  };
+
+  private _onClose = (e: any) => {
+    e.stopPropagation();
+    this.setState({isShown: false});
+    this.props.onClose(this.props.id);
+  };
+
+  private _getToastSeverityClass(): string {
+    switch (this.props.severity) {
+      case ToastSeverity.Success:
+        return styles.successToast;
+      case ToastSeverity.Warn:
+        return styles.warnToast;
+      case ToastSeverity.Error:
+        return styles.errorToast;
+      default:
+        //info
+        return styles.infoToast;
+    }
+  }
+
+  render() {
+    const {text, title, icon} = this.props;
+
+    return (
+      <div
+        className={styles.toastWrapper + ' ' + this._getToastSeverityClass()}
+        onClick={this._onClick}>
+        <button className={styles.closeButton} onClick={this._onClose}></button>
+        <div className={styles.title}>{title}</div>
+        <div className={styles.toastBody}>
+          <div className={styles.iconContainer}>
+            <div className={styles.iconWrapper}>{icon}</div>
+          </div>
+          <div className={styles.text}>{text}</div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/contrib-services/toast-manager.tsx

@@ -0,0 +1,121 @@
+import {UUID} from './uuid';
+import {FloatingManager} from './floating-manager';
+import {FloatingPositions, FloatingUIModes} from './floating-item-data';
+import {FloatingItem} from './floating-item';
+import {ToastProps} from './toast/toast';
+import {ToastsContainer} from './toasts-container';
+import {h} from 'preact';
+
+export interface ToastManagerOptions {
+  floatingManager: FloatingManager;
+}
+
+export enum ToastSeverity {
+  Info = 'Info',
+  Success = 'Success',
+  Warn = 'Warn',
+  Error = 'Error'
+}
+
+export interface ToastItemData {
+  title: string;
+  text: string;
+  icon: any;
+  severity: ToastSeverity;
+  duration: number;
+  onClick: () => void;
+}
+
+interface ManagedToasts {
+  timerSubscription: any;
+  duration: number;
+  toastProps: ToastProps;
+}
+
+export class ToastManager {
+  private _options: ToastManagerOptions;
+  private _toasts: ManagedToasts[] = [];
+  private _floatingItem: FloatingItem | null = null;
+
+  constructor(private options: ToastManagerOptions) {
+    this._options = options;
+  }
+
+  add(data: ToastItemData): void {
+    const {duration, ...props} = data;
+    if (!this._floatingItem) this._addToastsContainer();
+    const managedToast = {
+      toastProps: {
+        ...props,
+        id: UUID.uuidV1(),
+        onClose: this._remove
+      },
+      duration: duration,
+      timerSubscription: null
+    };
+    this._toasts.push(managedToast);
+    this._updateToastsUI();
+    this._startDurationTimer(managedToast);
+  }
+
+  reset(): void {
+    this._toasts.forEach(managedToast => {
+      this._remove(managedToast.toastProps.id);
+    });
+  }
+
+  private _startDurationTimer(managedToast: ManagedToasts): void {
+    managedToast.timerSubscription = setTimeout(() => {
+      this._remove(managedToast.toastProps.id);
+    }, managedToast.duration);
+  }
+
+  private _remove = (id: string): void => {
+    const index = this._findToastIndexById(id);
+    if (index === -1) return;
+
+    clearTimeout(this._toasts[index].timerSubscription);
+    this._toasts.splice(index, 1);
+    this._updateToastsUI();
+    if (this._toasts.length === 0) this._removeToastsContainer();
+  };
+
+  private _addToastsContainer(): void {
+    this._floatingItem = this._options.floatingManager.add({
+      label: 'Toasts',
+      mode: FloatingUIModes.Immediate,
+      position: FloatingPositions.InteractiveArea,
+      renderContent: () => {
+        return (
+          <ToastsContainer
+            toasts={this._toasts.map(toast => {
+              return toast.toastProps;
+            })}
+          />
+        );
+      }
+    });
+  }
+
+  private _removeToastsContainer(): void {
+    if (!this._floatingItem) return;
+
+    this._options.floatingManager.remove(this._floatingItem);
+    this._floatingItem = null;
+  }
+
+  private _updateToastsUI(): void {
+    if (this._floatingItem) this._floatingItem.update();
+  }
+
+  private _findToastIndexById(id: string): number {
+    let index = 0;
+    while (index < this._toasts.length) {
+      if (this._toasts[index].toastProps.id === id) {
+        return index;
+      }
+      index++;
+    }
+    return -1;
+  }
+}

package/src/contrib-services/toasts-container/_toasts-container.scss

@@ -0,0 +1,21 @@
+.toastsContainer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 8px 16px 0;
+  min-width: 120px;
+  max-width: 264px;
+  display: flex;
+  flex-direction: column;
+}
+
+.toastRow {
+  height: 42px;
+  min-width: 120px;
+  max-width: 264px;
+  margin-bottom: 8px;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  text-overflow: ellipsis;
+  align-self: flex-end;
+}

package/src/contrib-services/toasts-container/index.ts

@@ -0,0 +1 @@
+export {ToastsContainer} from './toasts-container';

package/src/contrib-services/toasts-container/toasts-container.tsx

@@ -0,0 +1,23 @@
+import {Component, h} from 'preact';
+import {Toast, ToastProps} from '../toast/toast';
+import * as styles from './_toasts-container.scss';
+
+export interface ToastsContainerProps {
+  toasts: ToastProps[];
+}
+
+export class ToastsContainer extends Component<ToastsContainerProps> {
+  render() {
+    return (
+      <div className={styles.toastsContainer}>
+        {this.props.toasts.map(toast => {
+          return (
+            <div className={styles.toastRow} key={toast.id}>
+              <Toast {...toast} />
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}

package/src/contrib-services/ui-player-adapter/index.tsx

@@ -0,0 +1 @@
+export * from './ui-player-adapter';

package/src/contrib-services/ui-player-adapter/ui-player-adapter.tsx

@@ -0,0 +1,27 @@
+import {h, Component} from 'preact';
+
+export interface UIPlayerAdapterProps {
+  player: KalturaPlayerTypes.Player;
+  onMount: (player: KalturaPlayerTypes.Player) => void;
+  onUnmount: (player: KalturaPlayerTypes.Player) => void;
+}
+
+@KalturaPlayer.ui.components.withPlayer
+export class UIPlayerAdapter extends Component<UIPlayerAdapterProps> {
+  static defaultProps = {
+    player: null,
+  };
+
+  componentDidMount(): void {
+
+    this.props.onMount(this.props.player);
+  }
+
+  componentWillUnmount(): void {
+    this.props.onUnmount(this.props.player);
+  }
+
+  render(props: any) {
+    return null;
+  }
+}

package/src/contrib-services/uuid.ts

@@ -0,0 +1,6 @@
+export class UUID {
+  //timestamp
+  public static uuidV1() {
+    return `${Date.now()}-${Math.random()}`;
+  }
+}

package/src/global.d.ts

@@ -1,11 +1,11 @@
 /// <reference path="../node_modules/@playkit-js-contrib/common/global-types/index.d.ts" />
 
-declare module "*.scss" {
-    const content: { [className: string]: string };
-    export = content;
+declare module '*.scss' {
+  const content: {[className: string]: string};
+  export = content;
 }
 
-declare module "*.svg" {
-    const content: any;
-    export default content;
+declare module '*.svg' {
+  const content: any;
+  export default content;
 }