dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FEAT: Add custom error UI when stream unavailable

Browse Source
This commit is contained in:
Chris-1010
2025-03-02 14:53:21 +00:00
parent 37122e1cea
commit a1e8c92240
1 changed files with 101 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
frontend/src/components/Stream/VideoPlayer.tsx
View File

@@ -4,106 +4,119 @@ import videojs from "video.js";
import type Player from "video.js/dist/types/player";
import "video.js/dist/video-js.css";
interface VideoPlayerProps {
streamer?: string;
extraClasses?: string;
onStreamDetected?: (isStreamAvailable: boolean) => void;
streamer?: string;
extraClasses?: string;
onStreamDetected?: (isStreamAvailable: boolean) => void;
}
const VideoPlayer: React.FC<VideoPlayerProps> = ({
streamer,
extraClasses = "",
onStreamDetected,
}) => {
const { streamerName: urlStreamerName } = useParams<{
streamerName: string;
}>();
const videoRef = useRef<HTMLDivElement>(null);
const playerRef = useRef<Player | null>(null);
const VideoPlayer: React.FC<VideoPlayerProps> = ({ streamer, extraClasses = "", onStreamDetected }) => {
const { streamerName: urlStreamerName } = useParams<{
streamerName: string;
}>();
const videoRef = useRef<HTMLDivElement>(null);
const playerRef = useRef<Player | null>(null);
// Use URL param if available, otherwise fall back to prop
const streamerName = urlStreamerName || streamer;
// Use URL param if available, otherwise fall back to prop
const streamerName = urlStreamerName || streamer;
useEffect(() => {
if (!videoRef.current || !streamerName) {
console.log("No video ref or streamer name");
return;
}
useEffect(() => {
if (!videoRef.current || !streamerName) {
console.log("No video ref or streamer name");
return;
}
const setupPlayer = async () => {
const streamUrl = `/stream/${streamerName}/index.m3u8`;
const setupPlayer = async () => {
const streamUrl = `/stream/${streamerName}/index.m3u8`;
if (!playerRef.current) {
const videoElement = document.createElement("video");
videoElement.classList.add(
"video-js",
"vjs-big-play-centered",
"w-full",
"h-full"
);
videoElement.setAttribute("playsinline", "true");
if (videoRef.current) {
videoRef.current.appendChild(videoElement);
}
if (!playerRef.current) {
const videoElement = document.createElement("video");
videoElement.classList.add("video-js", "vjs-big-play-centered", "w-full", "h-full");
videoElement.setAttribute("playsinline", "true");
if (videoRef.current) {
videoRef.current.appendChild(videoElement);
}
playerRef.current = videojs(videoElement, {
controls: false,
autoplay: true,
muted: false,
fluid: true,
responsive: true,
aspectRatio: "16:9",
liveui: false,
sources: [
{
src: streamUrl,
type: "application/x-mpegURL",
},
],
});
playerRef.current = videojs(videoElement, {
controls: false,
autoplay: true,
muted: false,
fluid: true,
responsive: true,
aspectRatio: "16:9",
liveui: false,
sources: [
{
src: streamUrl,
type: "application/x-mpegURL",
},
],
});
playerRef.current.on("loadeddata", () => {
if (onStreamDetected) onStreamDetected(true);
});
playerRef.current.on("loadeddata", () => {
if (onStreamDetected) onStreamDetected(true);
});
playerRef.current.on("error", () => {
console.error(`Stream failed to load: ${streamUrl}`);
if (onStreamDetected) onStreamDetected(false);
setTimeout(() => {
console.log("Retrying stream...");
playerRef.current?.src({
src: streamUrl,
type: "application/x-mpegURL",
});
playerRef.current?.play();
}, 5000);
});
} else {
playerRef.current.src({
src: streamUrl,
type: "application/x-mpegURL",
});
playerRef.current.play();
}
};
playerRef.current.on("error", () => {
console.error(`Stream failed to load: ${streamUrl}`);
if (onStreamDetected) onStreamDetected(false);
setupPlayer();
if (videoRef.current) {
const errorDisplay = videoRef.current.querySelector(".vjs-error-display") as HTMLElement;
if (errorDisplay) {
errorDisplay.style.display = "none";
}
return () => {
if (playerRef.current) {
playerRef.current.dispose();
playerRef.current = null;
}
};
}, [streamerName]);
// Custom error UI
const errorElement = document.createElement("div");
errorElement.className = "absolute top-0 left-0 right-0 flex flex-col items-center justify-center h-full bg-gray-800 text-white p-4 rounded";
errorElement.innerHTML = `
<div class="text-xl mb-2">Stream Currently Unavailable</div>
<div class="mb-4">The streamer may be offline</div>
`;
videoRef.current.appendChild(errorElement);
}
return (
<div
id="video-player"
className={`${extraClasses} w-full h-full mx-auto flex justify-center items-center bg-gray-900 rounded-lg`}
>
<div ref={videoRef} className="w-full max-w-[160vh] self-center" />
</div>
);
setTimeout(() => {
console.log("Retrying stream...");
playerRef.current?.src({
src: streamUrl,
type: "application/x-mpegURL",
});
playerRef.current?.play();
// Remove the custom error UI before retrying
if (videoRef.current) {
const errorElement = videoRef.current.querySelector(".flex.flex-col");
if (errorElement) {
videoRef.current.removeChild(errorElement);
}
}
}, 5000);
});
} else {
playerRef.current.src({
src: streamUrl,
type: "application/x-mpegURL",
});
playerRef.current.play();
}
};
setupPlayer();
return () => {
if (playerRef.current) {
playerRef.current.dispose();
playerRef.current = null;
}
};
}, [streamerName]);
return (
<div id="video-player" className={`${extraClasses} w-full h-full mx-auto flex justify-center items-center bg-gray-900 rounded-lg`}>
<div ref={videoRef} className="w-full max-w-[160vh] self-center" />
</div>
);
};
export default VideoPlayer;