@enact/sandstone/MediaOverlay/MediaOverlay.d.ts

Large-screen/TV support library for Enact, containing a variety of UI components.

// Type definitions for sandstone/MediaOverlay

import { MarqueeControllerProps as sandstone_Marquee_MarqueeControllerProps } from "@enact/sandstone/Marquee";
import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";
import * as React from "react";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface MediaOverlayBaseProps {
  /**
 * Any children  `<source>`  tag elements will be sent directly to the media element as
sources.
 */
  source?: React.ReactNode;
  /**
   * The primary caption to be displayed.
   */
  caption?: React.ReactNode;
  /**
 * Customizes the component by mapping the supplied collection of CSS class names to the
corresponding internal elements and states of this component.
 * 
 * The following classes are supported:
 * *  `image`  - class name for image
 * *  `textLayout`  - class name for text layout
 */
  css?: object;
  /**
   * Image path for image overlay.
   *
   * NOTE: When image is displayed, media is not displayed even though it is playing.
   */
  imageOverlay?: string | object;
  /**
   * Restarts the video every time it is finished.
   */
  loop?: boolean;
  /**
   * Determines what triggers the marquee to start its animation.
   */
  marqueeOn?: "focus" | "hover" | "render";
  /**
 * Media component to use.
 * 
 * The default ( `'video'` ) renders an  `HTMLVideoElement` . Custom media components must have
a similar API structure, exposing the following APIs:
 * 
 * Methods:
 * *  `load()`  - load media
 */
  mediaComponent?: string | React.ComponentType;
  /**
   * Mutes the audio output of the video.
   */
  muted?: boolean;
  /**
   * Prevents the video playback starting on load.
   */
  noAutoPlay?: boolean;
  /**
   * Placeholder for image overlay.
   */
  placeholder?: string;
  /**
   * A number between  `0`  and  `1`  indicating the proportion of the filled portion of the bar.
   *
   * Only applicable when  `showProgress`  is enabled.
   */
  progress?: number;
  /**
   * Displays the progress bar
   */
  showProgress?: boolean;
  /**
   * The third caption line to be displayed.
   */
  subtitle?: string;
  /**
   * Text to display over media.
   */
  text?: string;
  /**
   * Aligns the  `text`  vertically within the component.
   */
  textAlign?: "center" | "end" | "start";
  /**
   * The second caption line to be displayed.
   */
  title?: string;
}
/**
 * A media component with image and text overlay support.
 */

export class MediaOverlayBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, MediaOverlayBaseProps>
> {}

export interface MediaOverlayDecoratorProps
  extends Merge<
    Merge<
      Merge<
        sandstone_Marquee_MarqueeControllerProps,
        spotlight_Spottable_SpottableProps
      >,
      ui_Slottable_SlottableProps
    >,
    sandstone_Skinnable_SkinnableProps
  > {}
export function MediaOverlayDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & MediaOverlayDecoratorProps>;

export interface MediaOverlayProps
  extends Merge<MediaOverlayBaseProps, MediaOverlayDecoratorProps> {}
/**
 * A Sandstone-styled  `Media`  component.
 * 
 * Usage:
 * ```
<MediaOverlay>
    <source type='' src=''/>
</MediaOverlay>
```
 */

export class MediaOverlay extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, MediaOverlayProps>
> {}

export default MediaOverlay;