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
|
|
|
|
|
|
|
interface VideoPlayerProps {
|
|
|
|
children?: React.ReactNode;
|
|
|
|
}
|
|
|
|
|
2023-01-08 15:37:16 +01:00
|
|
|
const VideoPlayerInternals = forwardRef<HTMLVideoElement>((_, ref) => {
|
2023-01-08 13:15:32 +01:00
|
|
|
const video = useContext(VideoPlayerContext);
|
|
|
|
|
|
|
|
return (
|
2023-01-08 15:37:16 +01:00
|
|
|
<video controls ref={ref}>
|
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);
|
|
|
|
|
|
|
|
return (
|
2023-01-08 15:37:16 +01:00
|
|
|
<VideoPlayerContextProvider player={playerRef}>
|
|
|
|
<VideoPlayerInternals ref={playerRef} />
|
|
|
|
{props.children}
|
2023-01-08 13:15:32 +01:00
|
|
|
</VideoPlayerContextProvider>
|
|
|
|
);
|
|
|
|
}
|