feat: Communication Nice To Have

apps/frontend/package.json

@@ -22,6 +22,7 @@
     "antd": "^5.20.6",
     "codemirror": "^6.0.1",
     "next": "14.2.13",
+    "peerjs": "^1.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-timer-hook": "^3.0.7",
@@ -38,6 +39,7 @@
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^20",
+    "@types/peerjs": "^1.1.0",
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
     "eslint": "^8",

apps/frontend/src/app/collaboration/[id]/page.tsx

@@ -27,6 +27,7 @@ import {
   MessageOutlined,
   PlayCircleOutlined,
   SendOutlined,
+  VideoCameraOutlined,
 } from "@ant-design/icons";
 import { ProgrammingLanguageOptions } from "@/utils/SelectOptions";
 import CollaborativeEditor, {
@@ -35,6 +36,7 @@ import CollaborativeEditor, {
 import { CreateOrUpdateHistory } from "@/app/services/history";
 import { Language } from "@codemirror/language";
 import { WebrtcProvider } from "y-webrtc";
+import VideoPanel from "@/components/VideoPanel/VideoPanel";
 
 interface CollaborationProps {}
 
@@ -456,15 +458,14 @@ export default function CollaborationPage(props: CollaborationProps) {
             <Row className="chat-row">
               <div className="chat-container">
                 <div className="chat-title">
-                  <MessageOutlined className="title-icons" />
-                  Chat
+                  <VideoCameraOutlined className="title-icons" />
+                  Video
                 </div>
-
-                <div className="chat-message-box">
+                <VideoPanel />
+                {/* <div className="chat-message-box">
                   <div className="chat-header-message">
                     Matched with {matchedUser}
                   </div>
-                  {/* TODO: Map and input the history of messages sent here */}
                   <div></div>
                 </div>
                 <div className="chat-typing-box">
@@ -473,7 +474,7 @@ export default function CollaborationPage(props: CollaborationProps) {
                     placeholder="Send Message Here"
                     rows={4}
                   />
-                </div>
+                </div> */}
               </div>
             </Row>
           </Col>

apps/frontend/src/app/collaboration/[id]/styles.scss

@@ -37,12 +37,12 @@
 }
 
 .session-row {
-  height: 20%;
+  height: 18%;
   padding: 1rem 0.25rem 0.25rem;
 }
 
 .chat-row {
-  height: 80%;
+  height: 82%;
   padding: 0.25rem;
 }