555aedffcb
REFACTOR: Rename `Vods` & `Following` to `VodsPage` & `FollowingPage` and improve structure; UPDATE: Change default profile picture; REFACTOR: Remove VOD testing data; UPDATE: Change `VideoPlayer` atrributes;
83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
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 } = 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",
|
|
};
|
|
|
|
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;
|