fix: minor issues

thejus557 · Oct 24, 2024 · 0a4592d · 0a4592d
1 parent 6b1b8b6
commit 0a4592d
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 47 deletions.
diff --git a/backend/index.js b/backend/index.js
@@ -94,7 +94,10 @@ io.on("connection", (socket) => {
 
     if (meetingArr?.length) {
       const findIndex = meetingArr.findIndex((x) => x.peerId === peerId);
-
+      meetingArr[findIndex] = {
+        ...meetingArr[findIndex],
+        isMuted: false,
+      };
       meetingArr[findIndex].isMuted = isMuted;
 
       meetings.set(meetCode, [...meetingArr]);
@@ -110,6 +113,12 @@ io.on("connection", (socket) => {
 
     if (meetingArr?.length) {
       const findIndex = meetingArr.findIndex((x) => x.peerId === peerId);
+
+      meetingArr[findIndex] = {
+        ...meetingArr[findIndex],
+        isVideoOn: false,
+      };
+
       meetingArr[findIndex].isVideoOn = isVideoOn;
 
       meetings.set(meetCode, [...meetingArr]);

diff --git a/frontend/angular.json b/frontend/angular.json
@@ -32,7 +32,8 @@
               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
             ],
             "scripts": []
           },

diff --git a/frontend/package.json b/frontend/package.json
@@ -18,6 +18,8 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "@fortawesome/fontawesome-free": "^6.6.0",
+    "font-awesome": "^4.7.0",
     "peerjs": "^1.5.4",
     "rxjs": "~7.8.0",
     "socket.io-client": "^4.8.0",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/app/landing/landing.component.html b/frontend/src/app/landing/landing.component.html
@@ -37,22 +37,6 @@
       />
     </div>
 
-    <div>
-      <label
-        for="password"
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-        >Password</label
-      >
-      <input
-        type="text"
-        id="password"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-        placeholder="enter your password"
-        required
-        [(ngModel)]="password"
-      />
-    </div>
-
     <div>
       <button
         type="button"

diff --git a/frontend/src/app/landing/landing.component.ts b/frontend/src/app/landing/landing.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterOutlet } from '@angular/router';
 import Peer, { MediaConnection } from 'peerjs';
@@ -12,22 +12,15 @@ import { SocketService } from '../socket.service';
   styleUrls: ['./landing.component.scss'],
 })
 export class LandingComponent implements OnInit {
-  localId = crypto.randomUUID();
   meetCode = '123-456-789';
-  password = '123';
   userName = 'surya';
 
   constructor(private socket: SocketService, private router: Router) {}
 
   ngOnInit(): void {}
 
   onJoin() {
-    this.router.navigate(['/', this.meetCode], {
-      state: {
-        localId: this.localId,
-        userName: this.userName,
-        password: this.password,
-      },
-    });
+    sessionStorage.setItem('userName', this.userName);
+    this.router.navigate(['/', this.meetCode]);
   }
 }
diff --git a/frontend/src/app/meet/meet.component.html b/frontend/src/app/meet/meet.component.html
@@ -1,5 +1,5 @@
 <div class="meet-container">
-  <div class="video-grid" id="video-grid"></div>
+  <div class="video-grid overflow-auto" id="video-grid"></div>
 
   <div class="participants-list">
     <h3>Participants</h3>
@@ -9,7 +9,7 @@ <h3>Participants</h3>
         class="participant"
       >
         <span>{{ participant.userName }}</span>
-        <span class="status-icons">
+        <span class="status-icons flex gap-2">
           <i
             class="fas"
             [ngClass]="{
@@ -25,34 +25,53 @@ <h3>Participants</h3>
             }"
           ></i>
         </span>
-        <button
+        <!-- <button
           *ngIf="participant.peerId !== socketService.localPeerId"
           (click)="muteUser(participant.peerId)"
         >
           {{ participant.isMuted ? "Unmute" : "Mute" }}
-        </button>
+        </button> -->
       </li>
     </ul>
   </div>
 
   <div class="controls">
-    <button (click)="toggleAudio()" class="control-button">
+    <button
+      (click)="toggleAudio()"
+      class="control-button bg-gray-300"
+      [ngClass]="{
+        'bg-gray-300': !isMuted,
+        'bg-[#ff4d4f]': isMuted
+      }"
+    >
       <i
         class="fas"
         [ngClass]="{
           'fa-microphone': !isMuted,
-          'fa-microphone-slash': isMuted
+          'fa-microphone-slash text-white': isMuted
         }"
       ></i>
-      {{ isMuted ? "Unmute" : "Mute" }}
+      <!-- {{ isMuted ? "Unmute" : "Mute" }} -->
     </button>
-    <button (click)="toggleVideo()" class="control-button">
+
+    <button
+      (click)="toggleVideo()"
+      class="control-button bg-gray-300"
+      [ngClass]="{
+        'bg-gray-300': isVideoOn,
+        'bg-[#ff4d4f]': !isVideoOn
+      }"
+    >
       <i
         class="fas"
-        [ngClass]="{ 'fa-video': isVideoOn, 'fa-video-slash': !isVideoOn }"
+        [ngClass]="{
+          'fa-video': isVideoOn,
+          'fa-video-slash text-white': !isVideoOn
+        }"
       ></i>
-      {{ isVideoOn ? "Turn Off Video" : "Turn On Video" }}
+      <!-- {{ isVideoOn ? "Turn Off Video" : "Turn On Video" }} -->
     </button>
+
     <button (click)="endMeeting()" class="control-button end-call">
       <i class="fas fa-phone-slash"></i>
       End Call

diff --git a/frontend/src/app/meet/meet.component.scss b/frontend/src/app/meet/meet.component.scss
@@ -13,16 +13,23 @@
   grid-row: 1 / span 2;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 10px;
+  gap: 1rem;
   background-color: #000;
   border-radius: 10px;
-  overflow: hidden;
+  overflow: auto;
+}
+
+@media (max-width: 600px) {
+  .video-grid {
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Adjust width for small screens */
+  }
 }
 
 .video-grid video {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  border-radius: 1rem;
 }
 
 .participants-list {

diff --git a/frontend/src/app/meet/meet.component.ts b/frontend/src/app/meet/meet.component.ts
@@ -21,8 +21,7 @@ interface Participant {
 })
 export class MeetComponent implements OnInit, OnDestroy {
   meetCode!: string;
-  password!: string;
-  userName!: string;
+  userName!: string | null;
   localStreamVideo!: MediaStream;
   isMuted: boolean = false;
   isVideoOn: boolean = true;
@@ -32,12 +31,19 @@ export class MeetComponent implements OnInit, OnDestroy {
     private router: Router,
     public socketService: SocketService
   ) {
-    const navigation = this.router.getCurrentNavigation();
-    if (navigation?.extras.state) {
-      const { userName, password } = navigation.extras.state;
-      this.userName = userName;
-      this.password = password;
+    this.userName = sessionStorage.getItem('userName') || null;
+    if (!this.userName) {
+      this.router.navigate(['/']);
     }
+    // const navigation = this.router.getCurrentNavigation();
+    // if (navigation?.extras.state) {
+    //   const { userName } = navigation.extras.state;
+    //   this.userName = userName;
+    //   console.log('user', this.userName);
+    //   if (!this.userName) {
+    //     this.router.navigate(['/']);
+    //   }
+    // }
   }
 
   async ngOnInit() {