From 82bced7d94cf2b0dfeeed10af703b2977fc48c75 Mon Sep 17 00:00:00 2001
From: Simerus Mahesh <63352151+SimerusM@users.noreply.github.com>
Date: Wed, 28 Aug 2024 20:54:37 -0400
Subject: [PATCH] fixed meeting ui

---
 client/src/App.css              | 34 +++++++++++++++++++++++++++++++++
 client/src/pages/MeetingPage.js | 22 +++++++++------------
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 74b5e05..7373849 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -36,3 +36,37 @@
     transform: rotate(360deg);
   }
 }
+
+/* Add these styles in your CSS file */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-gap: 10px;
+}
+
+.video-container {
+  position: relative;
+  overflow: hidden;
+  background: black;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.video-element {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.video-username {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
diff --git a/client/src/pages/MeetingPage.js b/client/src/pages/MeetingPage.js
index ebbbabc..6b0d39b 100644
--- a/client/src/pages/MeetingPage.js
+++ b/client/src/pages/MeetingPage.js
@@ -43,19 +43,15 @@ const MeetingPage = () => {
       newSocket.emit('join', { meeting_id: meeting_id, username: username });
     });
 
-    const errorHandler = (error) => {
-      console.error(error);
-      navigate('/');
-      toast.error(error.message);
-    }
-
-    chatHandler.current = new ChatHandler(meeting_id, username, socketRef.current, setChatHistory, errorHandler);
+    chatHandler.current = new ChatHandler(meeting_id, username, socketRef.current, setChatHistory);
     chatHandler.current.initialize();
     const handlePeerUpdate = (update) => {
       setPeers(prevPeers => ({...prevPeers, ...update}));
+      console.debug('Updated peers:', peers);
     }
-    rtcHandler.current = new RTCHandler(meeting_id, username, socketRef.current, handlePeerUpdate, errorHandler);
+    rtcHandler.current = new RTCHandler(meeting_id, username, socketRef.current, handlePeerUpdate);
     rtcHandler.current.initialize();
+
     return () => {
       rtcHandler.current.cleanup();
       socketRef.current.disconnect();
@@ -94,9 +90,9 @@ const MeetingPage = () => {
     }, [stream]);
 
     return (
-      <div className="border-2">
-        <video ref={videoRef} autoPlay playsInline muted={muted} />
-        <p>{peerName}</p>
+      <div className="video-container">
+        <video ref={videoRef} autoPlay playsInline muted={muted} className="video-element"/>
+        <p className="video-username">{peerName}</p>
       </div>
     );
   });
@@ -109,7 +105,7 @@ const MeetingPage = () => {
         <p>Welcome, {username}!</p>
       </header>
       <main className="flex flex-1 overflow-hidden">
-        <div className="flex-1 p-4">
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
           <VideoElement stream={rtcHandler.current.localStream} muted={true} peerName="You" />
           {Object.entries(peers).map(([peerUsername, peer]) => (
             <VideoElement 
@@ -157,4 +153,4 @@ const MeetingPage = () => {
   );
 };
 
-export default MeetingPage;
\ No newline at end of file
+export default MeetingPage;