dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

ADD: All Vods on Home Page

Browse Source 
ToDo:
Thumbnail in DB
Save user stream to Vod
This commit is contained in:
EvanLin3141
2025-02-28 19:52:01 +00:00
parent 077530b6e6
commit edb959506a
5 changed files with 153 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/components/Layout/ListItem.tsx
View File

@@ -2,6 +2,7 @@ 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 {
@@ -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 };

28
frontend/src/components/Layout/ListRow.tsx
View File

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

38
frontend/src/hooks/useContent.ts
View File

@@ -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;

61
frontend/src/pages/HomePage.tsx
View File

@@ -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,51 +33,46 @@ 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>
{/* 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>
);

12
frontend/src/types/VodType.ts Normal file
View File

@@ -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;
}