- 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/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 />}