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

package/src/components/popover/popover.scss

@@ -0,0 +1,30 @@
+.popover-container {
+    position: relative;
+    .popover-component {
+        background-color: #222222;
+        border-radius: 4px;
+        position: absolute;
+        right: 0px;
+        font-size: 15px;
+        display: block;
+        &.visible {
+            visibility: visible;
+            opacity: 1;
+            z-index: 10;
+        }
+        &.top {
+            bottom: 100%;
+            margin-bottom: 6px;
+        }
+        &.bottom {
+            top: 100%;
+            margin-top: 6px;
+        }
+        &.right {
+            left: 0px;
+        }
+        &.left {
+            right: 0px;
+        }
+    }
+}

package/src/components/popover/popover.tsx

@@ -0,0 +1,224 @@
+import {h, Component, ComponentChild} from 'preact';
+import * as styles from './popover.scss';
+
+export enum PopoverVerticalPositions {
+  Top = 'top',
+  Bottom = 'bottom',
+}
+export enum PopoverHorizontalPositions {
+  Left = 'left',
+  Right = 'right',
+}
+export enum PopoverTriggerMode {
+  Click = 'click',
+  Hover = 'hover',
+}
+
+export enum KeyboardKeys {
+  Esc = 27,
+  Enter = 13,
+  Tab = 9,
+  Space = 32,
+  End = 35,
+  Home = 36,
+}
+
+const CLOSE_ON_HOVER_DELAY = 500;
+
+const defaultProps = {
+  verticalPosition: PopoverVerticalPositions.Top,
+  horizontalPosition: PopoverHorizontalPositions.Left,
+  triggerMode: PopoverTriggerMode.Click,
+  className: 'popover',
+  closeOnEsc: true,
+  closeOnClick: true,
+};
+
+interface PopoverProps {
+  onClose?: () => void;
+  onOpen?: () => void;
+  closeOnClick: boolean;
+  closeOnEsc: boolean;
+  verticalPosition: PopoverVerticalPositions;
+  horizontalPosition: PopoverHorizontalPositions;
+  className: string;
+  triggerMode: PopoverTriggerMode;
+  content: ComponentChild;
+  children: ComponentChild;
+}
+
+interface PopoverState {
+  open: boolean;
+}
+
+/**
+ * Popover renders popup with a target.
+ * Properties description:
+ *   onOpen - function that will be executed when popover opens;
+ *   onClose - function that will be executed when popover closes;
+ *   closeOnClick - close the popover on mouse click;
+ *   verticalPosition - vertical position of popover relative to target ("top" or "bottom"), default - "top";
+ *   horizontalPosition - horizontal position of popover relative to target ("left" or "right"), default - "left";
+ *   !!! known limitation of popover positions: if popover opens beyond the visible area of the player - the popover will be overlapped by player
+ *   className - popover class, can be use for popover styling, default - 'popover';
+ *   closeOnEsc - handle ESC keyboard pressed event and close popover, default - true;
+ *   triggerMode - popover support 2 ways for opening: click (keyPress) and mouse hover ("click" or "hover"), default - "click";
+ *   content - content of popover. Can be any valid Preact node, ex:
+ *      <select>
+ *          <option>Option 1</option>
+ *          ...
+ *          <option>Option n</option>
+ *      </select>
+ *   children - popover target. Can be any valid Preact node, ex:
+ *      <button>
+ *          <i className="icon" />
+ *      </button>
+ */
+
+export class Popover extends Component<PopoverProps, PopoverState> {
+  private _closeTimeout: any = null;
+  private _controlElement = null;
+  static defaultProps = {
+    ...defaultProps,
+  };
+  state = {
+    open: false,
+  };
+
+  componentWillUnmount() {
+    this._removeListeners();
+  }
+
+  private _clearTimeout = () => {
+    clearTimeout(this._closeTimeout);
+    this._closeTimeout = null;
+  };
+
+  private _handleMouseEvent = (event: MouseEvent) => {
+    if (
+      // @ts-ignore
+      !this._controlElement.contains(event.target) &&
+      this.props.closeOnClick
+    ) {
+      this._closePopover();
+    }
+  };
+
+  private _handleKeyboardEvent = (event: KeyboardEvent) => {
+    if (
+      // @ts-ignore
+      this._controlElement.contains(event.target) &&
+      event.keyCode === KeyboardKeys.Enter
+    ) {
+      // handle Enter key pressed on Target icon to prevent triggering of _closePopover twice
+      return;
+    }
+    if (
+      (this.props.closeOnEsc && event.keyCode === KeyboardKeys.Esc) ||
+      event.keyCode === KeyboardKeys.Enter
+    ) {
+      // handle if ESC or Enter button presesd
+      this._closePopover();
+    }
+  };
+
+  private _openPopover = () => {
+    const {onOpen} = this.props;
+    this._clearTimeout();
+    this.setState({open: true}, () => {
+      this._addListeners();
+      if (onOpen) {
+        onOpen();
+      }
+    });
+  };
+
+  private _closePopover = () => {
+    const {onClose} = this.props;
+    this._clearTimeout();
+    this.setState({open: false}, () => {
+      this._removeListeners();
+      if (onClose) {
+        onClose();
+      }
+    });
+  };
+
+  private _togglePopover = (e: MouseEvent | KeyboardEvent) => {
+    if (this.state.open) {
+      this._closePopover();
+    } else {
+      this._openPopover();
+    }
+  };
+  private _handleMouseEnter = () => {
+    if (!this.state.open) {
+      this._openPopover();
+    }
+  };
+  private _handleMouseLeave = () => {
+    this._closeTimeout = setTimeout(this._closePopover, CLOSE_ON_HOVER_DELAY);
+  };
+  private _handleHoverOnPopover = () => {
+    if (this.state.open && this._closeTimeout) {
+      this._clearTimeout();
+    } else {
+      this._closePopover();
+    }
+  };
+  private _addListeners = () => {
+    document.addEventListener('click', this._handleMouseEvent);
+    document.addEventListener('keydown', this._handleKeyboardEvent);
+  };
+  private _removeListeners = () => {
+    document.removeEventListener('click', this._handleMouseEvent);
+    document.removeEventListener('keydown', this._handleKeyboardEvent);
+  };
+  private _getHoverEvents = () => {
+    if (this.props.triggerMode === PopoverTriggerMode.Hover) {
+      return {
+        targetEvents: {
+          onMouseEnter: this._handleMouseEnter,
+          onMouseLeave: this._handleMouseLeave,
+        },
+        popoverEvents: {
+          onMouseEnter: this._handleHoverOnPopover,
+          onMouseLeave: this._handleHoverOnPopover,
+        },
+      };
+    }
+    return {targetEvents: {onClick: this._togglePopover}, popoverEvents: {}};
+  };
+  render(props: PopoverProps) {
+    if (!props.content || !props.children) {
+      return null;
+    }
+    const {targetEvents, popoverEvents} = this._getHoverEvents();
+    return (
+      <div className={styles.popoverContainer}>
+        <div
+          className="popover-anchor-container"
+          ref={node => {
+            // @ts-ignore
+            this._controlElement = node;
+          }}
+          {...targetEvents}>
+          {props.children}
+        </div>
+        {this.state.open && (
+          <div
+            aria-expanded="true"
+            className={[
+              props.className,
+              styles.popoverComponent,
+              styles[props.verticalPosition],
+              styles[props.horizontalPosition],
+            ].join(' ')}
+            {...popoverEvents}>
+            {props.content}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

package/src/contrib-services/common-types.ts

@@ -0,0 +1,2 @@
+export type PlayerSize = {width: number; height: number};
+export type VideoSize = {width: number; height: number};

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

@@ -0,0 +1,80 @@
+import {PlayerContribRegistry} from './player-contrib-registry';
+import {PresetManager} from './preset-manager';
+import {ToastManager} from './toast-manager';
+import {FloatingManager} from './floating-manager';
+
+export interface ContribServicesOptions {
+  kalturaPlayer: KalturaPlayerTypes.Player;
+}
+
+export function getPlayerContribRegistry(kalturaPlayer: KalturaPlayerTypes.Player): PlayerContribRegistry {
+  return PlayerContribRegistry.get(kalturaPlayer);
+}
+
+export class ContribServices {
+  static get(options: ContribServicesOptions): ContribServices {
+    const playerContribRegistry = getPlayerContribRegistry(options.kalturaPlayer);
+    return playerContribRegistry.register('ContribServices', () => {
+      return new ContribServices(playerContribRegistry, options);
+    });
+  }
+
+  private _toastManager: ToastManager;
+  private _floatingManager: FloatingManager;
+  private _presetManager: PresetManager;
+
+  constructor(private _playerContribRegistry: PlayerContribRegistry, private _options: ContribServicesOptions) {
+    const kalturaPlayer = this._options.kalturaPlayer;
+
+    const presetManager = new PresetManager({
+      kalturaPlayer
+    });
+    const floatingManager = new FloatingManager({
+      kalturaPlayer,
+      presetManager
+    });
+    const toastManager = new ToastManager({
+      floatingManager
+    });
+    this._toastManager = toastManager;
+    this._floatingManager = floatingManager;
+    this._presetManager = presetManager;
+
+    this._addListeners();
+
+  }
+
+  private _addListeners = (): void => {
+    const kalturaPlayer = this._options.kalturaPlayer;
+    kalturaPlayer.addEventListener(kalturaPlayer.Event.PLAYER_RESET, this.reset);
+    kalturaPlayer.addEventListener(kalturaPlayer.Event.PLAYER_DESTROY, this._removeListeners);
+  };
+
+  private _removeListeners = (): void => {
+    const kalturaPlayer = this._options.kalturaPlayer;
+    kalturaPlayer.removeEventListener(kalturaPlayer.Event.PLAYER_RESET, this.reset);
+    kalturaPlayer.removeEventListener(kalturaPlayer.Event.PLAYER_DESTROY, this._removeListeners);
+  };
+
+  public get presetManager(): PresetManager {
+    return this._presetManager;
+  }
+
+  public get floatingManager(): FloatingManager {
+    return this._floatingManager;
+  }
+
+  public get toastManager(): ToastManager {
+    return this._toastManager;
+  }
+
+  reset = (): void => {
+    this._toastManager.reset();
+    this._floatingManager.reset();
+  };
+
+  public getPlayerKS(): string | null {
+    const {session} = this._options.kalturaPlayer.config;
+    return session && session.ks ? session.ks : null;
+  }
+}

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

@@ -0,0 +1,16 @@
+import {KalturaPlayerUtils} from './kaltura-player-utils';
+
+export function getContribConfig<T>(
+  player: KalturaPlayerTypes.Player,
+  path: string,
+  baseConfig: T,
+  options?: {explicitMerge: string[]}
+): T {
+  return KalturaPlayerUtils.getPlayerConfig(
+    player,
+    `contrib.${path}`,
+    baseConfig,
+    // @ts-ignore
+    options
+  );
+}

package/src/contrib-services/events-manager.ts

@@ -0,0 +1,59 @@
+export type Handler<T> = (event: T) => void;
+export type WildcardHandler = (event: any) => void;
+
+export interface Event {
+  type: string;
+}
+
+export class EventsManager<T extends Event> {
+  private _eventListeners: Record<string, Handler<any>[]> = {};
+  private _wildcardEventListeners: WildcardHandler[] = [];
+
+  on<TEvent extends Event>(
+    type: TEvent['type'],
+    handler: Handler<TEvent>
+  ): void;
+  on(type: '*', handler: WildcardHandler): void;
+  on(type: string, handler: any): void {
+    if (type === '*') {
+      this._wildcardEventListeners.push(handler);
+      return;
+    }
+
+    (this._eventListeners[type] || (this._eventListeners[type] = [])).push(
+      handler
+    );
+  }
+
+  off<TEvent extends Event>(
+    type: TEvent['type'],
+    handler: Handler<TEvent>
+  ): void;
+  off(type: '*', handler: WildcardHandler): void;
+  off(type: string, handler: any): void {
+    if (type === '*') {
+      this._wildcardEventListeners.splice(
+        this._wildcardEventListeners.indexOf(handler) >>> 0,
+        1
+      );
+      return;
+    }
+
+    const eventListeners = this._eventListeners[type];
+
+    if (!eventListeners) {
+      return;
+    }
+
+    eventListeners.splice(eventListeners.indexOf(handler) >>> 0, 1);
+  }
+
+  emit(event: T): void {
+    (this._eventListeners[event.type] || []).slice().map(handler => {
+      handler(event);
+    });
+    this._wildcardEventListeners.slice().map(handler => {
+      handler(event);
+    });
+  }
+}

package/src/contrib-services/floating-item-data.tsx

@@ -0,0 +1,31 @@
+import {ComponentChild, Ref} from 'preact';
+import {PlayerSize, VideoSize} from './common-types';
+
+export enum FloatingUIModes {
+  MediaLoaded = 'MediaLoaded',
+  OnDemand = 'OnDemand',
+  Immediate = 'Immediate',
+  FirstPlay = 'FirstPlay',
+}
+
+export enum FloatingPositions {
+  VideoArea = 'VideoArea',
+  PresetArea = 'PresetArea',
+  InteractiveArea = 'InteractiveArea',
+}
+
+export interface FloatingItemData {
+  label: string;
+  mode: FloatingUIModes;
+  renderContent: (floatingItemProps: FloatingItemProps) => ComponentChild;
+  className?: string;
+  position: FloatingPositions;
+}
+
+export interface FloatingItemProps {
+  currentTime: number;
+  canvas: {
+    playerSize: PlayerSize;
+    videoSize: VideoSize;
+  };
+}

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

@@ -0,0 +1,116 @@
+import {h} from 'preact';
+import {
+  FloatingItemData,
+  FloatingItemProps,
+  FloatingUIModes,
+} from './floating-item-data';
+import {ManagedComponent} from './managed-component';
+
+export interface FloatingItemOptions {
+  kalturaPlayer: KalturaPlayerTypes.Player;
+  data: FloatingItemData;
+}
+
+export class FloatingItem {
+  private _destroyed = false;
+  private _options: FloatingItemOptions;
+  private _isShown = false;
+  private _componentRef: ManagedComponent | null = null;
+
+  constructor(options: FloatingItemOptions) {
+    this._options = options;
+
+    this._addPlayerBindings();
+  }
+
+  get data(): FloatingItemData {
+    return this._options.data;
+  }
+
+  remove = (): void => {
+    this._isShown = false;
+    if (!this._componentRef) {
+      return;
+    }
+
+    this._componentRef.update();
+  };
+
+  add = (): void => {
+    this._isShown = true;
+    if (!this._componentRef) {
+      return;
+    }
+
+    this._componentRef.update();
+  };
+
+  public update() {
+    if (!this._componentRef) {
+      return;
+    }
+
+    this._componentRef.update();
+  }
+
+  /**
+   * destory the ui item
+   */
+  destroy(): void {
+    this._destroyed = true;
+    this.remove();
+  }
+
+  renderFloatingChild(props: FloatingItemProps) {
+    const {label} = this._options.data;
+
+    return (
+      <ManagedComponent
+        label={label}
+        renderChildren={() => this._options.data.renderContent(props)}
+        isShown={() => this._isShown}
+        ref={(ref: any) => (this._componentRef = ref)}
+      />
+    );
+  }
+
+  private _handleMediaLoaded = () => {
+    const {kalturaPlayer} = this._options;
+    kalturaPlayer.removeEventListener(
+      kalturaPlayer.Event.MEDIA_LOADED,
+      this._handleMediaLoaded
+    );
+    this.add();
+  };
+
+  private _handleFirstPlay = () => {
+    const {kalturaPlayer} = this._options;
+    kalturaPlayer.removeEventListener(
+      kalturaPlayer.Event.FIRST_PLAY,
+      this._handleFirstPlay
+    );
+    this.add();
+  };
+
+  private _addPlayerBindings() {
+    const {kalturaPlayer, data} = this._options;
+
+    if (data.mode === FloatingUIModes.MediaLoaded) {
+      kalturaPlayer.addEventListener(
+        kalturaPlayer.Event.MEDIA_LOADED,
+        this._handleMediaLoaded
+      );
+    }
+
+    if (data.mode === FloatingUIModes.FirstPlay) {
+      kalturaPlayer.addEventListener(
+        kalturaPlayer.Event.FIRST_PLAY,
+        this._handleFirstPlay
+      );
+    }
+
+    if (data.mode === FloatingUIModes.Immediate) {
+      this.add();
+    }
+  }
+}