Add Jitsi call button

client-web/index.js

@@ -16,6 +16,7 @@ let username;
 let password;
 let typingTimeout;
 let typingPeople = new Array();
+let api;
 
 function resizeMessaging() {
     const messagingDiv = document.getElementById('messaging');
@@ -162,25 +163,41 @@ function connect() {
                 if (fileElement) {
                     if (messagesDiv) {
                         messagesDiv.appendChild(fileElement);
-                        messagesDiv.scrollTop = messagesDiv.scrollHeight;
                         fileElement.className = "file";
                         fileElement.src = message.content;
                         fileElement.height = 200;
                         fileElement.addEventListener("click", function() {
                             window.open(message.content, "_blank");
                         });
+                        messagesDiv.scrollTop = messagesDiv.scrollHeight;
                     }
                 }
                 return;
             }
+            if (message.type == "call") {
+                const messagesDiv = document.getElementById('messagebox');
+                const callButton = document.createElement('div');
+                if (callButton) {
+                    if (messagesDiv) {
+                        messagesDiv.appendChild(callButton)
+                        callButton.className = "message call-notification";
+                        callButton.textContent = `${message.username} started a Jitsi call! Click to join!`;
+                        callButton.addEventListener('click', () => {
+                            window.open(message.content, '_blank');
+                        });
+                        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+                        return;
+                    }
+                }
+            }
             const messagesDiv = document.getElementById('messagebox');
             const messageElement = document.createElement('div');
             if (messageElement) {
                 if (messagesDiv) {
                     messagesDiv.appendChild(messageElement);
-                    messagesDiv.scrollTop = messagesDiv.scrollHeight;
                     messageElement.className = 'message';
                     messageElement.textContent = `${message.username}: ${message.content}` ;
+                    messagesDiv.scrollTop = messagesDiv.scrollHeight;
                 }
             }
             if (document.hidden) {
@@ -351,4 +368,32 @@ function updatePeopleTyping() {
     }
 }
 
+const characters ='abcdefghijklmnopqrstuvwxyz';
+
+function generateString(length) {
+    let result = '';
+    const charactersLength = characters.length;
+    for ( let i = 0; i < length; i++ ) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+}
+
+function startMeeting() {
+    const link = `https://meet.jit.si/chookchat-${generateString(15)}`;
+    alert("Note: You may need to sign in to Jitsi to start the meeting. We'll take you there in a moment...")
+    window.open(link, '_blank');
+    const processedMessage = {
+        "type": "call",
+        "username": username,
+        "token": md5(password),
+        "content": link
+    };
+    if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(processedMessage));
+    } else {
+        alert("Something went wrong. Refreshing might do the trick :)")
+    }
+}
+
 document.getElementById('messageInput').addEventListener('input', startTypingIndicator);