- Added Chat frontend, interfaces with backend;

- Updated styles for VideoPage;
- Added StreamerRoute component;
- Remove unused Login and Signup pages;
- Update to Navbar and Logo components for new structure on different pages;
- Update to auth flow to display error messages to user;

frontend/src/pages/HomePage.tsx

@@ -8,16 +8,18 @@ const HomePage: React.FC = () => {
   const { featuredStreams, featuredCategories } = useStreams();
   const navigate = useNavigate();
 
-  const handleStreamClick = (streamerId: string) => {
-    navigate(`/${streamerId}`);
+  const handleStreamClick = (streamId: number, streamerName: string) => {
+    console.log(`Navigating to ${streamId}`);
+    navigate(`/${streamerName}`);
   };
 
   return (
     <div
-      className="home-page bg-repeat"
+      id="home-page"
+      className="bg-repeat"
       style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
     >
-      <Navbar />
+      <Navbar variant="home" />
 
       <StreamListRow
         title="Live Now"
@@ -39,16 +41,18 @@ export const PersonalisedHomePage: React.FC = () => {
   const { featuredStreams, featuredCategories } = useStreams();
   const navigate = useNavigate();
 
-  const handleStreamClick = (streamerId: string) => {
-    navigate(`/${streamerId}`);
+  const handleStreamClick = (streamId: number, streamerName: string) => {
+    console.log(`Navigating to ${streamId}`);
+    navigate(`/${streamerName}`);
   };
 
   return (
     <div
-      className="home-page bg-repeat"
+      id="personalised-home-page"
+      className="bg-repeat"
       style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
     >
-      <Navbar />
+      <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"

frontend/src/pages/LoginPage.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-
-const LoginPage: React.FC = () => {
-	return (
-		<div>
-		</div>
-	);
-};
-
-export default LoginPage;

frontend/src/pages/SignupPage.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-
-const SignupPage: React.FC = () => {
-	return (
-		<div>
-		</div>
-	);
-};
-
-export default SignupPage;

frontend/src/pages/UserPage.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const UserPage: React.FC = () => {
+  return <div></div>;
+};
+
+export default UserPage;

frontend/src/pages/VideoPage.tsx

@@ -1,13 +1,21 @@
 import React, { useState, useEffect } from "react";
 import Navbar from "../components/Layout/Navbar";
 import Button from "../components/Layout/Button";
+import ChatPanel from "../components/Video/ChatPanel";
 import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
 import { useParams } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+import VideoPlayer from "../components/Video/VideoPlayer";
 
-const VideoPage: React.FC = () => {
+interface VideoPageProps {
+  streamId: number;
+}
+
+const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   const [showCheckout, setShowCheckout] = useState(false);
   const showReturn = window.location.search.includes("session_id");
   const { streamerName } = useParams<{ streamerName: string }>();
+  const { isLoggedIn } = useAuth();
 
   useEffect(() => {
     // Prevent scrolling when checkout is open
@@ -25,19 +33,33 @@ const VideoPage: React.FC = () => {
     if (streamerName) {
       // Fetch stream data for this streamer
       console.log(`Loading stream for ${streamerName}`);
-      // fetch(`/api/get_stream_data/${streamerName}`)
+      // fetch(`/api/get_stream_data/${streamId}`)
     }
   }, [streamerName]);
 
   return (
-    <div className="text-5xl text-red-600 flex flex-col justify-evenly align-center h-screen text-center">
+    <div id="videoPage" className="w-full">
       <Navbar />
 
-      <h1>
-        Hello! Welcome to the soon-to-be-awesome Video Page where you'll watch
-        the best streams ever!
-      </h1>
-      <Button onClick={() => setShowCheckout(true)}>Payment Screen Test</Button>
+      <div id="container" className="bg-gray-900">
+        <VideoPlayer streamId={streamId} />
+
+        {isLoggedIn ? (
+          <ChatPanel streamId={streamId} chatterId="chatter-man" />
+        ) : (
+          <ChatPanel streamId={streamId} />
+        )}
+
+        <div
+          id="stream-info"
+          className="flex"
+          style={{ gridArea: "3 / 1 / 4 / 2" }}
+        >
+          <Button onClick={() => setShowCheckout(true)} extraClasses="mx-auto mb-4">
+            Payment Screen Test
+          </Button>
+        </div>
+      </div>
 
       {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} />}
       {showReturn && <Return />}