From edb959506a35bf8515bd911b6512351f41e592a1 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <evan.lin.3.141@gmail.com>
Date: Fri, 28 Feb 2025 19:52:01 +0000
Subject: [PATCH] ADD: All Vods on Home Page

ToDo:
Thumbnail in DB
Save user stream to Vod
---
 frontend/src/components/Layout/ListItem.tsx | 51 ++++++++++++++++-
 frontend/src/components/Layout/ListRow.tsx  | 28 ++++++++-
 frontend/src/hooks/useContent.ts            | 38 +++++++++++++
 frontend/src/pages/HomePage.tsx             | 63 ++++++++++-----------
 frontend/src/types/VodType.ts               | 12 ++++
 5 files changed, 153 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/types/VodType.ts

diff --git a/frontend/src/components/Layout/ListItem.tsx b/frontend/src/components/Layout/ListItem.tsx
index a5a7cf8..dca0440 100644
--- 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 };
\ No newline at end of file
+export { StreamListItem, CategoryListItem, UserListItem, VodListItem };
\ No newline at end of file
diff --git a/frontend/src/components/Layout/ListRow.tsx b/frontend/src/components/Layout/ListRow.tsx
index f61293a..0f7af82 100644
--- 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;
               })}
             </>
diff --git a/frontend/src/hooks/useContent.ts b/frontend/src/hooks/useContent.ts
index 5e99aaf..d705885 100644
--- 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[] => {
+  console.log("Raw API VOD Data:", data); // Debugging
+  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) => ({
@@ -118,6 +138,24 @@ export function useCategories(customUrl?: string): {
   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]
+  );
+
+  console.log("Fetched VODs Data:", data);  // Debugging
+
+  return { vods: data, isLoading, error };
+}
+
+
 export function useUsers(customUrl?: string): { 
   users: UserType[]; 
   isLoading: boolean; 
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 8497eec..5b79a56 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -6,25 +6,25 @@ import Button from "../components/Input/Button";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import LoadingScreen from "../components/Layout/LoadingScreen";
 import Footer from "../components/Layout/Footer";
+import { useVods } from "../hooks/useContent";  // Import useVods
+
 
 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 +33,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>
   );
 };
diff --git a/frontend/src/types/VodType.ts b/frontend/src/types/VodType.ts
new file mode 100644
index 0000000..32a3141
--- /dev/null
+++ 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;
+  }
\ No newline at end of file