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

Feat: Added ability to access user's username through AuthContext

frontend/src/components/Layout/Logo.tsx

@@ -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>

frontend/src/components/Layout/Name.tsx

@@ -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;

frontend/src/components/Stream/StreamerRoute.tsx

@@ -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]);

frontend/src/components/Video/ChatPanel.tsx

@@ -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