35 lines
870 B
TypeScript
35 lines
870 B
TypeScript
|
import { useContext } from "react";
|
||
|
|
import { VideoPlayerContext } from "./VideoPlayer";
|
||
|
|
import Controls from "./VideoControls";
|
||
|
|
import { AnimatePresence } from "framer-motion";
|
||
|
|
import { VideoScreen } from "./VideoScreen";
|
||
|
|
import LoadingOverlay from "./LoadingOverlay";
|
||
|
|
|
||
|
|
export default function VideoPlayerLayout() {
|
||
|
|
const {
|
||
|
|
isReady,
|
||
|
|
setIsHovering,
|
||
|
|
setShowControls,
|
||
|
|
showControls,
|
||
|
|
isDragging,
|
||
|
|
} = useContext(VideoPlayerContext);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div
|
||
|
|
className={`relative aspect-video w-full bg-black rounded-lg overflow-hidden`}
|
||
|
|
onMouseEnter={() => {
|
||
|
|
setIsHovering(true);
|
||
|
|
setShowControls(true);
|
||
|
|
}}>
|
||
|
|
{!isReady && <div>123</div>}
|
||
|
|
{!isReady && <LoadingOverlay></LoadingOverlay>}
|
||
|
|
<VideoScreen></VideoScreen>
|
||
|
|
<AnimatePresence>
|
||
|
|
{(showControls || isDragging) && <Controls />}
|
||
|
|
</AnimatePresence>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|