[call-me] - add notification 4 new user join

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "call-me",
-    "version": "1.1.07",
+    "version": "1.1.08",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "call-me",
-            "version": "1.1.07",
+            "version": "1.1.08",
             "license": "AGPLv3",
             "dependencies": {
                 "@ngrok/ngrok": "1.5.1",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.1.07",
+    "version": "1.1.08",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",

public/client.js

@@ -922,8 +922,18 @@ async function handleCandidate(data) {
 
 // Handle connected users
 function handleUsers(data) {
-    allConnectedUsers = data.users.filter((u) => u !== userName);
+    // Show toast for new users
+    const prevUsers = new Set(allConnectedUsers);
+    const currentUsers = data.users.filter((u) => u !== userName);
+    allConnectedUsers = currentUsers;
     filterUserList(userSearchInput.value || '');
+    if (userSignedIn) {
+        currentUsers.forEach((u) => {
+            if (!prevUsers.has(u)) {
+                toast(`<b>${u}</b> joined`, 'success');
+            }
+        });
+    }
 }
 
 // Handle remote video status
@@ -993,6 +1003,24 @@ function handleLeave(disconnect = true) {
     }
 }
 
+// Display toast messages
+function toast(message, icon = 'info', position = 'top', timer = 3000) {
+    const Toast = Swal.mixin({
+        toast: true,
+        position: position,
+        icon: icon,
+        showConfirmButton: false,
+        timerProgressBar: true,
+        timer: timer,
+    });
+    Toast.fire({
+        icon: icon,
+        title: message,
+        showClass: { popup: 'animate__animated animate__fadeInDown' },
+        hideClass: { popup: 'animate__animated animate__fadeOutUp' },
+    });
+}
+
 // Handle and display errors
 function handleError(message, error = false, position = 'top', timer = 6000) {
     if (error) console.error(error);