ADD: Toggle Button

In VideoPage, toggle button now exist to show and hide chat.

frontend/src/pages/VideoPage.tsx

@@ -1,6 +1,6 @@
 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";
@@ -29,6 +29,12 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   const [streamData, setStreamData] = useState<StreamDataProps>();
   const navigate = useNavigate();
 
+  const [isChatVisible, setIsChatVisible] = useState(false);
+
+  const toggleChat = () => {
+    setIsChatVisible((prev) => !prev);
+  }
+
   // useEffect(() => {
   //   // Prevent scrolling when checkout is open
   //   if (showCheckout) {
@@ -44,8 +50,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   useEffect(() => {
     // Fetch stream data for this streamer
     fetch(
-      `/api/get_stream_data/${streamerName}${
+      `/api/get_stream_data/${streamerName}${streamId == 0 ? "" : `/${streamId}`
-        streamId == 0 ? "" : `/${streamId}`
       }`
     ).then((res) => {
       if (!res.ok) {
@@ -72,9 +77,21 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
       <Navbar />
 
       <div id="container" className="bg-gray-900">
+
         <VideoPlayer streamId={streamId} />
 
-        <ChatPanel streamId={streamId} />
+        <ToggleButton
+          onClick={toggleChat}
+          toggled={isChatVisible}
+          extraClasses="absolute top-10 left-4 z-20"
+        >
+          {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> }
 
         <div
           id="stream-info"