@livepeer/react/dist/broadcast/index.d.ts

React primitives for video apps.

import * as React$1 from 'react';
import React__default, { PropsWithChildren } from 'react';
import { MediaControllerStore, InitialProps, PlaybackEvent, PlaybackError } from '@livepeer/core/media';
import { BroadcastStore, InitialBroadcastProps, MediaDeviceInfoExtended, BroadcastStatus } from '@livepeer/core-web/broadcast';
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 RadixPortal from '@radix-ui/react-portal';
import * as SliderPrimitive from '@radix-ui/react-slider';

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 AudioEnabledTriggerProps extends ComponentPropsWithoutRef<typeof Primitive.button> {
}
declare const AudioEnabledTrigger: React__default.ForwardRefExoticComponent<AudioEnabledTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
interface AudioEnabledIndicatorProps 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 `audio` state.
     * Defaults to `true`, which means "shown when broadcast audio is enabled".
     */
    matcher?: boolean | ((state: boolean) => boolean);
}
declare const AudioEnabledIndicator: React__default.ForwardRefExoticComponent<AudioEnabledIndicatorProps & 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;

type BroadcastScopedProps<P = {}> = P & {
    __scopeBroadcast?: Scope;
};
declare const createBroadcastScope: _radix_ui_react_context.CreateScope;
type BroadcastContextValue = {
    store: BroadcastStore;
};
declare const BroadcastProvider: React$1.FC<BroadcastContextValue & {
    scope: Scope<BroadcastContextValue>;
    children: React.ReactNode;
}>;
declare const useBroadcastContext: (consumerName: string, scope: Scope<BroadcastContextValue | undefined>) => BroadcastContextValue;

interface BroadcastProps extends PropsWithChildren<Omit<Partial<InitialBroadcastProps>, "aspectRatio" | "ingestUrl"> & Pick<Partial<InitialProps>, "onError" | "storage" | "timeout" | "videoQuality">> {
    /**
     * The WHIP WebRTC ingest URL for the Broadcast. The ingestUrl can be created using `getIngest`
     * from a string (assumed to be stream keys or URLs), Cloudflare stream data, Cloudflare URL data,
     * or Livepeer stream data.
     */
    ingestUrl: string | null;
    /**
     * 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;
    /**
     * A callback that is called when the broadcast'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;
    /**
     * @deprecated in favor of `iceServers`
     *
     * Whether to disable ICE gathering.
     *
     * Set to true to disable ICE gathering. This is useful for testing purposes.
     */
    noIceGathering?: boolean;
    silentAudioTrack?: boolean;
    /**
     * The ICE servers to use.
     *
     * If not provided, the default ICE servers will be used.
     */
    iceServers?: RTCIceServer | RTCIceServer[];
}
declare const Root: {
    (props: MediaScopedProps<BroadcastScopedProps<BroadcastProps>>): React__default.JSX.Element;
    displayName: string;
};

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 EnabledTriggerProps extends ComponentPropsWithoutRef<typeof Primitive.button> {
}
declare const EnabledTrigger: React__default.ForwardRefExoticComponent<EnabledTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
interface EnabledIndicatorProps 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 `enabled` state.
     * Defaults to `true`, which means "shown when broadcasting is enabled".
     */
    matcher?: boolean | ((state: boolean) => boolean);
}
declare const EnabledIndicator: React__default.ForwardRefExoticComponent<EnabledIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;

interface ScreenshareTriggerProps 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 ScreenshareTrigger: React__default.ForwardRefExoticComponent<ScreenshareTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
interface ScreenshareIndicatorProps 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 screenshare state.
     * Defaults to `true`, which means "shown when screenshare is active".
     */
    matcher?: boolean | ((state: boolean) => boolean);
}
declare const ScreenshareIndicator: React__default.ForwardRefExoticComponent<ScreenshareIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;

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 SelectProps = SelectPrimitive.SelectProps;
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 SelectItemProps = SelectPrimitive.SelectItemProps;
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 SourceSelectProps extends Omit<ComponentPropsWithoutRef<typeof SelectRoot>, "children"> {
    /**
     * Used to force mounting when more control is needed. Useful when
     * controlling animation with React animation libraries.
     */
    forceMount?: true;
    /**
     * The type of media device to filter the list by.
     */
    type: "audioinput" | "videoinput";
    /**
     * Children which consume the media device info passed down via a function.
     *
     * @param devices the media device info for all available media devices.
     * @returns Select children using the media devices.
     */
    children: (devices: MediaDeviceInfoExtended[] | null) => React__default.ReactNode;
}
declare const SourceSelect: {
    (props: MediaScopedProps<BroadcastScopedProps<SourceSelectProps>>): React__default.JSX.Element;
    displayName: string;
};

interface StatusIndicatorProps 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 broadcast `status` state.
     *
     * Pending indicates that the stream is currently negotiating WebRTC connection with the server.
     *
     * Required.
     */
    matcher: BroadcastStatus | ((status: BroadcastStatus) => boolean);
}
declare const StatusIndicator: React__default.ForwardRefExoticComponent<StatusIndicatorProps & React__default.RefAttributes<HTMLButtonElement>>;

type OmittedProps = "src" | "poster";
interface VideoProps extends Omit<ComponentPropsWithoutRef<typeof Primitive.video>, OmittedProps> {
}
declare const Video: React__default.ForwardRefExoticComponent<VideoProps & React__default.RefAttributes<HTMLVideoElement>>;

interface VideoEnabledTriggerProps extends ComponentPropsWithoutRef<typeof Primitive.button> {
}
declare const VideoEnabledTrigger: React__default.ForwardRefExoticComponent<VideoEnabledTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
interface VideoEnabledIndicatorProps 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 `video` state.
     * Defaults to `true`, which means "shown when broadcast video is enabled".
     */
    matcher?: boolean | ((state: boolean) => boolean);
}
declare const VideoEnabledIndicator: React__default.ForwardRefExoticComponent<VideoEnabledIndicatorProps & 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>;

type SliderProps = SliderPrimitive.SliderProps;
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 TimeProps extends Omit<ComponentPropsWithoutRef<typeof Primitive.button>, "children"> {
}
declare const Time: React__default.ForwardRefExoticComponent<TimeProps & React__default.RefAttributes<HTMLButtonElement>>;

export { AudioEnabledIndicator, type AudioEnabledIndicatorProps, AudioEnabledTrigger, type AudioEnabledTriggerProps, type BroadcastContextValue, type BroadcastProps, BroadcastProvider, type BroadcastScopedProps, Container, type ContainerProps, Controls, type ControlsProps, EnabledIndicator, type EnabledIndicatorProps, EnabledTrigger, type EnabledTriggerProps, ErrorIndicator, type ErrorIndicatorProps, FullscreenIndicator, type FullscreenIndicatorProps, FullscreenTrigger, type FullscreenTriggerProps, LoadingIndicator, type LoadingIndicatorProps, type MediaContextValue, MediaProvider, type MediaScopedProps, PictureInPictureTrigger, type PictureInPictureTriggerProps, Portal, type PortalProps, Range, type RangeProps, Root, ScreenshareIndicator, type ScreenshareIndicatorProps, ScreenshareTrigger, type ScreenshareTriggerProps, SelectArrow, type SelectArrowProps, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectPortal, type SelectPortalProps, type SelectProps, SelectRoot, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, SelectViewport, type SelectViewportProps, type SliderProps, SourceSelect, type SourceSelectProps, StatusIndicator, type StatusIndicatorProps, Thumb, type ThumbProps, Time, type TimeProps, Track, type TrackProps, Video, VideoEnabledIndicator, type VideoEnabledIndicatorProps, VideoEnabledTrigger, type VideoEnabledTriggerProps, type VideoProps, createBroadcastScope, createMediaScope, useBroadcastContext, useMediaContext, useStore };