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

ADD: Navigation to Vods in Home Page

Browse Source
This commit is contained in:
EvanLin3141
2025-03-06 19:34:43 +00:00
parent 4a27f69776
commit db0d78419c
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/Layout/ListRow.tsx
View File

@@ -50,6 +50,12 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
const scrollAmount = window.innerWidth * 0.4; const scrollAmount = window.innerWidth * 0.4;
const navigate = useNavigate(); const navigate = useNavigate();
const handleVodClick = (item: VodType) => {
if (type === "vod" && "username" in item && "vod_id" in item) {
navigate(`/stream/${item.username}/vods/${item.vod_id}`); // ✅ Directly navigate
}
};
const addMoreItems = (newItems: ItemType[]) => { const addMoreItems = (newItems: ItemType[]) => {
setCurrentItems((prevItems) => [...prevItems, ...newItems]); setCurrentItems((prevItems) => [...prevItems, ...newItems]);
}; };
@@ -180,7 +186,7 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
length={item.length} length={item.length}
views={item.views} views={item.views}
thumbnail={item.thumbnail} thumbnail={item.thumbnail}
onItemClick={() => onItemClick(item.vod_id.toString())} onItemClick={() => handleVodClick(item)}
extraClasses={itemExtraClasses} extraClasses={itemExtraClasses}
variant={variant} variant={variant}
/> />

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

@@ -9,21 +9,19 @@ import Footer from "../components/Layout/Footer";
import { useAuth } from "../context/AuthContext"; import { useAuth } from "../context/AuthContext";
const HomePage: React.FC = () => { const HomePage: React.FC = () => {
const { username } = useAuth();
const { streams, isLoading: isLoadingStreams } = useStreams(); const { streams, isLoading: isLoadingStreams } = useStreams();
const { categories, isLoading: isLoadingCategories } = useCategories(); const { categories, isLoading: isLoadingCategories } = useCategories();
const { vods, isLoading: isLoadingVods } = useVods(); const { vods, isLoading: isLoadingVods } = useVods();
const navigate = useNavigate(); const navigate = useNavigate();
const handleVodClick = (vodUrl: string) => {
window.open(vodUrl, "_blank");
};
if (isLoadingStreams || isLoadingCategories || isLoadingVods) return <LoadingScreen>Loading Content...</LoadingScreen>; if (isLoadingStreams || isLoadingCategories || isLoadingVods) return <LoadingScreen>Loading Content...</LoadingScreen>;
const thumbnails = vods.map((vod) => ({ const thumbnails = vods.map((vod) => ({
...vod, ...vod,
thumbnail: `/vods/${vod.username}/${vod.vod_id}.png`, thumbnail: `/vods/${vod.username}/${vod.vod_id}.png`,
video: `/vods/${vod.username}/${vod.vod_id}.mp4`,
})); }));
return ( return (
@@ -64,7 +62,7 @@ const HomePage: React.FC = () => {
description="Watch the latest recorded streams!" description="Watch the latest recorded streams!"
items={thumbnails} items={thumbnails}
wrap={false} wrap={false}
onItemClick={handleVodClick} onItemClick={() => null}
extraClasses="bg-black/50" extraClasses="bg-black/50"
itemExtraClasses="w-[20vw]" itemExtraClasses="w-[20vw]"
/> />