ADD: All Vods on Home Page

ToDo:
Thumbnail in DB
Save user stream to Vod

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;
               })}
             </>