Patch: Fix to StreamerRoute to correctly send user to UserPage/VideoPage;
Update: Display Category Thumbnails
Chris-1010
@@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Team Software Project</title>
|
||||
</head>
|
||||
<body class="h-screen">
|
||||
<body class="min-h-screen h-full">
|
||||
<div id="root" class="h-full bg-gradient-to-tr from-[#07001F] via-[#1D0085] to-[#CC00AF]"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
|
Before Width: | Height: | Size: 844 KiB |
|
Before Width: | Height: | Size: 3.3 MiB |
|
Before Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 194 KiB |
BIN
frontend/public/images/thumbnails/categories/art.webp
Normal file
|
After Width: | Height: | Size: 508 KiB |
BIN
frontend/public/images/thumbnails/categories/chatting.webp
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
frontend/public/images/thumbnails/categories/cooking.webp
Normal file
|
After Width: | Height: | Size: 71 KiB |
BIN
frontend/public/images/thumbnails/categories/gaming.webp
Normal file
|
After Width: | Height: | Size: 149 KiB |
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
BIN
frontend/public/images/thumbnails/categories/sports.webp
Normal file
|
After Width: | Height: | Size: 95 KiB |
@@ -27,6 +27,7 @@ const ListItem: React.FC<ListItemProps> = ({
|
||||
thumbnail,
|
||||
onItemClick,
|
||||
}) => {
|
||||
console.log(title, "thumbnail", thumbnail);
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 transition-colors"
|
||||
@@ -35,7 +36,7 @@ const ListItem: React.FC<ListItemProps> = ({
|
||||
<div className="relative w-full pt-[56.25%]">
|
||||
{thumbnail ? (
|
||||
<img
|
||||
src={`images/` + thumbnail}
|
||||
src={thumbnail}
|
||||
alt={title}
|
||||
className="absolute top-0 left-0 w-full h-full object-cover"
|
||||
/>
|
||||
@@ -74,6 +75,7 @@ const ListRow: React.FC<ListRowProps> = ({
|
||||
title={item.title}
|
||||
streamer={item.type === "stream" ? (item.streamer) : undefined}
|
||||
viewers={item.viewers}
|
||||
thumbnail={item.thumbnail}
|
||||
onItemClick={() =>
|
||||
onClick?.(item.id, item.streamer || item.title)
|
||||
}
|
||||
|
||||
@@ -13,8 +13,7 @@ const StreamerRoute: React.FC = () => {
|
||||
try {
|
||||
const response = await fetch(`/api/streamer/${streamerName}/status`);
|
||||
const data = await response.json();
|
||||
console.log("Stream status:", data);
|
||||
setIsLive(data.status === "live");
|
||||
setIsLive(data.is_live);
|
||||
} catch (error) {
|
||||
console.error("Error checking stream status:", error);
|
||||
setIsLive(false);
|
||||
@@ -36,7 +35,7 @@ const StreamerRoute: React.FC = () => {
|
||||
}
|
||||
|
||||
// streamId=0 is a special case for the streamer's latest stream
|
||||
return isLive ? <VideoPage streamId={0} /> : <UserPage profile={streamerName} />;
|
||||
return isLive ? <VideoPage streamId={0} /> : (streamerName ? <UserPage username={streamerName} /> : <div>Error: Streamer not found</div>);
|
||||
};
|
||||
|
||||
export default StreamerRoute;
|
||||
|
||||
@@ -41,12 +41,12 @@ export function StreamsProvider({ children }: { children: React.ReactNode }) {
|
||||
// Streams
|
||||
fetch(fetch_url[0])
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const extractedData: StreamItem[] = data.streams.map((stream: any) => ({
|
||||
.then((data: StreamItem[]) => {
|
||||
const extractedData: StreamItem[] = data.map((stream: any) => ({
|
||||
type: "stream",
|
||||
id: stream.stream_id,
|
||||
title: stream.title,
|
||||
streamer: stream.user_id,
|
||||
streamer: stream.username,
|
||||
viewers: stream.num_viewers,
|
||||
thumbnail: stream.thumbnail,
|
||||
}));
|
||||
@@ -56,15 +56,17 @@ export function StreamsProvider({ children }: { children: React.ReactNode }) {
|
||||
// Categories
|
||||
fetch(fetch_url[1])
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const extractedData: CategoryItem[] = data.categories.map(
|
||||
.then((data: CategoryItem[]) => {
|
||||
const extractedData: CategoryItem[] = data.map(
|
||||
(category: any) => ({
|
||||
type: "category",
|
||||
id: category.category_id,
|
||||
title: category.category_name,
|
||||
viewers: category.num_viewers,
|
||||
thumbnail: `/images/thumbnails/categories/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`
|
||||
})
|
||||
);
|
||||
console.log(extractedData);
|
||||
setFeaturedCategories(extractedData);
|
||||
});
|
||||
}, []);
|
||||
|
||||
@@ -52,7 +52,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
|
||||
console.error("Failed to load stream data:", res.statusText);
|
||||
}
|
||||
res.json().then((data) => {
|
||||
if (!data.validStream) navigate(`/`);
|
||||
// if (!data.validStream) navigate(`/`);
|
||||
console.log(`Loading stream data for ${streamerName}`);
|
||||
setStreamData({
|
||||
streamId: data.streamId,
|
||||
|
||||