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

FEAT: Added more info & functionality to UserPage & Added ability to follow streamers on both UserPage and VideoPage;

Browse Source 
Added shortcut to toggle chat;
This commit is contained in:
Chris-1010
2025-02-07 02:11:22 +00:00
parent 1499e042cb
commit 16dc8f1ea2
16 changed files with 438 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
frontend/src/components/Auth/AuthModal.tsx
View File

@@ -28,66 +28,61 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
id="blurring-layer"
className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"
></div>
<div>
{/*Container*/}
<div className="fixed inset-0 flex flex-col items-center justify-around z-[9000]
h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem] transition-all animate-floating">
{/* Login/Register Buttons Container */}
<div
className="absolute top-[60px] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible "
>
{/* Login Toggle */}
<ToggleButton
toggled={selectedTab === "Login"}
extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
onClick={() => setSelectedTab("Login")}
>
<LogInIcon className="h-[40px] w-[40px] mr-1" />
Login
</ToggleButton>
{/* Register Toggle */}
<ToggleButton
toggled={selectedTab === "Register"}
extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
onClick={() => setSelectedTab("Register")}
>
<UserIcon className="h-[40px] w-[40px] mr-1" />
Register
</ToggleButton>
</div>
<div
className="container fixed inset-0 flex flex-col items-center justify-around z-[9999]
h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]"
style={{ "--spin-duration": spinDuration } as React.CSSProperties}
{/*Container*/}
<div id="auth-modal"
className="fixed inset-0 flex flex-col items-center justify-around z-[9000]
h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem] transition-all animate-floating"
>
{/* Login/Register Buttons Container */}
<div className="absolute top-[60px] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible ">
{/* Login Toggle */}
<ToggleButton
toggled={selectedTab === "Login"}
extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
onClick={() => setSelectedTab("Login")}
>
<LogInIcon className="h-[40px] w-[40px] mr-1" />
Login
</ToggleButton>
{/*Border Container*/}
<div
id="border-container"
className="front-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
{/* Register Toggle */}
<ToggleButton
toggled={selectedTab === "Register"}
extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
onClick={() => setSelectedTab("Register")}
>
<UserIcon className="h-[40px] w-[40px] mr-1" />
Register
</ToggleButton>
</div>
<div
className="container fixed inset-0 flex flex-col items-center justify-around z-[9999]
h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]"
style={{ "--spin-duration": spinDuration } as React.CSSProperties}
>
{/*Border Container*/}
<div
id="border-container"
className="front-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
>
<div
id="login-methods"
className=" w-full flex flex-row items-center justify-evenly"
>
<div
id="login-methods"
className=" w-full flex flex-row items-center justify-evenly"
<button
onClick={onClose}
className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
>
<button
onClick={onClose}
className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
>
✕
</button>
</div>
{selectedTab === "Login" ? (
<LoginForm onSubmit={handleSubmit} />
) : (
<RegisterForm onSubmit={handleSubmit} />
)}
✕
</button>
</div>
{selectedTab === "Login" ? (
<LoginForm onSubmit={handleSubmit} />
) : (
<RegisterForm onSubmit={handleSubmit} />
)}
</div>
</div>
</div>

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

@@ -5,6 +5,7 @@ interface ListItemProps {
id: number;
title: string;
streamer?: string;
streamCategory?: string;
viewers: number;
thumbnail?: string;
onItemClick?: () => void;
@@ -41,6 +42,7 @@ const ListRow: React.FC<ListRowProps> = ({
type={item.type}
title={item.title}
streamer={item.type === "stream" ? item.streamer : undefined}
streamCategory={item.type === "stream" ? item.streamCategory : undefined}
viewers={item.viewers}
thumbnail={item.thumbnail}
onItemClick={() => onClick?.(item.id, item.streamer || item.title)}
@@ -52,10 +54,11 @@ const ListRow: React.FC<ListRowProps> = ({
};
// Individual list entry component
const ListItem: React.FC<ListItemProps> = ({
export const ListItem: React.FC<ListItemProps> = ({
type,
title,
streamer,
streamCategory,
viewers,
thumbnail,
onItemClick,
@@ -79,6 +82,7 @@ const ListItem: React.FC<ListItemProps> = ({
<div className="p-3">
<h3 className="font-semibold text-lg text-center">{title}</h3>
{type === "stream" && <p className="font-bold">{streamer}</p>}
{type === "stream" && <p className="text-sm text-gray-300">{streamCategory}</p>}
<p className="text-sm text-gray-300">{viewers} viewers</p>
</div>
</div>

47
frontend/src/components/Layout/Navbar.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState } from "react";
import Logo from "./Logo";
import Button from "./Button";
import Sidebar from "./Sidebar";
@@ -11,29 +11,17 @@ import {
} from "lucide-react";
import Input from "./Input";
import AuthModal from "../Auth/AuthModal";
import { useAuthModal } from "../../hooks/useAuthModal";
import { useAuth } from "../../context/AuthContext";
interface NavbarProps {
variant?: "home" | "default";
}
const Navbar: React.FC<NavbarProps> = ({
variant = "default",
}) => {
const [showAuthModal, setShowAuthModal] = useState(false);
const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
const { isLoggedIn } = useAuth();
const { showAuthModal, setShowAuthModal } = useAuthModal();
const [showSideBar, setShowSideBar] = useState(false);
useEffect(() => {
if (showAuthModal) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
}
return () => {
document.body.style.overflow = "unset";
};
}, [showAuthModal]);
const handleLogout = () => {
console.log("Logging out...");
@@ -47,12 +35,16 @@ const Navbar: React.FC<NavbarProps> = ({
const handleSideBar = () => {
setShowSideBar(!showSideBar);
}
};
return (
<div
id="navbar"
className={`flex justify-center items-center ${variant === "home" ? "h-[45vh] flex-col" : "h-[15vh] col-span-2 flex-row"}`}
className={`flex justify-center items-center ${
variant === "home"
? "h-[45vh] flex-col"
: "h-[15vh] col-span-2 flex-row"
}`}
>
<Logo variant={variant} />
<Button
@@ -74,26 +66,29 @@ const Navbar: React.FC<NavbarProps> = ({
{isLoggedIn && (
<>
<Button onClick={() => handleSideBar()}
extraClasses={`absolute ${showSideBar ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
<Button
onClick={() => handleSideBar()}
extraClasses={`absolute ${
showSideBar
? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all ` :
"top-[75px] left-[20px]"
} transition-all duration-300 z-[99]`}
over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `
: "top-[75px] left-[20px]"
} transition-all duration-300 z-[99]`}
>
<SidebarIcon className="top-[0.20em] left-[10em] mr-1 z-[90]" />
</Button>
<div
className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)] z-[90] overflow-y-auto scrollbar-hide
transition-transform transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
}`}
transition-transform transition-opacity duration-500 ease-in-out ${
showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
}`}
>
<Sidebar />
</div>
</>
)}
<Button
extraClasses="absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap"
onClick={() => console.log("Settings - TODO")}

13
frontend/src/components/Stream/StreamerRoute.tsx
View File

@@ -1,13 +1,14 @@
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";
import VideoPage from "../../pages/VideoPage";
import UserPage from "../../pages/UserPage";
const StreamerRoute: React.FC = () => {
const { streamerName } = useParams<{ streamerName: string }>();
const { streamerName } = useParams();
const [isLoading, setIsLoading] = useState<boolean>(true);
const [isLive, setIsLive] = useState<boolean>(false);
const [streamId, setStreamId] = useState<number>(0);
const navigate = useNavigate();
useEffect(() => {
const checkStreamStatus = async () => {
@@ -27,7 +28,7 @@ const StreamerRoute: React.FC = () => {
checkStreamStatus();
// Poll for live status changes
const interval = setInterval(checkStreamStatus, 10000); // Check every 10 second
const interval = setInterval(checkStreamStatus, 60000); // Check every minute
return () => clearInterval(interval);
}, [streamerName]);
@@ -38,17 +39,15 @@ const StreamerRoute: React.FC = () => {
Loading...
</div>
);
// Or your loading component
}
// streamId=0 is a special case for the streamer's latest stream
return isLive ? (
<VideoPage streamerId={streamId} />
) : streamerName ? (
<UserPage />
navigate(`/user/${streamerName}`)
) : (
<div>Error: Streamer not found</div>
<div>Streamer not found</div>
);
};

43
frontend/src/components/Video/ChatPanel.tsx
View File

@@ -1,9 +1,10 @@
import React, { useState, useEffect, useRef } from "react";
import Input from "../Layout/Input";
import { useAuth } from "../../context/AuthContext";
import { useSocket } from "../../context/SocketContext";
import Button from "../Layout/Button";
import AuthModal from "../Auth/AuthModal";
import { useAuthModal } from "../../hooks/useAuthModal";
import { useAuth } from "../../context/AuthContext";
import { useSocket } from "../../context/SocketContext";
interface ChatMessage {
chatter_username: string;
@@ -16,12 +17,16 @@ interface ChatPanelProps {
onViewerCountChange?: (count: number) => void;
}
const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange }) => {
const ChatPanel: React.FC<ChatPanelProps> = ({
streamId,
onViewerCountChange,
}) => {
const { isLoggedIn, username } = useAuth();
const { showAuthModal, setShowAuthModal } = useAuthModal();
const { socket, isConnected } = useSocket();
const [messages, setMessages] = useState<ChatMessage[]>([]);
const [inputMessage, setInputMessage] = useState("");
const chatContainerRef = useRef<HTMLDivElement>(null);
const { isLoggedIn, username } = useAuth();
// Join chat room when component mounts
useEffect(() => {
@@ -57,17 +62,16 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
// Handle incoming messages
socket.on("new_message", (data: ChatMessage) => {
console.log("New message:", data);
setMessages((prev) => [...prev, data]);
});
// Handle live viewership
socket.on("status", (data: any) => {
console.log("Live viewership: ", data) // returns dictionary {message: message, num_viewers: num_viewers}
console.log("Live viewership: ", data); // returns dictionary {message: message, num_viewers: num_viewers}
if (onViewerCountChange && data.num_viewers) {
onViewerCountChange(data.num_viewers);
}
})
});
// Cleanup function
return () => {
@@ -108,20 +112,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
}
};
//added to show login/reg if not
const [showAuthModal, setShowAuthModal] = useState(false);
useEffect(() => {
if (showAuthModal) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
}
return () => {
document.body.style.overflow = "unset";
};
}, [showAuthModal]);
return (
<div
id="chat-panel"
@@ -166,8 +156,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
value={inputMessage}
onChange={(e) => setInputMessage(e.target.value)}
onKeyDown={handleKeyPress}
placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
disabled={!isLoggedIn}
placeholder="Type a message..."
extraClasses="flex-grow w-full focus:w-full"
onClick={() => !isLoggedIn && setShowAuthModal(true)}
/>
@@ -181,18 +170,14 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
</>
) : (
<Button
extraClasses="text-[1rem] flex items-center flex-nowrap z-[999]"
extraClasses="text-[1rem] flex items-center flex-nowrap"
onClick={() => setShowAuthModal(true)}
>
Login to Chat
</Button>
)}
</div>
{showAuthModal && (
<div className="fixed inset-0 z-[9999] flex items-center justify-center">
<AuthModal onClose={() => setShowAuthModal(false)} />
</div>
)}
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
</div>
);
};

4
frontend/src/components/Video/VideoPlayer.tsx
View File

@@ -52,10 +52,10 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ streamId }) => {
return (
<div
id="video-container"
className="min-w-[65vw] w-full h-full flex items-center bg-gray-900 rounded-lg"
className="min-w-[65vw] w-full h-full flex justify-center items-center bg-gray-900 rounded-lg"
style={{ gridArea: "1 / 1 / 2 / 2" }}
>
<div ref={videoRef} id="video-player" className="w-full" />
<div ref={videoRef} id="video-player" className="w-full max-w-[80vw] self-center" />
</div>
);
};