UPDATE: Updated chat message structure;

Bug: Session seems to be empty when chat.py routes are called.

frontend/src/components/Auth/LoginForm.tsx

@@ -69,7 +69,7 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {
 
         if (data.logged_in) {
           //TODO: Handle successful login (e.g., redirect to home page)
-          console.log("Login successful");
+          console.log("Login successful! Details: ", data);
           setIsLoggedIn(true);
           window.location.reload();
         } else {

frontend/src/components/Stream/StreamerRoute.tsx

@@ -25,7 +25,7 @@ const StreamerRoute: React.FC = () => {
     checkStreamStatus();
 
     // Poll for live status changes
-    const interval = setInterval(checkStreamStatus, 1000); // Check every 1 second
+    const interval = setInterval(checkStreamStatus, 10000); // Check every 10 second
 
     return () => clearInterval(interval);
   }, [streamerName]);

frontend/src/components/Video/ChatPanel.tsx

@@ -4,7 +4,7 @@ import { useAuth } from "../../context/AuthContext";
 import { useSocket } from "../../context/SocketContext";
 
 interface ChatMessage {
-  chatter_id: string;
+  chatter_username: string;
   message: string;
   time_sent: string;
 }
@@ -112,11 +112,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
             </span>
             <span
               className={`font-bold ${
-                msg.chatter_id === username ? "text-blue-400" : "text-green-400"
+                msg.chatter_username === username ? "text-blue-400" : "text-green-400"
               }`}
             >
               {" "}
-              {msg.chatter_id}:{" "}
+              {msg.chatter_username}:{" "}
             </span>
             <span>{msg.message}</span>
           </div>

frontend/src/pages/HomePage.tsx

@@ -3,7 +3,6 @@ import Navbar from "../components/Layout/Navbar";
 import ListRow from "../components/Layout/ListRow";
 import { useNavigate } from "react-router-dom";
 import { useStreams } from "../context/StreamsContext";
-import { useAuth } from "../context/AuthContext";
 
 interface HomePageProps {
   variant?: "default" | "personalised";
@@ -12,7 +11,6 @@ interface HomePageProps {
 const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
   const { featuredStreams, featuredCategories } = useStreams();
   const navigate = useNavigate();
-  const { isLoggedIn } = useAuth();
 
   const handleStreamClick = (streamId: number, streamerName: string) => {
     console.log(`Navigating to ${streamId}`);
@@ -27,25 +25,15 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
     >
       <Navbar variant="home" />
 
-
+      {/* If Personalised_HomePage, display Streams recommended for the logged-in user. Else, live streams with the most viewers. */}
-      {/* Not working - trying to display default streams */}
       <ListRow
         type="stream"
-        title="Live Now"
+        title={"Live Now" + (variant === "personalised" ? " - Recommended" : "")}
-        description="Streamers that are currently live"
+        description={variant === "personalised" ? "We think you might like these streams - Streamers recommended for you" : "Streamers that are currently live"}
         items={featuredStreams}
         onClick={handleStreamClick}
       />
-
+      {/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}
-      {isLoggedIn && variant === "personalised" && (
-        <ListRow
-          type="stream"
-          title="Live Now - Recommended"
-          description="We think you might like these streams - Streamers recommended for you"
-          items={featuredStreams}
-          onClick={handleStreamClick}
-        />
-      )}
       <ListRow
         type="category"
         title={variant === "personalised" ? "Followed Categories" : "Trending Categories"}

frontend/vite.config.ts

@@ -1,14 +1,15 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
   server: {
     allowedHosts: ['frontend'],
+    host: true,
+    port: 5173,
     proxy: {
       '/api': {
-        target: 'http://localhost:8080',
+        target: 'http://web_server:5000',
         changeOrigin: true,
       }
     }

nginx/nginx.conf

@@ -59,6 +59,13 @@ http {
             proxy_cache_bypass $http_upgrade;
         }
 
+        location /hmr/ {
+            proxy_pass http://frontend:5173;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+        }
 
         # The MPEG-TS video chunks are stored in /tmp/hls
         location ~ ^/stream/user/(.+\.ts)$ {

web_server/blueprints/authentication.py

@@ -175,6 +175,7 @@ def login():
         # Set up session to avoid having unncessary state information
         session.clear()
         session["username"] = username
+        print(f"Logged in as {username}. session: {session.get('username')}", flush=True)
 
         # User has been logged in, let frontend know that
         return jsonify({

web_server/blueprints/chat.py

@@ -51,22 +51,20 @@ def get_past_chat(stream_id: int):
     # Connect to the database
     db = Database()
 
-    # fetched in format: [(chatter_id, message, time_sent)]
+    # fetched in format: [(username, message, time_sent)]
     all_chats = db.fetchall("""
-                               SELECT *
+                            SELECT username, message, time_sent
-                               FROM (
-                                    SELECT chatter_id, message, time_sent
                             FROM chat
+                            JOIN users ON chat.chatter_id = users.user_id
                             WHERE stream_id = ?
                             ORDER BY time_sent DESC
-                                    LIMIT 50
+                            LIMIT 50;
-                               )
+                            """, (stream_id,))
-                               ORDER BY time_sent ASC;""", (stream_id,))
 
     db.close_connection()
 
     # Create JSON output of chat_history to pass through NGINX proxy
-    chat_history = [{"chatter_id": chat["chatter_id"], "message": chat["message"], "time_sent": chat["time_sent"]} for chat in all_chats]
+    chat_history = [{"chatter_username": chat["username"], "message": chat["message"], "time_sent": chat["time_sent"]} for chat in all_chats]
 
     # Pass the chat history to the proxy
     return jsonify({"chat_history": chat_history}), 200
@@ -85,7 +83,7 @@ def send_chat(data) -> None:
 
     # Input validation - chatter is logged in, message is not empty, stream exists
     if not all([chatter_id, message, stream_id]):
-        emit("error", {"error": "Unable to send a chat"}, broadcast=False)
+        emit("error", {"error": f"Unable to send a chat. The following info was given: chatter_id={chatter_id}, message={message}, stream_id={stream_id}"}, broadcast=False)
         return
 
     # Send the chat message to the client so it can be displayed

web_server/blueprints/utils.py

@@ -9,6 +9,7 @@ def logged_in_user():
     """
     g.start_time = time()
     g.user = session.get("username", None)
+    print(f"Path: {request.path}, session username: {g.user}", flush=True)
     g.admin = session.get("username", None)
 
 def record_time(response):

web_server/database/testing_data.sql

@@ -77,6 +77,18 @@ INSERT INTO chat (stream_id, chatter_id, message) VALUES
 (1, 1, 'This stream is crazy man'),
 (1, 2, 'Woah, cannot believe that');
 
+
+SELECT * FROM users;
+SELECT * FROM follows;
+SELECT * FROM user_preferences;
+SELECT * FROM subscribes;
+SELECT * FROM categories;
+SELECT * FROM streams;
+SELECT * FROM chat;
+SELECT * FROM tags;
+SELECT * FROM stream_tags;
+
+-- To see all tables in the database
 SELECT name FROM sqlite_master WHERE type='table';
 
 
@@ -88,3 +100,10 @@ JOIN followed_categories AS f ON s.category_id = c.category_id
 WHERE f.user_id = 1
 ORDER BY s.num_viewers DESC
 LIMIT 25;
+
+SELECT username, message, time_sent
+FROM chat
+JOIN users ON chat.chatter_id = users.user_id
+WHERE stream_id = 1
+ORDER BY time_sent DESC
+LIMIT 50;