reactjs-media/dist/types.d.ts

Awesome Multimedia Components for React

import React$1, { Context } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';

declare const useControls: () => {
    play: () => Promise<void>;
    pause: () => void;
    togglePlay: () => Promise<void>;
    forward: () => void;
    rewind: () => void;
    updateVolume: (volume: number) => void;
    updatePlaybackRate: (rate: number) => void;
    increasePlaybackRate: () => void;
    decreasePlaybackRate: () => void;
    toggleMute: () => void;
    increaseVolume: () => void;
    decreaseVolume: () => void;
    toggleFullscreen: () => void;
    togglePip: () => Promise<void>;
    seek: (time: number) => void;
    setLoop: (loop: boolean) => void;
};

interface VideoProps {
    /**
     * Indicates whether the video should have controls. If `false`, wont render the controls
     */
    controls?: boolean;
    /**
     * The source of the video
     * @example "https://www.example.com/video.mp4"
     * @example "/video.mp4"
     **/
    src: string | MediaStream | null;
    height: string | number;
    width: string | number;
    poster?: string;
    /**
     * Indicates whether the video should show a preview when seeking
     */
    seekPreview?: boolean;
    /**
     * Event Listener for when the video time updates
     * @param time - The current time of the video
     */
    onTimeUpdate?: (time: number) => void;
    /**
     * Event Listener for when the video plays
     */
    onPlay?: () => void;
    /**
     * Event Listener for when the video pauses
     */
    onPause?: () => void;
    /**
     * Event Listener for when the video ends
     */
    onEnded?: () => void;
    /**
     * Event Listener for when the video volume changes
     * @param volume - The current volume of the video
     */
    onVolumeChange?: (volume: number) => void;
    onSeeking?: () => void;
    onSeeked?: () => void;
    onLoadedMetadata?: () => void;
    onLoadedData?: () => void;
    onCanPlay?: () => void;
    contextMenu?: boolean;
    contextMenuItems?: Array<ContextMenuItem>;
    settings?: boolean;
    settingsGroups?: Array<SettingsGroup>;
}
type ContextMenuItem = {
    label: string;
    onClick: () => void;
    icon?: React.ReactNode;
};
type SettingsGroup = {
    title: string;
    options: Array<SettingsItem>;
};
type SettingsItem = {
    label: string;
    onClick: () => void;
};
interface VideoElementProps {
    controls?: boolean;
    src: string | MediaStream | null;
}
type VideoCTX = Context<{
    videoRef: React.RefObject<HTMLVideoElement>;
    containerRef: React.RefObject<HTMLDivElement>;
    overlayRef: React.RefObject<HTMLDivElement>;
    seekPreview: boolean;
    setSeekPreview: React.Dispatch<React.SetStateAction<boolean>> | ((boolean: boolean) => void);
    menuClientY: number;
    setMenuClientY: React.Dispatch<React.SetStateAction<number>>;
    menuClientX: number;
    setMenuClientX: React.Dispatch<React.SetStateAction<number>>;
    contextMenuItems?: Array<ContextMenuItem> | [];
    setContextMenuItems: React.Dispatch<React.SetStateAction<Array<ContextMenuItem>>>;
    menuOpen: boolean;
    setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
    src: string | MediaStream | null;
    setSrc: React.Dispatch<React.SetStateAction<string | MediaStream | null>>;
}>;
type VideoPlayerRef = {
    play: () => void;
    pause: () => void;
    seek: (time: number) => void;
    volume: (volume: number) => void;
    playbackRate: (rate: number) => void;
    toggleFullscreen: () => void;
    togglePip: () => void;
    toggleMute: () => void;
    togglePlay: () => void;
    setLoop: (loop: boolean) => void;
};

/**
 * A Video Component
 * @param props - VideoProps
 * @returns A Video Component
 * @example
 * ```tsx
 * <Video
 *   src="https://www.example.com/video.mp4"
 *   height={500}
 *   width={800}
 *   poster="https://www.example.com/poster.jpg"
 * />
 * ```
 * @example
 * ```tsx
 * <Video
 *   controls={false}
 *   src="/video.mp4"
 *   height={500}
 *   width={800}
 *   poster="/poster.jpg"
 *   onTimeUpdate={(time) => console.log(time)}
 * />
 * ```
 * @see https://open.cranom.tech/reactjs-media/video-player
 * @link https://open.cranom.tech/reactjs-media/api#video
 */
declare const Video: React$1.ForwardRefExoticComponent<VideoProps & React$1.RefAttributes<VideoPlayerRef>>;
declare const VideoProvider: React$1.ForwardRefExoticComponent<VideoProps & {
    children: React$1.ReactNode;
} & React$1.RefAttributes<React$1.MutableRefObject<VideoPlayerRef | null>>>;

declare const VideoContext: VideoCTX;

declare const VideoControls: () => react_jsx_runtime.JSX.Element;
declare const VideoPoster: ({ src }: {
    src: string;
}) => react_jsx_runtime.JSX.Element | null;

declare const VideoElement: ({ controls, src }: VideoElementProps) => react_jsx_runtime.JSX.Element;

interface AudioProps {
    src: string;
    controls?: boolean;
    customControls?: boolean;
    autoplay?: boolean;
    loop?: boolean;
    volume?: number;
    playbackRate?: number;
    onPlay?: () => void;
    onPause?: () => void;
    onEnd?: () => void;
    onError?: (error: Error) => void;
    onVolumeChange?: (volume: number) => void;
    onSeek?: (time: number) => void;
    className?: string;
}
interface AudioState {
    isPlaying: boolean;
    currentTime: number;
    duration: number;
    volume: number;
    playbackRate: number;
    isMuted: boolean;
    isLoading: boolean;
    error: Error | null;
}

declare const Audio: React$1.FC<AudioProps>;

interface ImageProps {
    src: string;
    alt: string;
    width?: string | number;
    height?: string | number;
    lazy?: boolean;
    placeholder?: string;
    srcSet?: string;
    sizes?: string;
    className?: string;
    style?: React$1.CSSProperties;
    filter?: string;
    onLoad?: () => void;
    onError?: (error: Error) => void;
    onClick?: (event: React$1.MouseEvent<HTMLImageElement>) => void;
    caption?: string;
    overlay?: React$1.ReactNode;
    zoomable?: boolean;
    fallbackSrc?: string;
}
declare const Img: React$1.FC<ImageProps>;

export { Audio, type AudioProps, type AudioState, type ContextMenuItem, Img, type SettingsGroup, type SettingsItem, Video, type VideoCTX, VideoContext, VideoControls, VideoElement, type VideoElementProps, type VideoPlayerRef, VideoPoster, type VideoProps, VideoProvider, useControls };