Merge branch 'main' of https://github.com/john-david3/cs3305-team11

2025-03-02 14:51:52 +00:00
parent 98f27c0478 284f223ef0
commit a5d27f9497
24 changed files with 516 additions and 233 deletions
--- a/frontend/src/components/Auth/ForgotPasswordForm.tsx
+++ b/frontend/src/components/Auth/ForgotPasswordForm.tsx
@@ -71,7 +71,7 @@ const ForgotPasswordForm: React.FC<SubmitProps> = ({ onSubmit }) => {
  return (
    <div className="mb-2">
      <div className="flex flex-col items-center p-[2.5rem]">
-        <h1 className="text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">
+        <h1 className="text-white text-[1.4em] font-[800] md:text-[1.5em] lg:text-[1.75em]">
          Forgot Password
        </h1>
        <div className="mt-10 bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full max-w-[10em] min-w-[14em] border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">
--- a/frontend/src/components/Auth/LoginForm.tsx
+++ b/frontend/src/components/Auth/LoginForm.tsx
@@ -154,7 +154,7 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
                onClick={onForgotPassword}
              >
                <ForgotIcon size={16} className="flex flex-row mr-1" />
-                <span className="text-[calc((1.5vw+1vh)/2)]">
+                <span className="text-[0.6rem] 2lg:text-[0.75rem]">
                  Forgot Password
                </span>
              </button>
--- a/frontend/src/components/Auth/OAuth.tsx
+++ b/frontend/src/components/Auth/OAuth.tsx
@@ -20,7 +20,7 @@ export default function GoogleLogin() {
            alt="Google logo"
            className="w-[2em] h-[2em] mr-2"
          />
-          <span className="flex-grow text-[calc((1.5vw+1.5vh)/2)]">
+          <span className="flex-grow text-[0.75rem] 2lg:text-[1rem]">
            Sign in with Google
          </span>
        </button>
--- a/frontend/src/components/Input/Button.tsx
+++ b/frontend/src/components/Input/Button.tsx
@@ -15,7 +15,7 @@ const Button: React.FC<ButtonProps> = ({
  return (
    <button
      type={type}
-      className={`${extraClasses} p-2 text-[1.5vw] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}
+      className={`${extraClasses} p-2 text-[clamp(1rem, 1.5vw, 1.25rem)] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}
      {...props}
    >
      {children}
--- a/frontend/src/components/Input/FollowUserButton.tsx
+++ b/frontend/src/components/Input/FollowUserButton.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+import { useFollow } from "../../hooks/useFollow";
+
+interface FollowUserButtonProps {
+    user: {
+        user_id: number;
+        username: string;
+        isFollowing: boolean;
+    };
+}
+
+const FollowUserButton: React.FC<FollowUserButtonProps> = ({ user }) => {
+    const [isFollowing, setIsFollowing] = useState<boolean>(user.isFollowing);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const { checkFollowStatus, followUser, unfollowUser } = useFollow();
+
+    useEffect(() => {
+        setIsFollowing(user.isFollowing);
+    }, [user.isFollowing]);
+
+    const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        setIsLoading(true);
+        try {
+            if (isFollowing) {
+                await unfollowUser(user.user_id);
+                setIsFollowing(false);
+            } else {
+                await followUser(user.user_id);
+                setIsFollowing(true);
+            }
+        } catch (error) {
+            console.error("Error toggling follow state:", error);
+        }
+        setIsLoading(false);
+    };
+
+    return (
+        <button
+            onClick={handleClick}
+            disabled={isLoading}
+            className={`px-4 py-2 text-sm rounded-md font-bold transition-all ${
+                isFollowing
+                    ? "bg-gray-700 hover:bg-red-600 text-white"
+                    : "bg-purple-600 hover:bg-purple-700 text-white"
+            }`}
+        >
+            {isFollowing ? "Unfollow" : "Follow"}
+        </button>
+    );
+};
+
+export default FollowUserButton;
--- a/frontend/src/components/Layout/ListItem.tsx
+++ b/frontend/src/components/Layout/ListItem.tsx
@@ -2,13 +2,14 @@ import React from "react";
 import { StreamType } from "../../types/StreamType";
 import { CategoryType } from "../../types/CategoryType";
 import { UserType } from "../../types/UserType";
+import { VodType } from "../../types/VodType";

 // Base props that all item types share
 interface BaseListItemProps {
  onItemClick?: () => void;
  extraClasses?: string;
 }
-
+  
 // Stream item component
 interface StreamListItemProps extends BaseListItemProps, Omit<StreamType, 'type'> {}

@@ -124,6 +125,52 @@ const UserListItem: React.FC<UserListItemProps> = ({
  );
 };

+// VODs item component
+interface VodListItemProps extends BaseListItemProps, Omit<VodType, "type"> {}
+
+const VodListItem: React.FC<VodListItemProps> = ({
+  title,
+  streamer,
+  datetime,
+  category,
+  length,
+  views,
+  thumbnail,
+  url,
+  onItemClick,
+  extraClasses = "",
+}) => {
+  return (
+    <div className="p-4">
+      <div
+        className={`${extraClasses} overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg cursor-pointer mx-auto hover:bg-purple-600 hover:scale-105 transition-all`}
+        onClick={() => window.open(url, "_blank")}
+      >
+        <div className="relative w-full aspect-video overflow-hidden rounded-t-lg">
+          {thumbnail ? (
+            <img
+              src={thumbnail}
+              alt={title}
+              className="absolute top-0 left-0 w-full h-full object-cover"
+            />
+          ) : (
+            <div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
+          )}
+        </div>
+        <div className="p-3">
+          <h3 className="font-semibold text-lg text-center truncate max-w-full">
+            {title}
+          </h3>
+          <p className="font-bold">{streamer}</p>
+          <p className="text-sm text-gray-300">{category}</p>
+          <p className="text-sm text-gray-300">{new Date(datetime).toLocaleDateString()} | {length} mins</p>
+          <p className="text-sm text-gray-300">{views} views</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 // Legacy wrapper component for backward compatibility
 export interface ListItemProps {
  type: "stream" | "category" | "user";
@@ -138,4 +185,4 @@ export interface ListItemProps {
  isLive?: boolean;
 }

-export { StreamListItem, CategoryListItem, UserListItem };
+export { StreamListItem, CategoryListItem, UserListItem, VodListItem };
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/frontend/src/components/Layout/ListRow.tsx
@@ -10,16 +10,17 @@ import React, {
 } from "react";
 import { useNavigate } from "react-router-dom";
 import "../../assets/styles/listRow.css";
-import { StreamListItem, CategoryListItem, UserListItem } from "./ListItem";
+import { StreamListItem, CategoryListItem, UserListItem, VodListItem } from "./ListItem";
 import { StreamType } from "../../types/StreamType";
 import { CategoryType } from "../../types/CategoryType";
 import { UserType } from "../../types/UserType";
+import { VodType } from "../../types/VodType"

-type ItemType = StreamType | CategoryType | UserType;
+type ItemType = StreamType | CategoryType | UserType | VodType;

 interface ListRowProps {
  variant?: "default" | "search";
-  type: "stream" | "category" | "user";
+  type: "stream" | "category" | "user" | "vod";
  title?: string;
  description?: string;
  items: ItemType[];
@@ -100,6 +101,9 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
  const isUserType = (item: ItemType): item is UserType => 
    item.type === "user";

+  const isVodType = (item: ItemType): item is VodType => 
+    item.type === "vod";
+
  return (
    <div
      className={`${extraClasses} flex relative rounded-[1.5rem] text-white transition-all ${
@@ -196,6 +200,24 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
                    />
                  );
                }
+                else if (type === "vod" && isVodType(item)) {
+                  return (
+                    <VodListItem
+                      key={`vod-${item.id}`}
+                      id={item.id}
+                      title={item.title}
+                      streamer={item.streamer}
+                      datetime={item.datetime}
+                      category={item.category}
+                      length={item.length}
+                      views={item.views}
+                      url={item.url}
+                      thumbnail={item.thumbnail}
+                      onItemClick={() => window.open(item.url, "_blank")}
+                      extraClasses={itemExtraClasses}
+                    />
+                  );
+                }
                return null;
              })}
            </>
--- a/frontend/src/hooks/useContent.ts
+++ b/frontend/src/hooks/useContent.ts
@@ -4,8 +4,28 @@ import { useAuth } from "../context/AuthContext";
 import { StreamType } from "../types/StreamType";
 import { CategoryType } from "../types/CategoryType";
 import { UserType } from "../types/UserType";
+import { VodType } from "../types/VodType"
 import { getCategoryThumbnail } from "../utils/thumbnailUtils";

+// Process API data into our VodType structure
+const processVodData = (data: any[]): VodType[] => {
+  
+  return data.map((vod) => ({
+    type: "vod",
+    id: vod.id,  // Ensure this matches API response
+    title: vod.title,
+    streamer: vod.streamer, // Ensure backend sends streamer name or ID
+    datetime: new Date(vod.datetime).toLocaleString(),
+    category: vod.category,
+    length: vod.length,
+    views: vod.views,
+    url: vod.url,
+    thumbnail: "../../images/category_thumbnails/abstract.webp",
+  }));
+};
+
+
+
 // Helper function to process API data into our consistent types
 const processStreamData = (data: any[]): StreamType[] => {
  return data.map((stream) => ({
@@ -20,6 +40,7 @@ const processStreamData = (data: any[]): StreamType[] => {
 };

 const processCategoryData = (data: any[]): CategoryType[] => {
+  console.log("Raw API VOD Data:", data); // Debugging
  return data.map((category) => ({
    type: "category",
    id: category.category_id,
@@ -115,9 +136,29 @@ export function useCategories(customUrl?: string): {
    [isLoggedIn, customUrl]
  );

+  console.log("Fetched Cat Data:", data);  // Debugging
+
+
  return { categories: data, isLoading, error };
 }

+export function useVods(customUrl?: string): { 
+  vods: VodType[]; 
+  isLoading: boolean; 
+  error: string | null 
+} {
+  const url = customUrl || "api/vods/all"; 
+  const { data, isLoading, error } = useFetchContent<VodType>(
+    url,
+    processVodData,
+    [customUrl]
+  );
+
+
+  return { vods: data, isLoading, error };
+}
+
+
 export function useUsers(customUrl?: string): { 
  users: UserType[]; 
  isLoading: boolean; 
--- a/frontend/src/pages/CategoryPage.tsx
+++ b/frontend/src/pages/CategoryPage.tsx
@@ -97,7 +97,7 @@ const CategoryPage: React.FC = () => {
        <ListRow
          ref={listRowRef}
          type="stream"
-          title={`${categoryName} Streams`}
+          title={`${categoryName}`}
          description={`Live streams in the ${categoryName} category`}
          items={streams}
          wrap={true}
--- a/frontend/src/pages/FollowedCategories.tsx
+++ b/frontend/src/pages/FollowedCategories.tsx
@@ -4,6 +4,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import { useCategoryFollow } from "../hooks/useCategoryFollow";
 import FollowButton from "../components/Input/FollowButton";
+import { useAuthModal } from "../hooks/useAuthModal";


 interface Category {
@@ -22,6 +23,7 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
    const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
    const { categoryName } = useParams<{ categoryName: string }>();
    const { checkCategoryFollowStatus, followCategory, unfollowCategory } = useCategoryFollow();
+    

    useEffect(() => {
        if (categoryName) checkCategoryFollowStatus(categoryName);
@@ -32,7 +34,7 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""

        const fetchFollowedCategories = async () => {
            try {
-                const response = await fetch("/api/categories/following");
+                const response = await fetch("/api/categories/your_categories");
                if (!response.ok) throw new Error("Failed to fetch followed categories");
                const data = await response.json();
                setFollowedCategories(data);
@@ -52,7 +54,7 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
                className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}
            >
                {/* Followed Categories */}
-                <div id="categories-followed" className="grid grid-cols-3 gap-4 p-4 w-full">
+                <div id="categories-followed" className="grid grid-cols-4 gap-4 p-4 w-full">
                    {followedCategories.map((category) => {
                        return (
                            <div
--- a/frontend/src/pages/Following.tsx
+++ b/frontend/src/pages/Following.tsx
@@ -1,35 +1,45 @@
 import React, { useEffect, useState } from "react";
 import { useAuth } from "../context/AuthContext";
-import { useSidebar } from "../context/SidebarContext";
-import { ToggleButton } from "../components/Input/Button";
-import { Sidebar as SidebarIcon } from "lucide-react";
-import { useNavigate } from "react-router-dom"; // Import useNavigate
-import { CategoryType } from "../types/CategoryType";
+import { useNavigate } from "react-router-dom";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
+import { useFollow } from "../hooks/useFollow";
+import { useAuthModal } from "../hooks/useAuthModal";
+import FollowUserButton from "../components/Input/FollowUserButton";

-// Define TypeScript interfaces
 interface Streamer {
  user_id: number;
  username: string;
 }

-interface FollowingProps {
+interface FollowingStreamerProps {
  extraClasses?: string;
 }

-const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
-  const { showSideBar, setShowSideBar } = useSidebar();
+const Following: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => {
  const navigate = useNavigate();
-  const { username, isLoggedIn } = useAuth();
+  const { isLoggedIn } = useAuth();
  const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
+  const [followingStatus, setFollowingStatus] = useState<{ [key: number]: boolean }>({}); // Store follow status for each streamer
+
+  const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
+    useFollow();

-  // Fetch followed streamers
  useEffect(() => {
    const fetchFollowedStreamers = async () => {
      try {
        const response = await fetch("/api/user/following");
        if (!response.ok) throw new Error("Failed to fetch followed streamers");
        const data = await response.json();
-        setFollowedStreamers(data.streamers || []);
+        setFollowedStreamers(data);
+
+        const updatedStatus: { [key: number]: boolean } = {};
+        for (const streamer of data || []) {
+          const status = await checkFollowStatus(streamer.username);
+          updatedStatus[streamer.user_id] = Boolean(status);
+        }
+        setFollowingStatus(updatedStatus);
+
+        console.log("Fetched Follow Status:", updatedStatus); // Log the status
      } catch (error) {
        console.error("Error fetching followed streamers:", error);
      }
@@ -40,103 +50,51 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
    }
  }, [isLoggedIn]);

-  // Handle sidebar toggle
-  const handleSideBar = () => {
-    setShowSideBar(!showSideBar);
+
+  const handleFollowToggle = async (userId: number) => {
+    const isCurrentlyFollowing = followingStatus[userId];
+
+    if (isCurrentlyFollowing) {
+      await unfollowUser(userId);
+    } else {
+      await followUser(userId);
+    }
+
+    // Update local state for this specific streamer
+    setFollowingStatus((prev) => ({
+      ...prev,
+      [userId]: !isCurrentlyFollowing, // Toggle based on previous state
+    }));
  };

  return (
-    <>
-      {/* Sidebar Toggle Button */}
-      <ToggleButton
-        onClick={handleSideBar}
-        extraClasses={`absolute group text-[1rem] top-[9vh] ${
-          showSideBar
-            ? "left-[16vw] duration-[0.5s]"
-            : "left-[20px] duration-[1s]"
-        } ease-in-out cursor-pointer z-[50]`}
-        toggled={showSideBar}
-      >
-        <SidebarIcon className="h-[2vw] w-[2vw]" />
-
-        {showSideBar && (
-          <small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
-            Press S
-          </small>
-        )}
-      </ToggleButton>
-
-      {/* Sidebar Container */}
+    <DynamicPageContent>
      <div
        id="sidebar"
-        className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
-        transition-all duration-500 ease-in-out ${
-          showSideBar ? "translate-x-0" : "-translate-x-full"
-        } ${extraClasses}`}
+        className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}
      >
-        {/* Profile Info */}
-        <div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
-          <img
-            src="/images/monkey.png"
-            alt="profile picture"
-            className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
-            onClick={() => navigate(`/user/${username}`)}
-          />
-          <div className="text-center flex flex-col items-center justify-center">
-            <h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
-              Logged in as
-            </h5>
-            <button
-              className="font-black text-[1.4rem] hover:underline"
-              onClick={() => navigate(`/user/${username}`)}
-            >
-              <div className="text-[var(--sideBar-profile-text)]">
-                {username}
-              </div>
-            </button>
-          </div>
-        </div>
-
-        {/* Following Section */}
        <div
-          id="following"
-          className="flex flex-col flex-grow justify-evenly p-4 gap-4"
-        >
-          <div
-            className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
-            onMouseEnter={(e) =>
-              (e.currentTarget.style.boxShadow = "var(--follow-shadow)")
-            }
-            onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
-          >
-            <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
-              Following
-            </h1>
-          </div>
-
-          {/* Streamers Followed */}
-          <div
-            id="streamers-followed"
-            className="flex flex-col flex-grow items-center"
-          >
-            <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
-              Streamers
-            </h2>
-            <div className="flex flex-col flex-grow justify-evenly w-full">
-              {followedStreamers.map((streamer) => (
-                <button
-                  key={`streamer-${streamer.username}`}
-                  className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
-                  onClick={() => navigate(`/user/${streamer.username}`)}
-                >
-                  {streamer.username}
-                </button>
-              ))}
+          id="followed-users"
+          className={`grid grid-cols-2 gap-4 p-4 w-full`}>
+          {followedStreamers.map((streamer: any) => (
+            <div
+              key={`streamer-${streamer.username}`}
+              className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 font-bold transition-colors"
+            /*onClick={() => navigate(`/user/${streamer.username}`)}*/
+            >
+              {streamer.username}
+              <FollowUserButton
+                user={{
+                  user_id: streamer.user_id,
+                  username: streamer.username,
+                  isFollowing: followingStatus[streamer.user_id] || true,
+                }}
+              />
            </div>
-          </div>
+          ))}
        </div>
      </div>
-    </>
+    </DynamicPageContent>
  );
 };

--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,30 +1,29 @@
 import React from "react";
 import ListRow from "../components/Layout/ListRow";
 import { useNavigate } from "react-router-dom";
-import { useStreams, useCategories } from "../hooks/useContent";
+import { useStreams, useCategories, useVods } from "../hooks/useContent";
 import Button from "../components/Input/Button";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import LoadingScreen from "../components/Layout/LoadingScreen";
 import Footer from "../components/Layout/Footer";

+
 interface HomePageProps {
  variant?: "default" | "personalised";
 }

+
 const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
  const { streams, isLoading: isLoadingStreams } = useStreams();
  const { categories, isLoading: isLoadingCategories } = useCategories();
+  const { vods, isLoading: isLoadingVods } = useVods();  // Fetch VODs
  const navigate = useNavigate();

-  const handleStreamClick = (streamerName: string) => {
-    window.location.href = `/${streamerName}`;
+  const handleVodClick = (vodUrl: string) => {
+    window.open(vodUrl, "_blank");  // Open VOD in new tab
  };

-  const handleCategoryClick = (categoryName: string) => {
-    navigate(`/category/${categoryName}`);
-  };
-
-  if (isLoadingStreams || isLoadingCategories)
+  if (isLoadingStreams || isLoadingCategories || isLoadingVods)
    return <LoadingScreen>Loading Content...</LoadingScreen>;

  return (
@@ -33,52 +32,47 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
      className="relative min-h-screen animate-moving_bg"
      contentClassName="pb-[12vh]"
    >
+      {/* Streams Section */}
      <ListRow
        type="stream"
-        title={
-          "Streams - Live Now" +
-          (variant === "personalised" ? " - Recommended" : "")
-        }
-        description={
-          variant === "personalised"
-            ? "We think you might like these streams - Streamers recommended for you"
-            : "Popular streamers that are currently live!"
-        }
+        title="Streams - Live Now"
+        description="Popular streamers that are currently live!"
        items={streams}
        wrap={false}
-        onItemClick={handleStreamClick}
+        onItemClick={(streamerName) => navigate(`/${streamerName}`)}
        extraClasses="bg-[var(--liveNow)]"
        itemExtraClasses="w-[20vw]"
      />

-      {/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}
+      {/* Categories Section */}
      <ListRow
        type="category"
-        title={
-          variant === "personalised"
-            ? "Followed Categories"
-            : "Trending Categories"
-        }
-        description={
-          variant === "personalised"
-            ? "Current streams from your followed categories"
-            : "Recently popular categories lately!"
-        }
+        title="Trending Categories"
+        description="Recently popular categories lately!"
        items={categories}
        wrap={false}
-        onItemClick={handleCategoryClick}
+        onItemClick={(categoryName) => navigate(`/category/${categoryName}`)}
        titleClickable={true}
        extraClasses="bg-[var(--recommend)]"
        itemExtraClasses="w-[20vw]"
      >
-        <Button
-          extraClasses="absolute right-10"
-          onClick={() => navigate("/categories")}
-        >
+        <Button extraClasses="absolute right-10" onClick={() => navigate("/categories")}>
          Show All
        </Button>
      </ListRow>
-      <Footer/>
+
+      {/* VODs Section */}
+      <ListRow
+        type="vod"  
+        title="Recent VODs"
+        description="Watch the latest recorded streams!"
+        items={vods} 
+        wrap={false}
+        onItemClick={handleVodClick}
+        extraClasses="bg-black/50"
+        itemExtraClasses="w-[20vw]"
+      />
+      <Footer />
    </DynamicPageContent>
  );
 };
--- a/frontend/src/pages/UserPage.tsx
+++ b/frontend/src/pages/UserPage.tsx
@@ -119,7 +119,7 @@ const UserPage: React.FC = () => {
  }, [username]);

  if (!profileData) return <LoadingScreen />;
-
+  console.log(isUser)
  return (
    <DynamicPageContent
      className={`min-h-screen text-white flex flex-col`}
--- a/frontend/src/types/VodType.ts
+++ b/frontend/src/types/VodType.ts
@@ -0,0 +1,12 @@
+export interface VodType {
+    type: "vod";
+    id: number;
+    title: string;
+    streamer: string;
+    datetime: string;
+    category: string;
+    length: number;
+    views: number;
+    url: string;
+    thumbnail: string;
+  }