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

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

@@ -0,0 +1,224 @@
+import {FloatingItem} from './floating-item';
+import {
+  FloatingItemData,
+  FloatingItemProps,
+  FloatingPositions,
+} from './floating-item-data';
+import {PresetManager, PresetManagerEventTypes} from './preset-manager';
+import {ComponentChild, h} from 'preact';
+import {PlayerSize, VideoSize} from './common-types';
+import {getPlayerSize, getVideoSize} from './player-utils';
+import {ManagedComponent} from './managed-component';
+import {PresetsUtils} from './presets-utils';
+import {getContribConfig} from './contrib-utils';
+
+export interface FloatingManagerOptions {
+  kalturaPlayer: KalturaPlayerTypes.Player;
+  presetManager: PresetManager;
+}
+
+const defaultFloatingConfig: any = {
+  presetAreasMapping: {
+    Playback: {
+      VideoArea: 'VideoArea',
+      PresetArea: 'PresetArea',
+      InteractiveArea: 'InteractiveArea',
+    },
+    Live: {
+      VideoArea: 'VideoArea',
+      PresetArea: 'PresetArea',
+      InteractiveArea: 'InteractiveArea',
+    },
+  },
+};
+
+const acceptableTypes = ['VideoArea', 'PresetArea', 'InteractiveArea'];
+
+export class FloatingManager {
+  private _items: Record<FloatingPositions, FloatingItem[]> = {
+    [FloatingPositions.VideoArea]: [],
+    [FloatingPositions.InteractiveArea]: [],
+    [FloatingPositions.PresetArea]: [],
+  };
+  private _componentRef: Record<FloatingPositions, ManagedComponent | null> = {
+    [FloatingPositions.InteractiveArea]: null,
+    [FloatingPositions.VideoArea]: null,
+    [FloatingPositions.PresetArea]: null,
+  };
+  private _cache: {
+    canvas: {
+      playerSize: PlayerSize;
+      videoSize: VideoSize;
+    };
+  } = {
+    canvas: {
+      playerSize: {width: 0, height: 0},
+      videoSize: {width: 0, height: 0},
+    },
+  };
+
+  private _floatingConfig: any;
+
+  constructor(private _options: FloatingManagerOptions) {
+    this._floatingConfig = getContribConfig(
+      this._options.kalturaPlayer,
+      'ui.floating',
+      defaultFloatingConfig,
+      {
+        explicitMerge: ['presetAreasMapping'],
+      }
+    );
+
+    const groupedPresets = PresetsUtils.groupPresetAreasByType({
+      presetAreasMapping: this._floatingConfig.presetAreasMapping,
+      acceptableTypes,
+    });
+
+    Object.keys(groupedPresets).forEach(presetType => {
+      this._options.presetManager.add({
+        label: 'floating-manager',
+        presetAreas: groupedPresets[presetType],
+        // @ts-ignore
+        renderChild: () => this._renderChild(FloatingPositions[presetType]),
+      });
+    });
+    this._addPlayerBindings();
+    this._updateCachedCanvas();
+  }
+
+  /**
+   * initialize new floating ui item
+   * @param item
+   */
+  //TODO push new item to relevant position array according to its' FloatingPositions value
+  add(data: FloatingItemData): FloatingItem | null {
+    const {presetManager} = this._options;
+
+    const itemOptions = {
+      // @ts-ignore
+      presetManager,
+      ...this._options,
+      data,
+    };
+
+    const item = new FloatingItem(itemOptions);
+    this._items[data.position].push(item);
+    return item;
+  }
+
+  remove(item: FloatingItem) {
+    const positionItems = this._items[item.data.position];
+    const itemIndex = positionItems.indexOf(item);
+    if (itemIndex > -1) {
+      positionItems[itemIndex].destroy();
+      positionItems.splice(itemIndex, 1);
+    } else {
+      console.warn(`couldn't remove ${item} since it wasn't found`);
+    }
+  }
+
+  reset(): void {
+    const allItems = [
+      ...this._items.VideoArea,
+      ...this._items.InteractiveArea,
+      ...this._items.PresetArea,
+    ];
+    allItems.forEach(item => {
+      try {
+        item.destroy();
+      } catch (e) {
+        // TODO log error
+        console.warn(e);
+      }
+    });
+
+    this._items.VideoArea = [];
+    this._items.PresetArea = [];
+    this._items.InteractiveArea = [];
+  }
+
+  private _getRendererProps(
+    props: Partial<FloatingItemProps>
+  ): FloatingItemProps {
+    const {kalturaPlayer} = this._options;
+
+    return {
+      currentTime:
+        typeof props.currentTime !== 'undefined'
+          ? props.currentTime
+          : kalturaPlayer.currentTime * 1000,
+      canvas: this._cache.canvas,
+    };
+  }
+
+  private _updateCachedCanvas() {
+    this._cache.canvas = {
+      playerSize: getPlayerSize(this._options.kalturaPlayer),
+      videoSize: getVideoSize(this._options.kalturaPlayer),
+    };
+  }
+
+  private _renderItems = (position: FloatingPositions) => {
+    const props = this._getRendererProps({});
+    return this._items[position].map(item => item.renderFloatingChild(props));
+  };
+
+  private _renderChild = (position: FloatingPositions): ComponentChild => {
+    return (
+      <ManagedComponent
+        label={'floating-manager'}
+        renderChildren={() => this._renderItems(position)}
+        isShown={() => true}
+        ref={(ref: any) => (this._componentRef[position] = ref)}
+      />
+    );
+  };
+
+  private _updateComponents() {
+    if (this._componentRef.InteractiveArea) {
+      this._componentRef.InteractiveArea.update();
+    }
+
+    if (this._componentRef.PresetArea) {
+      this._componentRef.PresetArea.update();
+    }
+
+    if (this._componentRef.VideoArea) {
+      this._componentRef.VideoArea.update();
+    }
+  }
+
+  private _addPlayerBindings() {
+    const {kalturaPlayer} = this._options;
+
+    kalturaPlayer.addEventListener(kalturaPlayer.Event.TIME_UPDATE, () => {
+      this._updateComponents();
+    });
+
+    kalturaPlayer.addEventListener(kalturaPlayer.Event.MEDIA_LOADED, () => {
+      this._updateCachedCanvas();
+      this._updateComponents();
+    });
+
+    kalturaPlayer.addEventListener(kalturaPlayer.Event.LOADED_DATA, () => {
+      this._updateCachedCanvas();
+      this._updateComponents();
+    });
+
+    this._options.presetManager.on(
+      PresetManagerEventTypes.VideoResizeEvent,
+      () => {
+        this._updateCachedCanvas();
+        this._updateComponents();
+      }
+    );
+
+    this._options.presetManager.on(
+      PresetManagerEventTypes.PresetResizeEvent,
+      () => {
+        this._updateCachedCanvas();
+        this._updateComponents();
+      }
+    );
+  }
+}

package/src/contrib-services/index.ts

@@ -0,0 +1,2 @@
+// TODO: remove toasts from Moderation plugin and use from UI managers once the toast-manager got implemented
+export * from './contrib-services';

package/src/contrib-services/injected-component/index.ts

@@ -0,0 +1 @@
+export {InjectedComponent} from './injected-component';

package/src/contrib-services/injected-component/injected-component.scss

@@ -0,0 +1,5 @@
+.fill-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}

package/src/contrib-services/injected-component/injected-component.tsx

@@ -0,0 +1,58 @@
+import {h, Component} from 'preact';
+import * as styles from './injected-component.scss';
+
+export interface InjectedComponentProps {
+  onCreate: (options: {parent: HTMLDivElement}) => void;
+  onDestroy: (options: {parent: HTMLDivElement}) => void;
+  label: string;
+  fillContainer: boolean;
+}
+
+class InjectedComponent extends Component<InjectedComponentProps> {
+  _root = null;
+
+  shouldComponentUpdate(): boolean {
+    return false;
+  }
+
+  componentDidMount(): void {
+    const {onCreate, label} = this.props;
+
+    if (!onCreate) {
+      return;
+    }
+
+    const parentElement = this._root;
+    if (!parentElement) {
+      return;
+    }
+
+    onCreate({parent: parentElement});
+  }
+
+  componentWillUnmount(): void {
+    const {onDestroy, label} = this.props;
+    const parentElement = this._root;
+
+    if (!parentElement || !onDestroy) {
+      return;
+    }
+
+    onDestroy({parent: parentElement});
+
+  }
+
+  render() {
+    const {label, fillContainer} = this.props;
+    const className = fillContainer ? styles.fillContainer : '';
+    return (
+      <div
+        data-contrib-injected={label}
+        className={className}
+        ref={(ref: any) => (this._root = ref)}
+      />
+    );
+  }
+}
+
+export {InjectedComponent};

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

@@ -0,0 +1,18 @@
+import {ObjectUtils} from './object-utils';
+
+export class KalturaPlayerUtils {
+  static getPlayerConfig<T>(
+    player: any,
+    configPath: string,
+    baseConfig: T,
+    options: {explicitMerge: string[]}
+  ): T {
+    const playerContribConfig = ObjectUtils.get(player.config, configPath, {});
+
+    return ObjectUtils.mergeDefaults<T>(
+      playerContribConfig as any,
+      baseConfig,
+      options
+    );
+  }
+}

package/src/contrib-services/managed-component/_managed-component.scss

@@ -0,0 +1,8 @@
+.fill-container {
+  width: 100%;
+  height: 100%;
+}
+
+.inline-container {
+  display: inline-block;
+}

package/src/contrib-services/managed-component/index.ts

@@ -0,0 +1 @@
+export * from './managed-component';

package/src/contrib-services/managed-component/managed-component.tsx

@@ -0,0 +1,71 @@
+import {h, Component, ComponentChild, ComponentChildren} from 'preact';
+import * as styles from './_managed-component.scss';
+const {
+  redux: {connect},
+} = KalturaPlayer.ui;
+
+type ManagedComponentState = {
+  toggler: boolean;
+};
+type ManagedComponentProps = {
+  isShown: () => boolean;
+  renderChildren: (playerSize: string) => ComponentChildren;
+  label: string;
+  fillContainer: boolean;
+  playerSize?: string;
+  updateOnPlayerSizeChanged?: boolean;
+};
+
+const mapStateToProps = (state: Record<string, any>) => ({
+  playerSize: state.shell.playerSize,
+});
+@connect(mapStateToProps, null, null, {forwardRef: true})
+export class ManagedComponent extends Component<
+  ManagedComponentProps,
+  ManagedComponentState
+> {
+
+  static defaultProps = {
+    fillContainer: false,
+  };
+
+  update() {
+    this.setState((prev: ManagedComponentState) => {
+      return {
+        toggler: !prev.toggler,
+      };
+    });
+  }
+
+  shouldComponentUpdate(prevProps: Readonly<ManagedComponentProps>): boolean {
+    const {updateOnPlayerSizeChanged, playerSize} = this.props;
+    return (
+      (updateOnPlayerSizeChanged && prevProps.playerSize !== playerSize) ||
+      prevProps.playerSize === playerSize
+    );
+  }
+
+  componentDidMount(): void {
+    this.setState({
+      toggler: false,
+    });
+  }
+
+  render() {
+    const {fillContainer, isShown, playerSize} = this.props;
+    if (!isShown()) {
+      return null;
+    }
+
+    return (
+      <div
+        data-contrib-item={this.props.label}
+        className={[
+          `${fillContainer ? styles.fillContainer : ''}`,
+          styles.inlineContainer,
+        ].join(' ')}>
+        {this.props.renderChildren(playerSize!)}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,157 @@
+export class ObjectUtils {
+  /**
+   * @param {T} data - The data to copy.
+   * @returns {T} - The copied data.
+   */
+  public static copyDeep<T extends Record<string, any>>(data: T): T {
+    // @ts-ignore
+    let node;
+    if (Array.isArray(data)) {
+      node = data.length > 0 ? data.slice(0) : [];
+      node.forEach((e, i) => {
+        if (
+          (typeof e === 'object' && e !== {}) ||
+          (Array.isArray(e) && e.length > 0)
+        ) {
+          node[i] = ObjectUtils.copyDeep(e);
+        }
+      });
+    } else if (typeof data === 'object') {
+      node = Object.assign({}, data);
+      Object.keys(node).forEach(key => {
+        if (
+          // @ts-ignore
+          (typeof node[key] === 'object' && node[key] !== {}) ||
+          // @ts-ignore
+          (Array.isArray(node[key]) && node[key].length > 0)
+        ) {
+          // @ts-ignore
+          node[key] = ObjectUtils.copyDeep(node[key]);
+        }
+      });
+    } else {
+      node = data;
+    }
+    // @ts-ignore
+    return node;
+  }
+
+  /**
+   * @param {T} item - The item to check.
+   * @returns {T} - Whether the item is an object.
+   */
+  public static isObject(item: any) {
+    return item && typeof item === 'object' && !Array.isArray(item);
+  }
+
+  /**
+   * @param {T} target - The target object.
+   * @param {T} sources - The objects to merge.
+   * @returns {T} - The merged object.
+   */
+  public static mergeDeep<T extends Record<string, any>>(
+    target: Partial<T>,
+    sources: Partial<T>[],
+    extra?: {explicitMerge?: string[]}
+  ): Partial<T> {
+    if (!sources.length) {
+      return target;
+    }
+
+    const explicitMerge: string[] = (extra ? extra.explicitMerge : null) || [];
+    const source = sources.shift();
+    if (ObjectUtils.isObject(target) && ObjectUtils.isObject(source)) {
+      for (const key in source) {
+        if (ObjectUtils.isObject(source[key])) {
+          if (!target[key]) Object.assign(target, {[key]: {}});
+
+          if (explicitMerge.indexOf(key) !== -1) {
+            target[key] = ObjectUtils.explicitFlatMerge<any>(
+              // @ts-ignore
+              target[key],
+              source[key]
+            );
+          } else {
+            // @ts-ignore
+            ObjectUtils.mergeDeep(target[key], [source[key]], extra);
+          }
+        } else {
+          Object.assign(target, {[key]: source[key]});
+        }
+      }
+    }
+    return ObjectUtils.mergeDeep(target, sources, extra);
+  }
+
+  public static mergeDefaults<T extends Record<string, any>>(
+    source: Partial<T>,
+    defaults: T,
+    extra?: {explicitMerge?: string[]}
+  ): T {
+    return ObjectUtils.mergeDeep({}, [defaults, source], extra) as T;
+  }
+
+  /**
+   * source properties will override all equivalent properties in target. null or empty objects properties in source
+   * will cause the removal of these properties in target.
+   * all other data will be merged
+   * @param initialObject
+   * @param source
+   */
+  public static explicitFlatMerge<T extends Record<string, any>>(
+    initialObject: Partial<T>,
+    source: Partial<T>
+  ): any {
+    const result = {...initialObject};
+    Object.keys(source).forEach(key => {
+      // @ts-ignore
+      if (source[key] === null || Object.keys(source[key]).length === 0) {
+        delete result[key];
+      } else {
+        // @ts-ignore
+        // https://github.com/microsoft/TypeScript/issues/31661
+        result[key] = source[key];
+      }
+    });
+    return result;
+  }
+
+  public static get(
+    obj: Record<string, any>,
+    path: string,
+    defaultValue: any
+  ): any {
+    function stringToPath(path: string) {
+      // @ts-ignore
+      const output = [];
+      // Split to an array with dot notation
+      path.split('.').forEach(item => {
+        // Split to an array with bracket notation
+        item.split(/\[([^}]+)\]/g).forEach(key => {
+          // Push to the new array
+          if (key.length > 0) {
+            output.push(key);
+          }
+        });
+      });
+      // @ts-ignore
+      return output;
+    }
+
+    // Get the path as an array
+    const pathArray = stringToPath(path);
+
+    let current = obj;
+
+    // For each item in the path, dig into the object
+    for (let i = 0; i < pathArray.length; i++) {
+      // If the item isn't found, return the default (or null)
+      if (!current[pathArray[i]]) return defaultValue;
+
+      // Otherwise, update the current value
+      current = current[pathArray[i]];
+    }
+
+    return current;
+  }
+}

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

@@ -0,0 +1,34 @@
+export class PlayerContribRegistry {
+  private _cache: Record<string, {instance: any}> = {};
+
+  static get(player: any): PlayerContribRegistry {
+    player.__contrib__ = player.__contrib__ || {};
+    player.__contrib__.services =
+      player.__contrib__.services || new PlayerContribRegistry();
+    return player.__contrib__.services;
+  }
+
+  private constructor() {}
+
+  public get(token: string): any {
+    const result = this._cache[token];
+
+    if (!result) {
+      throw new Error(`cannot find resource with token ${token}`);
+    }
+
+    return result;
+  }
+
+  public register<T>(token: string, creator: () => T): T {
+    let requestedResource = this._cache[token];
+
+    if (!requestedResource) {
+      requestedResource = this._cache[token] = {
+        instance: creator(),
+      };
+    }
+
+    return requestedResource.instance;
+  }
+}

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

@@ -0,0 +1,37 @@
+import {PlayerSize, VideoSize} from './common-types';
+
+export function getPlayerSize(
+  kalturaPlayer: any
+): PlayerSize {
+  return kalturaPlayer ? kalturaPlayer.dimensions : {width: 0, height: 0};
+}
+
+export function getVideoSize(
+  kalturaPlayer: any
+): VideoSize {
+  if (!kalturaPlayer) {
+    return {width: 0, height: 0};
+  }
+
+  const videoTrack = kalturaPlayer.getActiveTracks().video;
+
+  if (
+    !videoTrack ||
+    videoTrack.width === undefined ||
+    videoTrack.height === undefined
+  ) {
+    // fallback - mainly for Safari
+    if (kalturaPlayer.getVideoElement()) {
+      return {
+        width: kalturaPlayer.getVideoElement().videoWidth,
+        height: kalturaPlayer.getVideoElement().videoHeight,
+      };
+    }
+    return {width: 0, height: 0};
+  }
+
+  return {
+    width: videoTrack.width,
+    height: videoTrack.height,
+  };
+}

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

@@ -0,0 +1,43 @@
+import {ComponentChild} from 'preact';
+
+export enum ReservedPresetNames {
+  Playback = 'Playback',
+  Live = 'Live',
+}
+
+export enum ReservedPresetAreas {
+  'PresetFloating' = 'PresetFloating',
+  'BottomBarLeftControls' = 'BottomBarLeftControls',
+  'BottomBarRightControls' = 'BottomBarRightControls',
+  'TopBarLeftControls' = 'TopBarLeftControls',
+  'TopBarRightControls' = 'TopBarRightControls',
+  'SidePanelTop' = 'SidePanelTop',
+  'SidePanelLeft' = 'SidePanelLeft',
+  'SidePanelRight' = 'SidePanelRight',
+  'SidePanelBottom' = 'SidePanelBottom',
+  'PresetArea' = 'PresetArea',
+  'InteractiveArea' = 'InteractiveArea',
+  'PlayerArea' = 'PlayerArea',
+  'VideoArea' = 'VideoArea',
+}
+
+export enum RelativeToTypes {
+  Before = 'Before',
+  After = 'After',
+  Replace = 'Replace',
+}
+
+export interface PresetItemData {
+  label: string;
+  fillContainer?: boolean;
+  isolateComponent?: boolean;
+  presetAreas: Record<
+    ReservedPresetNames | string,
+    ReservedPresetAreas | string
+  >;
+  renderChild: () => ComponentChild;
+  relativeTo?: {
+    type: RelativeToTypes;
+    name: string;
+  };
+}