57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import VideoPage from "../../pages/VideoPage";
|
|
|
|
const StreamerRoute: React.FC = () => {
|
|
const { streamerName } = useParams();
|
|
const [isLoading, setIsLoading] = useState<boolean>(true);
|
|
const [isLive, setIsLive] = useState<boolean>(false);
|
|
const [streamId, setStreamId] = useState<number>(0);
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
const checkStreamStatus = async () => {
|
|
try {
|
|
const response = await fetch(`/api/user/${streamerName}/status`);
|
|
const data = await response.json();
|
|
setIsLive(Boolean(data.is_live));
|
|
setStreamId(data.most_recent_stream);
|
|
} catch (error) {
|
|
console.error("Error checking stream status:", error);
|
|
setIsLive(false);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
checkStreamStatus();
|
|
|
|
// Poll for live status changes
|
|
const interval = setInterval(checkStreamStatus, 60000); // Check every minute
|
|
|
|
return () => clearInterval(interval);
|
|
}, [streamerName]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="h-screen w-screen flex text-6xl items-center justify-center">
|
|
Loading...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// streamId=0 is a special case for the streamer's latest stream
|
|
if (isLive) {
|
|
return <VideoPage streamerId={streamId} />;
|
|
}
|
|
|
|
if (streamerName) {
|
|
navigate(`/user/${streamerName}`);
|
|
return null;
|
|
}
|
|
|
|
return <div>Streamer not found</div>;
|
|
};
|
|
|
|
export default StreamerRoute;
|