diff --git a/frontend/src/components/Layout/ListRow.tsx b/frontend/src/components/Layout/ListRow.tsx index e2c532a..69ac5e6 100644 --- a/frontend/src/components/Layout/ListRow.tsx +++ b/frontend/src/components/Layout/ListRow.tsx @@ -50,6 +50,12 @@ const ListRow = forwardRef((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((props, ref) => { length={item.length} views={item.views} thumbnail={item.thumbnail} - onItemClick={() => onItemClick(item.vod_id.toString())} + onItemClick={() => handleVodClick(item)} extraClasses={itemExtraClasses} variant={variant} /> diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index 3f0857a..cd2e4c2 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/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 Loading Content...; 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]" />