ADD: VODS

frontend/src/App.tsx

@@ -16,6 +16,8 @@ import { Brightness } from "./context/BrightnessContext";
 import LoadingScreen from "./components/Layout/LoadingScreen";
 import Following from "./pages/Following";
 import UnsubscribePage from "./pages/UnsubscribePage";
+import Vods from "./pages/Vods";
+import VodPlayer from "./pages/VodPlayer";
 
 function App() {
 	const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -77,6 +79,8 @@ function App() {
 								<Route path="/results" element={<ResultsPage />}></Route>
 								<Route path="/404" element={<NotFoundPage />} />
 								<Route path="/user/:username/following" element={<Following />} />
+								<Route path="/user/:username/vods" element={<Vods />} />
+								<Route path="/stream/:username/vods/:vod_id" element={<VodPlayer />} />
 								<Route path="*" element={<Navigate to="/404" replace />} />
 							</Routes>
 						</BrowserRouter>

frontend/src/pages/UserPage.tsx

@@ -278,9 +278,8 @@ const UserPage: React.FC = () => {
 							onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
 							onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
 						>
-							<ul className="list-none">
-								<li className="text-[var(--follow-text)] whitespace-pre-wrap list-none">Streamers</li>
-							</ul>
+							<button onClick={() => handleNavigation(`/user/${username}/vods`)}>Categories</button>
+
 						</div>
 						<div
 							className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 

frontend/src/pages/VodPlayer.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+
+const VodPlayer: React.FC = () => {
+  const params = useParams<{ vod_id?: string; username?: string }>();
+  const vod_id = params.vod_id || "unknown";
+  const username = params.username || "unknown";
+
+  const videoUrl = `/vods/${username}/${vod_id}.mp4`;
+
+  return (
+    <div className="p-4 flex flex-col items-center">
+      <h1 className="text-2xl font-bold mb-4">Watching VOD {vod_id}</h1>
+      <video controls className="w-full max-w-4xl rounded-lg shadow-lg">
+        <source src={videoUrl} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  );
+};
+
+export default VodPlayer;

frontend/src/pages/Vods.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+import { useAuth } from "../context/AuthContext";
+import { useNavigate, useParams } from "react-router-dom";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
+
+interface Vod {
+  vod_id: number;
+  title: string;
+  datetime: string;
+  username: string;
+  category_name: string;
+  length: number;
+  views: number;
+}
+
+const Vods: React.FC = () => {
+  const navigate = useNavigate();
+  const { username } = useParams<{ username?: string }>();
+  const { isLoggedIn } = useAuth();
+  const [ownedVods, setOwnedVods] = useState<Vod[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!username) return;
+
+    const fetchVods = async () => {
+      try {
+        const response = await fetch(`/api/vods/${username}`);
+        if (!response.ok) throw new Error(`Failed to fetch VODs: ${response.statusText}`);
+
+        const data = await response.json();
+        setOwnedVods(data);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Error fetching VODs.";
+        setError(errorMessage);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchVods();
+  }, [username]);
+
+  if (loading) return <p className="text-center">Loading VODs...</p>;
+  if (error) return <p className="text-center text-red-500">{error}</p>;
+
+  return (
+    <DynamicPageContent>
+      <div className="p-4">
+        <h1 className="text-2xl font-bold mb-4">{username}'s VODs</h1>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {ownedVods.length === 0 ? (
+            <p className="col-span-full text-center">No VODs available.</p>
+          ) : (
+            ownedVods.map((vod) => {
+              const thumbnailUrl = `/stream/${username}/vods/${vod.vod_id}.png`;
+
+              return (
+                <div
+                  key={vod.vod_id}
+                  className="border rounded-lg p-4 bg-gray-800 text-white cursor-pointer hover:bg-gray-700 transition"
+                  onClick={() => navigate(`/stream/${username}/vods/${vod.vod_id}`)}
+                >
+                  {/* Thumbnail */}
+                  <img
+                    src={thumbnailUrl}
+                    alt={`Thumbnail for ${vod.title}`}
+                    className="w-full h-40 object-cover rounded-md mb-2"
+                    onError={(e) => {
+                      e.currentTarget.onerror = null;
+                      e.currentTarget.src = "/default-thumbnail.png";
+                    }}
+                  />
+
+                  {/* Video Info */}
+                  <h2 className="text-lg font-semibold">{vod.title}</h2>
+                  <p className="text-sm">📅 {new Date(vod.datetime).toLocaleString()}</p>
+                  <p className="text-sm">🎮 {vod.category_name}</p>
+                  <p className="text-sm">⏱ {Math.floor(vod.length / 60)} min</p>
+                  <p className="text-sm">👀 {vod.views} views</p>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </div>
+    </DynamicPageContent>
+  );
+};
+
+export default Vods;