UNPKG

@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
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 };