116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
import React, { createContext, ReactNode, useRef, useState } from "react";
|
|
import { PlaybackSpeed } from "./type";
|
|
import VideoPlayerLayout from "./VideoPlayerLayout";
|
|
|
|
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>;
|
|
}
|
|
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 [isDragging, setIsDragging] = useState(false);
|
|
const [isHovering, setIsHovering] = useState(false);
|
|
const progressRef = useRef<HTMLDivElement>(null);
|
|
|
|
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,
|
|
}}>
|
|
<VideoPlayerLayout></VideoPlayerLayout>
|
|
</VideoPlayerContext.Provider>
|
|
);
|
|
}
|