Merge pull request #14 from SimerusM/update-meeting-ui

fixed meeting ui
SimerusM · Aug 29, 2024 · d265f56 · d265f56
2 parents 1e9f56d + 82bced7
commit d265f56
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 13 deletions.
diff --git 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
@@ -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;
+export default MeetingPage;