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

UPDATE/REFACTOR: Change how followed content is obtained for Sidebar

Browse Source
This commit is contained in:
Chris-1010
2025-03-01 00:35:34 +00:00
parent 3dbcf3d5c0
commit 3857d8d767
4 changed files with 98 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,74 +7,63 @@ import DynamicPageContent from "../components/Layout/DynamicPageContent";
import LoadingScreen from "../components/Layout/LoadingScreen";
import Footer from "../components/Layout/Footer";
const HomePage: React.FC = () => {
const { streams, isLoading: isLoadingStreams } = useStreams();
const { categories, isLoading: isLoadingCategories } = useCategories();
const { vods, isLoading: isLoadingVods } = useVods();
const navigate = useNavigate();
interface HomePageProps {
variant?: "default" | "personalised";
}
const handleVodClick = (vodUrl: string) => {
window.open(vodUrl, "_blank");
};
if (isLoadingStreams || isLoadingCategories || isLoadingVods) return <LoadingScreen>Loading Content...</LoadingScreen>;
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();
return (
<DynamicPageContent navbarVariant="home" className="relative min-h-screen animate-moving_bg" contentClassName="pb-[12vh]">
{/* Streams Section */}
<ListRow
type="stream"
title="Streams - Live Now"
description="Popular streamers that are currently live!"
items={streams}
wrap={false}
onItemClick={(streamerName) => navigate(`/${streamerName}`)}
extraClasses="bg-[var(--liveNow)]"
itemExtraClasses="w-[20vw]"
/>
const handleVodClick = (vodUrl: string) => {
window.open(vodUrl, "_blank"); // Open VOD in new tab
};
{/* Categories Section */}
<ListRow
type="category"
title="Trending Categories"
description="Recently popular categories lately!"
items={categories}
wrap={false}
onItemClick={(categoryName) => navigate(`/category/${categoryName}`)}
titleClickable={true}
extraClasses="bg-[var(--recommend)]"
itemExtraClasses="w-[20vw]"
>
<Button extraClasses="absolute right-10" onClick={() => navigate("/categories")}>
Show All
</Button>
</ListRow>
if (isLoadingStreams || isLoadingCategories || isLoadingVods)
return <LoadingScreen>Loading Content...</LoadingScreen>;
return (
<DynamicPageContent
navbarVariant="home"
className="relative min-h-screen animate-moving_bg"
contentClassName="pb-[12vh]"
>
{/* Streams Section */}
<ListRow
type="stream"
title="Streams - Live Now"
description="Popular streamers that are currently live!"
items={streams}
wrap={false}
onItemClick={(streamerName) => navigate(`/${streamerName}`)}
extraClasses="bg-[var(--liveNow)]"
itemExtraClasses="w-[20vw]"
/>
{/* Categories Section */}
<ListRow
type="category"
title="Trending Categories"
description="Recently popular categories lately!"
items={categories}
wrap={false}
onItemClick={(categoryName) => navigate(`/category/${categoryName}`)}
titleClickable={true}
extraClasses="bg-[var(--recommend)]"
itemExtraClasses="w-[20vw]"
>
<Button extraClasses="absolute right-10" onClick={() => navigate("/categories")}>
Show All
</Button>
</ListRow>
{/* 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>
);
{/* 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>
);
};
export default HomePage;