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

FEAT: Sidebar update to include followed streamers & categories;

Browse Source 
FEAT: Sidebar now alters page width on open/close (DynamicPageContent);
FIX: Properly disallow shortcut keys when typing in an input field;
This commit is contained in:
Chris-1010
2025-02-18 00:47:24 +00:00
parent 902c745065
commit fde7c70b54
14 changed files with 311 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "frontend",
"private": true,
"version": "0.1.0",
"version": "0.5.0",
"type": "module",
"scripts": {
"dev": "vite --config vite.config.dev.ts",

59
frontend/src/App.tsx
View File

@@ -10,6 +10,8 @@ import ResetPasswordPage from "./pages/ResetPasswordPage";
import CategoryPage from "./pages/CategoryPage";
import CategoriesPage from "./pages/AllCategoriesPage";
import ResultsPage from "./pages/ResultsPage";
import { SidebarProvider } from "./context/SidebarContext";
import { QuickSettingsProvider } from "./context/QuickSettingsContext";
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -35,31 +37,38 @@ function App() {
value={{ isLoggedIn, username, user_id, setIsLoggedIn, setUsername }}
>
<ContentProvider>
<BrowserRouter>
<Routes>
<Route
path="/"
element={
isLoggedIn ? <HomePage variant="personalised" /> : <HomePage />
}
/>
<Route path="/:streamerName" element={<StreamerRoute />} />
<Route path="/user/:username" element={<UserPage />} />
<Route
path="/reset_password/:token"
element={<ResetPasswordPage />}
></Route>
<Route
path="/category/:category_name"
element={<CategoryPage />}
></Route>
<Route path="/categories" element={<CategoriesPage />}></Route>
<Route path="/results" element={<ResultsPage />}></Route>
<Route path="/404" element={<NotFoundPage />} />
<Route path="*" element={<Navigate to="/404" replace />} />
</Routes>
</BrowserRouter>
<SidebarProvider>
<QuickSettingsProvider>
<BrowserRouter>
<Routes>
<Route
path="/"
element={
isLoggedIn ? (
<HomePage variant="personalised" />
) : (
<HomePage />
)
}
/>
<Route path="/:streamerName" element={<StreamerRoute />} />
<Route path="/user/:username" element={<UserPage />} />
<Route
path="/reset_password/:token"
element={<ResetPasswordPage />}
></Route>
<Route
path="/category/:category_name"
element={<CategoryPage />}
></Route>
<Route path="/categories" element={<CategoriesPage />}></Route>
<Route path="/results" element={<ResultsPage />}></Route>
<Route path="/404" element={<NotFoundPage />} />
<Route path="*" element={<Navigate to="/404" replace />} />
</Routes>
</BrowserRouter>
</QuickSettingsProvider>
</SidebarProvider>
</ContentProvider>
</AuthContext.Provider>
);

30
frontend/src/components/Layout/DynamicPageContent.tsx Normal file
View File

@@ -0,0 +1,30 @@
import React from "react";
import Navbar from "../Navigation/Navbar";
import { useSidebar } from "../../context/SidebarContext";
interface DynamicPageContentProps {
children: React.ReactNode;
navbarVariant?: "home" | "default";
className?: string;
style?: React.CSSProperties;
}
const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
children,
navbarVariant = "default",
className = "",
style
}) => {
const { showSideBar } = useSidebar();
return (
<div className={className} style={style}>
<Navbar variant={navbarVariant} />
<div id="content" className={`${showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]"} transition-all duration-[500ms] ease-in-out`}>
{children}
</div>
</div>
);
};
export default DynamicPageContent;

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

@@ -44,7 +44,7 @@ const ListRow: React.FC<ListRowProps> = ({
return (
<div
className={`flex flex-col space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] ${extraClasses}`}
className={`flex flex-col w-full space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] transition-all ${extraClasses}`}
>
<div className="space-y-1">
<h2 className="text-2xl font-bold">{title}</h2>

104
frontend/src/components/Navigation/Navbar.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import Logo from "../Layout/Logo";
import Button from "../Input/Button";
import Button, { ToggleButton } from "../Input/Button";
import Sidebar from "./Sidebar";
import { Sidebar as SidebarIcon } from "lucide-react";
import {
@@ -13,6 +13,8 @@ import AuthModal from "../Auth/AuthModal";
import { useAuthModal } from "../../hooks/useAuthModal";
import { useAuth } from "../../context/AuthContext";
import QuickSettings from "../Settings/QuickSettings";
import { useSidebar } from "../../context/SidebarContext";
import { useQuickSettings } from "../../context/QuickSettingsContext";
interface NavbarProps {
variant?: "home" | "default";
@@ -21,8 +23,8 @@ interface NavbarProps {
const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
const { isLoggedIn } = useAuth();
const { showAuthModal, setShowAuthModal } = useAuthModal();
const [showSideBar, setShowSideBar] = useState(false);
const [showQuickSettings, setShowQuickSettings] = useState(false);
const { showSideBar, setShowSideBar } = useSidebar();
const { showQuickSettings, setShowQuickSettings } = useQuickSettings();
const handleLogout = () => {
console.log("Logging out...");
@@ -42,10 +44,32 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
setShowSideBar(!showSideBar);
};
// Keyboard shortcut to toggle sidebar
useEffect(() => {
const handleKeyPress = (e: KeyboardEvent) => {
if (
e.key === "s" &&
document.activeElement == document.body &&
isLoggedIn
) {
handleSideBar();
}
if (e.key === "q" && document.activeElement == document.body) {
handleQuickSettings();
}
};
document.addEventListener("keydown", handleKeyPress);
return () => {
document.removeEventListener("keydown", handleKeyPress);
};
}, [showSideBar, showQuickSettings, setShowSideBar, isLoggedIn]);
return (
<div
id="navbar"
className={`flex justify-center items-center ${
className={`flex justify-center items-center w-full ${
variant === "home"
? "h-[45vh] flex-col"
: "h-[15vh] col-span-2 flex-row"
@@ -53,7 +77,11 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
>
<Logo variant={variant} />
<Button
extraClasses="absolute top-[20px] left-[20px] text-[1rem] flex items-center flex-nowrap"
extraClasses={`absolute top-[75px] ${
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} text-[1rem] flex items-center flex-nowrap`}
onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
>
{isLoggedIn ? (
@@ -69,51 +97,47 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
)}
</Button>
{/* Sidebar */}
{isLoggedIn && (
<>
<Button
<ToggleButton
onClick={() => handleSideBar()}
extraClasses={`absolute ${
extraClasses={`absolute group text-[1rem] top-[20px] ${
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]`}
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer`}
toggled={showSideBar}
>
<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(--bg-color)] text-[var(--text-color)] 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"
}`}
>
<Sidebar />
</div>
<SidebarIcon className="top-[0.20em] left-[10em] z-[90]" />
{showSideBar && (
<small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
Press S
</small>
)}
</ToggleButton>
<Sidebar />
</>
)}
<Button
extraClasses={`absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap z-[9999]`}
{/* Quick Settings Sidebar */}
<ToggleButton
extraClasses={`absolute group text-[1rem] top-[20px] ${
showQuickSettings ? "right-[21vw]" : "right-[20px]"
} cursor-pointer`}
onClick={() => handleQuickSettings()}
toggled={showQuickSettings}
>
<SettingsIcon className="h-15 w-15 mr-1 " />
Quick Settings
</Button>
<SettingsIcon className="h-15 w-15" />
<div
className={`fixed top-0 right-0 w-[250px] h-screen ] z-[90] overflow-y-auto scrollbar-hide
transition-opacity duration-500 ease-in-out ${
showQuickSettings
? "translate-x-0 opacity-100"
: "translate-x-full opacity-0"
}`}
>
<QuickSettings />
</div>
{showQuickSettings && (
<small className="absolute flex items-center top-0 mr-4 right-0 h-full w-full my-auto group-hover:right-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
Press Q
</small>
)}
</ToggleButton>
<QuickSettings />
<SearchBar />

170
frontend/src/components/Navigation/Sidebar.tsx
View File

@@ -1,75 +1,127 @@
import React, { useEffect, useState } from "react";
import { SunMoon as SunMoonIcon } from "lucide-react"
import Theme from "./Theme";
import "../../assets/styles/sidebar.css"
import React, { useState, useEffect } from "react";
import "../../assets/styles/sidebar.css";
import { useSidebar } from "../../context/SidebarContext";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../../context/AuthContext";
interface Streamer {
user_id: number;
username: string;
}
interface Category {
category_id: number;
category_name: string;
}
interface SideBarProps {
extraClasses?: string;
}
const Sidebar: React.FC<SideBarProps> = () => {
const [isCursorOnSidebar, setIsCursorOnSidebar] = useState(false);
const [triggerAnimation, setTriggerAnimation] = useState(false);
const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
const { showSideBar } = useSidebar();
const navigate = useNavigate();
const { username, isLoggedIn } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
// Fetch followed streamers
useEffect(() => {
const sideBarScroll = () => {
document.body.style.overflow = isCursorOnSidebar ? "hidden" : "unset";
if (!isLoggedIn) return;
const fetchFollowedStreamers = async () => {
try {
const response = await fetch("/api/user/following");
if (!response.ok) throw new Error("Failed to fetch followed streamers");
const data = await response.json();
setFollowedStreamers(data);
} catch (error) {
console.error("Error fetching followed streamers:", error);
}
};
sideBarScroll()
return () => {
document.body.style.overflow = "unset";
fetchFollowedStreamers();
}, [isLoggedIn]);
// Fetch followed categories
useEffect(() => {
if (!isLoggedIn) return;
const fetchFollowedCategories = async () => {
try {
const response = await fetch("/api/categories/following");
if (!response.ok)
throw new Error("Failed to fetch followed categories");
const data = await response.json();
setFollowedCategories(data);
} catch (error) {
console.error("Error fetching followed categories:", error);
}
};
}, [isCursorOnSidebar]);
const testStreamer: Record<string, string> = {
"Markiplier": "Slink1",
"Jacksepticeye": "Slink2",
"8-BitRyan": "Slink3",
};
const testCategory: Record<string, { dummyLink: string; dummyImage: string }> = {
"Action": { dummyLink: "link1", dummyImage: "../../../images/icons/Action.webp" },
"Horror": { dummyLink: "link2", dummyImage: "../../../images/icons/Horror.png" },
"Psychological": { dummyLink: "link3", dummyImage: "../../../images/icons/Psychological.png" },
"Adult": { dummyLink: "link4", dummyImage: "../../../images/icons/R-18.png" },
"Shooter": { dummyLink: "link5", dummyImage: "../../../images/icons/Shooter.png" }
};
const shownStreamers = Object.entries(testStreamer).map(([dummyCategory, dummyLink]) => {
return (
<li key={dummyCategory}>
<a href={dummyLink}>{dummyCategory}</a>
</li>
);
});
const shownCategory = Object.entries(testCategory).map(([dummyCategory, { dummyLink, dummyImage }]) => {
return (
<li key={dummyCategory} className="flex items-center border border-7 border-black space-x-3 rounded-md p-0 text-center
hover:bg-[#800020] hover:scale-110 hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250 m-[0.25em]">
<img src={dummyImage} alt={dummyCategory} className="w-[2em] h-[2em] bg-white ml-[0.25em]" />
<a href={dummyLink} className="pr-[7.5em] pt-[0.75em] pb-[0.75em]">{dummyCategory}</a>
</li>
);
});
fetchFollowedCategories();
}, [isLoggedIn]);
return (
<>
<div>
<h1 className="style"> Followed </h1>
<ul>
{shownStreamers}
</ul>
<h1 className="category-style pt-[0.50em]"> Your Categories </h1>
<ul>
{shownCategory}
</ul>
<div
id="sidebar"
className={`fixed top-0 left-0 w-[15vw] h-screen flex flex-col bg-[var(--bg-color)] text-[var(--text-color)] text-center overflow-y-auto scrollbar-hide
transition-all duration-500 ease-in-out ${
showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`}
>
{/* Profile Info */}
<div className="flex flex-row items-center justify-evenly bg-blue-700/40 py-[1em]">
<img
src="/images/monkey.png"
alt="profile picture"
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
onClick={() => navigate(`/user/${username}`)}
/>
<div className="text-center flex flex-col items-center justify-center">
<h5 className="font-thin text-[0.85rem] cursor-default">Logged in as</h5>
<button
className="font-black text-[1.4rem] hover:underline"
onClick={() => navigate(`/user/${username}`)}
>
{username}
</button>
</div>
</div>
</>
<div id="following" className="flex flex-col flex-grow justify-evenly gap-4 p-4">
<h1 className="style border cursor-default">Following</h1>
<div id="streamers-followed" className="flex-grow">
<h2 className="text-[1.5rem] cursor-default">Streamers</h2>
<ul className="mt-2 space-y-2">
{followedStreamers.map((streamer) => (
<li
key={streamer.user_id}
className="cursor-pointer bg-black py-2 rounded-lg text-white hover:text-purple-500 transition-colors"
onClick={() => navigate(`/user/${streamer.username}`)}
>
{streamer.username}
</li>
))}
</ul>
</div>
<div id="categories-followed" className="flex-grow">
<h2 className="text-[1.5rem] cursor-default">Categories</h2>
<ul className="mt-2 space-y-2">
{followedCategories.map((category) => (
<li
key={category.category_id}
className="cursor-pointer bg-black py-2 rounded-lg text-white hover:text-purple-500 transition-colors"
onClick={() => navigate(`/category/${category.category_name}`)}
>
{category.category_name}
</li>
))}
</ul>
</div>
</div>
</div>
);
};

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

@@ -16,13 +16,11 @@ interface ChatMessage {
interface ChatPanelProps {
streamId: number;
onViewerCountChange?: (count: number) => void;
onInputFocus: (focused: boolean) => void;
}
const ChatPanel: React.FC<ChatPanelProps> = ({
streamId,
onViewerCountChange,
onInputFocus,
}) => {
const { isLoggedIn, username, user_id} = useAuth();
const { showAuthModal, setShowAuthModal } = useAuthModal();
@@ -205,8 +203,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
extraClasses="flex-grow w-full focus:w-full"
maxLength={200}
onClick={() => !isLoggedIn && setShowAuthModal(true)}
onFocus={() => onInputFocus(true)}
onBlur={() => onInputFocus(false)}
/>
<button

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

@@ -58,7 +58,7 @@ const VideoPlayer: React.FC = () => {
}, [streamerName]);
return (
<div className="min-w-[65vw] w-full h-full flex justify-center items-center bg-gray-900 rounded-lg">
<div className="w-full h-full flex justify-center items-center bg-gray-900 rounded-lg">
<div ref={videoRef} className="w-full max-w-[160vh] self-center" />
</div>
);

26
frontend/src/context/SidebarContext.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { createContext, useContext, useState, ReactNode } from "react";
interface SidebarContextType {
showSideBar: boolean;
setShowSideBar: (show: boolean) => void;
}
const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
export function SidebarProvider({ children }: { children: ReactNode }) {
const [showSideBar, setShowSideBar] = useState(false);
return (
<SidebarContext.Provider value={{ showSideBar, setShowSideBar }}>
{children}
</SidebarContext.Provider>
);
}
export function useSidebar() {
const context = useContext(SidebarContext);
if (context === undefined) {
throw new Error("useSidebar must be used within a SidebarProvider");
}
return context;
}

7
frontend/src/pages/AllCategoriesPage.tsx
View File

@@ -1,8 +1,8 @@
import React, { useEffect } from "react";
import Navbar from "../components/Navigation/Navbar";
import { useNavigate } from "react-router-dom";
import ListRow from "../components/Layout/ListRow";
import { useCategories } from "../context/ContentContext";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
const AllCategoriesPage: React.FC = () => {
const { categories, setCategories } = useCategories();
@@ -51,11 +51,10 @@ const AllCategoriesPage: React.FC = () => {
};
return (
<div
<DynamicPageContent
className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<Navbar />
<ListRow
type="category"
title="All Categories"
@@ -64,7 +63,7 @@ const AllCategoriesPage: React.FC = () => {
extraClasses="text-center"
wrap={true}
/>
</div>
</DynamicPageContent>
);
};

8
frontend/src/pages/CategoryPage.tsx
View File

@@ -1,8 +1,8 @@
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import Navbar from "../components/Navigation/Navbar";
import ListRow from "../components/Layout/ListRow";
import { useNavigate } from "react-router-dom";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
interface StreamData {
type: "stream";
@@ -66,12 +66,10 @@ const CategoryPage: React.FC = () => {
}
return (
<div
<DynamicPageContent
className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<Navbar />
<div className="pt-8">
<ListRow
type="stream"
@@ -89,7 +87,7 @@ const CategoryPage: React.FC = () => {
No live streams found in this category
</div>
)}
</div>
</DynamicPageContent>
);
};

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

@@ -1,9 +1,9 @@
import React from "react";
import Navbar from "../components/Navigation/Navbar";
import ListRow from "../components/Layout/ListRow";
import { useNavigate } from "react-router-dom";
import { useStreams, useCategories } from "../context/ContentContext";
import Button from "../components/Input/Button";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
interface HomePageProps {
variant?: "default" | "personalised";
@@ -23,13 +23,11 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
};
return (
<div
id="home-page"
className="animate-moving_bg h-full"
<DynamicPageContent
navbarVariant="home"
className="h-full min-h-screen animate-moving_bg"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<Navbar variant="home" />
{/* If Personalised_HomePage, display Streams recommended for the logged-in user. Else, live streams with the most viewers. */}
<ListRow
type="stream"
@@ -77,7 +75,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
Show More . . .
</Button>
</ListRow>
</div>
</DynamicPageContent>
);
};

7
frontend/src/pages/UserPage.tsx
View File

@@ -8,6 +8,7 @@ import ListItem from "../components/Layout/ListItem";
import { useFollow } from "../hooks/useFollow";
import { useNavigate } from "react-router-dom";
import Button from "../components/Input/Button";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
interface UserProfileData {
id: number;
@@ -108,14 +109,14 @@ const UserPage: React.FC = () => {
);
}
return (
<div
<DynamicPageContent
className={`min-h-screen ${
profileData.isLive
? "bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#2efd2d]"
: bgColors[userPageVariant]
} text-white flex flex-col`}
>
<Navbar />
<div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8">
<div className="grid grid-cols-3 w-full gap-8">
{/* Profile Section - Left Third */}
@@ -241,7 +242,7 @@ const UserPage: React.FC = () => {
</div>
</div>
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
</div>
</DynamicPageContent>
);
};

50
frontend/src/pages/VideoPage.tsx
View File

@@ -1,5 +1,4 @@
import React, { useState, useEffect } from "react";
import Navbar from "../components/Navigation/Navbar";
import { ToggleButton } from "../components/Input/Button";
import ChatPanel from "../components/Video/ChatPanel";
import { useNavigate, useParams } from "react-router-dom";
@@ -10,6 +9,8 @@ import VideoPlayer from "../components/Video/VideoPlayer";
import { SocketProvider } from "../context/SocketContext";
import AuthModal from "../components/Auth/AuthModal";
import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
import { useSidebar } from "../context/SidebarContext";
interface VideoPageProps {
streamerId: number;
@@ -28,7 +29,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
const [streamData, setStreamData] = useState<StreamDataProps>();
const [viewerCount, setViewerCount] = useState(0);
const [isChatOpen, setIsChatOpen] = useState(true);
const [isInputFocused, setIsInputFocused] = useState(false);
const { showSideBar } = useSidebar();
const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
useFollow();
const { showAuthModal, setShowAuthModal } = useAuthModal();
@@ -80,7 +81,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
// Keyboard shortcut to toggle chat
useEffect(() => {
const handleKeyPress = (e: KeyboardEvent) => {
if (e.key === "c" && !isInputFocused) {
if (e.key === "c" && document.activeElement == document.body) {
setIsChatOpen((prev) => !prev);
}
};
@@ -90,7 +91,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
return () => {
document.removeEventListener("keydown", handleKeyPress);
};
}, [isInputFocused]);
}, []);
const toggleChat = () => {
setIsChatOpen((prev) => !prev);
@@ -111,34 +112,39 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
return (
<SocketProvider>
<div id="videoPage" className="w-full">
<Navbar />
{/* Toggle Button for Chat */}
<ToggleButton
onClick={toggleChat}
toggled={isChatOpen}
extraClasses="group cursor-pointer absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap"
>
{isChatOpen ? "Hide Chat" : "Show Chat"}
<small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">
Press C
</small>
</ToggleButton>
<DynamicPageContent className="w-full min-h-screen">
<div
id="container"
className={`grid ${isChatOpen ? "w-[100vw]" : "w-[125vw]"
} grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
className={`bg-gray-900 h-full grid ${
isChatOpen
? showSideBar
? "w-[85vw] duration-[1s]"
: "w-[100vw] duration-[0.5s]"
: showSideBar
? "w-[110vw] duration-[1s]"
: "w-[125vw] duration-[0.5s]"
} grid-rows-[auto_1fr] grid-cols-[auto_25vw] transition-all ease-in-out`}
>
<div className="relative">
<VideoPlayer />
</div>
<ToggleButton
onClick={toggleChat}
toggled={isChatOpen}
extraClasses="group cursor-pointer absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap"
>
{isChatOpen ? "Hide Chat" : "Show Chat"}
<small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">
Press C
</small>
</ToggleButton>
<ChatPanel
streamId={streamerId}
onViewerCountChange={(count: number) => setViewerCount(count)}
onInputFocus={setIsInputFocused}
/>
{/* Stream Data */}
@@ -244,7 +250,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
<AuthModal onClose={() => setShowAuthModal(false)} />
)}
</div>
</div>
</DynamicPageContent>
</SocketProvider>
);
};