MAJOR UPDATE/FEAT: Overhaul of DashboardPage to include VODs;
REFACTOR: General formatting; UPDATE: Shrink Logo upon opening sidebar on certain pages
This commit is contained in:
Chris-1010
@@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import Navbar from "../Navigation/Navbar";
|
||||
import { useSidebar } from "../../context/SidebarContext";
|
||||
import Footer from "./Footer";
|
||||
|
||||
interface DynamicPageContentProps extends React.HTMLProps<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
@@ -28,7 +27,7 @@ const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
|
||||
<Navbar variant={navbarVariant} />
|
||||
<div
|
||||
id="content"
|
||||
className={`min-w-[850px] ${
|
||||
className={`flex-grow min-w-[850px] ${
|
||||
showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]"
|
||||
} items-start transition-all duration-[500ms] ease-in-out ${contentClassName}`}
|
||||
>
|
||||
|
||||
@@ -3,186 +3,164 @@ import { StreamType } from "../../types/StreamType";
|
||||
import { CategoryType } from "../../types/CategoryType";
|
||||
import { UserType } from "../../types/UserType";
|
||||
import { VodType } from "../../types/VodType";
|
||||
import { DownloadIcon, UploadIcon } from "lucide-react";
|
||||
|
||||
// Base props that all item types share
|
||||
interface BaseListItemProps {
|
||||
onItemClick?: () => void;
|
||||
extraClasses?: string;
|
||||
onItemClick?: () => void;
|
||||
extraClasses?: string;
|
||||
}
|
||||
|
||||
|
||||
// Stream item component
|
||||
interface StreamListItemProps extends BaseListItemProps, Omit<StreamType, 'type'> {}
|
||||
interface StreamListItemProps extends BaseListItemProps, Omit<StreamType, "type"> {}
|
||||
|
||||
const StreamListItem: React.FC<StreamListItemProps> = ({
|
||||
title,
|
||||
username,
|
||||
streamCategory,
|
||||
viewers,
|
||||
thumbnail,
|
||||
onItemClick,
|
||||
extraClasses = "",
|
||||
title,
|
||||
username,
|
||||
streamCategory,
|
||||
viewers,
|
||||
thumbnail,
|
||||
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={onItemClick}
|
||||
>
|
||||
<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">{username}</p>
|
||||
<p className="text-sm text-gray-300">{streamCategory}</p>
|
||||
<p className="text-sm text-gray-300">{viewers} viewers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
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={onItemClick}
|
||||
>
|
||||
<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">{username}</p>
|
||||
<p className="text-sm text-gray-300">{streamCategory}</p>
|
||||
<p className="text-sm text-gray-300">{viewers} viewers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Category item component
|
||||
interface CategoryListItemProps extends BaseListItemProps, Omit<CategoryType, 'type'> {}
|
||||
interface CategoryListItemProps extends BaseListItemProps, Omit<CategoryType, "type"> {}
|
||||
|
||||
const CategoryListItem: React.FC<CategoryListItemProps> = ({
|
||||
title,
|
||||
viewers,
|
||||
thumbnail,
|
||||
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={onItemClick}
|
||||
>
|
||||
<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="text-sm text-gray-300">{viewers} viewers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const CategoryListItem: React.FC<CategoryListItemProps> = ({ title, viewers, thumbnail, 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={onItemClick}
|
||||
>
|
||||
<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="text-sm text-gray-300">{viewers} viewers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// User item component
|
||||
interface UserListItemProps extends BaseListItemProps, Omit<UserType, 'type'> {}
|
||||
interface UserListItemProps extends BaseListItemProps, Omit<UserType, "type"> {}
|
||||
|
||||
const UserListItem: React.FC<UserListItemProps> = ({
|
||||
title,
|
||||
username,
|
||||
isLive,
|
||||
onItemClick,
|
||||
extraClasses = "",
|
||||
}) => {
|
||||
return (
|
||||
<div className="p-4 pb-10">
|
||||
<div
|
||||
className={`group relative w-fit flex flex-col bg-purple-900 rounded-tl-xl rounded-xl min-h-[calc((20vw+20vh)/3)] max-w-[calc((27vw+27vh)/2)] justify-end items-center cursor-pointer mx-auto hover:bg-purple-600 hover:scale-105 z-50 transition-all ${extraClasses}`}
|
||||
onClick={onItemClick}
|
||||
>
|
||||
<img
|
||||
const UserListItem: React.FC<UserListItemProps> = ({ title, username, isLive, onItemClick, extraClasses = "" }) => {
|
||||
return (
|
||||
<div className="p-4 pb-10">
|
||||
<div
|
||||
className={`group relative w-fit flex flex-col bg-purple-900 rounded-tl-xl rounded-xl min-h-[calc((20vw+20vh)/3)] max-w-[calc((27vw+27vh)/2)] justify-end items-center cursor-pointer mx-auto hover:bg-purple-600 hover:scale-105 z-50 transition-all ${extraClasses}`}
|
||||
onClick={onItemClick}
|
||||
>
|
||||
<img
|
||||
src="/images/monkey.png"
|
||||
alt={`user ${username}`}
|
||||
className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
|
||||
/>
|
||||
<button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">
|
||||
{title}
|
||||
</button>
|
||||
alt={`user ${username}`}
|
||||
className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
|
||||
/>
|
||||
<button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">{title}</button>
|
||||
|
||||
{isLive && (
|
||||
<p className="absolute font-black bottom-5 opacity-0 group-hover:translate-y-full group-hover:opacity-100 group-hover:-bottom-1 transition-all">
|
||||
Currently Live!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{isLive && (
|
||||
<p className="absolute font-black bottom-5 opacity-0 group-hover:translate-y-full group-hover:opacity-100 group-hover:-bottom-1 transition-all">
|
||||
Currently Live!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 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";
|
||||
id: number;
|
||||
title: string;
|
||||
username?: string;
|
||||
streamCategory?: string;
|
||||
viewers: number;
|
||||
thumbnail?: string;
|
||||
onItemClick?: () => void;
|
||||
extraClasses?: string;
|
||||
isLive?: boolean;
|
||||
interface VodListItemProps extends BaseListItemProps, Omit<VodType, "type"> {
|
||||
variant?: string;
|
||||
}
|
||||
|
||||
export { StreamListItem, CategoryListItem, UserListItem, VodListItem };
|
||||
const VodListItem: React.FC<VodListItemProps> = ({
|
||||
title,
|
||||
username,
|
||||
category_name,
|
||||
views,
|
||||
length,
|
||||
datetime,
|
||||
thumbnail,
|
||||
onItemClick,
|
||||
extraClasses = "",
|
||||
variant,
|
||||
}) => {
|
||||
return (
|
||||
<div className="p-4">
|
||||
<div
|
||||
className={`${extraClasses} overflow-hidden flex-shrink-0 flex flex-col bg-gray-900 rounded-lg cursor-pointer mx-auto hover:bg-gray-800 hover:scale-105 transition-all`}
|
||||
onClick={onItemClick}
|
||||
>
|
||||
<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" />
|
||||
|
||||
{/* Duration badge */}
|
||||
<div className="absolute bottom-2 right-2 bg-black/80 text-white px-2 py-1 text-xs rounded">{length}</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<h3 className="font-semibold text-lg text-white truncate max-w-full">{title}</h3>
|
||||
<p className="text-sm text-gray-300">{username}</p>
|
||||
<p className="text-sm text-gray-400">{category_name}</p>
|
||||
<div className="flex justify-between items-center mt-2">
|
||||
<p className="text-xs text-gray-500">{datetime}</p>
|
||||
<p className="text-xs text-gray-500">{views} views</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{variant === "vodDashboard" && (
|
||||
<div className="flex justify-evenly items-stretch rounded-b-lg">
|
||||
<button
|
||||
className="flex justify-around w-full h-full bg-black/50 hover:bg-black/80 p-2 mx-1 font-semibold rounded-full border border-transparent hover:border-white"
|
||||
onClick={() => console.log("Publish")}
|
||||
>
|
||||
<UploadIcon />
|
||||
Publish
|
||||
</button>
|
||||
<button
|
||||
className="flex justify-around w-full h-full bg-black/50 hover:bg-black/80 p-2 mx-1 font-semibold rounded-full border border-transparent hover:border-white"
|
||||
onClick={() => console.log("Download")}
|
||||
>
|
||||
<DownloadIcon />
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { StreamListItem, CategoryListItem, UserListItem, VodListItem };
|
||||
|
||||
@@ -1,232 +1,201 @@
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ArrowRightIcon,
|
||||
} from "lucide-react";
|
||||
import React, {
|
||||
forwardRef,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
|
||||
import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import "../../assets/styles/listRow.css";
|
||||
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"
|
||||
import { VodType } from "../../types/VodType";
|
||||
|
||||
type ItemType = StreamType | CategoryType | UserType | VodType;
|
||||
|
||||
interface ListRowProps {
|
||||
variant?: "default" | "search";
|
||||
type: "stream" | "category" | "user" | "vod";
|
||||
title?: string;
|
||||
description?: string;
|
||||
items: ItemType[];
|
||||
wrap?: boolean;
|
||||
onItemClick: (itemName: string) => void;
|
||||
titleClickable?: boolean;
|
||||
extraClasses?: string;
|
||||
itemExtraClasses?: string;
|
||||
amountForScroll?: number;
|
||||
children?: React.ReactNode;
|
||||
variant?: "default" | "search" | "vodDashboard";
|
||||
type: "stream" | "category" | "user" | "vod";
|
||||
title?: string;
|
||||
description?: string;
|
||||
items: ItemType[];
|
||||
wrap?: boolean;
|
||||
onItemClick: (itemName: string) => void;
|
||||
titleClickable?: boolean;
|
||||
extraClasses?: string;
|
||||
itemExtraClasses?: string;
|
||||
amountForScroll?: number;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
interface ListRowRef {
|
||||
addMoreItems: (newItems: ItemType[]) => void;
|
||||
addMoreItems: (newItems: ItemType[]) => void;
|
||||
}
|
||||
|
||||
const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
|
||||
const {
|
||||
variant = "default",
|
||||
type,
|
||||
title = "",
|
||||
description = "",
|
||||
items,
|
||||
onItemClick,
|
||||
titleClickable = false,
|
||||
wrap = false,
|
||||
extraClasses = "",
|
||||
itemExtraClasses = "",
|
||||
amountForScroll = 4,
|
||||
children,
|
||||
} = props;
|
||||
|
||||
const [currentItems, setCurrentItems] = useState<ItemType[]>(items);
|
||||
const slider = useRef<HTMLDivElement>(null);
|
||||
const scrollAmount = window.innerWidth * 0.3;
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
variant = "default",
|
||||
type,
|
||||
title = "",
|
||||
description = "",
|
||||
items,
|
||||
onItemClick,
|
||||
titleClickable = false,
|
||||
wrap = false,
|
||||
extraClasses = "",
|
||||
itemExtraClasses = "",
|
||||
amountForScroll = 4,
|
||||
children,
|
||||
} = props;
|
||||
|
||||
const addMoreItems = (newItems: ItemType[]) => {
|
||||
setCurrentItems((prevItems) => [...prevItems, ...newItems]);
|
||||
};
|
||||
const [currentItems, setCurrentItems] = useState<ItemType[]>(items);
|
||||
const slider = useRef<HTMLDivElement>(null);
|
||||
const scrollAmount = window.innerWidth * 0.3;
|
||||
const navigate = useNavigate();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
addMoreItems,
|
||||
}));
|
||||
const addMoreItems = (newItems: ItemType[]) => {
|
||||
setCurrentItems((prevItems) => [...prevItems, ...newItems]);
|
||||
};
|
||||
|
||||
const slideRight = () => {
|
||||
if (!wrap && slider.current) {
|
||||
slider.current.scrollBy({ left: +scrollAmount, behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
useImperativeHandle(ref, () => ({
|
||||
addMoreItems,
|
||||
}));
|
||||
|
||||
const slideLeft = () => {
|
||||
if (!wrap && slider.current) {
|
||||
slider.current.scrollBy({ left: -scrollAmount, behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
const slideRight = () => {
|
||||
if (!wrap && slider.current) {
|
||||
slider.current.scrollBy({ left: +scrollAmount, behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleTitleClick = () => {
|
||||
switch (type) {
|
||||
case "stream":
|
||||
break;
|
||||
case "category":
|
||||
navigate("/categories");
|
||||
break;
|
||||
case "user":
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
const slideLeft = () => {
|
||||
if (!wrap && slider.current) {
|
||||
slider.current.scrollBy({ left: -scrollAmount, behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
|
||||
const isStreamType = (item: ItemType): item is StreamType =>
|
||||
item.type === "stream";
|
||||
|
||||
const isCategoryType = (item: ItemType): item is CategoryType =>
|
||||
item.type === "category";
|
||||
|
||||
const isUserType = (item: ItemType): item is UserType =>
|
||||
item.type === "user";
|
||||
const handleTitleClick = () => {
|
||||
switch (type) {
|
||||
case "stream":
|
||||
break;
|
||||
case "category":
|
||||
navigate("/categories");
|
||||
break;
|
||||
case "user":
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const isVodType = (item: ItemType): item is VodType =>
|
||||
item.type === "vod";
|
||||
const isStreamType = (item: ItemType): item is StreamType => item.type === "stream";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${extraClasses} flex relative rounded-[1.5rem] text-white transition-all ${
|
||||
variant === "search"
|
||||
? "items-center"
|
||||
: "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
|
||||
}`}
|
||||
>
|
||||
{/* List Details */}
|
||||
<div
|
||||
className={`text-center ${
|
||||
variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""
|
||||
}`}
|
||||
>
|
||||
<h2
|
||||
className={`${
|
||||
titleClickable
|
||||
? "cursor-pointer hover:underline"
|
||||
: "cursor-default"
|
||||
} text-2xl font-bold`}
|
||||
onClick={titleClickable ? handleTitleClick : undefined}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
const isCategoryType = (item: ItemType): item is CategoryType => item.type === "category";
|
||||
|
||||
{/* List Items */}
|
||||
<div className="relative overflow-hidden flex flex-grow items-center z-0">
|
||||
{!wrap && currentItems.length > amountForScroll && (
|
||||
<>
|
||||
<ArrowLeftIcon
|
||||
onClick={slideLeft}
|
||||
size={30}
|
||||
className="absolute left-0 cursor-pointer z-[999]"
|
||||
/>
|
||||
<ArrowRightIcon
|
||||
onClick={slideRight}
|
||||
size={30}
|
||||
className="absolute right-0 cursor-pointer z-[999]"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
const isUserType = (item: ItemType): item is UserType => item.type === "user";
|
||||
|
||||
<div
|
||||
ref={slider}
|
||||
className={`flex ${
|
||||
wrap ? "flex-wrap justify-between" : "overflow-x-scroll whitespace-nowrap"
|
||||
} max-w-[95%] items-center w-full mx-auto scroll-smooth scrollbar-hide`}
|
||||
>
|
||||
{currentItems.length === 0 ? (
|
||||
<h1 className="mx-auto">Nothing Found</h1>
|
||||
) : (
|
||||
<>
|
||||
{currentItems.map((item) => {
|
||||
if (type === "stream" && isStreamType(item)) {
|
||||
return (
|
||||
<StreamListItem
|
||||
key={`stream-${item.id}`}
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
username={item.username}
|
||||
streamCategory={item.streamCategory}
|
||||
viewers={item.viewers}
|
||||
thumbnail={item.thumbnail}
|
||||
onItemClick={() => onItemClick(item.username)}
|
||||
extraClasses={itemExtraClasses}
|
||||
/>
|
||||
);
|
||||
} else if (type === "category" && isCategoryType(item)) {
|
||||
return (
|
||||
<CategoryListItem
|
||||
key={`category-${item.id}`}
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
viewers={item.viewers}
|
||||
thumbnail={item.thumbnail}
|
||||
onItemClick={() => onItemClick(item.title)}
|
||||
extraClasses={itemExtraClasses}
|
||||
/>
|
||||
);
|
||||
} else if (type === "user" && isUserType(item)) {
|
||||
return (
|
||||
<UserListItem
|
||||
key={`user-${item.id}`}
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
username={item.username}
|
||||
isLive={item.isLive}
|
||||
viewers={item.viewers}
|
||||
thumbnail={item.thumbnail}
|
||||
onItemClick={() => onItemClick(item.username)}
|
||||
extraClasses={itemExtraClasses}
|
||||
/>
|
||||
);
|
||||
}
|
||||
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;
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
const isVodType = (item: ItemType): item is VodType => item.type === "vod";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${extraClasses} flex relative rounded-[1.5rem] text-white transition-all ${
|
||||
variant === "search" ? "items-center" : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
|
||||
}`}
|
||||
>
|
||||
{/* List Details */}
|
||||
<div className={`text-center ${variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""}`}>
|
||||
<h2
|
||||
className={`${titleClickable ? "cursor-pointer hover:underline" : "cursor-default"} text-2xl font-bold`}
|
||||
onClick={titleClickable ? handleTitleClick : undefined}
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
|
||||
{/* List Items */}
|
||||
<div className="relative overflow-hidden flex flex-grow items-center z-0">
|
||||
{!wrap && currentItems.length > amountForScroll && (
|
||||
<>
|
||||
<ArrowLeftIcon onClick={slideLeft} size={30} className="absolute left-0 cursor-pointer z-[999]" />
|
||||
<ArrowRightIcon onClick={slideRight} size={30} className="absolute right-0 cursor-pointer z-[999]" />
|
||||
</>
|
||||
)}
|
||||
|
||||
<div
|
||||
ref={slider}
|
||||
className={`flex ${
|
||||
wrap ? "flex-wrap justify-between" : "overflow-x-scroll whitespace-nowrap"
|
||||
} max-w-[95%] items-center w-full mx-auto scroll-smooth scrollbar-hide`}
|
||||
>
|
||||
{currentItems.length === 0 ? (
|
||||
<h1 className="mx-auto">Nothing Found</h1>
|
||||
) : (
|
||||
<>
|
||||
{currentItems.map((item) => {
|
||||
if (type === "stream" && isStreamType(item)) {
|
||||
return (
|
||||
<StreamListItem
|
||||
key={`stream-${item.id}`}
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
username={item.username}
|
||||
streamCategory={item.streamCategory}
|
||||
viewers={item.viewers}
|
||||
thumbnail={item.thumbnail}
|
||||
onItemClick={() => onItemClick(item.username)}
|
||||
extraClasses={itemExtraClasses}
|
||||
/>
|
||||
);
|
||||
} else if (type === "category" && isCategoryType(item)) {
|
||||
return (
|
||||
<CategoryListItem
|
||||
key={`category-${item.id}`}
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
viewers={item.viewers}
|
||||
thumbnail={item.thumbnail}
|
||||
onItemClick={() => onItemClick(item.title)}
|
||||
extraClasses={itemExtraClasses}
|
||||
/>
|
||||
);
|
||||
} else if (type === "user" && isUserType(item)) {
|
||||
return (
|
||||
<UserListItem
|
||||
key={`user-${item.id}`}
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
username={item.username}
|
||||
isLive={item.isLive}
|
||||
viewers={item.viewers}
|
||||
thumbnail={item.thumbnail}
|
||||
onItemClick={() => onItemClick(item.username)}
|
||||
extraClasses={itemExtraClasses}
|
||||
/>
|
||||
);
|
||||
} else if (type === "vod" && isVodType(item)) {
|
||||
return (
|
||||
<VodListItem
|
||||
key={`vod-${item.vod_id}`}
|
||||
vod_id={item.vod_id}
|
||||
title={item.title}
|
||||
username={item.username}
|
||||
datetime={item.datetime}
|
||||
category_name={item.category_name}
|
||||
length={item.length}
|
||||
views={item.views}
|
||||
thumbnail={item.thumbnail}
|
||||
onItemClick={() => onItemClick(item.vod_id.toString())}
|
||||
extraClasses={itemExtraClasses}
|
||||
variant={variant}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default ListRow;
|
||||
export default ListRow;
|
||||
|
||||
Reference in New Issue
Block a user