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

Merge branch 'main' of https://github.com/john-david3/cs3305-team11

Browse Source
This commit is contained in:
white
2025-03-02 14:51:52 +00:00
parent 98f27c0478 284f223ef0
commit a5d27f9497
24 changed files with 516 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -97,7 +97,7 @@ const CategoryPage: React.FC = () => {
<ListRow
ref={listRowRef}
type="stream"
title={`${categoryName} Streams`}
title={`${categoryName}`}
description={`Live streams in the ${categoryName} category`}
items={streams}
wrap={true}

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

@@ -4,6 +4,7 @@ import { useNavigate, useParams } from "react-router-dom";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
import { useCategoryFollow } from "../hooks/useCategoryFollow";
import FollowButton from "../components/Input/FollowButton";
import { useAuthModal } from "../hooks/useAuthModal";
interface Category {
@@ -22,6 +23,7 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
const { categoryName } = useParams<{ categoryName: string }>();
const { checkCategoryFollowStatus, followCategory, unfollowCategory } = useCategoryFollow();
useEffect(() => {
if (categoryName) checkCategoryFollowStatus(categoryName);
@@ -32,7 +34,7 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
const fetchFollowedCategories = async () => {
try {
const response = await fetch("/api/categories/following");
const response = await fetch("/api/categories/your_categories");
if (!response.ok) throw new Error("Failed to fetch followed categories");
const data = await response.json();
setFollowedCategories(data);
@@ -52,7 +54,7 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}
>
{/* Followed Categories */}
<div id="categories-followed" className="grid grid-cols-3 gap-4 p-4 w-full">
<div id="categories-followed" className="grid grid-cols-4 gap-4 p-4 w-full">
{followedCategories.map((category) => {
return (
<div

156
frontend/src/pages/Following.tsx
View File

@@ -1,35 +1,45 @@
import React, { useEffect, useState } from "react";
import { useAuth } from "../context/AuthContext";
import { useSidebar } from "../context/SidebarContext";
import { ToggleButton } from "../components/Input/Button";
import { Sidebar as SidebarIcon } from "lucide-react";
import { useNavigate } from "react-router-dom"; // Import useNavigate
import { CategoryType } from "../types/CategoryType";
import { useNavigate } from "react-router-dom";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
import { useFollow } from "../hooks/useFollow";
import { useAuthModal } from "../hooks/useAuthModal";
import FollowUserButton from "../components/Input/FollowUserButton";
// Define TypeScript interfaces
interface Streamer {
user_id: number;
username: string;
}
interface FollowingProps {
interface FollowingStreamerProps {
extraClasses?: string;
}
const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
const { showSideBar, setShowSideBar } = useSidebar();
const Following: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => {
const navigate = useNavigate();
const { username, isLoggedIn } = useAuth();
const { isLoggedIn } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
const [followingStatus, setFollowingStatus] = useState<{ [key: number]: boolean }>({}); // Store follow status for each streamer
const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
useFollow();
// Fetch followed streamers
useEffect(() => {
const fetchFollowedStreamers = async () => {
try {
const response = await fetch("/api/user/following");
if (!response.ok) throw new Error("Failed to fetch followed streamers");
const data = await response.json();
setFollowedStreamers(data.streamers || []);
setFollowedStreamers(data);
const updatedStatus: { [key: number]: boolean } = {};
for (const streamer of data || []) {
const status = await checkFollowStatus(streamer.username);
updatedStatus[streamer.user_id] = Boolean(status);
}
setFollowingStatus(updatedStatus);
console.log("Fetched Follow Status:", updatedStatus); // Log the status
} catch (error) {
console.error("Error fetching followed streamers:", error);
}
@@ -40,103 +50,51 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
}
}, [isLoggedIn]);
// Handle sidebar toggle
const handleSideBar = () => {
setShowSideBar(!showSideBar);
const handleFollowToggle = async (userId: number) => {
const isCurrentlyFollowing = followingStatus[userId];
if (isCurrentlyFollowing) {
await unfollowUser(userId);
} else {
await followUser(userId);
}
// Update local state for this specific streamer
setFollowingStatus((prev) => ({
...prev,
[userId]: !isCurrentlyFollowing, // Toggle based on previous state
}));
};
return (
<>
{/* Sidebar Toggle Button */}
<ToggleButton
onClick={handleSideBar}
extraClasses={`absolute group text-[1rem] top-[9vh] ${
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer z-[50]`}
toggled={showSideBar}
>
<SidebarIcon className="h-[2vw] w-[2vw]" />
{showSideBar && (
<small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
Press S
</small>
)}
</ToggleButton>
{/* Sidebar Container */}
<DynamicPageContent>
<div
id="sidebar"
className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
transition-all duration-500 ease-in-out ${
showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`}
className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}
>
{/* Profile Info */}
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
<img
src="/images/monkey.png"
alt="profile picture"
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
onClick={() => navigate(`/user/${username}`)}
/>
<div className="text-center flex flex-col items-center justify-center">
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
Logged in as
</h5>
<button
className="font-black text-[1.4rem] hover:underline"
onClick={() => navigate(`/user/${username}`)}
>
<div className="text-[var(--sideBar-profile-text)]">
{username}
</div>
</button>
</div>
</div>
{/* Following Section */}
<div
id="following"
className="flex flex-col flex-grow justify-evenly p-4 gap-4"
>
<div
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
onMouseEnter={(e) =>
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
Following
</h1>
</div>
{/* Streamers Followed */}
<div
id="streamers-followed"
className="flex flex-col flex-grow items-center"
>
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
Streamers
</h2>
<div className="flex flex-col flex-grow justify-evenly w-full">
{followedStreamers.map((streamer) => (
<button
key={`streamer-${streamer.username}`}
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
onClick={() => navigate(`/user/${streamer.username}`)}
>
{streamer.username}
</button>
))}
id="followed-users"
className={`grid grid-cols-2 gap-4 p-4 w-full`}>
{followedStreamers.map((streamer: any) => (
<div
key={`streamer-${streamer.username}`}
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 font-bold transition-colors"
/*onClick={() => navigate(`/user/${streamer.username}`)}*/
>
{streamer.username}
<FollowUserButton
user={{
user_id: streamer.user_id,
username: streamer.username,
isFollowing: followingStatus[streamer.user_id] || true,
}}
/>
</div>
</div>
))}
</div>
</div>
</>
</DynamicPageContent>
);
};

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

@@ -1,30 +1,29 @@
import React from "react";
import ListRow from "../components/Layout/ListRow";
import { useNavigate } from "react-router-dom";
import { useStreams, useCategories } from "../hooks/useContent";
import { useStreams, useCategories, useVods } from "../hooks/useContent";
import Button from "../components/Input/Button";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
import LoadingScreen from "../components/Layout/LoadingScreen";
import Footer from "../components/Layout/Footer";
interface HomePageProps {
variant?: "default" | "personalised";
}
const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
const { streams, isLoading: isLoadingStreams } = useStreams();
const { categories, isLoading: isLoadingCategories } = useCategories();
const { vods, isLoading: isLoadingVods } = useVods(); // Fetch VODs
const navigate = useNavigate();
const handleStreamClick = (streamerName: string) => {
window.location.href = `/${streamerName}`;
const handleVodClick = (vodUrl: string) => {
window.open(vodUrl, "_blank"); // Open VOD in new tab
};
const handleCategoryClick = (categoryName: string) => {
navigate(`/category/${categoryName}`);
};
if (isLoadingStreams || isLoadingCategories)
if (isLoadingStreams || isLoadingCategories || isLoadingVods)
return <LoadingScreen>Loading Content...</LoadingScreen>;
return (
@@ -33,52 +32,47 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
className="relative min-h-screen animate-moving_bg"
contentClassName="pb-[12vh]"
>
{/* Streams Section */}
<ListRow
type="stream"
title={
"Streams - Live Now" +
(variant === "personalised" ? " - Recommended" : "")
}
description={
variant === "personalised"
? "We think you might like these streams - Streamers recommended for you"
: "Popular streamers that are currently live!"
}
title="Streams - Live Now"
description="Popular streamers that are currently live!"
items={streams}
wrap={false}
onItemClick={handleStreamClick}
onItemClick={(streamerName) => navigate(`/${streamerName}`)}
extraClasses="bg-[var(--liveNow)]"
itemExtraClasses="w-[20vw]"
/>
{/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}
{/* Categories Section */}
<ListRow
type="category"
title={
variant === "personalised"
? "Followed Categories"
: "Trending Categories"
}
description={
variant === "personalised"
? "Current streams from your followed categories"
: "Recently popular categories lately!"
}
title="Trending Categories"
description="Recently popular categories lately!"
items={categories}
wrap={false}
onItemClick={handleCategoryClick}
onItemClick={(categoryName) => navigate(`/category/${categoryName}`)}
titleClickable={true}
extraClasses="bg-[var(--recommend)]"
itemExtraClasses="w-[20vw]"
>
<Button
extraClasses="absolute right-10"
onClick={() => navigate("/categories")}
>
<Button extraClasses="absolute right-10" onClick={() => navigate("/categories")}>
Show All
</Button>
</ListRow>
<Footer/>
{/* VODs Section */}
<ListRow
type="vod"
title="Recent VODs"
description="Watch the latest recorded streams!"
items={vods}
wrap={false}
onItemClick={handleVodClick}
extraClasses="bg-black/50"
itemExtraClasses="w-[20vw]"
/>
<Footer />
</DynamicPageContent>
);
};

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

@@ -119,7 +119,7 @@ const UserPage: React.FC = () => {
}, [username]);
if (!profileData) return <LoadingScreen />;
console.log(isUser)
return (
<DynamicPageContent
className={`min-h-screen text-white flex flex-col`}