FIX: Thumbnails in VodsDashboard

frontend/src/components/Stream/VodsDashboard.tsx

@@ -1,16 +1,27 @@
 import React from "react";
 import ListRow from "../Layout/ListRow";
 import { VodType } from "../../types/VodType";
+import { useNavigate } from "react-router-dom";
 
 interface VodsDashboardProps {
   vods: VodType[];
 }
 
 const VodsDashboard: React.FC<VodsDashboardProps> = ({ vods }) => {
-	const handleVodClick = (vodUrl: string) => {
+  const navigate = useNavigate();
-		window.open(vodUrl, "_blank");
+
+  const handleVodClick = (vodId: string) => {
+    if (vods.length > 0) {
+      navigate(`/stream/${vods[0].username}/vods/${vodId}`);
+    }
   };
 
+  // Ensure each VOD has a hardcoded thumbnail path
+  const thumbnails = vods.map((vod) => ({
+    ...vod,
+    thumbnail: `/vods/${vod.username}/${vod.vod_id}.png`,
+  }));
+
   return (
     <div className="w-full">
       <h2 className="text-3xl font-bold text-white mb-6">Past Broadcasts</h2>
@@ -23,7 +34,7 @@ const VodsDashboard: React.FC<VodsDashboardProps> = ({ vods }) => {
         <ListRow
           type="vod"
           variant="vodDashboard"
-					items={vods}
+          items={thumbnails} // Use modified VODs with hardcoded thumbnail
           wrap={false}
           onItemClick={handleVodClick}
           extraClasses="bg-black/50"

frontend/src/pages/Vods.tsx

@@ -50,7 +50,7 @@ const Vods: React.FC = () => {
       <div className="mt-[3em] w-screen flex justify-center">
         <div
           id="vods-container"
-          className="w-[96vw] bg-slate-50/35 rounded-lg p-4 overflow-x-auto whitespace-nowrap scrollbar-hide"
+          className="w-[96vw] bg-slate-50/35 rounded-lg p-4 overflow-x-auto whitespace-nowrap scrollbar-hide pb-7"
         >
           <h1 className="text-2xl font-bold text-center mb-4">{username}'s VODs</h1>