@livepeer/react/dist/player/index.d.cts

React primitives for video apps.

import * as React$1 from 'react';
import React__default, { PropsWithChildren } from 'react';
import { MediaControllerStore, InitialProps, Src, PlaybackEvent, PlaybackRate, VideoQuality, PlaybackError } from '@livepeer/core/media';
import * as _radix_ui_react_context from '@radix-ui/react-context';
import { Scope } from '@radix-ui/react-context';
import { useStore as useStore$1 } from 'zustand';
import * as SelectPrimitive from '@radix-ui/react-select';
import * as SliderPrimitive from '@radix-ui/react-slider';
import { HlsConfig } from '@livepeer/core-web/browser';
import * as RadixPortal from '@radix-ui/react-portal';

declare const NODES: readonly ["a", "audio", "button", "div", "form", "h2", "h3", "img", "input", "label", "li", "nav", "ol", "p", "span", "svg", "ul", "video"];
type PropsWithoutRef<P> = P extends any ? "ref" extends keyof P ? Pick<P, Exclude<keyof P, "ref">> : P : P;
type ComponentPropsWithoutRef<T extends React$1.ElementType> = PropsWithoutRef<React$1.ComponentProps<T>>;
type Primitives = {
    [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E>;
};
type PrimitivePropsWithRef<E extends React$1.ElementType> = React$1.ComponentPropsWithRef<E> & {
    asChild?: boolean;
};
interface PrimitiveForwardRefComponent<E extends React$1.ElementType> extends React$1.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {
}
declare const Primitive: Primitives;

interface ClipTriggerProps extends ComponentPropsWithoutRef<typeof Primitive.button> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
    onClip: (opts: {
        /**
         * Playback ID of the stream or asset to clip
         */
        playbackId: string;
        /**
         * Start time of the clip in milliseconds
         */
        startTime: number;
        /**
         * End time of the clip in milliseconds
         */
        endTime: number;
    }) => Promise<void> | void;
}
declare const ClipTrigger: React__default.ForwardRefExoticComponent<ClipTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;

interface ControlsProps extends ComponentPropsWithoutRef<typeof Primitive.div> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
    /**
     * Auto-hide the controls after a mouse or touch interaction (in milliseconds).
     *
     * Defaults to 3000. Set to 0 for no hiding.
     */
    autoHide?: number;
}
declare const Controls: React__default.ForwardRefExoticComponent<ControlsProps & React__default.RefAttributes<HTMLDivElement>>;

interface LiveIndicatorProps extends ComponentPropsWithoutRef<typeof Primitive.button> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
    /** The matcher used to determine whether the element should be shown, given the `live` state (true for live streams, and false for assets). Defaults to `true`. */
    matcher?: boolean | ((live: boolean) => boolean);
}
declare const LiveIndicator: React__default.ForwardRefExoticComponent<LiveIndicatorProps & React__default.RefAttributes<HTMLButtonElement>>;

interface MuteTriggerProps extends ComponentPropsWithoutRef<typeof Primitive.button> {
}
declare const MuteTrigger: React__default.ForwardRefExoticComponent<MuteTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;

interface PlayPauseTriggerProps extends ComponentPropsWithoutRef<typeof Primitive.button> {
}
declare const PlayPauseTrigger: React__default.ForwardRefExoticComponent<PlayPauseTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
interface PlayingIndicatorProps extends ComponentPropsWithoutRef<typeof Primitive.div> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
    /** The matcher used to determine whether the element should be shown, given the playing state. Defaults to `true`, which equals playing. */
    matcher?: boolean | ((state: boolean) => boolean);
}
declare const PlayingIndicator: React__default.ForwardRefExoticComponent<PlayingIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;

type MediaScopedProps<P = {}> = P & {
    __scopeMedia?: Scope;
};
declare const createMediaScope: _radix_ui_react_context.CreateScope;
type MediaContextValue = {
    store: MediaControllerStore;
};
declare const MediaProvider: React$1.FC<MediaContextValue & {
    scope: Scope<MediaContextValue>;
    children: React.ReactNode;
}>;
declare const useMediaContext: (consumerName: string, scope: Scope<MediaContextValue | undefined>) => MediaContextValue;
declare const useStore: typeof useStore$1;

interface PlayerProps extends PropsWithChildren<Omit<Partial<InitialProps>, "creatorId" | "hotkeys">> {
    /**
     * The source for the Player. The `Src[]` can be created from calling `getSrc`
     * with Livepeer playback info, Cloudflare stream data, Mux URLs, `string[]`, or `string`.
     */
    src: Src[] | null;
    /**
     * Sets a custom playback ID for playback.
     * If not specified, the function defaults to parsing the `src` attribute of the HTMLMediaElement to get the playback ID.
     */
    playbackId?: string;
    /**
     * The aspect ratio of the media. Defaults to 16 / 9.
     * This significantly improves cumulative layout shift.
     * Set to `null` to render a plain div primitive.
     *
     * @see {@link https://web.dev/cls/}
     */
    aspectRatio?: number | null;
    /**
     * Whether hotkeys are enabled. Defaults to `true`. Allows users to use keyboard shortcuts for player control.
     *
     * This is highly recommended to adhere to ARIA guidelines.
     */
    hotkeys?: boolean;
    /**
     * A callback that is called when the player's metrics events are emitted.
     * This can be used to integrate with other analytics providers.
     */
    onPlaybackEvents?: (events: PlaybackEvent[]) => Promise<any> | any;
    /**
     * The interval at which metrics are sent, in ms. Defaults to 5000.
     */
    metricsInterval?: number;
    /**
     * The ICE servers to use.
     *
     * If not provided, the default ICE servers will be used.
     */
    iceServers?: RTCIceServer | RTCIceServer[];
}
declare const Root$1: React__default.MemoExoticComponent<(props: MediaScopedProps<PlayerProps>) => React__default.JSX.Element>;

interface PosterProps extends ComponentPropsWithoutRef<typeof Primitive.img> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
}
declare const Poster: React__default.ForwardRefExoticComponent<PosterProps & React__default.RefAttributes<HTMLImageElement>>;

declare const SelectRoot: React$1.FC<SelectPrimitive.SelectProps>;
declare const SelectTrigger: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
declare const SelectIcon: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectIconProps & React$1.RefAttributes<HTMLSpanElement>>;
declare const SelectPortal: React$1.FC<SelectPrimitive.SelectPortalProps>;
declare const SelectContent: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>>;
declare const SelectViewport: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectViewportProps & React$1.RefAttributes<HTMLDivElement>>;
declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
declare const SelectLabel: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>>;
declare const SelectItem: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>>;
declare const SelectItemText: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectItemTextProps & React$1.RefAttributes<HTMLSpanElement>>;
declare const SelectItemIndicator: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectItemIndicatorProps & React$1.RefAttributes<HTMLSpanElement>>;
declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>>;
declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>>;
declare const SelectSeparator: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
declare const SelectArrow: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectArrowProps & React$1.RefAttributes<SVGSVGElement>>;
type SelectTriggerProps = SelectPrimitive.SelectTriggerProps;
type SelectValueProps = SelectPrimitive.SelectValueProps;
type SelectIconProps = SelectPrimitive.SelectIconProps;
type SelectPortalProps = SelectPrimitive.SelectPortalProps;
type SelectContentProps = SelectPrimitive.SelectContentProps;
type SelectViewportProps = SelectPrimitive.SelectViewportProps;
type SelectGroupProps = SelectPrimitive.SelectGroupProps;
type SelectLabelProps = SelectPrimitive.SelectLabelProps;
type SelectItemTextProps = SelectPrimitive.SelectItemTextProps;
type SelectItemIndicatorProps = SelectPrimitive.SelectItemIndicatorProps;
type SelectScrollUpButtonProps = SelectPrimitive.SelectScrollUpButtonProps;
type SelectScrollDownButtonProps = SelectPrimitive.SelectScrollDownButtonProps;
type SelectSeparatorProps = SelectPrimitive.SelectSeparatorProps;
type SelectArrowProps = SelectPrimitive.SelectArrowProps;

interface RateSelectProps extends ComponentPropsWithoutRef<typeof SelectRoot> {
}
declare const RateSelect: {
    (props: MediaScopedProps<RateSelectProps>): React__default.JSX.Element;
    displayName: string;
};
interface RateSelectItemProps extends Omit<ComponentPropsWithoutRef<typeof SelectItem>, "value"> {
    /**
     * The numerical value of the rate select item. This must be provided and must be a number or `constant`,
     * which indicates a constant playback rate.
     */
    value: PlaybackRate;
}
declare const RateSelectItem: React__default.ForwardRefExoticComponent<RateSelectItemProps & React__default.RefAttributes<HTMLDivElement>>;

type SliderProps = SliderPrimitive.SliderProps;
declare const Root: React$1.ForwardRefExoticComponent<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>>;
type TrackProps = SliderPrimitive.SliderTrackProps;
declare const Track: React$1.ForwardRefExoticComponent<SliderPrimitive.SliderTrackProps & React$1.RefAttributes<HTMLSpanElement>>;
type RangeProps = SliderPrimitive.SliderRangeProps;
declare const Range: React$1.ForwardRefExoticComponent<SliderPrimitive.SliderRangeProps & React$1.RefAttributes<HTMLSpanElement>>;
type ThumbProps = SliderPrimitive.SliderThumbProps;
declare const Thumb: React$1.ForwardRefExoticComponent<SliderPrimitive.SliderThumbProps & React$1.RefAttributes<HTMLSpanElement>>;

interface SeekProps extends ComponentPropsWithoutRef<typeof Root> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
}
declare const Seek: React__default.ForwardRefExoticComponent<SeekProps & React__default.RefAttributes<HTMLButtonElement>>;
interface SeekBufferProps extends ComponentPropsWithoutRef<typeof Track> {
}
declare const SeekBuffer: React__default.ForwardRefExoticComponent<SeekBufferProps & React__default.RefAttributes<HTMLSpanElement>>;

type OmittedProps = "src" | "poster" | "autoPlay" | "preload";
interface VideoProps extends Omit<ComponentPropsWithoutRef<typeof Primitive.video>, OmittedProps> {
    /**
     * Controls the poster source, which by default uses the thumbnail from the Src input.
     *
     * Set to null to disable the default poster image from the Src.
     */
    poster?: string | null;
    /**
     * Configures the HLS.js options, for advanced usage of the Player.
     */
    hlsConfig?: HlsConfig;
}
declare const Video: React__default.ForwardRefExoticComponent<VideoProps & React__default.RefAttributes<HTMLVideoElement>>;

interface VideoQualitySelectProps extends ComponentPropsWithoutRef<typeof SelectRoot> {
}
declare const VideoQualitySelect: {
    (props: MediaScopedProps<VideoQualitySelectProps>): React__default.JSX.Element;
    displayName: string;
};
interface VideoQualitySelectItemProps extends Omit<ComponentPropsWithoutRef<typeof SelectItem>, "value"> {
    /**
     * The numerical value of the quality select item. This must be provided.
     */
    value: VideoQuality;
}
declare const VideoQualitySelectItem: React__default.ForwardRefExoticComponent<VideoQualitySelectItemProps & React__default.RefAttributes<HTMLDivElement>>;

interface VolumeProps extends ComponentPropsWithoutRef<typeof Root> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
}
declare const Volume: React__default.ForwardRefExoticComponent<VolumeProps & React__default.RefAttributes<HTMLButtonElement>>;
interface VolumeIndicatorProps extends ComponentPropsWithoutRef<typeof Primitive.div> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
    /** The matcher used to determine whether the element should be shown, given the volume. Defaults to match `false`, which is muted. */
    matcher?: boolean | ((volume: number) => boolean);
}
declare const VolumeIndicator: React__default.ForwardRefExoticComponent<VolumeIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;

type ContainerProps = ComponentPropsWithoutRef<typeof Primitive.div>;
declare const Container: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Pick<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    ref?: ((instance: HTMLDivElement | null) => void | React__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React__default.RefObject<HTMLDivElement> | null | undefined;
} & {
    asChild?: boolean;
}, "key" | keyof React__default.HTMLAttributes<HTMLDivElement> | "asChild"> & {
    __scopeMedia?: _radix_ui_react_context.Scope;
} & React__default.RefAttributes<HTMLDivElement>>>;

interface ErrorIndicatorProps extends ComponentPropsWithoutRef<typeof Primitive.div> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
    /**
     * The matcher used to determine whether the element should be shown, given the error state.
     *
     * Passing `all` means it will display on all errors, and `not-permissions` is only errors
     * that are not failed camera, audio, or display permissions requests.
     */
    matcher: "all" | "not-permissions" | PlaybackError["type"] | ((state: PlaybackError["type"]) => boolean);
}
declare const ErrorIndicator: React__default.ForwardRefExoticComponent<ErrorIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;

interface FullscreenIndicatorProps extends ComponentPropsWithoutRef<typeof Primitive.div> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
    /** The matcher used to determine whether the element should be shown, given the fullscreen state. Defaults to `true`. */
    matcher?: boolean | ((fullscreen: boolean) => boolean);
}
declare const FullscreenIndicator: React__default.ForwardRefExoticComponent<FullscreenIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;
interface FullscreenTriggerProps extends ComponentPropsWithoutRef<typeof Primitive.button> {
}
declare const FullscreenTrigger: React__default.ForwardRefExoticComponent<FullscreenTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;

interface LoadingIndicatorProps extends ComponentPropsWithoutRef<typeof Primitive.div> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
    /** The matcher used to determine whether the element should be shown, given the `loading` state. Defaults to `true`. */
    matcher?: boolean | ((live: boolean) => boolean);
}
declare const LoadingIndicator: React__default.ForwardRefExoticComponent<LoadingIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;

interface PictureInPictureTriggerProps extends ComponentPropsWithoutRef<typeof Primitive.button> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
}
declare const PictureInPictureTrigger: React__default.ForwardRefExoticComponent<PictureInPictureTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;

type PortalProps = React__default.ComponentPropsWithoutRef<typeof RadixPortal.Root>;
declare const Portal: React__default.FC<PortalProps>;

interface TimeProps extends Omit<ComponentPropsWithoutRef<typeof Primitive.button>, "children"> {
}
declare const Time: React__default.ForwardRefExoticComponent<TimeProps & React__default.RefAttributes<HTMLButtonElement>>;

export { ClipTrigger, type ClipTriggerProps, Container, type ContainerProps, Controls, type ControlsProps, ErrorIndicator, type ErrorIndicatorProps, FullscreenIndicator, type FullscreenIndicatorProps, FullscreenTrigger, type FullscreenTriggerProps, LiveIndicator, type LiveIndicatorProps, LoadingIndicator, type LoadingIndicatorProps, type MediaContextValue, MediaProvider, type MediaScopedProps, MuteTrigger, type MuteTriggerProps, PictureInPictureTrigger, type PictureInPictureTriggerProps, PlayPauseTrigger, type PlayPauseTriggerProps, type PlayerProps, PlayingIndicator, type PlayingIndicatorProps, Portal, type PortalProps, Poster, type PosterProps, Range, type RangeProps, RateSelect, RateSelectItem, type RateSelectItemProps, type RateSelectProps, Root$1 as Root, Seek, SeekBuffer, type SeekBufferProps, type SeekProps, SelectArrow, type SelectArrowProps, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItemIndicator, type SelectItemIndicatorProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectPortal, type SelectPortalProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, SelectViewport, type SelectViewportProps, type SliderProps, Thumb, type ThumbProps, Time, type TimeProps, Track, type TrackProps, Video, type VideoProps, VideoQualitySelect, VideoQualitySelectItem, type VideoQualitySelectItemProps, type VideoQualitySelectProps, Volume, VolumeIndicator, type VolumeIndicatorProps, type VolumeProps, createMediaScope, useMediaContext, useStore };