From f31834bc1dfb75c0ec9fbe41447bb05c87d527ab Mon Sep 17 00:00:00 2001
From: EvanLin3141 <Evan.lin.3141@gmail.com>
Date: Sun, 2 Feb 2025 00:54:08 +0000
Subject: [PATCH] FEAT: isChatOpen can now be expanded and collapsed

---
 frontend/src/components/Layout/Navbar.tsx   |  14 +-
 frontend/src/components/Video/ChatPanel.tsx | 139 +++++++++-----------
 frontend/src/pages/VideoPage.tsx            |  28 ++--
 3 files changed, 92 insertions(+), 89 deletions(-)

diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx
index f56ac62..288af94 100644
--- a/frontend/src/components/Layout/Navbar.tsx
+++ b/frontend/src/components/Layout/Navbar.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Logo from "./Logo";
-import Button from "./Button";
+import Button, {ToggleButton} from "./Button";
 import Sidebar from "./Sidebar";
 import { Sidebar as SidebarIcon } from "lucide-react";
 import {
@@ -16,11 +16,14 @@ import { useAuth } from "../../context/AuthContext";
 
 interface NavbarProps {
   variant?: "home" | "default";
+  isChatOpen: boolean;
+  toggleChat: () => void;
 }
 
-const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
+const Navbar: React.FC<NavbarProps> = ({ variant = "default", isChatOpen, toggleChat }) => {
   const [showAuthModal, setShowAuthModal] = useState(false);
   const { isLoggedIn } = useAuth();
+  const isVideoPage = location.pathname.includes("/EduGuru");
 
   useEffect(() => {
     if (showAuthModal) {
@@ -79,6 +82,13 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         <SettingsIcon className="h-15 w-15 mr-1" />
         Quick Settings
       </Button>
+      {isVideoPage && (
+      <ToggleButton onClick={toggleChat} toggled={isChatOpen}
+              extraClasses="absolute top-[80px] right-[20px] text-[1rem] flex items-center flex-nowrap"
+              >
+                {isChatOpen ? "Hide Chat" : "Show Chat"}
+      </ToggleButton>
+      )}
 
       <div id="search-bar" className="flex items-center">
         <Input
diff --git a/frontend/src/components/Video/ChatPanel.tsx b/frontend/src/components/Video/ChatPanel.tsx
index 6e415ea..bf9e4dc 100644
--- a/frontend/src/components/Video/ChatPanel.tsx
+++ b/frontend/src/components/Video/ChatPanel.tsx
@@ -21,7 +21,6 @@ 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(() => {
@@ -93,10 +92,6 @@ 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();
@@ -120,83 +115,73 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
 
   return (
     <>
-      <ToggleButton
-        onClick={toggleChat}
-        toggled={isChatVisible}
-        extraClasses="cursor-pointer"
-      >
-        {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 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-[minmax(15%,_100px)_1fr] group h-fit items-center bg-gray-700 rounded p-2 text-white"
-              >
-                <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-[minmax(15%,_100px)_1fr] group h-fit items-center bg-gray-700 rounded p-2 text-white"
+            >
+              <span
+                className={`font-bold ${msg.chatter_username === username
+                    ? "text-blue-400"
+                    : "text-green-400"
                   }`}
-                >
-                  {" "}
-                  {msg.chatter_username}:{" "}
-                </span>
-                <span className="text-center" >{msg.message}</span>
-                <span className="text-gray-400 text-sm scale-0 group-hover:scale-100 h-[0px] group-hover:h-[10px] transition-all delay-1000 group-hover:delay-200">
-                  {new Date(msg.time_sent).toLocaleTimeString()}
-                </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>
-              </>
-            ) : (
-              <Button
-                extraClasses="text-[1rem] flex items-center flex-nowrap z-[999]"
-                onClick={() => setShowAuthModal(true)}
-                >
-                Login to Chat
-              </Button>
-            )}
-          </div>
-          {showAuthModal && (
-            <div className="fixed inset-0 z-[9999] flex items-center justify-center">
-              <AuthModal onClose={() => setShowAuthModal(false)} />
+              >
+                {" "}
+                {msg.chatter_username}:{" "}
+              </span>
+              <span className="text-center" >{msg.message}</span>
+              <span className="text-gray-400 text-sm scale-0 group-hover:scale-100 h-[0px] group-hover:h-[10px] transition-all delay-1000 group-hover:delay-200">
+                {new Date(msg.time_sent).toLocaleTimeString()}
+              </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>
+            </>
+          ) : (
+            <Button
+              extraClasses="text-[1rem] flex items-center flex-nowrap z-[999]"
+              onClick={() => setShowAuthModal(true)}
+            >
+              Login to Chat
+            </Button>
           )}
         </div>
-      )}
+        {showAuthModal && (
+          <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+            <AuthModal onClose={() => setShowAuthModal(false)} />
+          </div>
+        )}
+      </div>
     </>
   );
 };
diff --git a/frontend/src/pages/VideoPage.tsx b/frontend/src/pages/VideoPage.tsx
index f998e3f..a5b925d 100644
--- a/frontend/src/pages/VideoPage.tsx
+++ b/frontend/src/pages/VideoPage.tsx
@@ -1,9 +1,8 @@
 import React, { useState, useEffect } from "react";
 import Navbar from "../components/Layout/Navbar";
-import Button from "../components/Layout/Button";
+import Button, { ToggleButton } from "../components/Layout/Button";
 import ChatPanel from "../components/Video/ChatPanel";
-// import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
 import VideoPlayer from "../components/Video/VideoPlayer";
 import { SocketProvider } from "../context/SocketContext";
@@ -26,6 +25,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   const { isLoggedIn } = useAuth();
   const { streamerName } = useParams<{ streamerName: string }>();
   const [streamData, setStreamData] = useState<StreamDataProps>();
+  const [isChatOpen, setIsChatOpen] = useState(true);
   // const [showCheckout, setShowCheckout] = useState(false);
   // const showReturn = window.location.search.includes("session_id");
   // const navigate = useNavigate();
@@ -45,8 +45,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   useEffect(() => {
     // Fetch stream data for this streamer
     fetch(
-      `/api/get_stream_data/${streamerName}${
-        streamId == 0 ? "" : `/${streamId}`
+      `/api/get_stream_data/${streamerName}${streamId == 0 ? "" : `/${streamId}`
       }`
     ).then((res) => {
       if (!res.ok) {
@@ -73,19 +72,28 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
     });
   }, [streamId, streamerName]);
 
+  const toggleChat = () => {
+    setIsChatOpen((prev) => !prev);
+  };
+
   return (
     <SocketProvider>
       <div id="videoPage" className="w-full">
-        <Navbar />
-        <div id="container" className="grid grid-rows-[auto_1fr] grid-cols-[3fr_1fr] bg-gray-900">
-          <VideoPlayer streamId={streamId} />
+        <Navbar isChatOpen={isChatOpen} toggleChat={toggleChat} />
+        <div id="container" className={`grid grid-rows-[auto_1fr] bg-gray-900 h-full ${isChatOpen ? "grid-cols-[3fr_1fr]" : "grid-cols-1"}`}
+        >
+          <div className="relative">
+            <VideoPlayer streamId={streamId} />
+          </div>
           <div
             id="chat"
-            className="relative top-0 right-0 w-full h-full bg-gray-800 bg-opacity-75 text-white p-4 w-1/3 z-10"
-            style={{ gridArea: "1 / 2 / 3 / 3" }}
+            className={`relative w-full h-full bg-gray-800 bg-opacity-75 text-white p-4 z-10 ${
+              isChatOpen ? "block" : "hidden"
+            }`}
           >
             <ChatPanel streamId={streamId} />
           </div>
+
           <div
             id="stream-info"
             className="flex flex-col gap-2 p-4 text-white"