Add Jitsi call button

client-web/index.css

@@ -69,7 +69,14 @@ p {
     font-family: inter;
     border-radius: 10px;
     border: none;
-    padding: 5px;
+    padding: 8px 12px;  /* Increased padding for better text containment */
+    max-width: none;    /* Remove max-width restriction */
+    width: auto;        /* Allow button to size to content */
+    margin: 5px 0;      /* Add some vertical spacing */
+    white-space: normal; /* Allow text to wrap if needed */
+    word-wrap: break-word; /* Break long words if necessary */
+    text-align: center;  /* Center the text */
+    cursor: pointer;    /* Add pointer cursor for better UX */
 }
 .greenbutton {
     color: white;
@@ -168,6 +175,9 @@ body {
     text-align: left;
     margin: 5px 0;
     width: 100%;
+    display: flex;     /* Use flexbox for better content handling */
+    flex-direction: column; /* Stack content vertically */
+    align-items: flex-start; /* Align items to the left */
 }
 
 .file {
@@ -202,7 +212,7 @@ input {
 #messageInput {
     max-width: none;
     flex-grow: 1; /* Take up remaining space */
-    margin: 0; /* Remove default margins */
+        margin: 0; /* Remove default margins */
 }
 
 /* Update button styles */
@@ -212,6 +222,23 @@ input {
     margin: 0; /* Remove default margins */
     white-space: nowrap; /* Prevent button text from wrapping */
 }
+.bluebutton:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 5px;
+}
+#users {
+    display: flex;
+    align-items: left;
+    justify-content: space-between;
+    width: 100%;
+}
+
+#meeting {
+    cursor: pointer;
+    padding: 5px 10px;
+    margin-right: 10px;
+    align-items: right;
+}
 
 .suttle {
     text-align: left;
@@ -221,3 +248,33 @@ input {
     font-size: 0.9em;
     color: rgba(255, 255, 255, 0.7);  /* Makes it slightly subtle */
 }
+
+#users {
+    position: relative;  /* Allow absolute positioning within */
+    width: 100%;
+}
+
+#meeting {
+    position: absolute;
+    right: 10px;  /* Matches your box margin */
+    top: 0;
+    cursor: pointer;
+    padding: 5px 10px;
+}
+.message.call-notification {
+    color: lightblue;
+}
+
+#meet {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.9);
+    padding: 20px;
+    border-radius: 10px;
+    width: 80%;
+    height: 80%;
+}

client-web/index.html

@@ -31,8 +31,10 @@
             </div>
         </div>
         <div class="hidden" id="messaging">
+                <div id="meet"></div>
                 <div class="box">
                     <div id="users" class="suttle"></div>
+                    <button id="meeting" class="bluebutton" onclick="startMeeting()">📞</button>
                     <div id="messagebox" class="box" style="height: 600px;"><div></div></div>
                     <div id="typing" class="suttle"></div>
                     <div id="upload" class="suttle" style="display: none;"><input type="file" id="fileupload"><button class="bluebutton" onclick="uploadFile()">Upload</button></input></div>

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);