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;

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>