1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-23 15:07:43 +01:00
smov/src/components/video/VideoPlayer.tsx

46 lines
1.2 KiB
TypeScript
Raw Normal View History

2023-01-08 15:37:16 +01:00
import { forwardRef, useContext, useRef } from "react";
import { VideoPlayerContext, VideoPlayerContextProvider } from "./VideoContext";
2023-01-08 13:15:32 +01:00
2023-01-08 22:29:38 +01:00
export interface VideoPlayerProps {
autoPlay?: boolean;
2023-01-08 13:15:32 +01:00
children?: React.ReactNode;
}
const VideoPlayerInternals = forwardRef<
HTMLVideoElement,
{ autoPlay: boolean }
>((props, ref) => {
2023-01-08 13:15:32 +01:00
const video = useContext(VideoPlayerContext);
return (
<video
ref={ref}
autoPlay={props.autoPlay}
playsInline
className="h-full w-full"
>
2023-01-08 13:15:32 +01:00
{video.source ? <source src={video.source} type="video/mp4" /> : null}
</video>
);
});
export function VideoPlayer(props: VideoPlayerProps) {
const playerRef = useRef<HTMLVideoElement | null>(null);
2023-01-08 16:23:42 +01:00
const playerWrapperRef = useRef<HTMLDivElement | null>(null);
2023-01-08 13:15:32 +01:00
return (
2023-01-08 16:23:42 +01:00
<VideoPlayerContextProvider player={playerRef} wrapper={playerWrapperRef}>
<div
2023-01-09 21:51:24 +01:00
className="relative aspect-video w-full select-none bg-black"
2023-01-08 16:23:42 +01:00
ref={playerWrapperRef}
>
<VideoPlayerInternals
autoPlay={props.autoPlay ?? false}
ref={playerRef}
/>
2023-01-08 16:23:42 +01:00
<div className="absolute inset-0">{props.children}</div>
</div>
2023-01-08 13:15:32 +01:00
</VideoPlayerContextProvider>
);
}