@enact/sandstone/MediaPlayer/index.d.ts

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

// Type definitions for sandstone/MediaPlayer

import { SliderProps as sandstone_Slider_SliderProps } from "@enact/sandstone/Slider";
import * as React from "react";
import { CancelableProps as ui_Cancelable_CancelableProps } from "@enact/ui/Cancelable";
import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";

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 TimesProps {
  /**
   * An instance of a Duration Formatter from i18n.
   *
   * Must has a  `format()`  method that returns a string.
   */
  formatter: object;
  /**
   * The current time in seconds of the video source.
   */
  current?: number;
  /**
   * Removes the current time.
   */
  noCurrentTime?: boolean;
  /**
   * Removes the total time.
   */
  noTotalTime?: boolean;
  /**
   * The total time (duration) in seconds of the loaded video source.
   */
  total?: number;
}
/**
 * Sandstone-styled formatted time component.
 */

export class Times extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, TimesProps>
> {}

export interface MediaSliderProps extends sandstone_Slider_SliderProps {
  /**
 * When  `true` , the knob will expand. Note that Slider is a controlled
component. Changing the value would only affect pressed visual and
not the state.
 */
  forcePressed?: boolean;
  /**
   * Allow moving the knob via pointer or 5-way without emitting  `onChange`  events
   */
  preview?: boolean;
  /**
   * The position of the knob when in  `preview`  mode
   */
  previewProportion?: number;
  /**
   * The visibility of the component. When  `false` , the component will be hidden.
   */
  visible?: boolean;
}
/**
 * A customized slider suitable for use within media player components such as
  .
 */

export class MediaSlider extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, MediaSliderProps>
> {}

/**
 * Formats a duration in seconds into a human-readable time.
 */
export declare const secondsToTime: Function;
export interface MediaControlsProps
  extends Merge<
    ui_Cancelable_CancelableProps,
    sandstone_Skinnable_SkinnableProps
  > {
  /**
   * DOM id for the component.
   *
   * This child component  `ActionGuide` 's id is generated from the id.
   */
  id: string;
  /**
   * The  `aria-label`  for the action guide.
   */
  actionGuideAriaLabel?: string;
  /**
   * The  `aria-label`  for the action guide button.
   */
  actionGuideButtonAriaLabel?: string;
  /**
   * Disables the ActionGuide.
   */
  actionGuideDisabled?: boolean;
  /**
   * The label for the action guide.
   */
  actionGuideLabel?: string;
  /**
   * These components are placed below the action guide. Typically these will be media playlist controls.
   */
  bottomComponents?: React.ReactNode;
  /**
   * The  `aria-label`  for the jumpBackward button.
   */
  jumpBackwardAriaLabel?: string;
  /**
 * Jump backward    name. Accepts any
   component type.
 */
  jumpBackwardIcon?: string;
  /**
   * Disables state on the media "jump" buttons; the outer pair.
   */
  jumpButtonsDisabled?: boolean;
  /**
   * The  `aria-label`  for the jumpForward button.
   */
  jumpForwardAriaLabel?: string;
  /**
 * Jump forward    name. Accepts any
   component type.
 */
  jumpForwardIcon?: string;
  /**
   * Called with the reference to the mediaControls node.
   */
  mediaControlsRef?: object | Function;
  /**
   * Disables the media buttons.
   */
  mediaDisabled?: boolean;
  /**
   * When  `true` , more components are rendered. This does not indicate the visibility of more components.
   */
  moreComponentsRendered?: boolean;
  /**
   * The spotlight ID for the moreComponent container.
   */
  moreComponentsSpotlightId?: string;
  /**
   * Removes the "jump" buttons. The buttons that skip forward or backward in the video.
   */
  noJumpButtons?: boolean;
  /**
   * Called when the button in ActionGuide is clicked.
   */
  onActionGuideClick?: Function;
  /**
   * Called when cancel/back key events are fired.
   */
  onClose?: Function;
  /**
   * Called when the user clicks the JumpBackward button
   */
  onJumpBackwardButtonClick?: Function;
  /**
   * Called when the user clicks the JumpForward button.
   */
  onJumpForwardButtonClick?: Function;
  /**
   * Called when the user presses a media control button.
   */
  onKeyDownFromMediaButtons?: Function;
  /**
   * Called when the user clicks the Play button.
   */
  onPlayButtonClick?: Function;
  /**
   * `true`  when the video is paused.
   */
  paused?: boolean;
  /**
 * A string which is sent to the  `pause`  icon of the player controls. This can be
anything that is accepted by   . This will be temporarily replaced by
the    when the
   boolean is  `false` .
 */
  pauseIcon?: string;
  /**
 * A string which is sent to the  `play`  icon of the player controls. This can be
anything that is accepted by   . This will be temporarily replaced by
the    when the
   boolean is  `true` .
 */
  playIcon?: string;
  /**
   * Disables the media "play"/"pause" button.
   */
  playPauseButtonDisabled?: boolean;
  /**
   * `true`  controls are disabled from Spotlight.
   */
  spotlightDisabled?: boolean;
  /**
   * The spotlight ID for the media controls container.
   */
  spotlightId?: string;
  /**
   * The visibility of the component. When  `false` , the component will be hidden.
   */
  visible?: boolean;
}
/**
 * A set of components for controlling media playback and rendering additional components.
 * 
 * This uses    to accept the custom tags,  `<bottomComponents>` 
to add components to the bottom of the media controls. Any additional children will be
rendered into the "more" controls area. Showing the additional components is handled by
 `MediaControls`  when the user navigates down from the media buttons.
 */

export class MediaControls extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, MediaControlsProps>
> {}