- 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;
2025-01-25 02:34:06 +00:00
parent 5c16092b1c
commit a409e74992
23 changed files with 625 additions and 119 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,9 +3,7 @@ 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 VideoPage from "./pages/VideoPage";
-import LoginPage from "./pages/LoginPage";
-import SignupPage from "./pages/SignupPage";
+import StreamerRoute from "./components/Stream/StreamerRoute";
 import NotFoundPage from "./pages/NotFoundPage";

 function App() {
@@ -32,9 +30,7 @@ function App() {
              path="/"
              element={isLoggedIn ? <PersonalisedHomePage /> : <HomePage />}
            />
-            <Route path="/:streamerName" element={<VideoPage />} />
-            <Route path="/login" element={<LoginPage />} />
-            <Route path="/signup" element={<SignupPage />} />
+            <Route path="/:streamerName" element={<StreamerRoute />} />

            <Route path="*" element={<NotFoundPage />} />
          </Routes>
--- a/frontend/src/assets/styles/index.css
+++ b/frontend/src/assets/styles/index.css
@@ -12,7 +12,7 @@
 }

 ::-webkit-scrollbar-thumb {
-  background: #ff9900;
+  background: #d5d5d5;
  border-radius: 5px;
 }

--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/frontend/src/components/Auth/AuthModal.tsx
@@ -13,10 +13,10 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {

  return (
    <>
-      <div className="blurring-layer fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
+      <div id="blurring-layer" className="fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>

-      <div className="modal-container fixed inset-0 bg-black/30 has-[input:focus]:bg-black/40 flex flex-col items-center justify-around z-50 h-[70vh] m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all">
-        <div className="login-methods w-full flex flex-row items-center justify-evenly">
+      <div id="modal-container" className="fixed inset-0 bg-black/30 has-[input:focus]:bg-black/40 flex flex-col items-center justify-around z-50 h-[70vh] m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all">
+        <div id="login-methods" className="w-full flex flex-row items-center justify-evenly">
          <button
            onClick={onClose}
            className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
--- a/frontend/src/components/Auth/LoginForm.tsx
+++ b/frontend/src/components/Auth/LoginForm.tsx
@@ -61,27 +61,30 @@ const LoginForm: React.FC = () => {

        const data = await response.json();

-        if (!response.ok) {
-          throw new Error(data.message || "Login failed");
-        }
-
        if (data.logged_in) {
          //TODO: Handle successful login (e.g., redirect to home page)
          console.log("Login successful");
          setIsLoggedIn(true);
          window.location.reload();
        } else {
-          // Handle authentication errors
-          if (data.errors) {
+          // Handle authentication errors from server
+          if (data.error_fields) {
+            const newErrors: FormErrors = {};
+            for (const field of data.error_fields) {
+              newErrors[field as keyof FormErrors] = data.message;
+            }
+            setErrors(newErrors);
+          } else {
+            // If no specific fields are indicated, set a general error
            setErrors({
-              general: "Invalid username or password",
+              general: data.message || "An error occurred during login",
            });
          }
        }
      } catch (error) {
-        console.error("Login error:", error);
+        console.error("Error logging in:", error);
        setErrors({
-          general: "An error occurred during login. Please try again.",
+          general: "An error occurred during login",
        });
      }
    }
@@ -90,7 +93,8 @@ const LoginForm: React.FC = () => {
  return (
    <form
      onSubmit={handleSubmit}
-      className="login-form h-[100%] flex flex-col h-full justify-evenly items-center"
+      id="login-form"
+      className="h-[100%] flex flex-col h-full justify-evenly items-center"
    >
      {errors.general && (
        <p className="text-red-500 text-sm text-center">{errors.general}</p>
--- a/frontend/src/components/Auth/RegisterForm.tsx
+++ b/frontend/src/components/Auth/RegisterForm.tsx
@@ -15,6 +15,7 @@ interface FormErrors {
  email?: string;
  password?: string;
  confirmPassword?: string;
+  general?: string; // For general authentication errors
 }

 const RegisterForm: React.FC = () => {
@@ -68,14 +69,8 @@ const RegisterForm: React.FC = () => {
          credentials: "include",
          body: JSON.stringify(formData),
        });
-        console.log(`sending data: ${JSON.stringify(formData)}`);
-        const data = await response.json();

-        if (!response.ok) {
-          throw new Error(
-            data.message || `Registration failed. ${response.body}`
-          );
-        }
+        const data = await response.json();

        if (data.account_created) {
          //TODO Handle successful registration (e.g., redirect or show success message)
@@ -84,17 +79,24 @@ const RegisterForm: React.FC = () => {
          window.location.reload();
        } else {
          // Handle validation errors from server
-          const serverErrors: FormErrors = {};
-          if (data.errors) {
-            Object.entries(data.errors).forEach(([field, message]) => {
-              serverErrors[field as keyof FormErrors] = message as string;
+          if (data.error_fields) {
+            const newErrors: FormErrors = {};
+            for (const field of data.error_fields) {
+              newErrors[field as keyof FormErrors] = data.message;
+            }
+            setErrors(newErrors);
+          } else {
+            // If no specific fields are indicated, set a general error
+            setErrors({
+              general: data.message || "An error occurred during registration",
            });
-            setErrors(serverErrors);
          }
        }
      } catch (error) {
-        console.error("Registration error:", error);
-        //TODO Show user-friendly error message via Alert component maybe
+        console.error("Error Registering:", error);
+        setErrors({
+          general: "An error occurred during registration",
+        });
      }
    }
  };
@@ -102,8 +104,13 @@ const RegisterForm: React.FC = () => {
  return (
    <form
      onSubmit={handleSubmit}
-      className="register-form h-[100%] flex flex-col h-full justify-evenly items-center"
+      id="register-form"
+      className="h-[100%] flex flex-col h-full justify-evenly items-center"
    >
+      {errors.general && (
+        <p className="text-red-500 text-sm text-center">{errors.general}</p>
+      )}
+      
      {errors.username && (
        <p className="text-red-500 mt-3 text-sm">{errors.username}</p>
      )}
--- a/frontend/src/components/Checkout/CheckoutForm.tsx
+++ b/frontend/src/components/Checkout/CheckoutForm.tsx
@@ -67,8 +67,8 @@ const CheckoutForm: React.FC<CheckoutFormProps> = ({ onClose }) => {

  return (
    <>
-      <div className="blurring-layer fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm"></div>
-      <div className="modal-container fixed inset-0 bg-black/30 flex items-center justify-center z-50 h-[70vh] m-auto w-fit py-[50px] px-[100px] rounded-[2rem]">
+      <div id="blurring-layer" className="fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm"></div>
+      <div id="modal-container" className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 h-[70vh] m-auto w-fit py-[50px] px-[100px] rounded-[2rem]">
        <button
          onClick={onClose}
          className="absolute top-[1rem] right-[3rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
--- a/frontend/src/components/Layout/Logo.tsx
+++ b/frontend/src/components/Layout/Logo.tsx
@@ -1,16 +1,20 @@
 import React from "react";
 import { Link } from "react-router-dom";

-const Logo: React.FC = () => {
+interface LogoProps {
+  variant?: "home" | "default";
+}
+
+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";
  return (
    <Link to="/" className="cursor-pointer">
-      <div className="logo group py-3 text-center text-[12vh] font-bold hover:scale-110 transition-all">
+      <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-evenly leading-none transition-all">
+        <div className="flex w-fit min-w-[30vw] justify-center leading-none transition-all">
          <span className={gradient}>G</span>
          <span className={gradient}>A</span>
          <span className={gradient}>N</span>
--- a/frontend/src/components/Layout/Navbar.tsx
+++ b/frontend/src/components/Layout/Navbar.tsx
@@ -13,7 +13,11 @@ import Input from "./Input";
 import AuthModal from "../Auth/AuthModal";
 import { useAuth } from "../../context/AuthContext";

-const Navbar: React.FC = () => {
+interface NavbarProps {
+  variant?: "home" | "default";
+}
+
+const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
  const [showAuthModal, setShowAuthModal] = useState(false);
  const { isLoggedIn } = useAuth();

@@ -39,8 +43,8 @@ const Navbar: React.FC = () => {
  };

  return (
-    <div className="flex flex-col justify-around items-center h-[45vh]">
-      <Logo />
+    <div id="navbar" className={`flex justify-center items-center ${variant === "home" ? "h-[45vh] flex-col" : "h-[15vh] col-span-2 flex-row"}`}>
+      <Logo variant={variant} />
      <Button
        extraClasses="absolute top-[20px] left-[20px] text-[1rem] flex items-center flex-nowrap"
        onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
@@ -69,13 +73,13 @@ const Navbar: React.FC = () => {

      <Button
        extraClasses="absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap"
-        onClick={() => console.log("Settings")}
+        onClick={() => console.log("Settings - TODO")}
      >
        <SettingsIcon className="h-15 w-15 mr-1" />
        Quick Settings
      </Button>

-      <div className="search-bar flex items-center">
+      <div id="search-bar" className="flex items-center">
        <Input
          type="text"
          placeholder="Search..."
--- a/frontend/src/components/Layout/StreamListRow.tsx
+++ b/frontend/src/components/Layout/StreamListRow.tsx
@@ -17,11 +17,14 @@ interface StreamListRowProps {
  title: string;
  description: string;
  streams: StreamItem[];
-  onStreamClick?: (streamId: string) => void;
+  onStreamClick: (streamId: number, streamerName: string) => void;
 }

 // Individual stream entry component
-const StreamListEntry: React.FC<StreamListEntryProps> = ({ stream, onClick }) => {
+const StreamListEntry: React.FC<StreamListEntryProps> = ({
+  stream,
+  onClick,
+}) => {
  return (
    <div
      className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 transition-colors"
@@ -30,7 +33,7 @@ const StreamListEntry: React.FC<StreamListEntryProps> = ({ stream, onClick }) =>
      <div className="relative w-full pt-[56.25%]">
        {stream.thumbnail ? (
          <img
-            src={`images/`+stream.thumbnail}
+            src={`images/` + stream.thumbnail}
            alt={stream.title}
            className="absolute top-0 left-0 w-full h-full object-cover"
          />
@@ -65,7 +68,7 @@ const StreamListRow: React.FC<StreamListRowProps> = ({
          <StreamListEntry
            key={stream.id}
            stream={stream}
-            onClick={() => onStreamClick?.(stream.id)}
+            onClick={() => onStreamClick?.(stream.id, stream.streamer)}
          />
        ))}
      </div>
--- a/frontend/src/components/Stream/StreamerRoute.tsx
+++ b/frontend/src/components/Stream/StreamerRoute.tsx
@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import VideoPage from "../../pages/VideoPage";
+import UserPage from "../../pages/UserPage";
+
+const StreamerRoute: React.FC = () => {
+  const { streamerName } = useParams<{ streamerName: string }>();
+  const [isLive, setIsLive] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const checkStreamStatus = async () => {
+      try {
+        const response = await fetch(`/api/streamer/${streamerName}/status`);
+        const data = await response.json();
+        console.log("Stream status:", data);
+        setIsLive(data.status === "live");
+      } catch (error) {
+        console.error("Error checking stream status:", error);
+        setIsLive(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    checkStreamStatus();
+
+    // Poll for live status changes
+    const interval = setInterval(checkStreamStatus, 90000); // Check every 90 seconds
+
+    return () => clearInterval(interval);
+  }, [streamerName]);
+
+  if (isLoading) {
+    return <div>Loading...</div>; // Or your loading component
+  }
+
+  return isLive ? <VideoPage streamId={1} /> : <UserPage />;
+};
+
+export default StreamerRoute;
--- a/frontend/src/components/Stream/Thumbnail.tsx
+++ b/frontend/src/components/Stream/Thumbnail.tsx
@@ -7,12 +7,12 @@ interface ThumbnailProps {

 const Thumbnail = ({ path, alt }: ThumbnailProps) => {
  return (
-	<div>
+	<div id='stream-thumbnail'>
      <img
        width={300}
              src={path}
              alt={alt}
-              className="stream-thumbnail rounded-md"
+              className="rounded-md"
            />
 	</div>
  )
--- a/frontend/src/components/Video/ChatPanel.tsx
+++ b/frontend/src/components/Video/ChatPanel.tsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect, useRef } from "react";
+import Input from "../Layout/Input";
+
+interface ChatMessage {
+  chatter_id: string;
+  message: string;
+  time_sent: string;
+}
+
+interface ChatPanelProps {
+  streamId: number;
+  chatterId?: string; // Optional as user might not be logged in
+}
+
+const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, chatterId }) => {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [inputMessage, setInputMessage] = useState("");
+  const lastReceivedRef = useRef<string>("");
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+
+  // Load initial chat history
+  useEffect(() => {
+    const loadPastChat = async () => {
+      try {
+        const response = await fetch(`/api/chat/${streamId}`);
+        if (!response.ok) throw new Error("Failed to fetch chat history");
+        const data = await response.json();
+        if (data.chat_history) {
+          setMessages(data.chat_history);
+          if (data.chat_history.length > 0) {
+            lastReceivedRef.current =
+              data.chat_history[data.chat_history.length - 1].time_sent;
+          }
+        }
+      } catch (error) {
+        console.error("Error loading chat history:", error);
+      }
+    };
+
+    loadPastChat();
+  }, [streamId]);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (chatContainerRef.current)
+      chatContainerRef.current.scrollTop =
+        chatContainerRef.current.scrollHeight;
+  }, [messages]);
+
+  // Poll for new messages
+  useEffect(() => {
+    const getRecentChats = async () => {
+      if (!lastReceivedRef.current) return;
+
+      try {
+        const response = await fetch(
+          `/api/load_new_chat/${streamId}?last_received=${lastReceivedRef.current}`
+        );
+        if (!response.ok) throw new Error("Failed to fetch recent chats");
+        const newMessages = await response.json();
+        if (newMessages && newMessages.length > 0) {
+          setMessages((prev) => [...prev, ...newMessages]);
+          lastReceivedRef.current =
+            newMessages[newMessages.length - 1].time_sent;
+        }
+      } catch (error) {
+        console.error("Error fetching recent chats:", error);
+      }
+    };
+
+    const pollInterval = setInterval(getRecentChats, 3000); // Poll every 3 seconds
+    return () => clearInterval(pollInterval);
+  }, [streamId]);
+
+  const sendChat = async () => {
+    if (!inputMessage.trim() || !chatterId) return;
+
+    try {
+      const response = await fetch("/api/send_chat", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          chatter_id: chatterId,
+          stream_id: streamId,
+          message: inputMessage,
+        }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        if (data.chat_sent) {
+          setInputMessage("");
+        }
+      }
+    } catch (error) {
+      console.error("Error sending chat:", error);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendChat();
+    }
+  };
+
+  return (
+    <div id="chat-panel" className="h-full flex flex-col rounded-lg p-4" >
+      <h2 className="text-xl font-bold mb-4 text-white">Stream Chat</h2>
+
+      <div
+        ref={chatContainerRef}
+        id="chat-message-list"
+        className="flex-grow w-full max-h-[50vh] overflow-y-auto mb-4 space-y-2"
+      >
+        {messages.map((msg, index) => (
+          <div key={index} className="grid grid-cols-[8%_minmax(15%,_100px)_1fr] items-center bg-gray-700 rounded p-2 text-white">
+            <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>{msg.message}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex justify-center gap-2">
+        <Input
+          type="text"
+          value={inputMessage}
+          onChange={(e) => setInputMessage(e.target.value)}
+          onKeyDown={handleKeyPress}
+          placeholder={chatterId ? "Type a message..." : "Login to chat"}
+          disabled={!chatterId}
+          extraClasses="flex-grow disabled:cursor-not-allowed"
+        />
+        <button
+          onClick={sendChat}
+          disabled={!chatterId}
+          className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Send
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ChatPanel;
--- a/frontend/src/components/Video/VideoPlayer.tsx
+++ b/frontend/src/components/Video/VideoPlayer.tsx
@@ -1,35 +1,59 @@
-// video.html
+import React, { useEffect, useRef } from "react";
+import videojs from "video.js";
+import type Player from "video.js/dist/types/player";
+import "video.js/dist/video-js.css";

-// src/components/Video/VideoPlayer.tsx
-import React, { useEffect } from 'react';
-import videojs from 'video.js';
-import 'video.js/dist/video-js.css';
+interface VideoPlayerProps {
+  streamId: number;
+}
+
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ streamId }) => {
+  const videoRef = useRef<HTMLDivElement>(null);
+  const playerRef = useRef<Player | null>(null);

-const VideoPlayer: React.FC = () => {
  useEffect(() => {
-    const player = videojs('player', {
-      width: 1280,
-      height: 720,
-      controls: true,
-      preload: 'auto',
-      sources: [{
-        src: '/hls/stream.m3u8',
-        type: 'application/x-mpegURL'
-      }]
-    });
+    // Makes sure Video.js player is only initialized once
+    if (!playerRef.current && videoRef.current) {
+      const videoElement = document.createElement("video");
+      videoElement.classList.add(
+        "video-js",
+        "vjs-big-play-centered",
+        "w-full",
+        "h-full"
+      );
+      videoRef.current.appendChild(videoElement);

+      playerRef.current = videojs(videoElement, {
+        controls: true,
+        fluid: true,
+        responsive: true,
+        aspectRatio: "16:9",
+        sources: [
+          {
+            src: `/api/hls1/${streamId}`,
+            type: "application/x-mpegURL",
+          },
+        ],
+      });
+    }
+
+    // Dispose the Video.js player when the component unmounts
    return () => {
-      if (player) {
-        player.dispose();
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = null;
      }
    };
-  }, []);
+  }, [streamId]);

  return (
-    <video
-      id="player"
-      className="video-js vjs-default-skin"
-    />
+    <div
+      id="video-container"
+      className="h-full flex items-center bg-gray-900 rounded-lg"
+      style={{ gridArea: "2 / 1 / 3 / 2" }}
+    >
+      <div ref={videoRef} id="video-player" className="w-full" />
+    </div>
  );
 };

--- a/frontend/src/pages/HomePage.tsx
+++ b/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"
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -1,10 +0,0 @@
-import React from 'react';
-
-const LoginPage: React.FC = () => {
-	return (
-		<div>
-		</div>
-	);
-};
-
-export default LoginPage;
--- a/frontend/src/pages/SignupPage.tsx
+++ b/frontend/src/pages/SignupPage.tsx
@@ -1,10 +0,0 @@
-import React from 'react';
-
-const SignupPage: React.FC = () => {
-	return (
-		<div>
-		</div>
-	);
-};
-
-export default SignupPage;
--- a/frontend/src/pages/UserPage.tsx
+++ b/frontend/src/pages/UserPage.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const UserPage: React.FC = () => {
+  return <div></div>;
+};
+
+export default UserPage;
--- a/frontend/src/pages/VideoPage.tsx
+++ b/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 />}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,33 @@
 {
-  "name": "Software Project",
+  "name": "Team-Software-Project",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
+        "@types/video.js": "^7.3.58",
        "axios": "^1.7.9",
        "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "video.js": "^8.21.0"
      },
      "devDependencies": {
        "@types/react": "^19.0.8",
        "@types/react-dom": "^19.0.3"
      }
    },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.7.tgz",
+      "integrity": "sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@types/react": {
      "version": "19.0.8",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.8.tgz",
@@ -34,6 +48,81 @@
        "@types/react": "^19.0.0"
      }
    },
+    "node_modules/@types/video.js": {
+      "version": "7.3.58",
+      "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.58.tgz",
+      "integrity": "sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==",
+      "license": "MIT"
+    },
+    "node_modules/@videojs/http-streaming": {
+      "version": "3.16.2",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.16.2.tgz",
+      "integrity": "sha512-fvt4ko7FknxiT9FnjyNQt6q2px+awrkM+Orv7IB/4gldvj94u4fowGfmNHynnvNTPgPkdxHklGmFLGfclYw8HA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^4.1.1",
+        "aes-decrypter": "^4.0.2",
+        "global": "^4.4.0",
+        "m3u8-parser": "^7.2.0",
+        "mpd-parser": "^1.3.1",
+        "mux.js": "7.1.0",
+        "video.js": "^7 || ^8"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "video.js": "^8.19.0"
+      }
+    },
+    "node_modules/@videojs/vhs-utils": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.1.1.tgz",
+      "integrity": "sha512-5iLX6sR2ownbv4Mtejw6Ax+naosGvoT9kY+gcuHzANyUZZ+4NpeNdKMUhb6ag0acYej1Y7cmr/F2+4PrggMiVA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/xhr": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.7.0.tgz",
+      "integrity": "sha512-giab+EVRanChIupZK7gXjHy90y3nncA2phIOyG3Ne5fvpiMJzvqYwiTOnEVW2S4CoYcuKJkomat7bMXA/UoUZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/aes-decrypter": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.2.tgz",
+      "integrity": "sha512-lc+/9s6iJvuaRe5qDlMTpCFjnwpkeOXp8qP3oiZ5jsj1MRg+SBVUmmICrhxHvc8OELSmc+fEyyxAuppY6hrWzw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^4.1.1",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
    "node_modules/asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -79,6 +168,11 @@
        "node": ">=0.4.0"
      }
    },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
    "node_modules/follow-redirects": {
      "version": "1.15.9",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -113,6 +207,33 @@
        "node": ">= 6"
      }
    },
+    "node_modules/global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "license": "MIT",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
+    "node_modules/is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
+      "license": "MIT"
+    },
+    "node_modules/m3u8-parser": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.2.0.tgz",
+      "integrity": "sha512-CRatFqpjVtMiMaKXxNvuI3I++vUumIXVVT/JpCpdU/FynV/ceVw1qpPyyBNindL+JlPMSesx+WX1QJaZEJSaMQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^4.1.1",
+        "global": "^4.4.0"
+      }
+    },
    "node_modules/mime-db": {
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -134,6 +255,67 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
+    "node_modules/mpd-parser": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.1.tgz",
+      "integrity": "sha512-1FuyEWI5k2HcmhS1HkKnUAQV7yFPfXPht2DnRRGtoiiAAW+ESTbtEXIDpRkwdU+XyrQuwrIym7UkoPKsZ0SyFw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "mpd-to-m3u8-json": "bin/parse.js"
+      }
+    },
+    "node_modules/mux.js": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.1.0.tgz",
+      "integrity": "sha512-NTxawK/BBELJrYsZThEulyUMDVlLizKdxyAsMuzoCD1eFj97BVaA8D/CvKsKu6FOLYkFojN5CbM9h++ZTZtknA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      },
+      "bin": {
+        "pkcs7": "bin/cli.js"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/proxy-from-env": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -161,11 +343,68 @@
        "react": "^19.0.0"
      }
    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
    "node_modules/scheduler": {
      "version": "0.25.0",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
      "license": "MIT"
+    },
+    "node_modules/video.js": {
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.21.0.tgz",
+      "integrity": "sha512-zcwerRb257QAuWfi8NH9yEX7vrGKFthjfcONmOQ4lxFRpDAbAi+u5LAjCjMWqhJda6zEmxkgdDpOMW3Y21QpXA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "^3.16.2",
+        "@videojs/vhs-utils": "^4.1.1",
+        "@videojs/xhr": "2.7.0",
+        "aes-decrypter": "^4.0.2",
+        "global": "4.4.0",
+        "m3u8-parser": "^7.2.0",
+        "mpd-parser": "^1.3.1",
+        "mux.js": "^7.0.1",
+        "videojs-contrib-quality-levels": "4.1.0",
+        "videojs-font": "4.2.0",
+        "videojs-vtt.js": "0.15.5"
+      }
+    },
+    "node_modules/videojs-contrib-quality-levels": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz",
+      "integrity": "sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "global": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=16",
+        "npm": ">=8"
+      },
+      "peerDependencies": {
+        "video.js": "^8"
+      }
+    },
+    "node_modules/videojs-font": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.2.0.tgz",
+      "integrity": "sha512-YPq+wiKoGy2/M7ccjmlvwi58z2xsykkkfNMyIg4xb7EZQQNwB71hcSsB3o75CqQV7/y5lXkXhI/rsGAS7jfEmQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/videojs-vtt.js": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "global": "^4.3.1"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -1,8 +1,10 @@
 {
  "dependencies": {
+    "@types/video.js": "^7.3.58",
    "axios": "^1.7.9",
    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "video.js": "^8.21.0"
  },
  "devDependencies": {
    "@types/react": "^19.0.8",
--- a/web_server/blueprints/init.py
+++ b/web_server/blueprints/init.py
@@ -30,11 +30,13 @@ def create_app():
        from blueprints.stripe import stripe_bp
        from blueprints.user import user_bp
        from blueprints.streams import stream_bp
+        from blueprints.chat import chat_bp

        app.register_blueprint(auth_bp)
        app.register_blueprint(main_bp)
        app.register_blueprint(stripe_bp)
        app.register_blueprint(user_bp)
        app.register_blueprint(stream_bp)
+        app.register_blueprint(chat_bp)

    return app
--- a/web_server/blueprints/authentication.py
+++ b/web_server/blueprints/authentication.py
@@ -22,8 +22,13 @@ def signup():

    # Basic server-side validation
    if not all([username, email, password]):
+        fields = ["username", "email", "password"]
+        for x in fields:
+            if not [username, email, password][fields.index(x)]:
+                fields.remove(x)
        return jsonify({
            "account_created": False,
+            "error_fields": fields,
            "message": "Missing required fields"
        }), 400

@@ -45,13 +50,15 @@ def signup():
        if dup_email is not None:
            return jsonify({
                "account_created": False,
-                "errors": {"email": "Email already taken"}
+                "error_fields": ["email"],
+                "message": "Email already taken"
            }), 400

        if dup_username is not None:
            return jsonify({
                "account_created": False,
-                "errors": {"username": "Username already taken"}
+                "error_fields": ["username"],
+                "message": "Username already taken"
            }), 400

        # Create new user
@@ -122,14 +129,16 @@ def login():
        if not user:
            return jsonify({
                "logged_in": False,
-                "errors": {"general": "Invalid username or password"}
+                "error_fields": ["username", "password"],
+                "message": "Invalid username or password"
            }), 401

        # Verify password
        if not check_password_hash(user["password"], password):
            return jsonify({
                "logged_in": False,
-                "errors": {"general": "Invalid username or password"}
+                "error_fields": ["username", "password"],
+                "message": "Invalid username or password"
            }), 401

        # Set up session
--- a/web_server/blueprints/streams.py
+++ b/web_server/blueprints/streams.py
@@ -139,9 +139,16 @@ def get_streamer(streamer_id):
    """
    return

+@stream_bp.route('/streamer/<string:streamerName>/status')
+def get_streamer_status(streamerName):
+    """
+    Returns a streamer's status, if they are live or not
+    """
+    return {"status": "live", "streamId": 1}

-@stream_bp.route('/get_stream_data/<int:streamer_id>', methods=['GET'])
-def get_stream(streamer_id):
+
+@stream_bp.route('/get_stream_data/<int:stream_id>', methods=['GET'])
+def get_stream(stream_id):
    """
    Returns a streamer's stream data
    """