Tidy up video feed

peerprep_fe/src/app/workspace/[id]/page.tsx

@@ -3,12 +3,10 @@
 import Header from "../../../components/common/header";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { useAuth } from "../../../contexts/auth-context";
 import Button from "../../../components/common/button";
 import Chat from "../../../components/workspace/chat";
 import Problem from "../../../components/workspace/problem";
 import CodeEditor from "../../../components/workspace/code-editor";
-import { ClientSocketEvents, ServerSocketEvents } from "peerprep-shared-types";
 import { useSocket } from "../../../app/actions/socket";
 import Modal from "../../../components/common/modal";
 import { VideoFeed } from "../../../components/workspace/videofeed";
@@ -40,6 +38,8 @@ const Workspace: React.FC<WorkspaceProps> = ({ params }) => {
   const [isErrorModalOpen, setIsErrorModalOpen] = useState<boolean>(false);
   const [isLeaveModalOpen, setIsLeaveModalOpen] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
+  const [isChatOpen, setIsChatOpen] = useState<boolean>(false);
+  const [isVideoOpen, setIsVideoOpen] = useState<boolean>(true);
   const [leaveMessage, setLeaveMessage] = useState<string>("");
   const { endCall } = useCall();
 
@@ -130,6 +130,14 @@ const Workspace: React.FC<WorkspaceProps> = ({ params }) => {
       setIsErrorModalOpen(true);
     }
   };
+  const openChat = () => {
+    setIsChatOpen(true);
+    setIsVideoOpen(false);
+  };
+  const openVideo = () => {
+    setIsChatOpen(false);
+    setIsVideoOpen(true);
+  };
 
   useEffect(() => {
     if (!socket) return;
@@ -199,17 +207,29 @@ const Workspace: React.FC<WorkspaceProps> = ({ params }) => {
           }}
         />
       </Header>
-      <div className="flex h-full overflow-auto">
+      <div className="flex h-full">
         {/* Left Pane */}
-        <div className="flex flex-col w-2/5 px-4">
-          <div className="flex-grow h-1/2">
+        <div className="flex flex-col w-2/5 min-h-full px-4">
+          <div className="min-h-1/2">
             <Problem questionId={room.question} />
           </div>
-          {/* <div className="flex-grow pt-4 h-1/2">
-            <Chat />
-          </div> */}
-          <div className="flex-grow pt-4 h-1/2">
-            <VideoFeed roomId={params.id} />
+          <div className="flex space-x-4">
+            <Button
+              type="button"
+              disabled={isChatOpen}
+              text="Chat"
+              onClick={openChat}
+            />
+            <Button
+              type="button"
+              disabled={isVideoOpen}
+              text="Video"
+              onClick={openVideo}
+            />
+          </div>
+          <div className="flex-grow min-h-1/2">
+            <Chat isVisible={isChatOpen} />
+            <VideoFeed isVisible={isVideoOpen} />
           </div>
         </div>
 

peerprep_fe/src/components/workspace/chat.tsx

@@ -4,9 +4,11 @@ import { useChat } from "../../contexts/chat-context";
 import Textfield from "../common/text-field";
 import Button from "../common/button";
 
-type ChatProps = {};
+type ChatProps = {
+  isVisible: boolean;
+};
 
-const Chat: React.FC<ChatProps> = () => {
+const Chat: React.FC<ChatProps> = ({ isVisible }) => {
   const { username } = useAuth();
   const { messages, sendMessage } = useChat();
 
@@ -44,7 +46,9 @@ const Chat: React.FC<ChatProps> = () => {
   }
 
   return (
-    <div className="h-full bg-white dark:bg-slate-800 rounded-lg flex flex-col">
+    <div
+      className={`relative h-full bg-white dark:bg-slate-800 rounded-lg flex flex-col ${isVisible ? "z-0" : "hidden z-{-50}"}`}
+    >
       <div
         id="chat-container"
         className="max-h-full w-full overflow-y-scroll flex-grow"

peerprep_fe/src/components/workspace/videofeed.tsx

@@ -4,10 +4,10 @@ import Button from "../common/button";
 import { CallStates } from "peerprep-shared-types";
 
 export interface VideoFeedProps {
-  roomId: string;
+  isVisible: boolean;
 }
 
-export const VideoFeed: React.FC<VideoFeedProps> = ({ roomId }) => {
+export const VideoFeed: React.FC<VideoFeedProps> = ({ isVisible }) => {
   const {
     callState,
     callPermissions,
@@ -81,7 +81,9 @@ export const VideoFeed: React.FC<VideoFeedProps> = ({ roomId }) => {
   };
 
   return (
-    <div className="h-full w-full flex-col">
+    <div
+      className={`relative h-full w-full flex-col bg-white dark:bg-slate-800 rounded-lg ${isVisible ? "z-0" : "hidden z-{50}"}`}
+    >
       <div className="flex">
         <video
           className="h-1/2 w-1/2"
@@ -97,7 +99,7 @@ export const VideoFeed: React.FC<VideoFeedProps> = ({ roomId }) => {
           ref={userVideoRef}
         />
       </div>
-      <div>
+      <div className="flex space-x-4 px-4">
         <ToggleVideoButton />
         <ToggleAudioButton />
         <CallButton />
@@ -106,3 +108,6 @@ export const VideoFeed: React.FC<VideoFeedProps> = ({ roomId }) => {
     </div>
   );
 };
+function useEffect(arg0: () => void, arg1: undefined[]) {
+  throw new Error("Function not implemented.");
+}