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