book_manage/apps/web/src/components/presentation/video-player/VideoPlayer.tsx

import React, { createContext, ReactNode, useRef, useState } from "react";
import { PlaybackSpeed } from "./type";
import VideoPlayerLayout from "./VideoPlayerLayout";
import { Resolution } from "./interface";

interface VideoPlayerContextType {
	src: string;
	poster?: string;
	onError?: (error: string) => void;
	showControls: boolean;
	setShowControls: React.Dispatch<React.SetStateAction<boolean>>;
	isSettingsOpen: boolean;
	setIsSettingsOpen: React.Dispatch<React.SetStateAction<boolean>>;
	playbackSpeed: PlaybackSpeed;
	setPlaybackSpeed: React.Dispatch<React.SetStateAction<PlaybackSpeed>>;
	videoRef: React.RefObject<HTMLVideoElement>;
	isReady: boolean;
	setIsReady: React.Dispatch<React.SetStateAction<boolean>>;
	isPlaying: boolean;
	setIsPlaying: React.Dispatch<React.SetStateAction<boolean>>;
	error: string | null;
	setError: React.Dispatch<React.SetStateAction<string | null>>;
	bufferingState: boolean;
	setBufferingState: React.Dispatch<React.SetStateAction<boolean>>;
	volume: number;
	setVolume: React.Dispatch<React.SetStateAction<number>>;
	isMuted: boolean;
	setIsMuted: React.Dispatch<React.SetStateAction<boolean>>;
	loadingProgress: number;
	setLoadingProgress: React.Dispatch<React.SetStateAction<number>>;
	currentTime: number;
	setCurrentTime: React.Dispatch<React.SetStateAction<number>>;
	duration: number;
	setDuration: React.Dispatch<React.SetStateAction<number>>;
	brightness: number;
	setBrightness: React.Dispatch<React.SetStateAction<number>>;
	isDragging: boolean;
	setIsDragging: React.Dispatch<React.SetStateAction<boolean>>;
	isHovering: boolean;
	setIsHovering: React.Dispatch<React.SetStateAction<boolean>>;
	progressRef: React.RefObject<HTMLDivElement>;
	isSpeedOpen: boolean;
	setIsSpeedOpen: React.Dispatch<React.SetStateAction<boolean>>;
	isBrightnessOpen: boolean;
	setIsBrightnessOpen: React.Dispatch<React.SetStateAction<boolean>>;
	resolution: number;
	setResolution: React.Dispatch<React.SetStateAction<number>>;
	resolutions: Resolution[];
	setResolutions: React.Dispatch<React.SetStateAction<Resolution[]>>;
}
export const VideoPlayerContext = createContext<VideoPlayerContextType | null>(
	null
);
export function VideoPlayer({
	src,
	poster,
	onError,
}: {
	src: string;
	poster?: string;
	onError?: (error: string) => void;
}) {
	const [showControls, setShowControls] = useState(false);
	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
	const [playbackSpeed, setPlaybackSpeed] = useState<PlaybackSpeed>(1.0);

	const videoRef = useRef<HTMLVideoElement>(null);
	const [isReady, setIsReady] = useState(false);
	const [isPlaying, setIsPlaying] = useState(false);
	const [error, setError] = useState<string | null>(null);
	const [bufferingState, setBufferingState] = useState(false);
	const [volume, setVolume] = useState(1);
	const [isMuted, setIsMuted] = useState(false);
	const [loadingProgress, setLoadingProgress] = useState(0);
	const [currentTime, setCurrentTime] = useState(0);
	const [duration, setDuration] = useState(0);
	const [brightness, setBrightness] = useState(1);
	const [resolution, setResolution] = useState(-1);
	const [resolutions, setResolutions] = useState<Resolution[]>([]);
	const [isDragging, setIsDragging] = useState(false);
	const [isHovering, setIsHovering] = useState(false);
	const progressRef = useRef<HTMLDivElement>(null);
	const [isSpeedOpen, setIsSpeedOpen] = useState(false);
	const [isBrightnessOpen, setIsBrightnessOpen] = useState(false);
	return (
		<VideoPlayerContext.Provider
			value={{
				src,
				poster,
				onError,
				showControls,
				setShowControls,
				isSettingsOpen,
				setIsSettingsOpen,
				playbackSpeed,
				setPlaybackSpeed,
				videoRef,
				isReady,
				setIsReady,
				isPlaying,
				setIsPlaying,
				error,
				setError,
				bufferingState,
				setBufferingState,
				volume,
				setVolume,
				isMuted,
				setIsMuted,
				loadingProgress,
				setLoadingProgress,
				currentTime,
				setCurrentTime,
				duration,
				setDuration,
				brightness,
				setBrightness,
				isDragging,
				setIsDragging,
				isHovering,
				setIsHovering,
				progressRef,
				isSpeedOpen,
				setIsSpeedOpen,
				isBrightnessOpen,
				setIsBrightnessOpen,
				resolution,
				setResolution,
				resolutions,
				setResolutions,
			}}>
			<VideoPlayerLayout></VideoPlayerLayout>
		</VideoPlayerContext.Provider>
	);
}