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

Patch: Tidy up of style code and fix to authentication logic

Browse Source 
Feat: Added ability to access user's username through AuthContext
This commit is contained in:
Chris-1010
2025-01-27 16:11:42 +00:00
parent 4e9fa011fa
commit 93b3ffbc0b
16 changed files with 97 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/public/images/sample_game_video.mp4
View File

Binary file not shown.

12
frontend/src/App.tsx
View File

@@ -2,18 +2,20 @@ import { useState, useEffect } from "react";
import { AuthContext } from "./context/AuthContext";
import { StreamsProvider } from "./context/StreamsContext";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import HomePage, { PersonalisedHomePage } from "./pages/HomePage";
import HomePage from "./pages/HomePage";
import StreamerRoute from "./components/Stream/StreamerRoute";
import NotFoundPage from "./pages/NotFoundPage";
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [username, setUsername] = useState<string | null>(null);
useEffect(() => {
fetch("/api/get_login_status")
.then((response) => response.json())
.then((loggedIn) => {
setIsLoggedIn(loggedIn);
.then((data) => {
setIsLoggedIn(data.status);
setUsername(data.username);
})
.catch((error) => {
console.error("Error fetching login status:", error);
@@ -22,13 +24,13 @@ function App() {
}, []);
return (
<AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
<AuthContext.Provider value={{ isLoggedIn, username, setIsLoggedIn, setUsername }}>
<StreamsProvider>
<BrowserRouter>
<Routes>
<Route
path="/"
element={isLoggedIn ? <PersonalisedHomePage /> : <HomePage />}
element={isLoggedIn ? <HomePage variant="personalised" /> : <HomePage />}
/>
<Route path="/:streamerName" element={<StreamerRoute />} />

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

@@ -20,25 +20,6 @@
background: #555;
}
.bg-repeat {
animation: moving_bg 200s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.bg-repeat {
animation: none;
}
}
@keyframes moving_bg {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}
/*
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

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

@@ -7,14 +7,14 @@ interface LogoProps {
const Logo: React.FC<LogoProps> = ({ variant = "default" }) => {
const gradient =
"bg-gradient-to-br from-yellow-400 via-red-500 to-indigo-500 text-transparent bg-clip-text group-hover:mx-1 transition-all";
"text-transparent group-hover:mx-1 transition-all";
return (
<Link to="/" className="cursor-pointer">
<div id="logo" className={`group py-3 text-center font-bold hover:scale-110 transition-all ${variant === "home" ? "text-[12vh]" : "text-[4vh]"}`}>
<h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text">
Go on, have a...
</h6>
<div className="flex w-fit min-w-[30vw] justify-center leading-none transition-all">
<div className="flex w-fit min-w-[30vw] bg-logo bg-clip-text animate-moving_text_colour bg-[length:300%_300%] justify-center leading-none transition-all">
<span className={gradient}>G</span>
<span className={gradient}>A</span>
<span className={gradient}>N</span>

11
frontend/src/components/Layout/Name.tsx
View File

@@ -1,11 +0,0 @@
const Name = () => {
return (
<div id="logo" className="text-center">
<span className="text-7xl font-bold italic bg-agog bg-clip-text text-transparent leading-none p-1 hover:scale-110 transition-all hover:animate-agog bg-[length:300%_300%]">
AGOG
</span>
</div>
);
};
export default Name;

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

@@ -26,7 +26,7 @@ const StreamerRoute: React.FC = () => {
checkStreamStatus();
// Poll for live status changes
const interval = setInterval(checkStreamStatus, 90000); // Check every 90 seconds
const interval = setInterval(checkStreamStatus, 1000); // Check every 90 seconds
return () => clearInterval(interval);
}, [streamerName]);

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

@@ -1,6 +1,7 @@
import React, { useState, useEffect, useRef } from "react";
import { io, Socket } from "socket.io-client";
import Input from "../Layout/Input";
import { useAuth } from "../../context/AuthContext";
interface ChatMessage {
chatter_id: string;
@@ -10,21 +11,21 @@ interface ChatMessage {
interface ChatPanelProps {
streamId: number;
chatterId?: string; // Optional as user might not be logged in
}
const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, chatterId }) => {
const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
const [messages, setMessages] = useState<ChatMessage[]>([]);
const [inputMessage, setInputMessage] = useState("");
const [socket, setSocket] = useState<Socket | null>(null);
const chatContainerRef = useRef<HTMLDivElement>(null);
const { isLoggedIn, username } = useAuth();
// Initialize socket connection
useEffect(() => {
const newSocket = io("/", {
path: "/api/socket.io",
withCredentials: true
}); // Make sure this matches your backend URL
});
setSocket(newSocket);
newSocket.on("connect", () => {
@@ -37,6 +38,14 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, chatterId }) => {
setMessages(prev => [...prev, data]);
});
newSocket.on("connect_error", (error) => {
console.error("Socket connection error:", error);
});
newSocket.on("connect_timeout", () => {
console.error("Socket connection timeout");
});
newSocket.on("error", (error) => {
console.error("Socket error:", error);
});
@@ -74,10 +83,12 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, chatterId }) => {
}, [messages]);
const sendChat = () => {
if (!inputMessage.trim() || !chatterId || !socket) return;
if (!inputMessage.trim() || !socket) {
console.log("No message to send or socket not initialized!");
return;
};
socket.emit("send_message", {
chatter_id: chatterId,
stream_id: streamId,
message: inputMessage.trim()
});
@@ -106,7 +117,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, chatterId }) => {
<span className="text-gray-400 text-sm">
{new Date(msg.time_sent).toLocaleTimeString()}
</span>
<span className={`font-bold ${msg.chatter_id === chatterId ? "text-blue-400" : "text-green-400"}`}> {msg.chatter_id}: </span>
<span className={`font-bold ${msg.chatter_id === username ? "text-blue-400" : "text-green-400"}`}> {msg.chatter_id}: </span>
<span>{msg.message}</span>
</div>
))}
@@ -118,13 +129,13 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, chatterId }) => {
value={inputMessage}
onChange={(e) => setInputMessage(e.target.value)}
onKeyDown={handleKeyPress}
placeholder={chatterId ? "Type a message..." : "Login to chat"}
disabled={!chatterId}
placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
disabled={!isLoggedIn}
extraClasses="flex-grow disabled:cursor-not-allowed"
/>
<button
onClick={sendChat}
disabled={!chatterId}
disabled={!isLoggedIn}
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
Send

2
frontend/src/context/AuthContext.tsx
View File

@@ -2,7 +2,9 @@ import { createContext, useContext } from "react";
interface AuthContextType {
isLoggedIn: boolean;
username: string | null;
setIsLoggedIn: (value: boolean) => void;
setUsername: (value: string | null) => void;
}
export const AuthContext = createContext<AuthContextType | undefined>(

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

@@ -3,9 +3,12 @@ import Navbar from "../components/Layout/Navbar";
import StreamListRow from "../components/Layout/StreamListRow";
import { useNavigate } from "react-router-dom";
import { useStreams } from "../context/StreamsContext";
import Name from "../components/Layout/Name";
const HomePage: React.FC = () => {
interface HomePageProps {
variant?: "default" | "personalised";
}
const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
const { featuredStreams, featuredCategories } = useStreams();
const navigate = useNavigate();
@@ -17,54 +20,22 @@ const HomePage: React.FC = () => {
return (
<div
id="home-page"
className="bg-repeat"
className="animate-moving_bg"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<Navbar variant="home" />
<Name></Name>
{/*//TODO Extract StreamListRow away, to ListRow so that it makes sense for categories to be there also */}
<StreamListRow
title="Live Now"
description="Streamers that are currently live"
title={"Live Now" + (variant === "personalised" ? " - Recommended" : "")}
description={variant === "personalised" ? "We think you might like these streams - Streamers recommended for you" : "Streamers that are currently live"}
streams={featuredStreams}
onStreamClick={handleStreamClick}
/>
<StreamListRow
title="Trending Categories"
description="Categories that have been 'popping off' lately"
streams={featuredCategories}
onStreamClick={() => {}} //TODO
/>
</div>
);
};
export const PersonalisedHomePage: React.FC = () => {
const { featuredStreams, featuredCategories } = useStreams();
const navigate = useNavigate();
const handleStreamClick = (streamId: number, streamerName: string) => {
console.log(`Navigating to ${streamId}`);
navigate(`/${streamerName}`);
};
return (
<div
id="personalised-home-page"
className="bg-repeat"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<Navbar variant="home" />
{/*//TODO Extract StreamListRow away to ListRow so that it makes sense for categories to be there also */}
<StreamListRow
title="Live Now - Recommended"
description="We think you might like these streams - Streamers recommended for you"
streams={featuredStreams}
onStreamClick={handleStreamClick}
/>
<StreamListRow
title="Followed Categories"
description="Current streams from your followed categories"
title={variant === "personalised" ? "Followed Categories" : "Trending Categories"}
description={variant === "personalised" ? "Current streams from your followed categories" : "Categories that have been 'popping off' lately"}
streams={featuredCategories}
onStreamClick={() => {}} //TODO
/>

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

@@ -45,7 +45,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
<VideoPlayer streamId={streamId} />
{isLoggedIn ? (
<ChatPanel streamId={streamId} chatterId="chatter-man" />
<ChatPanel streamId={streamId} />
) : (
<ChatPanel streamId={streamId} />
)}

27
frontend/tailwind.config.js
View File

@@ -6,20 +6,27 @@ export default {
],
theme: {
extend: {
animation: {
moving_text_colour: "moving_text_colour 6s ease-in-out infinite alternate",
moving_bg: 'moving_bg 200s linear infinite'
},
backgroundImage: {
logo: "linear-gradient(45deg, #60A5FA, #8B5CF6, #EC4899, #FACC15,#60A5FA, #8B5CF6, #EC4899, #FACC15)",
},
keyframes: {
agog: {
moving_text_colour: {
"0%": { backgroundPosition: "0% 50%" },
"100%": { backgroundPosition: "100% 50%" },
},
},
animation: {
agog: "agog 6s linear infinite",
},
backgroundImage: {
agog: "linear-gradient(to right, #60A5FA, #8B5CF6, #EC4899, #FACC15,#60A5FA, #8B5CF6, #EC4899, #FACC15)",
},
moving_bg: {
'0%': { backgroundPosition: '0% 0%' },
'100%': { backgroundPosition: '100% 0%' }
}
}
},
},
plugins: [