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

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

@@ -9,11 +9,7 @@ interface VideoPlayerProps {
onStreamDetected?: (isStreamAvailable: boolean) => void; onStreamDetected?: (isStreamAvailable: boolean) => void;
} }
const VideoPlayer: React.FC<VideoPlayerProps> = ({ const VideoPlayer: React.FC<VideoPlayerProps> = ({ streamer, extraClasses = "", onStreamDetected }) => {
streamer,
extraClasses = "",
onStreamDetected,
}) => {
const { streamerName: urlStreamerName } = useParams<{ const { streamerName: urlStreamerName } = useParams<{
streamerName: string; streamerName: string;
}>(); }>();
@@ -34,12 +30,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
if (!playerRef.current) { if (!playerRef.current) {
const videoElement = document.createElement("video"); const videoElement = document.createElement("video");
videoElement.classList.add( videoElement.classList.add("video-js", "vjs-big-play-centered", "w-full", "h-full");
"video-js",
"vjs-big-play-centered",
"w-full",
"h-full"
);
videoElement.setAttribute("playsinline", "true"); videoElement.setAttribute("playsinline", "true");
if (videoRef.current) { if (videoRef.current) {
videoRef.current.appendChild(videoElement); videoRef.current.appendChild(videoElement);
@@ -68,6 +59,23 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
playerRef.current.on("error", () => { playerRef.current.on("error", () => {
console.error(`Stream failed to load: ${streamUrl}`); console.error(`Stream failed to load: ${streamUrl}`);
if (onStreamDetected) onStreamDetected(false); if (onStreamDetected) onStreamDetected(false);
if (videoRef.current) {
const errorDisplay = videoRef.current.querySelector(".vjs-error-display") as HTMLElement;
if (errorDisplay) {
errorDisplay.style.display = "none";
}
// 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);
}
setTimeout(() => { setTimeout(() => {
console.log("Retrying stream..."); console.log("Retrying stream...");
playerRef.current?.src({ playerRef.current?.src({
@@ -75,6 +83,14 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
type: "application/x-mpegURL", type: "application/x-mpegURL",
}); });
playerRef.current?.play(); 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); }, 5000);
}); });
} else { } else {
@@ -97,10 +113,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
}, [streamerName]); }, [streamerName]);
return ( return (
<div <div id="video-player" className={`${extraClasses} w-full h-full mx-auto flex justify-center items-center bg-gray-900 rounded-lg`}>
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 ref={videoRef} className="w-full max-w-[160vh] self-center" />
</div> </div>
); );