Swap chat template to video panel and edit styling

Author: bensohh

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, {
@@ -457,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>
                 <VideoPanel />
-                <div className="chat-message-box">
+                {/* <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">
@@ -474,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;
 }
 

apps/frontend/src/components/VideoPanel/VideoPanel.tsx

@@ -4,6 +4,8 @@ import "./styles.scss";
 import { Button } from "antd";
 import {
   ApiOutlined,
+  AudioMutedOutlined,
+  AudioOutlined,
   PhoneOutlined,
   VideoCameraOutlined,
 } from "@ant-design/icons";
@@ -23,6 +25,7 @@ const VideoPanel = () => {
   );
   const [userStream, setUserStream] = useState<MediaStream | null>(null);
   const [videoOn, setVideoOn] = useState<boolean>(true);
+  const [muteOn, setMuteOn] = useState<boolean>(false);
 
   const handleCall = () => {
     navigator.mediaDevices
@@ -52,6 +55,17 @@ const VideoPanel = () => {
               if (sender) {
                 sender.replaceTrack(videoTrack); // Replace the video track in the call
               }
+
+              const audioTrack = userStream.getAudioTracks()[0];
+
+              const sender2 = call.peerConnection.getSenders().find((s) => {
+                if (s.track) {
+                  return s.track.kind === "audio";
+                }
+              });
+              if (sender2) {
+                sender2.replaceTrack(audioTrack); // Replace the video track in the call
+              }
             }
           }
         }
@@ -104,7 +118,6 @@ const VideoPanel = () => {
 
   const toggleVideo = () => {
     if (userStream) {
-      console.log(userStream.getVideoTracks());
       const videoTrack = userStream.getVideoTracks()[0];
 
       if (videoTrack) {
@@ -134,33 +147,102 @@ const VideoPanel = () => {
     }
   };
 
+  const toggleMute = () => {
+    if (userStream) {
+      console.log(userStream.getAudioTracks());
+      const audioTrack = userStream.getAudioTracks()[0];
+
+      if (audioTrack) {
+        if (muteOn) {
+          // Unmute the audio track
+          audioTrack.enabled = true;
+          setMuteOn(false);
+        } else {
+          // Mute the audio track
+          audioTrack.enabled = false;
+          setMuteOn(true);
+
+          if (callInstance) {
+            const sender = callInstance.peerConnection
+              .getSenders()
+              .find((s) => {
+                if (s.track) {
+                  return s.track.kind === "audio";
+                }
+              });
+            if (sender) {
+              sender.replaceTrack(audioTrack); // Replace the video track in the call
+            }
+          }
+        }
+      }
+    }
+  };
+
   return (
     <div className="video-panel">
-      <p className="header-tag">Video Feed for: {currentUsername}</p>
+      {/* <p className="header-tag">Video Feed for: {currentUsername}</p> */}
       <video
         className="user-video"
         playsInline
         ref={currentUserVideoRef}
         autoPlay
-        muted
       />
-      <Button
-        onClick={toggleVideo}
-        icon={<VideoCameraOutlined />}
-        type={videoOn ? "default" : "primary"}
-      >
-        {videoOn ? "Off Webcam" : "On Webcam"}
-      </Button>
-      <Button onClick={handleCall} icon={<ApiOutlined />} type="primary">
-        Initiate Call
-      </Button>
-      <p className="header-tag">Video Feed for: {matchedUsername}</p>
+      <div className="buttons-container">
+        <Button
+          onClick={toggleVideo}
+          icon={
+            videoOn ? (
+              <div className="icon-padding">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1.2em"
+                  height="1.2em"
+                  viewBox="0 0 32 32"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M21 26H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h17a2 2 0 0 1 2 2v4.06l5.42-3.87A1 1 0 0 1 30 9v14a1 1 0 0 1-1.58.81L23 19.94V24a2 2 0 0 1-2 2M4 8v16h17v-6a1 1 0 0 1 1.58-.81L28 21.06V10.94l-5.42 3.87A1 1 0 0 1 21 14V8Z"
+                  ></path>
+                </svg>
+              </div>
+            ) : (
+              <div className="icon-padding">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1.2em"
+                  height="1.2em"
+                  viewBox="0 0 32 32"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M29.46 8.11a1 1 0 0 0-1 .08L23 12.06v-1.62l7-7L28.56 2L2 28.56L3.44 30l4-4H21a2 2 0 0 0 2-2v-4.06l5.42 3.87A1 1 0 0 0 30 23V9a1 1 0 0 0-.54-.89M28 21.06l-5.42-3.87A1 1 0 0 0 21 18v6H9.44L21 12.44V14a1 1 0 0 0 1.58.81L28 10.94zM4 24V8h16V6H4a2 2 0 0 0-2 2v16z"
+                  ></path>
+                </svg>
+              </div>
+            )
+          }
+          type={videoOn ? "default" : "primary"}
+        >
+          {videoOn ? "Off Cam" : "On Cam"}
+        </Button>
+        <Button
+          onClick={toggleMute}
+          type={!muteOn ? "default" : "primary"}
+          icon={muteOn ? <AudioMutedOutlined /> : <AudioOutlined />}
+        >
+          {muteOn ? "On Mic" : "Off Mic"}
+        </Button>
+        <Button onClick={handleCall} icon={<ApiOutlined />} type="primary">
+          Call
+        </Button>
+      </div>
+      {/* <p className="header-tag">Video Feed for: {matchedUsername}</p> */}
       <video
         className="matched-user-video"
         playsInline
         ref={remoteVideoRef}
         autoPlay
-        muted
       />
     </div>
   );

apps/frontend/src/components/VideoPanel/styles.scss

@@ -6,8 +6,20 @@
 .user-video,
 .matched-user-video {
   width: 100%;
+  margin: 4px 0px 0px;
 }
 
 .header-tag {
   font-weight: bold;
 }
+
+.buttons-container {
+  margin-top: 1px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.icon-padding {
+  padding-top: 2px;
+}