opentok-layout-js/types/opentok-layout-js.d.ts

Automatic layout of video elements (publisher and subscriber) minimising white-space for the OpenTok on WebRTC API. This is intended for use with the OpenTok on WebRTC JS API.

declare module 'opentok-layout-js' {
  type alignOptions = 'start' | 'center' | 'end';

  export type AnimateProps = { duration: number, easing: string, complete?: () => void }
  export type Animate = boolean | AnimateProps
  export type OnLayout = (element: HTMLElement, dimensions: { width: number, height: number, top: number, left: number }) => void

  export type Options = {
    alignItems?: alignOptions;
    animate?: Animate;
    bigAlignItems?: alignOptions;
    bigClass?: string;
    bigFirst?: boolean | 'column' | 'row';
    bigFixedRatio?: boolean;
    bigMaxHeight?: number;
    bigMaxRatio?: number;
    bigMaxWidth?: number;
    bigMinRatio?: number;
    bigPercentage?: number;
    minBigPercentage?: number;
    fixedRatio?: boolean;
    fixedRatioClass?: string;
    ignoreClass?: string;
    maxHeight?: number;
    maxRatio?: number;
    maxWidth?: number;
    minRatio?: number;
    containerWidth?: number;
    containerHeight?: number;
    smallAlignItems?: alignOptions;
    smallMaxHeight?: number;
    smallMaxWidth?: number;
    scaleLastRow?: boolean;
    bigScaleLastRow?: boolean;
    evenRows?: boolean;
    onLayout?: OnLayout,
    window?: Window;
  };

  export type Element = {
    big: boolean;
    height: number;
    width: number;
    fixedRatio?: boolean;
  };

  export type Box = {
    height: number;
    left: number;
    top: number;
    width: number;
  };

  export type GetLayoutRes = { boxes: Array<Box>, areas: { small?: Box, big?: Box } }

  type GetLayout = (elements: Array<Element>) => GetLayoutRes;
  export type SetOptions = (options: Options) => void;

  export type LayoutContainer = {
    getLayout: GetLayout;
    layout: () => void;
    setOptions: SetOptions;
  };

  export default function initLayoutContainer(...args: [HTMLElement | string, Options] | [Options]): LayoutContainer;
}