ADD: Navigation to Vods in Home Page

frontend/src/components/Layout/ListRow.tsx

@@ -50,6 +50,12 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
 	const scrollAmount = window.innerWidth * 0.4;
 	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[]) => {
 		setCurrentItems((prevItems) => [...prevItems, ...newItems]);
 	};
@@ -180,7 +186,7 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
 											length={item.length}
 											views={item.views}
 											thumbnail={item.thumbnail}
-											onItemClick={() => onItemClick(item.vod_id.toString())}
+											onItemClick={() => handleVodClick(item)}
 											extraClasses={itemExtraClasses}
 											variant={variant}
 										/>

frontend/src/pages/HomePage.tsx

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