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
@@ -78,7 +78,6 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
|
||||
const data = await response.json();
|
||||
|
||||
if (data.account_created) {
|
||||
//TODO Handle successful registration (e.g., redirect or show success message)
|
||||
console.log("Registration Successful! Account created successfully");
|
||||
setIsLoggedIn(true);
|
||||
window.location.reload();
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,12 +1,7 @@
|
||||
import React, { useEffect } from "react";
|
||||
import Logo from "../Layout/Logo";
|
||||
import Button, { ToggleButton } from "../Input/Button";
|
||||
import {
|
||||
LogInIcon,
|
||||
LogOutIcon,
|
||||
SettingsIcon,
|
||||
Radio as LiveIcon,
|
||||
} from "lucide-react";
|
||||
import { LogInIcon, LogOutIcon, SettingsIcon, Radio as LiveIcon } from "lucide-react";
|
||||
import SearchBar from "../Input/SearchBar";
|
||||
import AuthModal from "../Auth/AuthModal";
|
||||
import { useAuthModal } from "../../hooks/useAuthModal";
|
||||
@@ -17,113 +12,102 @@ import { useQuickSettings } from "../../context/QuickSettingsContext";
|
||||
import Sidebar from "./Sidebar";
|
||||
|
||||
interface NavbarProps {
|
||||
variant?: "home" | "no-searchbar" | "default";
|
||||
variant?: "home" | "no-searchbar" | "default";
|
||||
}
|
||||
|
||||
const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
|
||||
const { isLoggedIn } = useAuth();
|
||||
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
||||
const { showSideBar } = useSidebar();
|
||||
const { showQuickSettings, setShowQuickSettings } = useQuickSettings();
|
||||
const [justToggled, setJustToggled] = React.useState(false);
|
||||
const { isLoggedIn } = useAuth();
|
||||
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
||||
const { showSideBar } = useSidebar();
|
||||
const { showQuickSettings, setShowQuickSettings } = useQuickSettings();
|
||||
const [justToggled, setJustToggled] = React.useState(false);
|
||||
|
||||
const handleLogout = () => {
|
||||
console.log("Logging out...");
|
||||
fetch("/api/logout")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
window.location.reload();
|
||||
});
|
||||
};
|
||||
const handleLogout = () => {
|
||||
console.log("Logging out...");
|
||||
fetch("/api/logout")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
window.location.reload();
|
||||
});
|
||||
};
|
||||
|
||||
const handleQuickSettings = () => {
|
||||
setShowQuickSettings(!showQuickSettings);
|
||||
setJustToggled(true);
|
||||
setTimeout(() => setJustToggled(false), 200);
|
||||
};
|
||||
const handleQuickSettings = () => {
|
||||
setShowQuickSettings(!showQuickSettings);
|
||||
setJustToggled(true);
|
||||
setTimeout(() => setJustToggled(false), 200);
|
||||
};
|
||||
|
||||
// Keyboard shortcut to toggle sidebar
|
||||
useEffect(() => {
|
||||
const handleKeyPress = (e: KeyboardEvent) => {
|
||||
if (e.key === "q" && document.activeElement == document.body)
|
||||
handleQuickSettings();
|
||||
};
|
||||
// Keyboard shortcut to toggle sidebar
|
||||
useEffect(() => {
|
||||
const handleKeyPress = (e: KeyboardEvent) => {
|
||||
if (e.key === "q" && document.activeElement == document.body) handleQuickSettings();
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleKeyPress);
|
||||
document.addEventListener("keydown", handleKeyPress);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("keydown", handleKeyPress);
|
||||
};
|
||||
}, [showQuickSettings]);
|
||||
return () => {
|
||||
document.removeEventListener("keydown", handleKeyPress);
|
||||
};
|
||||
}, [showQuickSettings]);
|
||||
|
||||
return (
|
||||
<div
|
||||
id="navbar"
|
||||
className={`relative flex justify-evenly items-center ${
|
||||
variant === "home"
|
||||
? "h-[45vh] flex-col"
|
||||
: "h-[15vh] col-span-2 flex-row"
|
||||
}`}
|
||||
>
|
||||
{isLoggedIn && window.innerWidth > 900 && <Sidebar />}
|
||||
<Logo variant={variant} />
|
||||
{/* Login / Logout Button */}
|
||||
<Button
|
||||
extraClasses={`absolute top-[2vh] ${
|
||||
showSideBar
|
||||
? "left-[16vw] duration-[0.5s]"
|
||||
: "left-[20px] duration-[1s]"
|
||||
} text-[1rem] flex items-center flex-nowrap z-[99]`}
|
||||
onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
|
||||
>
|
||||
{isLoggedIn ? (
|
||||
<>
|
||||
<LogOutIcon className="h-15 w-15 mr-1" />
|
||||
Logout
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogInIcon className="h-15 w-15 mr-1" />
|
||||
Login / Register
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{/* Quick Settings Sidebar */}
|
||||
<ToggleButton
|
||||
extraClasses={`absolute group text-[1rem] top-[2vh] ${
|
||||
showQuickSettings ? "right-[21vw]" : "right-[20px]"
|
||||
} cursor-pointer z-[20]`}
|
||||
onClick={() => handleQuickSettings()}
|
||||
toggled={showQuickSettings}
|
||||
>
|
||||
<SettingsIcon className="h-[2vw] w-[2vw]" />
|
||||
{!showQuickSettings && !justToggled && (
|
||||
<small className="absolute flex items-center top-0 mr-2 right-0 h-full w-fit text-nowrap font-bold my-auto group-hover:right-full opacity-0 group-hover:opacity-100 group-hover:bg-black/30 p-1 rounded-md text-white transition-all">
|
||||
Press Q
|
||||
</small>
|
||||
)}
|
||||
</ToggleButton>
|
||||
<QuickSettings />
|
||||
return (
|
||||
<div
|
||||
id="navbar"
|
||||
className={`relative flex justify-evenly items-center ${variant === "home" ? "h-[45vh] flex-col" : "h-[15vh] col-span-2 flex-row"}`}
|
||||
>
|
||||
{isLoggedIn && window.innerWidth > 900 && <Sidebar />}
|
||||
<Logo extraClasses={variant != "home" && showSideBar && !window.location.pathname.includes("dashboard") ? "scale-0" : "duration-[3s]"} variant={variant} />
|
||||
{/* Login / Logout Button */}
|
||||
<Button
|
||||
extraClasses={`absolute top-[2vh] ${
|
||||
showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]"
|
||||
} text-[1rem] flex items-center flex-nowrap z-[99]`}
|
||||
onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
|
||||
>
|
||||
{isLoggedIn ? (
|
||||
<>
|
||||
<LogOutIcon className="h-15 w-15 mr-1" />
|
||||
Logout
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogInIcon className="h-15 w-15 mr-1" />
|
||||
Login / Register
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{/* Quick Settings Sidebar */}
|
||||
<ToggleButton
|
||||
extraClasses={`absolute group text-[1rem] top-[2vh] ${showQuickSettings ? "right-[21vw]" : "right-[20px]"} cursor-pointer z-[20]`}
|
||||
onClick={() => handleQuickSettings()}
|
||||
toggled={showQuickSettings}
|
||||
>
|
||||
<SettingsIcon className="h-[2vw] w-[2vw]" />
|
||||
{!showQuickSettings && !justToggled && (
|
||||
<small className="absolute flex items-center top-0 mr-2 right-0 h-full w-fit text-nowrap font-bold my-auto group-hover:right-full opacity-0 group-hover:opacity-100 group-hover:bg-black/30 p-1 rounded-md text-white transition-all">
|
||||
Press Q
|
||||
</small>
|
||||
)}
|
||||
</ToggleButton>
|
||||
<QuickSettings />
|
||||
|
||||
{variant != "no-searchbar" && <SearchBar />}
|
||||
{variant != "no-searchbar" && <SearchBar />}
|
||||
|
||||
{/* Stream Button */}
|
||||
{isLoggedIn && !window.location.pathname.includes("go-live") && (
|
||||
<Button
|
||||
extraClasses={`${
|
||||
variant === "home" ? "absolute top-[2vh] right-[10vw]" : ""
|
||||
} flex flex-row items-center`}
|
||||
onClick={() => (window.location.href = "/go-live")}
|
||||
>
|
||||
<LiveIcon className="h-15 w-15 mr-2" />
|
||||
Go Live
|
||||
</Button>
|
||||
)}
|
||||
{/* Stream Button */}
|
||||
{isLoggedIn && !window.location.pathname.includes("dashboard") && (
|
||||
<Button
|
||||
extraClasses={`${variant === "home" ? "absolute top-[2vh] right-[10vw]" : ""} flex flex-row items-center`}
|
||||
onClick={() => (window.location.href = "/dashboard")}
|
||||
>
|
||||
<LiveIcon className="h-15 w-15 mr-2" />
|
||||
Stream Dashboard
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
||||
</div>
|
||||
);
|
||||
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
|
||||
@@ -6,282 +6,247 @@ import { useAuthModal } from "../../hooks/useAuthModal";
|
||||
import { useAuth } from "../../context/AuthContext";
|
||||
import { useSocket } from "../../context/SocketContext";
|
||||
import { useChat } from "../../context/ChatContext";
|
||||
import {
|
||||
ArrowLeftFromLineIcon,
|
||||
ArrowRightFromLineIcon,
|
||||
CrownIcon,
|
||||
} from "lucide-react";
|
||||
import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon, CrownIcon } from "lucide-react";
|
||||
|
||||
interface ChatMessage {
|
||||
chatter_username: string;
|
||||
message: string;
|
||||
time_sent: string;
|
||||
is_subscribed: boolean;
|
||||
chatter_username: string;
|
||||
message: string;
|
||||
time_sent: string;
|
||||
is_subscribed: boolean;
|
||||
}
|
||||
|
||||
interface ChatPanelProps {
|
||||
streamId: number;
|
||||
onViewerCountChange?: (count: number) => void;
|
||||
streamId: number;
|
||||
onViewerCountChange?: (count: number) => void;
|
||||
}
|
||||
|
||||
const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
streamId,
|
||||
onViewerCountChange,
|
||||
}) => {
|
||||
const { isLoggedIn, username, userId } = useAuth();
|
||||
const { showChat, setShowChat } = useChat();
|
||||
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
||||
const { socket, isConnected } = useSocket();
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
||||
const [inputMessage, setInputMessage] = useState("");
|
||||
const chatContainerRef = useRef<HTMLDivElement>(null);
|
||||
const [justToggled, setJustToggled] = useState(false);
|
||||
const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange }) => {
|
||||
const { isLoggedIn, username, userId } = useAuth();
|
||||
const { showChat, setShowChat } = useChat();
|
||||
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
||||
const { socket, isConnected } = useSocket();
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
||||
const [inputMessage, setInputMessage] = useState("");
|
||||
const chatContainerRef = useRef<HTMLDivElement>(null);
|
||||
const [justToggled, setJustToggled] = useState(false);
|
||||
|
||||
// Join chat room when component mounts
|
||||
useEffect(() => {
|
||||
if (socket && isConnected) {
|
||||
// Add username check
|
||||
socket.emit("join", {
|
||||
userId: userId ? userId : null,
|
||||
username: username ? username : "Guest",
|
||||
stream_id: streamId,
|
||||
});
|
||||
// Join chat room when component mounts
|
||||
useEffect(() => {
|
||||
if (socket && isConnected) {
|
||||
// Add username check
|
||||
socket.emit("join", {
|
||||
userId: userId ? userId : null,
|
||||
username: username ? username : "Guest",
|
||||
stream_id: streamId,
|
||||
});
|
||||
|
||||
// Handle beforeunload event
|
||||
const handleBeforeUnload = () => {
|
||||
socket.emit("leave", {
|
||||
userId: userId ? userId : null,
|
||||
username: username ? username : "Guest",
|
||||
stream_id: streamId,
|
||||
});
|
||||
socket.disconnect();
|
||||
};
|
||||
// Handle beforeunload event
|
||||
const handleBeforeUnload = () => {
|
||||
socket.emit("leave", {
|
||||
userId: userId ? userId : null,
|
||||
username: username ? username : "Guest",
|
||||
stream_id: streamId,
|
||||
});
|
||||
socket.disconnect();
|
||||
};
|
||||
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
|
||||
// Load initial chat history
|
||||
fetch(`/api/chat/${streamId}`)
|
||||
.then((response) => {
|
||||
if (!response.ok) throw new Error("Failed to fetch chat history");
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
if (data.chat_history) {
|
||||
setMessages(data.chat_history);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error loading chat history:", error);
|
||||
});
|
||||
// Load initial chat history
|
||||
fetch(`/api/chat/${streamId}`)
|
||||
.then((response) => {
|
||||
if (!response.ok) throw new Error("Failed to fetch chat history");
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
if (data.chat_history) {
|
||||
setMessages(data.chat_history);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error loading chat history:", error);
|
||||
});
|
||||
|
||||
// Handle incoming messages
|
||||
socket.on("new_message", (data: ChatMessage) => {
|
||||
setMessages((prev) => [...prev, data]);
|
||||
});
|
||||
// Handle incoming messages
|
||||
socket.on("new_message", (data: ChatMessage) => {
|
||||
setMessages((prev) => [...prev, data]);
|
||||
});
|
||||
|
||||
// Handle live viewership
|
||||
socket.on("status", (data: any) => {
|
||||
if (onViewerCountChange && data.num_viewers) {
|
||||
onViewerCountChange(data.num_viewers);
|
||||
}
|
||||
});
|
||||
// Handle live viewership
|
||||
socket.on("status", (data: any) => {
|
||||
if (onViewerCountChange && data.num_viewers) {
|
||||
onViewerCountChange(data.num_viewers);
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup function
|
||||
return () => {
|
||||
window.removeEventListener("beforeunload", handleBeforeUnload);
|
||||
socket.emit("leave", { stream_id: streamId });
|
||||
socket.disconnect();
|
||||
};
|
||||
}
|
||||
}, [socket, isConnected, userId, username, streamId]);
|
||||
// Cleanup function
|
||||
return () => {
|
||||
window.removeEventListener("beforeunload", handleBeforeUnload);
|
||||
socket.emit("leave", { stream_id: streamId });
|
||||
socket.disconnect();
|
||||
};
|
||||
}
|
||||
}, [socket, isConnected, userId, username, streamId]);
|
||||
|
||||
// Auto-scroll to bottom when new messages arrive
|
||||
useEffect(() => {
|
||||
if (chatContainerRef.current) {
|
||||
chatContainerRef.current.scrollTop =
|
||||
chatContainerRef.current.scrollHeight;
|
||||
}
|
||||
}, [messages]);
|
||||
// Auto-scroll to bottom when new messages arrive
|
||||
useEffect(() => {
|
||||
if (chatContainerRef.current) {
|
||||
chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
// Keyboard shortcut to toggle chat
|
||||
useEffect(() => {
|
||||
const handleKeyPress = (e: KeyboardEvent) => {
|
||||
if (e.key === "c" && document.activeElement == document.body) {
|
||||
toggleChat();
|
||||
}
|
||||
};
|
||||
// Keyboard shortcut to toggle chat
|
||||
useEffect(() => {
|
||||
const handleKeyPress = (e: KeyboardEvent) => {
|
||||
if (e.key === "c" && document.activeElement == document.body) {
|
||||
toggleChat();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleKeyPress);
|
||||
document.addEventListener("keydown", handleKeyPress);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("keydown", handleKeyPress);
|
||||
};
|
||||
}, [showChat]);
|
||||
return () => {
|
||||
document.removeEventListener("keydown", handleKeyPress);
|
||||
};
|
||||
}, [showChat]);
|
||||
|
||||
const toggleChat = () => {
|
||||
setShowChat(!showChat);
|
||||
setJustToggled(true);
|
||||
setTimeout(() => setJustToggled(false), 200);
|
||||
};
|
||||
const toggleChat = () => {
|
||||
setShowChat(!showChat);
|
||||
setJustToggled(true);
|
||||
setTimeout(() => setJustToggled(false), 200);
|
||||
};
|
||||
|
||||
const sendChat = () => {
|
||||
if (!inputMessage.trim() || !socket || !isConnected) {
|
||||
console.log("Invalid message or socket not connected");
|
||||
return;
|
||||
}
|
||||
const sendChat = () => {
|
||||
if (!inputMessage.trim() || !socket || !isConnected) {
|
||||
console.log("Invalid message or socket not connected");
|
||||
return;
|
||||
}
|
||||
|
||||
socket.emit("send_message", {
|
||||
username: username,
|
||||
stream_id: streamId,
|
||||
message: inputMessage.trim(),
|
||||
});
|
||||
socket.emit("send_message", {
|
||||
username: username,
|
||||
stream_id: streamId,
|
||||
message: inputMessage.trim(),
|
||||
});
|
||||
|
||||
setInputMessage("");
|
||||
};
|
||||
setInputMessage("");
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendChat();
|
||||
}
|
||||
};
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendChat();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
id="chat-panel"
|
||||
className="relative max-w-[30vw] max-h-[83vh] flex flex-col rounded-lg p-[2vh] justify-between"
|
||||
style={{ gridArea: "1 / 2 / 3 / 3" }}
|
||||
>
|
||||
{/* Toggle Button for Chat */}
|
||||
<button
|
||||
onClick={toggleChat}
|
||||
className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${
|
||||
showChat ? "" : "delay-[0.75s] -translate-x-[4vw]"
|
||||
} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[20] duration-[0.3s] transition-all`}
|
||||
>
|
||||
{showChat ? <ArrowRightFromLineIcon /> : <ArrowLeftFromLineIcon />}
|
||||
return (
|
||||
<div
|
||||
id="chat-panel"
|
||||
className="relative max-w-[30vw] max-h-[83vh] flex flex-col rounded-lg p-[2vh] justify-between"
|
||||
style={{ gridArea: "1 / 2 / 3 / 3" }}
|
||||
>
|
||||
{/* Toggle Button for Chat */}
|
||||
<button
|
||||
onClick={toggleChat}
|
||||
className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${
|
||||
showChat ? "" : "delay-[0.75s] -translate-x-[4vw]"
|
||||
} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[20] duration-[0.3s] transition-all`}
|
||||
>
|
||||
{showChat ? <ArrowRightFromLineIcon /> : <ArrowLeftFromLineIcon />}
|
||||
|
||||
<small
|
||||
className={`absolute ${
|
||||
showChat
|
||||
? justToggled
|
||||
? "left-0 group-hover:-left-[5vw] group-hover:bg-white/10"
|
||||
: "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80"
|
||||
: justToggled
|
||||
? "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80"
|
||||
: "left-0 group-hover:-left-[5vw] group-hover:bg-white/10"
|
||||
} p-1 rounded-md w-fit text-nowrap font-bold opacity-0 group-hover:opacity-100 text-white transition-all`}
|
||||
>
|
||||
Press C
|
||||
</small>
|
||||
</button>
|
||||
<small
|
||||
className={`absolute ${
|
||||
showChat
|
||||
? justToggled
|
||||
? "left-0 group-hover:-left-[5vw] group-hover:bg-white/10"
|
||||
: "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80"
|
||||
: justToggled
|
||||
? "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80"
|
||||
: "left-0 group-hover:-left-[5vw] group-hover:bg-white/10"
|
||||
} p-1 rounded-md w-fit text-nowrap font-bold opacity-0 group-hover:opacity-100 text-white transition-all`}
|
||||
>
|
||||
Press C
|
||||
</small>
|
||||
</button>
|
||||
|
||||
{/* Chat Header */}
|
||||
<h2 className="cursor-default text-xl font-bold mb-4 text-white text-center flex-none">
|
||||
Stream Chat
|
||||
</h2>
|
||||
{/* Chat Header */}
|
||||
<h2 className="cursor-default text-xl font-bold mb-4 text-white text-center flex-none">Stream Chat</h2>
|
||||
|
||||
{/* Message List */}
|
||||
<div
|
||||
ref={chatContainerRef}
|
||||
id="chat-message-list"
|
||||
className="w-full h-full overflow-y-auto mb-4 space-y-2 rounded-md"
|
||||
>
|
||||
{messages.map((msg, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start space-x-2 bg-gray-800 rounded p-2 text-white relative"
|
||||
>
|
||||
{/* User avatar with image */}
|
||||
<div
|
||||
className={`w-2em h-2em rounded-full overflow-hidden flex-shrink-0 ${
|
||||
msg.chatter_username === username ? "" : "cursor-pointer"
|
||||
}`}
|
||||
onClick={() =>
|
||||
msg.chatter_username === username
|
||||
? null
|
||||
: (window.location.href = `/user/${msg.chatter_username}`)
|
||||
}
|
||||
>
|
||||
<img
|
||||
{/* Message List */}
|
||||
<div ref={chatContainerRef} id="chat-message-list" className="w-full h-full overflow-y-auto mb-4 space-y-2 rounded-md">
|
||||
{messages.map((msg, index) => (
|
||||
<div key={index} className="flex items-start space-x-2 bg-gray-800 rounded p-2 text-white relative">
|
||||
{/* User avatar with image */}
|
||||
<div
|
||||
className={`w-2em h-2em rounded-full overflow-hidden flex-shrink-0 ${
|
||||
msg.chatter_username === username ? "" : "cursor-pointer"
|
||||
}`}
|
||||
onClick={() => (msg.chatter_username === username ? null : (window.location.href = `/user/${msg.chatter_username}`))}
|
||||
>
|
||||
<img
|
||||
src="/images/monkey.png"
|
||||
alt="User Avatar"
|
||||
className="w-full h-full object-cover"
|
||||
style={{ width: "2.5em", height: "2.5em" }}
|
||||
/>
|
||||
</div>
|
||||
alt="User Avatar"
|
||||
className="w-full h-full object-cover"
|
||||
style={{ width: "2.5em", height: "2.5em" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow overflow-hidden">
|
||||
<div className="flex items-center space-x-0.5em">
|
||||
{/* Username */}
|
||||
<span
|
||||
className={`flex items-center gap-2 font-bold text-[1em] ${
|
||||
msg.chatter_username === username
|
||||
? "text-purple-600"
|
||||
: "text-green-400 cursor-pointer"
|
||||
}`}
|
||||
onClick={() =>
|
||||
msg.chatter_username === username
|
||||
? null
|
||||
: (window.location.href = `/user/${msg.chatter_username}`)
|
||||
}
|
||||
>
|
||||
{msg.chatter_username}
|
||||
{msg.is_subscribed && <CrownIcon size={20} color="gold" />}
|
||||
</span>
|
||||
</div>
|
||||
{/* Message content */}
|
||||
<div className="message w-full text-[0.9em] mt-0.5em flex flex-col overflow-hidden">
|
||||
{msg.message}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow overflow-hidden">
|
||||
<div className="flex items-center space-x-0.5em">
|
||||
{/* Username */}
|
||||
<span
|
||||
className={`flex items-center gap-2 font-bold text-[1em] ${
|
||||
msg.chatter_username === username ? "text-purple-600" : "text-green-400 cursor-pointer"
|
||||
}`}
|
||||
onClick={() => (msg.chatter_username === username ? null : (window.location.href = `/user/${msg.chatter_username}`))}
|
||||
>
|
||||
{msg.chatter_username}
|
||||
{msg.is_subscribed && <CrownIcon size={20} color="gold" />}
|
||||
</span>
|
||||
</div>
|
||||
{/* Message content */}
|
||||
<div className="message w-full text-[0.9em] mt-0.5em flex flex-col overflow-hidden">{msg.message}</div>
|
||||
</div>
|
||||
|
||||
{/* Time sent */}
|
||||
<div className="text-gray-500 text-[0.8em] absolute top-0 right-0 p-2">
|
||||
{new Date(msg.time_sent).toLocaleTimeString("en-GB", {
|
||||
hour12: false,
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Time sent */}
|
||||
<div className="text-gray-500 text-[0.8em] absolute top-0 right-0 p-2">
|
||||
{new Date(msg.time_sent).toLocaleTimeString("en-GB", {
|
||||
hour12: false,
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Input area */}
|
||||
<div className="flex-none flex justify-center gap-2">
|
||||
{isLoggedIn ? (
|
||||
<>
|
||||
<Input
|
||||
type="text"
|
||||
value={inputMessage}
|
||||
onChange={(e) => setInputMessage(e.target.value)}
|
||||
onKeyDown={handleKeyPress}
|
||||
placeholder="Type a message..."
|
||||
extraClasses="flex-grow w-full focus:w-full"
|
||||
maxLength={200}
|
||||
onClick={() => !isLoggedIn && setShowAuthModal(true)}
|
||||
/>
|
||||
{/* Input area */}
|
||||
<div className="flex-none flex justify-center gap-2">
|
||||
{isLoggedIn ? (
|
||||
<>
|
||||
<Input
|
||||
type="text"
|
||||
value={inputMessage}
|
||||
onChange={(e) => setInputMessage(e.target.value)}
|
||||
onKeyDown={handleKeyPress}
|
||||
placeholder="Type a message..."
|
||||
extraClasses="flex-grow w-full focus:w-full"
|
||||
maxLength={200}
|
||||
onClick={() => !isLoggedIn && setShowAuthModal(true)}
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={sendChat}
|
||||
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
extraClasses="text-[1rem] flex items-center flex-nowrap"
|
||||
onClick={() => setShowAuthModal(true)}
|
||||
>
|
||||
Login to Chat
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
||||
</div>
|
||||
);
|
||||
<button onClick={sendChat} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
|
||||
Send
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<Button extraClasses="text-[1rem] flex items-center flex-nowrap" onClick={() => setShowAuthModal(true)}>
|
||||
Login to Chat
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatPanel;
|
||||
|
||||
389
frontend/src/components/Stream/StreamDashboard.tsx
Normal file
389
frontend/src/components/Stream/StreamDashboard.tsx
Normal file
@@ -0,0 +1,389 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Button from "../../components/Input/Button";
|
||||
import Input from "../../components/Input/Input";
|
||||
import { useCategories } from "../../hooks/useContent";
|
||||
import { X as CloseIcon, Eye as ShowIcon, EyeOff as HideIcon } from "lucide-react";
|
||||
import { debounce } from "lodash";
|
||||
import VideoPlayer from "../../components/Stream/VideoPlayer";
|
||||
import { CategoryType } from "../../types/CategoryType";
|
||||
import { StreamListItem } from "../../components/Layout/ListItem";
|
||||
import { getCategoryThumbnail } from "../../utils/thumbnailUtils";
|
||||
|
||||
interface StreamData {
|
||||
title: string;
|
||||
category_name: string;
|
||||
viewer_count: number;
|
||||
start_time: string;
|
||||
stream_key: string;
|
||||
}
|
||||
|
||||
interface StreamDashboardProps {
|
||||
username: string;
|
||||
userId: number;
|
||||
isLive: boolean;
|
||||
}
|
||||
|
||||
const StreamDashboard: React.FC<StreamDashboardProps> = ({ username, userId, isLive }) => {
|
||||
const [streamData, setStreamData] = useState<StreamData>({
|
||||
title: "",
|
||||
category_name: "",
|
||||
viewer_count: 0,
|
||||
start_time: "",
|
||||
stream_key: "",
|
||||
});
|
||||
const [timeStarted, setTimeStarted] = useState("");
|
||||
const [streamDetected, setStreamDetected] = useState(false);
|
||||
const [isCategoryFocused, setIsCategoryFocused] = useState(false);
|
||||
const [filteredCategories, setFilteredCategories] = useState<CategoryType[]>([]);
|
||||
const [thumbnail, setThumbnail] = useState<File | null>(null);
|
||||
const [thumbnailPreview, setThumbnailPreview] = useState<{
|
||||
url: string;
|
||||
isCustom: boolean;
|
||||
}>({ url: "", isCustom: false });
|
||||
const [debouncedCheck, setDebouncedCheck] = useState<Function | null>(null);
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
|
||||
const { categories } = useCategories("/api/categories/popular/100");
|
||||
|
||||
useEffect(() => {
|
||||
// Set filtered categories when categories load
|
||||
if (categories.length > 0) {
|
||||
setFilteredCategories(categories);
|
||||
}
|
||||
}, [categories]);
|
||||
|
||||
useEffect(() => {
|
||||
const categoryCheck = debounce((categoryName: string) => {
|
||||
const isValidCategory = categories.some((cat: CategoryType) => cat.title.toLowerCase() === categoryName.toLowerCase());
|
||||
|
||||
if (isValidCategory && !thumbnailPreview.isCustom) {
|
||||
const defaultThumbnail = getCategoryThumbnail(categoryName);
|
||||
setThumbnailPreview({ url: defaultThumbnail, isCustom: false });
|
||||
}
|
||||
}, 300);
|
||||
|
||||
setDebouncedCheck(() => categoryCheck);
|
||||
|
||||
return () => {
|
||||
categoryCheck.cancel();
|
||||
};
|
||||
}, [categories, thumbnailPreview.isCustom]);
|
||||
|
||||
useEffect(() => {
|
||||
if (username) {
|
||||
checkStreamStatus();
|
||||
}
|
||||
}, [username]);
|
||||
|
||||
const checkStreamStatus = async () => {
|
||||
try {
|
||||
if (isLive) {
|
||||
const streamResponse = await fetch(`/api/streams/${userId}/data`, { credentials: "include" });
|
||||
const streamData = await streamResponse.json();
|
||||
setStreamData({
|
||||
title: streamData.title,
|
||||
category_name: streamData.category_name,
|
||||
viewer_count: streamData.num_viewers,
|
||||
start_time: streamData.start_time,
|
||||
stream_key: streamData.stream_key,
|
||||
});
|
||||
|
||||
const time = Math.floor(
|
||||
(Date.now() - new Date(streamData.start_time).getTime()) / 60000 // Convert to minutes
|
||||
);
|
||||
|
||||
if (time < 60) setTimeStarted(`${time}m ago`);
|
||||
else if (time < 1440) setTimeStarted(`${Math.floor(time / 60)}h ${time % 60}m ago`);
|
||||
else setTimeStarted(`${Math.floor(time / 1440)}d ${Math.floor((time % 1440) / 60)}h ${time % 60}m ago`);
|
||||
} else {
|
||||
// Just need the stream key if not streaming
|
||||
const response = await fetch(`/api/user/${username}/stream_key`, { credentials: "include" });
|
||||
const keyData = await response.json();
|
||||
setStreamData((prev) => ({
|
||||
...prev,
|
||||
stream_key: keyData.stream_key,
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error checking stream status:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setStreamData((prev) => ({ ...prev, [name]: value }));
|
||||
|
||||
if (name === "category_name") {
|
||||
const filtered = categories.filter((cat: CategoryType) => cat.title.toLowerCase().includes(value.toLowerCase()));
|
||||
setFilteredCategories(filtered);
|
||||
if (debouncedCheck) {
|
||||
debouncedCheck(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCategorySelect = (categoryName: string) => {
|
||||
console.log("Selected category:", categoryName);
|
||||
setStreamData((prev) => ({ ...prev, category_name: categoryName }));
|
||||
setFilteredCategories([]);
|
||||
if (debouncedCheck) {
|
||||
debouncedCheck(categoryName);
|
||||
}
|
||||
};
|
||||
|
||||
const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
const file = e.target.files[0];
|
||||
setThumbnail(file);
|
||||
setThumbnailPreview({
|
||||
url: URL.createObjectURL(file),
|
||||
isCustom: true,
|
||||
});
|
||||
} else {
|
||||
setThumbnail(null);
|
||||
if (streamData.category_name && debouncedCheck) {
|
||||
debouncedCheck(streamData.category_name);
|
||||
} else {
|
||||
setThumbnailPreview({ url: "", isCustom: false });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const clearThumbnail = () => {
|
||||
setThumbnail(null);
|
||||
if (streamData.category_name) {
|
||||
console.log("Clearing thumbnail as category is set and default category thumbnail will be used");
|
||||
const defaultThumbnail = getCategoryThumbnail(streamData.category_name);
|
||||
setThumbnailPreview({ url: defaultThumbnail, isCustom: false });
|
||||
} else {
|
||||
setThumbnailPreview({ url: "", isCustom: false });
|
||||
}
|
||||
};
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
streamData.title.trim() !== "" &&
|
||||
streamData.category_name.trim() !== "" &&
|
||||
categories.some((cat: CategoryType) => cat.title.toLowerCase() === streamData.category_name.toLowerCase()) &&
|
||||
streamDetected
|
||||
);
|
||||
};
|
||||
|
||||
const handlePublishStream = async () => {
|
||||
console.log("Starting stream with data:", streamData);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("data", JSON.stringify(streamData));
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/publish_stream", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log("Stream published successfully");
|
||||
window.location.reload();
|
||||
} else if (response.status === 403) {
|
||||
console.error("Unauthorized - Invalid stream key or already streaming");
|
||||
} else {
|
||||
console.error("Failed to publish stream");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error publishing stream:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateStream = async () => {
|
||||
console.log("Updating stream with data:", streamData);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("key", streamData.stream_key);
|
||||
formData.append("title", streamData.title);
|
||||
formData.append("category_name", streamData.category_name);
|
||||
if (thumbnail) {
|
||||
formData.append("thumbnail", thumbnail);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/update_stream", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log("Stream updated successfully");
|
||||
window.location.reload();
|
||||
} else {
|
||||
console.error("Failed to update stream");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating stream:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndStream = async () => {
|
||||
console.log("Ending stream...");
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("key", streamData.stream_key);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/end_stream", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log("Stream ended successfully");
|
||||
window.location.reload();
|
||||
} else {
|
||||
console.error("Failed to end stream");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error ending stream:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-grow mx-auto px-4">
|
||||
<div className="flex flex-grow gap-8 items-stretch pb-4">
|
||||
{/* Left side - Stream Settings */}
|
||||
<div className="flex flex-col flex-grow">
|
||||
<h2 className="text-center text-2xl font-bold text-white mb-4">Stream Settings</h2>
|
||||
<div className="flex flex-col flex-grow justify-evenly space-y-6 bg-gray-800 rounded-lg p-6 shadow-xl">
|
||||
<div>
|
||||
<label className="block text-white mb-2">Stream Title</label>
|
||||
<Input
|
||||
name="title"
|
||||
value={streamData.title}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter your stream title"
|
||||
extraClasses="w-[70%] focus:w-[70%]"
|
||||
maxLength={50}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<label className="block text-white mb-2">Category</label>
|
||||
<Input
|
||||
name="category_name"
|
||||
value={streamData.category_name}
|
||||
onChange={handleInputChange}
|
||||
onFocus={() => setIsCategoryFocused(true)}
|
||||
onBlur={() => setTimeout(() => setIsCategoryFocused(false), 200)}
|
||||
placeholder="Select or type a category"
|
||||
extraClasses="w-[70%] focus:w-[70%]"
|
||||
maxLength={50}
|
||||
autoComplete="off"
|
||||
type="search"
|
||||
/>
|
||||
{isCategoryFocused && filteredCategories.length > 0 && (
|
||||
<div className="absolute z-10 w-full bg-gray-700 mt-1 rounded-md shadow-lg max-h-48 overflow-y-auto">
|
||||
{filteredCategories.map((category) => (
|
||||
<div
|
||||
key={category.title}
|
||||
className="px-4 py-2 hover:bg-gray-600 cursor-pointer text-white"
|
||||
onClick={() => handleCategorySelect(category.title)}
|
||||
>
|
||||
{category.title}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-white mb-2">Stream Thumbnail</label>
|
||||
<div className="relative flex flex-row items-center justify-center">
|
||||
<input type="file" accept="image/*" onChange={handleThumbnailChange} className="hidden" id="thumbnail-upload" />
|
||||
<label
|
||||
htmlFor="thumbnail-upload"
|
||||
className="cursor-pointer inline-block bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition-colors"
|
||||
>
|
||||
{thumbnail ? "Change Thumbnail" : "Choose Thumbnail"}
|
||||
</label>
|
||||
<span className="ml-3 text-gray-400">{thumbnail ? thumbnail.name : "No file selected"}</span>
|
||||
{thumbnailPreview.isCustom && (
|
||||
<button
|
||||
onClick={clearThumbnail}
|
||||
className="absolute right-0 top-0 p-1 bg-red-500 rounded-full hover:bg-red-600 transition-colors"
|
||||
>
|
||||
<CloseIcon size={16} className="text-white" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{!thumbnailPreview.isCustom && (
|
||||
<p className="text-gray-400 mt-2 text-sm text-center">No thumbnail selected - the default category image will be used</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isLive && (
|
||||
<div className="bg-gray-700 p-4 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-2">Stream Info</h3>
|
||||
<p className="text-gray-300">Viewers: {streamData.viewer_count}</p>
|
||||
<p className="text-gray-300">
|
||||
Started: {new Date(streamData.start_time!).toLocaleTimeString()}
|
||||
{` (${timeStarted})`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center mx-auto p-10 bg-gray-900 w-fit rounded-xl py-4">
|
||||
<label className="block text-white mr-8">Stream Key</label>
|
||||
<Input type={showKey ? "text" : "password"} value={streamData.stream_key} readOnly extraClasses="w-fit pr-[30px]" disabled />
|
||||
<button type="button" onClick={() => setShowKey(!showKey)} className="-translate-x-[30px] top-1/2 h-6 w-6 text-white">
|
||||
{showKey ? <HideIcon className="h-6 w-6" /> : <ShowIcon className="h-6 w-6" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col w-fit mx-auto items-center justify-center pt-6 gap-6">
|
||||
<div className="flex gap-8">
|
||||
<Button
|
||||
onClick={isLive ? handleUpdateStream : handlePublishStream}
|
||||
disabled={!isFormValid()}
|
||||
extraClasses="text-2xl px-8 py-4 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLive ? "Update Stream" : "Start Streaming"}
|
||||
</Button>
|
||||
{isLive && (
|
||||
<Button onClick={handleEndStream} extraClasses="text-2xl px-8 py-4 hover:text-red-500 hover:border-red-500">
|
||||
End Stream
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{!streamDetected && (
|
||||
<p className="text-red-500 text-sm">No stream input detected. Please start streaming using your broadcast software.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side - Preview */}
|
||||
<div className="w-[25vw] flex flex-col">
|
||||
<h2 className="text-center text-2xl font-bold text-white mb-4">Stream Preview</h2>
|
||||
<div className="flex flex-col gap-4 bg-gray-800 rounded-lg p-4 w-full h-fit flex-grow justify-around">
|
||||
<div className="flex flex-col">
|
||||
<p className="text-white text-center pb-4">Video</p>
|
||||
<VideoPlayer streamer={username ?? undefined} extraClasses="border border-white" onStreamDetected={setStreamDetected} />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="text-white text-center">List Item</p>
|
||||
<StreamListItem
|
||||
id={1}
|
||||
title={streamData.title || "Stream Title"}
|
||||
username={username || ""}
|
||||
streamCategory={streamData.category_name || "Category"}
|
||||
viewers={streamData.viewer_count}
|
||||
thumbnail={thumbnailPreview.url || ""}
|
||||
onItemClick={() => {}}
|
||||
extraClasses="max-w-[20vw]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StreamDashboard;
|
||||
37
frontend/src/components/Stream/VodsDashboard.tsx
Normal file
37
frontend/src/components/Stream/VodsDashboard.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import ListRow from "../Layout/ListRow";
|
||||
import { VodType } from "../../types/VodType";
|
||||
|
||||
interface VodsDashboardProps {
|
||||
vods: VodType[];
|
||||
}
|
||||
|
||||
const VodsDashboard: React.FC<VodsDashboardProps> = ({ vods }) => {
|
||||
const handleVodClick = (vodUrl: string) => {
|
||||
window.open(vodUrl, "_blank");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h2 className="text-3xl font-bold text-white mb-6">Past Broadcasts</h2>
|
||||
|
||||
{vods.length === 0 ? (
|
||||
<div className="text-center text-gray-400 py-8">
|
||||
<p>No past broadcasts found</p>
|
||||
</div>
|
||||
) : (
|
||||
<ListRow
|
||||
type="vod"
|
||||
variant="vodDashboard"
|
||||
items={vods}
|
||||
wrap={false}
|
||||
onItemClick={handleVodClick}
|
||||
extraClasses="bg-black/50"
|
||||
itemExtraClasses="w-[20vw]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VodsDashboard;
|
||||
Reference in New Issue
Block a user