81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import React from "react";
|
|
import ListRow from "../components/Layout/ListRow";
|
|
import { useNavigate } from "react-router-dom";
|
|
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 handleVodClick = (vodUrl: string) => {
|
|
window.open(vodUrl, "_blank"); // Open VOD in new tab
|
|
};
|
|
|
|
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>
|
|
);
|
|
};
|
|
|
|
export default HomePage;
|