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

REFACTOR: Update navbar position in project component hierarchy;

Browse Source 
UPDATE: Add navbar 'no-searchbar' variant;

+ last commit - MINOR: Handle of new ChatContext
This commit is contained in:
Chris-1010
2025-02-26 13:23:42 +00:00
parent de68651685
commit d36eaffafb
7 changed files with 57 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.tsx
View File

@@ -14,7 +14,6 @@ import { SidebarProvider } from "./context/SidebarContext";
import { QuickSettingsProvider } from "./context/QuickSettingsContext";
import StreamDashboardPage from "./pages/StreamDashboardPage";
import { Brightness } from "./context/BrightnessContext";
import Sidebar from "./components/Navigation/Sidebar";
import LoadingScreen from "./components/Layout/LoadingScreen";
import Following from "./pages/Following";
@@ -61,7 +60,6 @@ function App() {
<SidebarProvider>
<QuickSettingsProvider>
<BrowserRouter>
{isLoggedIn && window.innerWidth > 900 && <Sidebar />}
<Routes>
<Route
path="/"

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

@@ -4,7 +4,7 @@ import { useSidebar } from "../../context/SidebarContext";
interface DynamicPageContentProps extends React.HTMLProps<HTMLDivElement> {
children: React.ReactNode;
navbarVariant?: "home" | "no-navbar" | "default";
navbarVariant?: "home" | "no-searchbar" | "default";
className?: string;
contentClassName?: string;
style?: React.CSSProperties;
@@ -20,8 +20,8 @@ const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
const { showSideBar } = useSidebar();
return (
<div className={className} style={style}>
{navbarVariant !== "no-navbar" && <Navbar variant={navbarVariant} />}
<div className={`${className} bg-[url(/images/background-pattern.svg)]`} style={style}>
<Navbar variant={navbarVariant} />
<div
id="content"
className={`min-w-[850px] ${

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

@@ -1,7 +1,7 @@
import React from "react";
interface LogoProps {
variant?: "home" | "default";
variant?: "home" | "no-searchbar" | "default";
extraClasses?: string;
}

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

@@ -14,9 +14,10 @@ import { useAuth } from "../../context/AuthContext";
import QuickSettings from "../Settings/QuickSettings";
import { useSidebar } from "../../context/SidebarContext";
import { useQuickSettings } from "../../context/QuickSettingsContext";
import Sidebar from "./Sidebar";
interface NavbarProps {
variant?: "home" | "default";
variant?: "home" | "no-searchbar" | "default";
}
const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
@@ -56,55 +57,53 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
return (
<div
id="navbar"
className={`flex justify-evenly items-center mx-[15vw] ${
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`}
onClick={() => handleQuickSettings()}
toggled={showQuickSettings}
>
<SettingsIcon className="h-[2vw] w-[2vw]" />
{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 />
{/* 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`}
onClick={() => handleQuickSettings()}
toggled={showQuickSettings}
>
<SettingsIcon className="h-[2vw] w-[2vw]" />
{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 />
{variant != "no-searchbar" && <SearchBar />}
{/* Stream Button */}
{isLoggedIn && !window.location.pathname.includes("go-live") && (

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import VideoPage from "../../pages/VideoPage";
import LoadingScreen from "../Layout/LoadingScreen";
import { ChatProvider } from "../../context/ChatContext";
const StreamerRoute: React.FC = () => {
const { streamerName } = useParams();
@@ -35,9 +36,12 @@ const StreamerRoute: React.FC = () => {
if (isLoading) return <LoadingScreen />;
// streamId=0 is a special case for the streamer's latest stream
if (isLive) {
return <VideoPage streamerId={streamId} />;
return (
<ChatProvider>
<VideoPage streamerId={streamId} />
</ChatProvider>
);
}
if (streamerName) {

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

@@ -96,16 +96,7 @@ const CategoryPage: React.FC = () => {
if (hasMoreData && !streams.length) return <LoadingScreen />;
return (
<DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000] bg-[url(/images/background-pattern.svg)]"style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
>
{/* Hide Scrollbar for WebKit-based Browsers */}
<style>
{`
::-webkit-scrollbar {
display: none;
}
`}
</style>
<DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]">
<div className="pt-8">
<ListRow
type="stream"

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

@@ -25,23 +25,15 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
};
if (!categories || categories.length === 0) {
console.log("No categories found yet");
return <LoadingScreen>Loading Categories...</LoadingScreen>;
}
return (
<DynamicPageContent
navbarVariant="home"
className="h-full min-h-screen bg-[url(/images/background-pattern.svg)] animate-moving_bg"
style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
className="min-h-screen animate-moving_bg"
>
{/* Hide Scrollbar for WebKit-based Browsers */}
<style>
{`
::-webkit-scrollbar {
display: none;
}
`}
</style>
<ListRow
type="stream"
title={
@@ -57,6 +49,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
wrap={false}
onItemClick={handleStreamClick}
extraClasses="bg-[var(--liveNow)]"
itemExtraClasses="w-[20vw]"
/>
{/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}
@@ -77,6 +70,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
onItemClick={handleCategoryClick}
titleClickable={true}
extraClasses="bg-[var(--recommend)]"
itemExtraClasses="w-[20vw]"
>
<Button
extraClasses="absolute right-10"