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

Merge branch 'main' of https://github.com/john-david3/cs3305-team11

Browse Source
This commit is contained in:
Dylan De Faoite
2025-03-04 18:00:23 +00:00
parent 04d7e55011 552a379baa
commit 116ac451fa
8 changed files with 227 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/index.html
View File

@@ -3,12 +3,13 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> --> <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<link rel="icon" href="public/images/favicon.ico" /> <!-- <link rel="icon" href="public/images/favicon_monke.ico" /> -->
<link rel="icon" href="public/images/favicon_goose.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gander</title> <title>Gander</title>
</head> </head>
<body> <body>
<div id="root" class="h-screen min-w-[850px] bg-gradient-to-tr from-[#2043ba] via-[#0026a6] to-[#63007a] overflow-x-hidden"></div> <div id="root" class="h-screen min-w-[850px] bg-[var(--background)] overflow-x-hidden"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

BIN
frontend/public/images/favicon_goose.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

0
frontend/public/images/favicon.ico → frontend/public/images/favicon_monke.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

65
frontend/src/assets/styles/index.css
View File

@@ -9,21 +9,21 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 4px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: hsl(242, 100%, 10%); background: transparent;
border-radius: 5px; border-radius: 5px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #d5d5d5; background: var(--scrollbar-color);
border-radius: 5px; border-radius: 5px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #555; background: var(--scrollbar-hover);
} }
@@ -31,6 +31,11 @@ body[data-theme="light"] {
--bg-color: white; --bg-color: white;
--text-color: black; --text-color: black;
/*Global Background Colour*/
background: linear-gradient(to top right, #2043ba, #0026a6, #63007a);
--scrollbar-color: white;
--scrollbar-hover: rgb(144, 144, 144);
--sideBar-bg: rgb(255, 255, 255); --sideBar-bg: rgb(255, 255, 255);
--sideBar-text: black; --sideBar-text: black;
--sideBar-profile-bg: rgb(224, 205, 241); --sideBar-profile-bg: rgb(224, 205, 241);
@@ -40,6 +45,9 @@ body[data-theme="light"] {
--follow-bg: #aa00ff; --follow-bg: #aa00ff;
--follow-text: white; --follow-text: white;
--follow-shadow: 0px 0px 15px rgba(94, 94, 94, 0.754); --follow-shadow: 0px 0px 15px rgba(94, 94, 94, 0.754);
--streamer-box: #aa00ff;
--streamer-text: white;
--streamer-shadow: 0px 0px 10px rgba(0, 0, 0, 0.754);
--liveNow: rgba(46, 16, 16, 0.6); --liveNow: rgba(46, 16, 16, 0.6);
--recommend: rgba(5, 46, 22, 0.6); --recommend: rgba(5, 46, 22, 0.6);
@@ -80,7 +88,12 @@ body[data-theme="light"] {
} }
body[data-theme="dark"] { body[data-theme="dark"] {
--bg-color: black; /*Global Background Colour*/
background: linear-gradient(to top right, #737787, #0d1e55, #567419);
--scrollbar-color: rgb(255, 255, 255);
--scrollbar-hover: rgb(255, 255, 255);
--bg-color: black;
--text-color: white; --text-color: white;
--sideBar-bg: black; --sideBar-bg: black;
@@ -92,11 +105,14 @@ body[data-theme="dark"] {
--follow-bg: #a50000c6; --follow-bg: #a50000c6;
--follow-text: rgb(255, 255, 255); --follow-text: rgb(255, 255, 255);
--follow-shadow: 0px 0px 15px rgba(255, 255, 255, 0.966); --follow-shadow: 0px 0px 15px rgba(255, 255, 255, 0.966);
--streamer-box: #8b1711;
--streamer-text: white;
--streamer-shadow: 0px 0px 25px rgb(255, 255, 255);
--liveNow: rgba(77, 29, 29, 0.6); --liveNow: rgba(77, 29, 29, 0.6);
--recommend: rgba(4, 63, 28, 0.6); --recommend: rgba(4, 63, 28, 0.6);
--quickBar-title: rgb(255, 255, 255); --quickBar-title: rgb(255, 255, 255);
--quickBar-title-bg: rgb(0, 0, 0); --quickBar-title-bg: rgb(0, 0, 0);
--quickBar-bg: #000000d3; --quickBar-bg: #000000d3;
@@ -136,6 +152,12 @@ body[data-theme="blue"] {
--bg-color: #e0f7fa; --bg-color: #e0f7fa;
--text-color: #00539b; --text-color: #00539b;
/*Global Background Colour*/
background: linear-gradient(to top right, #223b3b, #3e7bff, #170055);
--scrollbar-color: white;
--scrollbar-hover: rgb(144, 144, 144);
--sideBar-bg: #eefafffb; --sideBar-bg: #eefafffb;
--sideBar-text: #002147; --sideBar-text: #002147;
--sideBar-profile-bg: #003571; --sideBar-profile-bg: #003571;
@@ -144,7 +166,9 @@ body[data-theme="blue"] {
--follow-bg: #ffffff; --follow-bg: #ffffff;
--follow-shadow: 0px 0px 15px rgba(161, 222, 255, 0.823); --follow-shadow: 0px 0px 15px rgba(161, 222, 255, 0.823);
--streamer-box: #00b3ff;
--streamer-text: white;
--streamer-shadow: 0px 0px 10px rgb(14, 18, 93);
--liveNow: rgba(5, 59, 103, 0.801); --liveNow: rgba(5, 59, 103, 0.801);
--recommend: rgba(112, 116, 96, 0.6); --recommend: rgba(112, 116, 96, 0.6);
@@ -185,6 +209,13 @@ body[data-theme="blue"] {
} }
body[data-theme="green"] { body[data-theme="green"] {
/*Global Background Colour*/
background: linear-gradient(to top right, #2a0d0d, #183f29, #16631e);
--scrollbar-color: white;
--scrollbar-hover: rgb(144, 144, 144);
--bg-color: #e8f5e9; --bg-color: #e8f5e9;
--text-color: #2e7d32; --text-color: #2e7d32;
@@ -198,8 +229,10 @@ body[data-theme="green"] {
--follow-bg: #b5ffb5; --follow-bg: #b5ffb5;
--follow-text: #2e7d32; --follow-text: #2e7d32;
--follow-shadow: 0px 0px 15px rgba(84, 255, 92, 0.754); --follow-shadow: 0px 0px 15px rgba(84, 255, 92, 0.754);
--streamer-box: #32b90dd4;
--liveNow: rgba(69, 150, 74, 0.6); --streamer-text: rgb(255, 255, 255);
--streamer-shadow: 0px 0px 10px rgb(1, 112, 25);
--liveNow: rgba(14, 173, 28, 0.491);
--recommend: rgba(123, 94, 14, 0.6); --recommend: rgba(123, 94, 14, 0.6);
/*Quick Settings*/ /*Quick Settings*/
@@ -238,6 +271,12 @@ body[data-theme="green"] {
} }
body[data-theme="orange"] { body[data-theme="orange"] {
/*Global Background Colour*/
background: linear-gradient(to top right, #074a84, #a17e1c, #4f2b61);
--scrollbar-color: white;
--scrollbar-hover: rgb(144, 144, 144);
--bg-color: #ffe0b2; --bg-color: #ffe0b2;
--text-color: #e65100; --text-color: #e65100;
@@ -250,9 +289,11 @@ body[data-theme="orange"] {
--follow-bg: #fdfd00af; --follow-bg: #fdfd00af;
--follow-text: #000000; --follow-text: #000000;
--follow-shadow: 0px 0px 15px rgba(0, 229, 255, 0.754); --follow-shadow: 0px 0px 15px rgba(0, 229, 255, 0.754);
--streamer-box: #ffff00;
--liveNow: rgba(202, 192, 53, 0.6); --streamer-text: rgb(0, 0, 0);
--recommend: rgba(192, 111, 18, 0.6); --streamer-shadow: 0px 0px 10px rgba(195, 75, 0, 0.754);
--liveNow: #4c008285;
--recommend: #c49c2da5;
--quickBar-title-bg: #E67E22; --quickBar-title-bg: #E67E22;

29
frontend/src/assets/styles/listRow.css
View File

@@ -1,8 +1,23 @@
.hide-scrollbar::-webkit-scrollbar { :root {
display: none; --scrollbar-background: linear-gradient(to right, #6a11cb, #2575fc);
--scrollbar-thumb: rgba(255, 255, 255, 0.6);
} }
.hide-scrollbar { ::-webkit-scrollbar {
-ms-overflow-style: none; height: 4px;
scrollbar-width: none; }
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.9);
}

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

@@ -24,12 +24,19 @@ const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
className={`${className} bg-[url(/images/background-pattern.svg)]`} className={`${className} bg-[url(/images/background-pattern.svg)]`}
style={style} style={style}
> >
{/* Hide Scrollbar for WebKit-based Browsers
<style>
{`
::-webkit-scrollbar {
display: none;
}
`}
</style> */}
<Navbar variant={navbarVariant} /> <Navbar variant={navbarVariant} />
<div <div
id="content" id="content"
className={`flex-grow min-w-[850px] ${ className={`flex-grow min-w-[850px] ${showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]"
showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]" } items-start transition-all duration-[500ms] ease-in-out ${contentClassName}`}
} items-start transition-all duration-[500ms] ease-in-out ${contentClassName}`}
> >
{children} {children}
</div> </div>

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

@@ -47,7 +47,7 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
const [currentItems, setCurrentItems] = useState<ItemType[]>(items); const [currentItems, setCurrentItems] = useState<ItemType[]>(items);
const slider = useRef<HTMLDivElement>(null); const slider = useRef<HTMLDivElement>(null);
const scrollAmount = window.innerWidth * 0.3; const scrollAmount = window.innerWidth * 0.4;
const navigate = useNavigate(); const navigate = useNavigate();
const addMoreItems = (newItems: ItemType[]) => { const addMoreItems = (newItems: ItemType[]) => {

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

@@ -7,161 +7,167 @@ import { ToggleButton } from "../Input/Button";
import { getCategoryThumbnail } from "../../utils/thumbnailUtils"; import { getCategoryThumbnail } from "../../utils/thumbnailUtils";
interface Streamer { interface Streamer {
user_id: number; user_id: number;
username: string; username: string;
} }
interface Category { interface Category {
category_id: number; category_id: number;
category_name: string; category_name: string;
} }
interface SideBarProps { interface SideBarProps {
extraClasses?: string; extraClasses?: string;
} }
const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => { const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
const { showSideBar, setShowSideBar } = useSidebar(); const { showSideBar, setShowSideBar } = useSidebar();
const navigate = useNavigate(); const navigate = useNavigate();
const { username, isLoggedIn, profilePicture } = useAuth(); const { username, isLoggedIn, profilePicture } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]); const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
const [followedCategories, setFollowedCategories] = useState<Category[]>([]); const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
const [justToggled, setJustToggled] = useState(false); const [justToggled, setJustToggled] = useState(false);
const sidebarId = useRef(Math.floor(Math.random() * 1000000)); const sidebarId = useRef(Math.floor(Math.random() * 1000000));
// Fetch followed streamers & categories // Fetch followed streamers & categories
useEffect(() => { useEffect(() => {
if (!isLoggedIn) return; if (!isLoggedIn) return;
const fetchFollowData = async () => { const fetchFollowData = async () => {
try { try {
const response = await fetch("/api/user/following"); const response = await fetch("/api/user/following");
if (!response.ok) throw new Error("Failed to fetch followed content"); if (!response.ok) throw new Error("Failed to fetch followed content");
const data = await response.json(); const data = await response.json();
setFollowedStreamers(data.streams); setFollowedStreamers(data.streams);
setFollowedCategories(data.categories); setFollowedCategories(data.categories);
} catch (error) { } catch (error) {
console.error("Error fetching followed content:", error); console.error("Error fetching followed content:", error);
} }
}; };
fetchFollowData(); fetchFollowData();
}, [isLoggedIn]); }, [isLoggedIn]);
const handleSideBar = () => { const handleSideBar = () => {
setShowSideBar(!showSideBar); setShowSideBar(!showSideBar);
setJustToggled(true); setJustToggled(true);
setTimeout(() => setJustToggled(false), 200); setTimeout(() => setJustToggled(false), 200);
}; };
// Keyboard shortcut to toggle sidebar // Keyboard shortcut to toggle sidebar
useEffect(() => { useEffect(() => {
const handleKeyPress = (e: KeyboardEvent) => { const handleKeyPress = (e: KeyboardEvent) => {
if (e.key === "s" && document.activeElement == document.body && isLoggedIn) handleSideBar(); if (e.key === "s" && document.activeElement == document.body && isLoggedIn) handleSideBar();
}; };
document.addEventListener("keydown", handleKeyPress); document.addEventListener("keydown", handleKeyPress);
return () => { return () => {
document.removeEventListener("keydown", handleKeyPress); document.removeEventListener("keydown", handleKeyPress);
}; };
}, [showSideBar, setShowSideBar, isLoggedIn]); }, [showSideBar, setShowSideBar, isLoggedIn]);
return ( return (
<> <>
<ToggleButton <ToggleButton
onClick={() => handleSideBar()} onClick={() => handleSideBar()}
extraClasses={`absolute group text-[1rem] top-[9vh] ${ extraClasses={`absolute group text-[1rem] top-[9vh] ${showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]"
showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]" } ease-in-out cursor-pointer z-[50]`}
} ease-in-out cursor-pointer z-[50]`} toggled={showSideBar}
toggled={showSideBar} >
> <SidebarIcon className="h-[2vw] w-[2vw]" />
<SidebarIcon className="h-[2vw] w-[2vw]" />
{!showSideBar && !justToggled && ( {!showSideBar && !justToggled && (
<small className="absolute flex items-center top-0 ml-2 left-0 h-full my-auto w-fit text-nowrap font-bold my-auto group-hover:left-full opacity-0 group-hover:opacity-100 group-hover:bg-black/30 p-1 rounded-md text-white transition-all"> <small className="absolute flex items-center top-0 ml-2 left-0 h-full my-auto w-fit text-nowrap font-bold my-auto group-hover:left-full opacity-0 group-hover:opacity-100 group-hover:bg-black/30 p-1 rounded-md text-white transition-all">
Press S Press S
</small> </small>
)} )}
</ToggleButton> </ToggleButton>
<div <div
id={`sidebar-${sidebarId.current}`} id={`sidebar-${sidebarId.current}`}
className={`fixed top-0 left-0 w-[15vw] h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide className={`fixed top-0 left-0 w-[15vw] h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
transition-all duration-500 ease-in-out ${showSideBar ? "translate-x-0" : "-translate-x-full"} z-50 ${extraClasses}`} transition-all duration-500 ease-in-out ${showSideBar ? "translate-x-0" : "-translate-x-full"} z-50 ${extraClasses}`}
> >
{/* Profile Info */} {/* Profile Info */}
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]"> <div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
<img <img
src={profilePicture || `/user/${username}/profile_picture`} src={profilePicture || `/user/${username}/profile_picture`}
onError={(e) => { onError={(e) => {
e.currentTarget.src = "/images/pfps/default.png"; e.currentTarget.src = "/images/pfps/default.png";
e.currentTarget.onerror = null; e.currentTarget.onerror = null;
}} }}
alt="profile picture" alt="profile picture"
className="w-[3em] h-[3em] object-cover rounded-full border-[0.15em] border-purple-500 cursor-pointer" className="w-[3em] h-[3em] object-cover rounded-full border-[0.15em] border-purple-500 cursor-pointer"
onClick={() => navigate(`/user/${username}`)} onClick={() => navigate(`/user/${username}`)}
/> />
<div className="text-center flex flex-col items-center justify-center"> <div className="text-center flex flex-col items-center justify-center">
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">Logged in as</h5> <h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">Logged in as</h5>
<button className="font-black text-[1.4rem] hover:underline" onClick={() => navigate(`/user/${username}`)}> <button className="font-black text-[1.4rem] hover:underline" onClick={() => navigate(`/user/${username}`)}>
<div className="text-[var(--sideBar-profile-text)]">{username}</div> <div className="text-[var(--sideBar-profile-text)]">{username}</div>
</button> </button>
</div> </div>
</div> </div>
<div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4"> <div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4">
<div <div
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300" className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")} onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
> >
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1> <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1>
</div> </div>
<div id="streamers-followed" className="flex flex-col flex-grow items-center"> <div id="streamers-followed" className="flex flex-col flex-grow items-center">
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Streamers</h2> <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default mb-5">Streamers</h2>
<div className="flex flex-col flex-grow justify-evenly w-full"> <div className="flex flex-col flex-grow justify-evenly w-full">
{followedStreamers.map((streamer) => ( {followedStreamers.map((streamer) => (
<button <div
key={`${sidebarId.current}-streamer-${streamer.username}`} key={`${sidebarId.current}-streamer-${streamer.username}`}
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 font-bold transition-colors" className="flex items-center gap-3 cursor-pointer bg-[var(--streamer-box)] w-full py-2 px-3 rounded-lg font-bold transition hover:scale-105 ease-in-out duration-300 "
onClick={() => navigate(`/user/${streamer.username}`)} onClick={() => navigate(`/user/${streamer.username}`)}
> onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--streamer-shadow)")}
{streamer.username} onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
</button> >
))} <img
</div> src={`/user/${streamer.username}/profile_picture`}
</div> alt={`${streamer.username}'s Profile`}
className="w-10 h-10 rounded-full object-cover"
/>
<div className="flex flex-1 items-center justify-center text-[var(--streamer-text)]">{streamer.username}</div>
</div>
))}
</div>
</div>
<div id="categories-followed" className="flex flex-col flex-grow items-center"> <div id="categories-followed" className="flex flex-col flex-grow items-center">
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Categories</h2> <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Categories</h2>
{/* Followed Categories */} {/* Followed Categories */}
<div id="categories-followed" className="grid grid-cols-1 gap-4 p-4 w-full"> <div id="categories-followed" className="grid grid-cols-1 gap-4 p-4 w-full">
{followedCategories.map((category) => { {followedCategories.map((category) => {
return ( return (
<div <div
key={`${sidebarId.current}-category-${category.category_id}`} key={`${sidebarId.current}-category-${category.category_id}`}
className="group relative flex flex-col items-center justify-center w-full h-full max-h-[50px] border border-[--text-color] className="group relative flex flex-col items-center justify-center w-full h-full max-h-[50px] border border-[--text-color]
rounded-lg overflow-hidden hover:shadow-lg transition-all text-white hover:text-purple-500 cursor-pointer" rounded-lg overflow-hidden hover:shadow-lg transition-all text-white hover:text-purple-500 cursor-pointer"
onClick={() => (window.location.href = `/category/${category.category_name}`)} onClick={() => (window.location.href = `/category/${category.category_name}`)}
> >
<img <img
src={getCategoryThumbnail(category.category_name)} src={getCategoryThumbnail(category.category_name)}
alt={category.category_name} alt={category.category_name}
className="w-full h-28 object-cover group-hover:blur-[3px] transition-all" className="w-full h-28 object-cover group-hover:blur-[3px] transition-all"
/> />
<div className="absolute bottom-2 bg-black bg-opacity-60 font-bold w-full text-center py-1"> <div className="absolute bottom-2 bg-black bg-opacity-60 font-bold w-full text-center py-1">
{category.category_name} {category.category_name}
</div> </div>
</div> </div>
); );
})} })}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</> </>
); );
}; };
export default Sidebar; export default Sidebar;