MULTI-UPDATE: Big Error Cleanup:

Enhanced Docker and Nginx configurations - Can now run frontend either on local dev version OR the docker version; Improved socket connection handling; Refactored stream data fetching in VideoPage to properly display stream data; Chat-Visibility Button moved to ChatPanel so that chat's socket persists when hiding/showing chat;
2025-02-01 14:21:46 +00:00
parent 9784ef8c67
commit 2020b854f2
11 changed files with 233 additions and 127 deletions
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,6 +7,7 @@ services:
      - "1935:1935"  # RTMP
      - "8080:8080"
    depends_on:
+      - frontend
      - web_server
    networks:
      - app_network
@@ -35,6 +36,8 @@ services:
      - "5173"
    networks:
      - app_network
+    environment:
+      - VITE_API_URL=/api
    depends_on:
      - web_server

--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -13,4 +13,4 @@ COPY . .

 EXPOSE 5173

-CMD ["npm", "run", "dev", "--", "--host"]
+CMD ["npm", "run", "docker-dev", "--", "--host", "--strictPort"]
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,7 +4,8 @@
  "version": "0.0.0",
  "type": "module",
  "scripts": {
-    "dev": "vite",
+    "dev": "vite --config vite.config.dev.ts",
+    "docker-dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
@@ -35,6 +36,6 @@
    "tailwindcss": "^3.4.17",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.18.2",
-    "vite": "^6.0.5"
+    "vite": "latest"
  }
 }
--- a/frontend/src/components/Video/ChatPanel.tsx
+++ b/frontend/src/components/Video/ChatPanel.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import Input from "../Layout/Input";
 import { useAuth } from "../../context/AuthContext";
 import { useSocket } from "../../context/SocketContext";
-import Button from "../Layout/Button";
+import Button, { ToggleButton } from "../Layout/Button";
 import AuthModal from "../Auth/AuthModal";

 interface ChatMessage {
@@ -21,6 +21,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
  const [inputMessage, setInputMessage] = useState("");
  const chatContainerRef = useRef<HTMLDivElement>(null);
  const { isLoggedIn, username } = useAuth();
+  const [isChatVisible, setIsChatVisible] = useState(false);

  // Join chat room when component mounts
  useEffect(() => {
@@ -92,6 +93,10 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
    setInputMessage("");
  };

+  const toggleChat = () => {
+    setIsChatVisible((prev) => !prev);
+  };
+
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
@@ -115,72 +120,83 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {

  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>
+      <ToggleButton
+        onClick={toggleChat}
+        toggled={isChatVisible}
+        extraClasses="z-5"
+      >
+        {isChatVisible ? "Hide Chat" : "Show Chat"}
+      </ToggleButton>
+      {isChatVisible && (
+        <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_username === username
-                    ? "text-blue-400"
-                    : "text-green-400"
-                }`}
+          <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"
              >
-                {" "}
-                {msg.chatter_username}:{" "}
-              </span>
-              <span>{msg.message}</span>
-            </div>
-          ))}
-        </div>
-
-        <div className="flex justify-center gap-2">
-          {isLoggedIn && (
-            <>
-              <Input
-                type="text"
-                value={inputMessage}
-                onChange={(e) => setInputMessage(e.target.value)}
-                onKeyDown={handleKeyPress}
-                placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
-                disabled={!isLoggedIn}
-                extraClasses="flex-grow"
-                onClick={() => !isLoggedIn && setShowAuthModal(true)}
-              />
-              <button
-                onClick={sendChat}
-                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
-              >
-                Send
-              </button>
-            </>
-          )}
-
-          {!isLoggedIn && (
-            <Button
-              extraClasses="absolute top-[20px] left-[20px] text-[1rem] flex items-center flex-nowrap z-[999]"
-              onClick={() => setShowAuthModal(true)}
-            ></Button>
-          )}
-        </div>
-        {showAuthModal && (
-          <div className="fixed inset-0 z-[9999] flex items-center justify-center">
-            <AuthModal onClose={() => setShowAuthModal(false)} />
+                <span className="text-gray-400 text-sm">
+                  {new Date(msg.time_sent).toLocaleTimeString()}
+                </span>
+                <span
+                  className={`font-bold ${
+                    msg.chatter_username === username
+                      ? "text-blue-400"
+                      : "text-green-400"
+                  }`}
+                >
+                  {" "}
+                  {msg.chatter_username}:{" "}
+                </span>
+                <span>{msg.message}</span>
+              </div>
+            ))}
          </div>
-        )}
-      </div>
+
+          <div className="flex justify-center gap-2">
+            {isLoggedIn && (
+              <>
+                <Input
+                  type="text"
+                  value={inputMessage}
+                  onChange={(e) => setInputMessage(e.target.value)}
+                  onKeyDown={handleKeyPress}
+                  placeholder={
+                    isLoggedIn ? "Type a message..." : "Login to chat"
+                  }
+                  disabled={!isLoggedIn}
+                  extraClasses="flex-grow"
+                  onClick={() => !isLoggedIn && setShowAuthModal(true)}
+                />
+                <button
+                  onClick={sendChat}
+                  className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+                >
+                  Send
+                </button>
+              </>
+            )}
+
+            {!isLoggedIn && (
+              <Button
+                extraClasses="absolute top-[20px] left-[20px] text-[1rem] flex items-center flex-nowrap z-[999]"
+                onClick={() => setShowAuthModal(true)}
+              ></Button>
+            )}
+          </div>
+          {showAuthModal && (
+            <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+              <AuthModal onClose={() => setShowAuthModal(false)} />
+            </div>
+          )}
+        </div>
+      )}
    </>
  );
 };
--- a/frontend/src/context/SocketContext.tsx
+++ b/frontend/src/context/SocketContext.tsx
@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useEffect, useRef, useState } from "react";
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { io, Socket } from "socket.io-client";

 interface SocketContextType {
@@ -26,14 +32,16 @@ export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({
    }

    console.log("Creating new socket connection");
-    const newSocket = io('http://localhost:8080', {
-      path: '/socket.io/',
-      transports: ['websocket'],
+    const newSocket = io("http://localhost:8080", {
+      path: "/socket.io/",
+      transports: ["websocket"],
      withCredentials: true,
      reconnectionDelay: 1000,
      reconnectionDelayMax: 5000,
      reconnectionAttempts: 5,
-      timeout: 5000
+      timeout: 5000,
+      autoConnect: true,
+      forceNew: true,
    });

    socketRef.current = newSocket;
@@ -65,15 +73,11 @@ export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({
      console.error("Socket connection error:", error);
      setIsLoading(false);
      if (newSocket) newSocket.disconnect();
-      newSocket.connect();
    });

    newSocket.on("disconnect", (reason) => {
-      console.log(
-        "Socket disconnected! Reason: " + reason + " -  Attempting reconnect..."
-      );
+      console.log("Socket disconnected! Reason: " + reason);
      setIsConnected(false);
-      newSocket.connect();
    });

    return () => {
--- a/frontend/src/pages/VideoPage.tsx
+++ b/frontend/src/pages/VideoPage.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Navbar from "../components/Layout/Navbar";
-import Button, { ToggleButton } from "../components/Layout/Button";
+import Button from "../components/Layout/Button";
 import ChatPanel from "../components/Video/ChatPanel";
 // import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
 import { useNavigate, useParams } from "react-router-dom";
@@ -19,7 +19,7 @@ interface StreamDataProps {
  streamerId: number;
  startTime: string;
  viewerCount: number;
-  categoryId: number;
+  categoryName: string;
 }

 const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
@@ -29,11 +29,6 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
  // const [showCheckout, setShowCheckout] = useState(false);
  // const showReturn = window.location.search.includes("session_id");
  // const navigate = useNavigate();
-  const [isChatVisible, setIsChatVisible] = useState(false);
-
-  const toggleChat = () => {
-    setIsChatVisible((prev) => !prev);
-  };

  // useEffect(() => {
  //   // Prevent scrolling when checkout is open
@@ -57,19 +52,24 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
      if (!res.ok) {
        console.error("Failed to load stream data:", res.statusText);
      }
-      res.json().then((data) => {
-        // if (!data.validStream) navigate(`/`);
-        console.log(`Loading stream data for ${streamerName}`);
-        setStreamData({
-          streamId: data.streamId,
-          streamTitle: data.streamTitle,
-          streamerName: data.streamerName,
-          streamerId: data.streamerId,
-          startTime: data.startTime,
-          viewerCount: data.viewerCount,
-          categoryId: data.categoryId,
+      res
+        .json()
+        .then((data) => {
+          // Transform snake_case to camelCase
+          const transformedData: StreamDataProps = {
+            streamId: streamId,
+            streamerName: data.username,
+            streamerId: data.user_id,
+            streamTitle: data.title,
+            startTime: data.start_time,
+            viewerCount: data.num_viewers,
+            categoryName: data.category_name,
+          };
+          setStreamData(transformedData);
+        })
+        .catch((error) => {
+          console.error("Error fetching stream data:", error);
        });
-      });
    });
  }, [streamId, streamerName]);

@@ -79,35 +79,48 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
        <Navbar />
        <div id="container" className="bg-gray-900">
          <VideoPlayer streamId={streamId} />
-          <ToggleButton
-            onClick={toggleChat}
-            toggled={isChatVisible}
-            extraClasses="z-5"
+          <div
+            id="chat"
+            className="relative top-0 right-0 bg-gray-800 bg-opacity-75 text-white p-4 w-1/3 h-full z-10 overflow-y-auto"
          >
-            {isChatVisible ? "Hide Chat" : "Show Chat"}
-          </ToggleButton>
-          {isChatVisible && (
-            <div
-              id="chat"
-              className="relative top-0 right-0 bg-gray-800 bg-opacity-75 text-white p-4 w-1/3 h-full z-10 overflow-y-auto"
-            >
-              <ChatPanel streamId={streamId} />
-            </div>
-          )}
+            <ChatPanel streamId={streamId} />
+          </div>
          <div
            id="stream-info"
-            className="flex"
+            className="flex flex-col gap-2 p-4 text-white"
            style={{ gridArea: "3 / 1 / 4 / 2" }}
          >
-            <h1>{streamData?.streamTitle}</h1>
-            <h2>{streamData?.streamerName}</h2>
+            <h1 className="text-2xl font-bold">
+              {streamData ? streamData.streamTitle : "Loading..."}
+            </h1>
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2">
+                <span className="font-semibold">Streamer:</span>
+                <span>
+                  {streamData ? streamData.streamerName : "Loading..."}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="font-semibold">Viewer Count:</span>
+                <span>{streamData ? streamData.viewerCount : "0"}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="font-semibold">Started At:</span>
+                <span>
+                  {streamData
+                    ? new Date(streamData.startTime).toLocaleString()
+                    : "Loading..."}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="font-semibold">Category ID:</span>
+                <span>
+                  {streamData ? streamData.categoryName : "Loading..."}
+                </span>
+              </div>
+            </div>
            {isLoggedIn && (
-              <Button
-                // onClick={() => setShowCheckout(true)}
-                extraClasses="mx-auto mb-4"
-              >
-                Payment Screen Test
-              </Button>
+              <Button extraClasses="mx-auto mb-4">Payment Screen Test</Button>
            )}
          </div>
        </div>
--- a/frontend/vite.config.dev.ts
+++ b/frontend/vite.config.dev.ts
@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react({
+    // Add development-specific React plugin options
+    jsxRuntime: 'automatic'
+  })],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        secure: false
+      },
+      '/socket.io': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        ws: true
+      }
+    }
+  },
+  build: {
+    sourcemap: true,
+    outDir: 'dist'
+  },
+  optimizeDeps: {
+    exclude: ['@vite/client', '@vite/env']
+  },
+  esbuild: {
+    logOverride: { 'this-is-undefined-in-esm': 'silent' }
+  }
+})
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -12,6 +12,12 @@ export default defineConfig({
        target: 'http://web_server:5000',
        changeOrigin: true,
      }
+    },
+    hmr: {
+      protocol: 'ws',
+      host: '127.0.0.1',
+      clientPort: 8080,
+      port: 5173
    }
-  },
+  }
 })
--- a/nginx/nginx.conf
+++ b/nginx/nginx.conf
@@ -46,6 +46,10 @@ http {
        location /api/ {
            rewrite ^/api/(.*)$ /$1 break;
            proxy_pass http://web_server:5000;  # flask-app is the name of the Flask container in docker-compose
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        
        location /socket.io/ {
@@ -57,6 +61,9 @@ http {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_cache_bypass $http_upgrade;
+            proxy_buffers 8 32k;
+            proxy_buffer_size 64k;
+            proxy_read_timeout 86400;
        }

        location /hmr/ {
@@ -91,8 +98,20 @@ http {
            expires -1d;
        }

+        location ~ ^/\?token=.*$ {
+            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;
+        }
+
        location / {
-            proxy_pass http://frontend:5173;  # frontend is the name of the React container in docker-compose
+            proxy_pass http://frontend:5173;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
        }
    }
 }
--- a/web_server/blueprints/socket.py
+++ b/web_server/blueprints/socket.py
@@ -1,3 +1,10 @@
 from flask_socketio import SocketIO

-socketio = SocketIO(cors_allowed_origins="*", async_mode='gevent', logger=True, engineio_logger=True)
+socketio = SocketIO(
+    cors_allowed_origins="*", 
+    async_mode='gevent',
+    logger=False,  # Reduce logging
+    engineio_logger=False,  # Reduce logging
+    ping_timeout=5000,
+    ping_interval=25000
+)
--- a/web_server/utils/stream_utils.py
+++ b/web_server/utils/stream_utils.py
@@ -74,9 +74,12 @@ def user_stream(user_id: int, stream_id: int) -> dict:
    """
    with Database() as db:
        stream = db.fetchone("""
-            SELECT * FROM streams 
-            WHERE user_id = ? 
-            AND stream_id = ?
+            SELECT u.username, s.user_id, s.title, s.start_time, s.num_viewers, c.category_name
+            FROM streams AS s
+            JOIN categories AS c ON s.category_id = c.category_id
+            JOIN users AS u ON s.user_id = u.user_id
+            WHERE u.user_id = ?
+            AND s.stream_id = ?
        """, (user_id, stream_id))
    return stream