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

FEAT: CategoryPage updated to display streams;

Browse Source 
General fixes and cleanup of unecessary logging;
Update to 404 (NotFound) Page;
This commit is contained in:
Chris-1010
2025-02-07 03:57:54 +00:00
parent 16dc8f1ea2
commit 45208a51be
12 changed files with 225 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.tsx
View File

@@ -45,7 +45,7 @@ function App() {
<Route path="/reset_password/:token" element={<ResetPasswordPage />}></Route>
<Route path="/category/:category_name" element={<CategoryPage />}></Route>
<Route path="*" element={<NotFoundPage />} />
<Route path="/404" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
</StreamsProvider>

22
frontend/src/components/Layout/ListRow.tsx
View File

@@ -17,7 +17,7 @@ interface ListRowProps {
description: string;
items: ListItemProps[];
extraClasses?: string;
onClick: (itemId: number, itemName: string) => void;
onClick: (itemName: string) => void;
}
// Row of entries
@@ -26,10 +26,12 @@ const ListRow: React.FC<ListRowProps> = ({
description,
items,
onClick,
extraClasses="",
extraClasses = "",
}) => {
return (
<div className={`flex flex-col space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] ${extraClasses}`}>
<div
className={`flex flex-col space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] ${extraClasses}`}
>
<div className="space-y-1">
<h2 className="text-2xl font-bold">{title}</h2>
<p>{description}</p>
@@ -42,10 +44,16 @@ const ListRow: React.FC<ListRowProps> = ({
type={item.type}
title={item.title}
streamer={item.type === "stream" ? item.streamer : undefined}
streamCategory={item.type === "stream" ? item.streamCategory : undefined}
streamCategory={
item.type === "stream" ? item.streamCategory : undefined
}
viewers={item.viewers}
thumbnail={item.thumbnail}
onItemClick={() => onClick?.(item.id, item.streamer || item.title)}
onItemClick={() =>
item.type === "stream" && item.streamer
? onClick?.(item.streamer)
: onClick?.(item.title)
}
/>
))}
</div>
@@ -82,7 +90,9 @@ export const ListItem: React.FC<ListItemProps> = ({
<div className="p-3">
<h3 className="font-semibold text-lg text-center">{title}</h3>
{type === "stream" && <p className="font-bold">{streamer}</p>}
{type === "stream" && <p className="text-sm text-gray-300">{streamCategory}</p>}
{type === "stream" && (
<p className="text-sm text-gray-300">{streamCategory}</p>
)}
<p className="text-sm text-gray-300">{viewers} viewers</p>
</div>
</div>

18
frontend/src/components/Stream/StreamerRoute.tsx
View File

@@ -1,7 +1,6 @@
import React, { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import VideoPage from "../../pages/VideoPage";
import UserPage from "../../pages/UserPage";
const StreamerRoute: React.FC = () => {
const { streamerName } = useParams();
@@ -42,13 +41,16 @@ const StreamerRoute: React.FC = () => {
}
// streamId=0 is a special case for the streamer's latest stream
return isLive ? (
<VideoPage streamerId={streamId} />
) : streamerName ? (
navigate(`/user/${streamerName}`)
) : (
<div>Streamer not found</div>
);
if (isLive) {
return <VideoPage streamerId={streamId} />;
}
if (streamerName) {
navigate(`/user/${streamerName}`);
return null;
}
return <div>Streamer not found</div>;
};
export default StreamerRoute;

1
frontend/src/components/Video/ChatPanel.tsx
View File

@@ -67,7 +67,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
// Handle live viewership
socket.on("status", (data: any) => {
console.log("Live viewership: ", data); // returns dictionary {message: message, num_viewers: num_viewers}
if (onViewerCountChange && data.num_viewers) {
onViewerCountChange(data.num_viewers);
}

4
frontend/src/context/SocketContext.tsx
View File

@@ -23,15 +23,12 @@ export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
console.log("Start of useEffect");
// Check if we already have a socket instance
if (socketRef.current) {
console.log("Socket already exists, closing existing socket");
socketRef.current.close();
}
console.log("Creating new socket connection");
const newSocket = io("http://localhost:8080", {
path: "/socket.io/",
transports: ["websocket"],
@@ -82,7 +79,6 @@ export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({
return () => {
if (socketRef.current) {
console.log("Cleaning up socket connection...");
socketRef.current.disconnect();
socketRef.current.close();
socketRef.current = null;

98
frontend/src/pages/CategoryPage.tsx
View File

@@ -1,9 +1,95 @@
import React from 'react'
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import Navbar from "../components/Layout/Navbar";
import ListRow from "../components/Layout/ListRow";
import { useNavigate } from "react-router-dom";
const CategoryPage = () => {
return (
<div>CategoryPage</div>
)
interface StreamData {
type: "stream";
id: number;
title: string;
streamer: string;
streamCategory: string;
viewers: number;
thumbnail?: string;
}
export default CategoryPage
const CategoryPage: React.FC = () => {
const { category_name } = useParams<{ category_name: string }>();
const [streams, setStreams] = useState<StreamData[]>([]);
const [isLoading, setIsLoading] = useState(true);
const navigate = useNavigate();
useEffect(() => {
const fetchCategoryStreams = async () => {
try {
const response = await fetch(`/api/streams/popular/${category_name}`);
if (!response.ok) {
throw new Error("Failed to fetch category streams");
}
const data = await response.json();
const formattedData = data.map((stream: any) => ({
type: "stream",
id: stream.user_id,
title: stream.title,
streamer: stream.username,
streamCategory: category_name,
viewers: stream.num_viewers,
thumbnail:
stream.thumbnail ||
(category_name &&
`/images/thumbnails/categories/${category_name
.toLowerCase()
.replace(/ /g, "_")}.webp`),
}));
setStreams(formattedData);
} catch (error) {
console.error("Error fetching category streams:", error);
} finally {
setIsLoading(false);
}
};
fetchCategoryStreams();
}, [category_name]);
const handleStreamClick = (streamerName: string) => {
navigate(`/${streamerName}`);
};
if (isLoading) {
return (
<div className="h-screen w-screen flex items-center justify-center text-white">
Loading...
</div>
);
}
return (
<div
className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<Navbar />
<div className="pt-8">
<ListRow
type="stream"
title={`${category_name} Streams`}
description={`Live streams in the ${category_name} category`}
items={streams}
onClick={handleStreamClick}
extraClasses="bg-purple-950/60"
/>
</div>
{streams.length === 0 && !isLoading && (
<div className="text-white text-center text-2xl mt-8">
No live streams found in this category
</div>
)}
</div>
);
};
export default CategoryPage;

6
frontend/src/pages/HomePage.tsx
View File

@@ -12,13 +12,11 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
const { featuredStreams, featuredCategories } = useStreams();
const navigate = useNavigate();
const handleStreamClick = (streamerId: number, streamerName: string) => {
console.log(`Navigating to stream by user ${streamerId}`);
const handleStreamClick = (streamerName: string) => {
navigate(`/${streamerName}`);
};
const handleCategoryClick = (categoryID: number, categoryName: string) => {
console.log(`Navigating to category ${categoryID}`);
const handleCategoryClick = (categoryName: string) => {
navigate(`category/${categoryName}`);
};

65
frontend/src/pages/NotFoundPage.tsx
View File

@@ -1,7 +1,68 @@
import React from "react";
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Button from "../components/Layout/Button";
const NotFoundPage: React.FC = () => {
return <div></div>;
const navigate = useNavigate();
const [stars, setStars] = useState<{ x: number; y: number }[]>([]);
const starSize = 20;
useEffect(() => {
const loop = setInterval(() => {
if (Math.random() < 0.1) {
const newStar = {
x: Math.random() * (window.innerWidth - starSize),
y: -starSize,
};
setStars((prev) => [...prev, newStar]);
}
setStars((prev) => {
const newStars = prev.filter((star) => {
if (
star.y > window.innerHeight - starSize &&
star.y < window.innerHeight
) {
return false;
}
if (star.y > window.innerHeight) return false;
return true;
});
return newStars.map((star) => ({
...star,
y: star.y + 5,
}));
});
}, 10);
return () => clearInterval(loop);
}, []);
return (
<div className="h-screen w-screen bg-gray-900 text-white overflow-hidden relative">
<div>
{stars.map((star, index) => (
<div
key={index}
className="absolute w-5 h-5 text-yellow-300"
style={{ left: `${star.x}px`, top: `${star.y}px` }}
>
★
</div>
))}
</div>
<div className="absolute flex justify-center items-center h-full z-0 inset-0 bg-[radial-gradient(rgba(255,255,255,0.5)_1px,transparent_1px)] bg-[length:50px_50px]">
<div className="w-full text-center animate-floating">
<h1 className="text-6xl font-bold mb-4">404</h1>
<p className="text-2xl mb-8">Page Not Found</p>
<Button extraClasses="z-[100]" onClick={() => navigate("/")}>
Go Home
</Button>
</div>
</div>
</div>
);
};
export default NotFoundPage;

16
frontend/src/pages/UserPage.tsx
View File

@@ -28,7 +28,8 @@ const UserPage: React.FC = () => {
"personal" | "streamer" | "user" | "admin"
>("user");
const [profileData, setProfileData] = useState<UserProfileData>();
const { isFollowing, checkFollowStatus, followUser, unfollowUser } = useFollow();
const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
useFollow();
const { showAuthModal, setShowAuthModal } = useAuthModal();
const { username: loggedInUsername } = useAuth();
const { username } = useParams();
@@ -90,7 +91,10 @@ const UserPage: React.FC = () => {
.catch((err) => console.error("Error fetching stream data:", err));
}
})
.catch((err) => console.error("Error fetching profile data:", err));
.catch((err) => {
console.error("Error fetching profile data:", err);
navigate("/404");
});
// Check if the *logged-in* user is following this user
if (loggedInUsername && username) checkFollowStatus(username);
@@ -167,14 +171,18 @@ const UserPage: React.FC = () => {
{!isFollowing ? (
<Button
extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
onClick={() => followUser(profileData.id, setShowAuthModal)}
onClick={() =>
followUser(profileData.id, setShowAuthModal)
}
>
Follow
</Button>
) : (
<Button
extraClasses="w-full bg-[#a80000]"
onClick={() => unfollowUser(profileData?.id, setShowAuthModal)}
onClick={() =>
unfollowUser(profileData?.id, setShowAuthModal)
}
>
Unfollow
</Button>

11
web_server/blueprints/streams.py
View File

@@ -31,6 +31,17 @@ def get_popular_streams(no_streams) -> list[dict]:
streams = get_highest_view_streams(no_streams)
return jsonify(streams)
@stream_bp.route('/streams/popular/<string:category_name>')
def get_popular_streams_by_category(category_name) -> list[dict]:
"""
Returns a list of streams live now with the highest viewers in a given category
"""
category_id = get_category_id(category_name)
print(category_id, flush=True)
streams = get_streams_based_on_category(category_id)
return jsonify(streams)
@login_required
@stream_bp.route('/streams/recommended')
def get_recommended_streams() -> list[dict]:

12
web_server/utils/recommendation_utils.py
View File

@@ -19,7 +19,7 @@ def get_user_preferred_category(user_id: int) -> Optional[int]:
def followed_categories_recommendations(user_id: int) -> Optional[List[dict]]:
"""
Returns top 25 streams given a users category following
Returns top 25 streams given a user's category following
"""
with Database() as db:
streams = db.fetchall("""
@@ -40,11 +40,11 @@ def get_streams_based_on_category(category_id: int) -> Optional[List[dict]]:
"""
with Database() as db:
streams = db.fetchall("""
SELECT u.user_id, title, username, num_viewers, category_name
FROM streams
JOIN users u ON streams.user_id = u.user_id
JOIN categories ON streams.category_id = categories.category_id
WHERE categories.category_id = ?
SELECT u.user_id, title, username, num_viewers, c.category_name
FROM streams s
JOIN users u ON s.user_id = u.user_id
JOIN categories c ON s.category_id = c.category_id
WHERE c.category_id = ?
ORDER BY num_viewers DESC
LIMIT 25
""", (category_id,))

12
web_server/utils/stream_utils.py
View File

@@ -48,6 +48,18 @@ def get_current_stream_data(user_id: int) -> Optional[dict]:
""", (user_id,))
return most_recent_stream
def get_category_id(category_name: str) -> Optional[int]:
"""
Returns the category_id given a category name
"""
with Database() as db:
data = db.fetchone("""
SELECT category_id
FROM categories
WHERE category_name = ?;
""", (category_name,))
return data['category_id'] if data else None
def get_vod(vod_id: int) -> dict:
"""
Returns data of a streamers vod