64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import React, { useEffect, useRef } from "react";
|
|
import videojs from "video.js";
|
|
import type Player from "video.js/dist/types/player";
|
|
import "video.js/dist/video-js.css";
|
|
|
|
interface VideoPlayerProps {
|
|
streamId: number;
|
|
}
|
|
|
|
const VideoPlayer: React.FC<VideoPlayerProps> = ({ streamId }) => {
|
|
const videoRef = useRef<HTMLDivElement>(null);
|
|
const playerRef = useRef<Player | null>(null);
|
|
|
|
useEffect(() => {
|
|
// Makes sure Video.js player is only initialized once
|
|
if (!playerRef.current && videoRef.current) {
|
|
const videoElement = document.createElement("video");
|
|
videoElement.classList.add(
|
|
"video-js",
|
|
"vjs-big-play-centered",
|
|
"w-full",
|
|
"h-full",
|
|
);
|
|
videoRef.current.appendChild(videoElement);
|
|
|
|
playerRef.current = videojs(videoElement, {
|
|
controls: true,
|
|
fluid: true,
|
|
responsive: true,
|
|
// autoplay: true,
|
|
loop: true,
|
|
aspectRatio: "16:9",
|
|
sources: [
|
|
{
|
|
src: `/images/sample_game_video.mp4`,
|
|
// type: "application/x-mpegURL",
|
|
type: "video/mp4",
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
// Dispose the Video.js player when the component unmounts
|
|
return () => {
|
|
if (playerRef.current) {
|
|
playerRef.current.dispose();
|
|
playerRef.current = null;
|
|
}
|
|
};
|
|
}, [streamId]);
|
|
|
|
return (
|
|
<div
|
|
id="video-container"
|
|
className="min-w-[65vw] w-full h-full flex items-center bg-gray-900 rounded-lg"
|
|
style={{ gridArea: "1 / 1 / 2 / 2" }}
|
|
>
|
|
<div ref={videoRef} id="video-player" className="w-full" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VideoPlayer;
|