@streamspark/react-video-player
Version:
A fully-featured, YouTube-like video player built completely from scratch using React and TypeScript.
65 lines (60 loc) • 1.93 kB
TypeScript
import React$1 from 'react';
interface VideoState {
isPlaying: boolean;
currentTime: number;
duration: number;
volume: number;
isMuted: boolean;
playbackRate: number;
isFullscreen: boolean;
captionsEnabled: boolean;
isLoading: boolean;
buffered: number;
}
interface VideoControls {
togglePlay: () => void;
seek: (time: number) => void;
setVolume: (volume: number) => void;
toggleMute: () => void;
setPlaybackRate: (rate: number) => void;
toggleFullscreen: () => void;
toggleCaptions: () => void;
formatTime: (time: number) => string;
}
interface VideoPlayerProps {
src: string;
poster?: string;
captions?: string;
title?: string;
theme?: 'light' | 'dark';
autoplay?: boolean;
loop?: boolean;
muted?: boolean;
controls?: boolean;
width?: string | number;
height?: string | number;
className?: string;
style?: React.CSSProperties;
onPlay?: () => void;
onPause?: () => void;
onTimeUpdate?: (currentTime: number) => void;
onVolumeChange?: (volume: number) => void;
onSeek?: (time: number) => void;
onEnded?: () => void;
onError?: (error: string) => void;
}
declare const VideoPlayer: React$1.FC<VideoPlayerProps>;
declare const useVideo: (videoRef: React.RefObject<HTMLVideoElement>, containerRef: React.RefObject<HTMLDivElement>, options?: {
onPlay?: () => void;
onPause?: () => void;
onTimeUpdate?: (currentTime: number) => void;
onVolumeChange?: (volume: number) => void;
onSeek?: (time: number) => void;
onEnded?: () => void;
onError?: (error: string) => void;
onSeekFeedback?: (timeDiff: number) => void;
onVolumeFeedback?: (volume: number, isMuted: boolean) => void;
onPlayPauseFeedback?: () => void;
}) => VideoState & VideoControls;
export { VideoPlayer, useVideo };
export type { VideoControls, VideoPlayerProps, VideoState };