MAJOR UPDATE/FEAT: Overhaul of DashboardPage to include VODs;

REFACTOR: General formatting; UPDATE: Shrink Logo upon opening sidebar on certain pages
2025-03-02 14:45:37 +00:00
parent 5a49bc8e7b
commit 0a4bbc73e5
15 changed files with 1333 additions and 1431 deletions
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from "react";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
+import { useAuth } from "../context/AuthContext";
+import StreamDashboard from "../components/Stream/StreamDashboard";
+import { CircleDotIcon as RecordIcon, SquarePlayIcon as PlaybackIcon, Undo2Icon } from "lucide-react";
+import VodsDashboard from "../components/Stream/VodsDashboard";
+import { useVods } from "../hooks/useContent";
+
+interface DashboardPageProps {
+	tab?: "dashboard" | "stream" | "vod";
+}
+
+const DashboardPage: React.FC<DashboardPageProps> = ({ tab = "dashboard" }) => {
+	const { username, isLive, userId, setIsLive } = useAuth();
+	const { vods } = useVods(`/api/vods/${username}`);
+	const [selectedTab, setSelectedTab] = useState<"dashboard" | "stream" | "vod">(tab);
+
+	const colors = {
+		stream: "red-500",
+		vod: "green-500",
+		dashboard: "white",
+	};
+
+	useEffect(() => {
+		if (username) {
+			checkUserStatus();
+		}
+	}, [username]);
+
+	const checkUserStatus = async () => {
+		if (!username) return;
+
+		try {
+			const response = await fetch(`/api/user/${username}/status`);
+			const data = await response.json();
+			setIsLive(data.is_live);
+		} catch (error) {
+			console.error("Error checking user status:", error);
+		}
+	};
+
+	return (
+		<DynamicPageContent className="flex flex-col min-h-screen bg-gradient-radial from-purple-600 via-blue-900 to-black">
+			<div id="dashboard" className="flex flex-col justify-evenly items-center h-full text-white">
+				<div className="flex w-full px-[10vw]">
+					{selectedTab != "dashboard" && (
+						<Undo2Icon
+							size={50}
+							className={`absolute cursor-pointer hover:text-${colors[selectedTab]} transition-all`}
+							onClick={() => setSelectedTab("dashboard")}
+						/>
+					)}
+					<h1 className="text-5xl w-full cursor-default text-center">
+						Welcome <em className="text-[--bg-color] font-black">{username}</em>
+					</h1>
+				</div>
+				<h2 className={`text-${colors[selectedTab]} cursor-default text-4xl text-center font-bold bg-black/30 rounded-full px-4 py-2 my-4`}>
+					{selectedTab === "stream" ? "Streaming" : selectedTab === "vod" ? "VODs" : "Dashboard"}
+				</h2>
+
+				{selectedTab == "dashboard" ? (
+					<div id="tab-select" className="flex justify-evenly items-center h-full w-full text-[calc((4vh+4vw)/2)] font-bold">
+						<div
+							id="stream-tab"
+							className={`relative ${
+								isLive ? "bg-[#ff0000] hover:bg-[#ff0000]/80" : "bg-black/30 hover:bg-black/40"
+							} flex flex-col justify-evenly items-center text-center w-[50vh] h-[50vh] rounded-xl cursor-pointer hover:scale-105 transition-all bg-`}
+							onClick={() => setSelectedTab("stream")}
+						>
+							{isLive && (
+								<div className="absolute -bottom-5 left-1/2 transform -translate-x-1/2 bg-white text-[#ff0000] text-[2rem] font-black tracking-widest py-1 sm:px-5 px-4 z-30 flex items-center justify-center rounded-tr-xl rounded-bl-xl rounded-tl-xl rounded-br-xl">
+									LIVE
+								</div>
+							)}
+							<RecordIcon color={isLive ? "white" : "red"} size={100} />
+							<h1>Streaming</h1>
+						</div>
+						<div
+							id="vod-tab"
+							className="relative flex flex-col justify-evenly items-center bg-black/30 hover:bg-black/40 text-white w-[50vh] h-[50vh] rounded-xl cursor-pointer hover:scale-105 transition-all"
+							onClick={() => vods.length > 0 && setSelectedTab("vod")}
+						>
+							<PlaybackIcon size={100} />
+							<h1 className="text-white">VODs</h1>
+							<h3 className={`${vods.length > 0 ? "text-white" : "text-gray-600"} absolute bottom-5 text-sm`}>
+								{vods.length} VOD{vods.length != 1 && "s"} available
+							</h3>
+						</div>
+					</div>
+				) : selectedTab === "stream" && username && userId ? (
+					<StreamDashboard username={username} userId={userId} isLive={isLive} />
+				) : (
+					<VodsDashboard vods={vods} />
+				)}
+			</div>
+		</DynamicPageContent>
+	);
+};
+
+export default DashboardPage;