-
{children}
diff --git a/frontend/src/components/Layout/ListRow.tsx b/frontend/src/components/Layout/ListRow.tsx
index 8c66010..ba10380 100644
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/frontend/src/components/Layout/ListRow.tsx
@@ -89,7 +89,7 @@ const ListRow = forwardRef<
return (
= ({
Go on, have a...
-
+
G
A
N
diff --git a/frontend/src/components/Navigation/Navbar.tsx b/frontend/src/components/Navigation/Navbar.tsx
index a605fba..9ffc467 100644
--- a/frontend/src/components/Navigation/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar.tsx
@@ -1,8 +1,6 @@
import React, { useEffect } from "react";
import Logo from "../Layout/Logo";
import Button, { ToggleButton } from "../Input/Button";
-import Sidebar from "./Sidebar";
-import { Sidebar as SidebarIcon } from "lucide-react";
import {
LogIn as LogInIcon,
LogOut as LogOutIcon,
@@ -24,7 +22,7 @@ interface NavbarProps {
const Navbar: React.FC = ({ variant = "default" }) => {
const { isLoggedIn } = useAuth();
const { showAuthModal, setShowAuthModal } = useAuthModal();
- const { showSideBar, setShowSideBar } = useSidebar();
+ const { showSideBar } = useSidebar();
const { showQuickSettings, setShowQuickSettings } = useQuickSettings();
const handleLogout = () => {
@@ -41,23 +39,11 @@ const Navbar: React.FC = ({ variant = "default" }) => {
setShowQuickSettings(!showQuickSettings);
};
- const handleSideBar = () => {
- 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) {
+ if (e.key === "q" && document.activeElement == document.body)
handleQuickSettings();
- }
};
document.addEventListener("keydown", handleKeyPress);
@@ -65,12 +51,12 @@ const Navbar: React.FC = ({ variant = "default" }) => {
return () => {
document.removeEventListener("keydown", handleKeyPress);
};
- }, [showSideBar, showQuickSettings, setShowSideBar, isLoggedIn]);
+ }, [showQuickSettings]);
return (
= ({ variant = "default" }) => {
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
- } text-[1rem] flex items-center flex-nowrap`}
+ } text-[1rem] flex items-center flex-nowrap z-[99]`}
onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
>
{isLoggedIn ? (
@@ -100,30 +86,6 @@ const Navbar: React.FC = ({ variant = "default" }) => {
)}
- {/* Sidebar */}
- {isLoggedIn && (
- <>
- handleSideBar()}
- extraClasses={`absolute group text-[1rem] top-[9vh] ${
- showSideBar
- ? "left-[16vw] duration-[0.5s]"
- : "left-[20px] duration-[1s]"
- } ease-in-out cursor-pointer`}
- toggled={showSideBar}
- >
-
- = ({ variant = "default" }) => {
onClick={() => handleQuickSettings()}
toggled={showQuickSettings}
>
- = ({ extraClasses }) => {
- const { showSideBar } = useSidebar();
+const Sidebar: React.FC = ({ extraClasses = "" }) => {
+ const { showSideBar, setShowSideBar } = useSidebar();
const navigate = useNavigate();
const { username, isLoggedIn } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState([]);
@@ -42,6 +44,28 @@ const Sidebar: React.FC = ({ extraClasses }) => {
fetchFollowedStreamers();
}, [isLoggedIn]);
+ const handleSideBar = () => {
+ setShowSideBar(!showSideBar);
+ };
+
+ // Keyboard shortcut to toggle sidebar
+ useEffect(() => {
+ const handleKeyPress = (e: KeyboardEvent) => {
+ if (
+ e.key === "s" &&
+ document.activeElement == document.body &&
+ isLoggedIn
+ )
+ handleSideBar();
+ };
+
+ document.addEventListener("keydown", handleKeyPress);
+
+ return () => {
+ document.removeEventListener("keydown", handleKeyPress);
+ };
+ }, [showSideBar, setShowSideBar, isLoggedIn]);
+
// Fetch followed categories
useEffect(() => {
if (!isLoggedIn) return;
@@ -62,84 +86,113 @@ const Sidebar: React.FC = ({ extraClasses }) => {
}, [isLoggedIn]);
return (
-
+ handleSideBar()}
+ extraClasses={`absolute group text-[1rem] top-[9vh] ${
+ showSideBar
+ ? "left-[16vw] duration-[0.5s]"
+ : "left-[20px] duration-[1s]"
+ } ease-in-out cursor-pointer z-[50]`}
+ toggled={showSideBar}
+ >
+
+
- {/* Profile Info */}
-
- 
navigate(`/user/${username}`)}
- />
-
-
- navigate(`/user/${username}`)}
- />
-
-
- - Logged in as -
- -
- = ({
streamer,
- extraClasses,
+ extraClasses = "",
onStreamDetected,
}) => {
const { streamerName: urlStreamerName } = useParams<{
diff --git a/frontend/src/pages/AllCategoriesPage.tsx b/frontend/src/pages/AllCategoriesPage.tsx
index b585fad..c5bdc2c 100644
--- a/frontend/src/pages/AllCategoriesPage.tsx
+++ b/frontend/src/pages/AllCategoriesPage.tsx
@@ -92,10 +92,7 @@ const AllCategoriesPage: React.FC = () => {
};
return (
-
+
{
const newCategories = await fetchCategoryStreams();
if (newCategories && newCategories.length > 0) {
listRowRef.current.addMoreItems(newCategories);
- }
- else console.log("No more data to fetch");
+ } else console.log("No more data to fetch");
}
};
@@ -102,10 +101,7 @@ const CategoryPage: React.FC = () => {
}
return (
-
+
= ({ variant = "default" }) => {
return (
{
const [overflow, setOverflow] = useState(false);
@@ -33,7 +33,11 @@ const ResultsPage: React.FC = ({}) => {
searchResults.streams.length === 0
) {
return (
-
);
}
return (
-
- (e.currentTarget.style.boxShadow = "var(--follow-shadow)")
- }
- onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
- >
-
- - Following -
-
-
+
);
};
diff --git a/frontend/src/components/Stream/VideoPlayer.tsx b/frontend/src/components/Stream/VideoPlayer.tsx
index 1a0e4d1..b0b7ac6 100644
--- a/frontend/src/components/Stream/VideoPlayer.tsx
+++ b/frontend/src/components/Stream/VideoPlayer.tsx
@@ -11,7 +11,7 @@ interface VideoPlayerProps {
const VideoPlayer: React.FC- Streamers -
--
- {followedStreamers.map((streamer) => (
-
- navigate(`/user/${streamer.username}`)} - > - {streamer.username} - - ))} -
+ navigate(`/user/${username}`)}
+ />
+
- navigate(`/user/${username}`)}
+ />
+
+
+ Logged in as +
+ +
-
- - Categories -
--
- {followedCategories.map((category) => (
-
- navigate(`/category/${category.category_name}`)} - > - {category.category_name} - - ))} -
+
+ (e.currentTarget.style.boxShadow = "var(--follow-shadow)")
+ }
+ onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
+ >
+
+ + Following +
+
+
+
+ + Streamers +
+
+ {followedStreamers.map((streamer: any) => (
+
+ ))}
+
+
+
+ Categories +
+
+ {followedCategories.map((category: any) => (
+
+ ))}
+
+
+
-
+ Search results for "{query}"
@@ -42,103 +46,103 @@ const ResultsPage: React.FC = ({}) => {
-
+
);
};
diff --git a/frontend/src/pages/VideoPage.tsx b/frontend/src/pages/VideoPage.tsx
index dbbbcb5..92bc382 100644
--- a/frontend/src/pages/VideoPage.tsx
+++ b/frontend/src/pages/VideoPage.tsx
@@ -142,7 +142,7 @@ const VideoPage: React.FC = ({ streamerId }) => {
{isChatOpen ? "Hide Chat" : "Show Chat"}
Search results for "{query}"
-
+
+ + Search results for "{query}" +
+
- {searchResults.streams.length > 0 && (
- ({
- id: stream.user_id,
- type: "stream",
- title: stream.title,
- username: stream.username,
- streamCategory: stream.category_name,
- viewers: stream.num_viewers,
- thumbnail: stream.thumbnail_url,
- }))}
- title="Streams"
- onItemClick={(streamer_name: string) =>
- (window.location.href = `/${streamer_name}`)
- }
- itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
- amountForScroll={3}
- />
- )}
+ ({
+ id: user.user_id,
+ type: "user",
+ title: `${user.is_live ? "🔴" : ""} ${user.username}`,
+ viewers: 0,
+ username: user.username,
+ thumbnail: user.profile_picture,
+ }))}
+ title="Users"
+ onItemClick={(username: string) =>
+ (window.location.href = `/user/${username}`)
+ }
+ amountForScroll={3}
+ itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+ />
+ )}
+
-
+ {searchResults.streams.length > 0 && (
+ ({
+ id: stream.user_id,
+ type: "stream",
+ title: stream.title,
+ username: stream.username,
+ streamCategory: stream.category_name,
+ viewers: stream.num_viewers,
+ thumbnail: stream.thumbnail_url,
+ }))}
+ title="Streams"
+ onItemClick={(streamer_name: string) =>
+ (window.location.href = `/${streamer_name}`)
+ }
+ itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+ amountForScroll={3}
+ />
+ )}
- {searchResults.categories.length > 0 && (
- ({
- id: category.category_id,
- type: "category",
- title: category.category_name,
- viewers: 0,
- thumbnail: `/images/category_thumbnails/${category.category_name
- .toLowerCase()
- .replace(/ /g, "_")}.webp`,
- }))}
- title="Categories"
- onItemClick={(category_name: string) =>
- navigate(`/category/${category_name}`)
- }
- titleClickable={true}
- itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
- amountForScroll={3}
- />
- )}
+ {searchResults.categories.length > 0 && (
+ ({
+ id: category.category_id,
+ type: "category",
+ title: category.category_name,
+ viewers: 0,
+ thumbnail: `/images/category_thumbnails/${category.category_name
+ .toLowerCase()
+ .replace(/ /g, "_")}.webp`,
+ }))}
+ title="Categories"
+ onItemClick={(category_name: string) =>
+ navigate(`/category/${category_name}`)
+ }
+ titleClickable={true}
+ itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+ amountForScroll={3}
+ />
+ )}
- {searchResults.users.length > 0 && (
- ({
- id: user.user_id,
- type: "user",
- title: `${user.is_live ? "🔴" : ""} ${user.username}`,
- viewers: 0,
- username: user.username,
- thumbnail: user.profile_picture,
- }))}
- title="Users"
- onItemClick={(username: string) =>
- (window.location.href = `/user/${username}`)
- }
- amountForScroll={3}
- itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
- />
- )}
-
+ {searchResults.users.length > 0 && (
+
-
-