chris/chookchat
1
0
Fork 0
forked from chookspace/chookchat
Code Pull Requests Activity

Add Jitsi call button

Browse Source
This commit is contained in:
Maxwell Jeffress
2024-12-04 08:28:53 +11:00
parent c07a2c7fce
commit 857a05b9ca
3 changed files with 108 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
client-web/index.css
View File

@@ -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%;
}

2
client-web/index.html
View File

@@ -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>

49
client-web/index.js
View File

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