new UI
This commit is contained in:
Dobromir Popov
parent
407affa979
commit
43f3f9a281
@ -18,36 +18,43 @@
|
||||
</div>
|
||||
|
||||
<!-- Active Users List -->
|
||||
<div class="flex justify-center items-center mb-4">
|
||||
<div id="active-users-container" class="hidden flex justify-center items-center mb-4">
|
||||
<div class="w-1/3">
|
||||
<h2 class="text-xl font-bold mb-2">Active Users</h2>
|
||||
<ul id="users-list" class="list-disc list-inside bg-white p-4 rounded shadow">
|
||||
<select id="users-list" class="w-full bg-white p-4 rounded shadow" multiple size="10">
|
||||
<!-- Dynamic list of users -->
|
||||
</ul>
|
||||
</select>
|
||||
<button onclick="startChat()" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-4">Start Chat</button>
|
||||
</div>
|
||||
<div class="w-2/3 ml-4">
|
||||
<h2 class="text-xl font-bold mb-2">Chat Room</h2>
|
||||
<div id="chat-room" class="bg-white p-4 rounded shadow">
|
||||
<!-- Chat room content -->
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" id="autosend" class="mr-2">
|
||||
<span>Continuous</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button id="record-button" disabled
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4">Push to Talk</button>
|
||||
</div>
|
||||
<div id="transcription" class="border rounded p-4 h-48 overflow-y-scroll mb-4">
|
||||
<!-- Transcription content -->
|
||||
</div>
|
||||
<canvas id="canvas" class="w-full mb-4"></canvas>
|
||||
<div class="flex justify-between items-center">
|
||||
<button id="copyButton" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded focus:outline-none" onclick="copyToClipboard('transcription')">Copy</button>
|
||||
<button id="clearButton" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded focus:outline-none" onclick="clearTranscription()">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Room -->
|
||||
<div id="chat-room-container" class="hidden w-2/3 mx-auto">
|
||||
<h2 class="text-xl font-bold mb-2">Chat Room</h2>
|
||||
<div id="chat-room" class="bg-white p-4 rounded shadow mb-4">
|
||||
<!-- Chat room content -->
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" id="autosend" class="mr-2">
|
||||
<span>Continuous</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<button id="record-button" disabled
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4">Push to Talk</button>
|
||||
</div>
|
||||
<div id="transcription" class="border rounded p-4 h-48 overflow-y-scroll mb-4">
|
||||
<!-- Transcription content -->
|
||||
</div>
|
||||
<canvas id="canvas" class="w-full mb-4"></canvas>
|
||||
<div class="flex justify-between items-center">
|
||||
<button id="copyButton" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded focus:outline-none" onclick="copyToClipboard('transcription')">Copy</button>
|
||||
<button id="clearButton" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded focus:outline-none" onclick="clearTranscription()">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold mb-2">Previous Chats</h2>
|
||||
<div id="previous-chats" class="bg-white p-4 rounded shadow">
|
||||
<!-- Previous chats content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -63,6 +70,7 @@
|
||||
|
||||
<script>
|
||||
let sessionId;
|
||||
let username;
|
||||
let selectedDeviceId = "default";
|
||||
let socket;
|
||||
let audioRecorder;
|
||||
@ -75,6 +83,8 @@
|
||||
let audioContext;
|
||||
let serverTime;
|
||||
let users = [];
|
||||
let selectedUsers = [];
|
||||
let chats = [];
|
||||
let volumeChecker;
|
||||
let lastVolumes = new Array(5);
|
||||
let averageVolume;
|
||||
@ -225,6 +235,10 @@
|
||||
users = json.users;
|
||||
updateUserList();
|
||||
}
|
||||
if (json.hasOwnProperty("chats")) {
|
||||
chats = json.chats;
|
||||
updateChatList();
|
||||
}
|
||||
return;
|
||||
} catch (e) {
|
||||
}
|
||||
@ -320,7 +334,7 @@
|
||||
|
||||
function sendAudioToServer(data) {
|
||||
if (connected) {
|
||||
socket.send(data);
|
||||
socket.send(JSON.stringify({ type: 'audio', audio: data }));
|
||||
serverTime = Date.now();
|
||||
if (!autosend.checked) {
|
||||
transcription.innerHTML = "Processing audio...";
|
||||
@ -339,21 +353,64 @@
|
||||
}
|
||||
|
||||
function joinChat() {
|
||||
const username = document.getElementById('username').value;
|
||||
username = document.getElementById('username').value;
|
||||
if (username.trim() === "") {
|
||||
alert("Please enter a username");
|
||||
return;
|
||||
}
|
||||
socket.send(JSON.stringify({ type: 'join', username }));
|
||||
document.getElementById('active-users-container').classList.remove('hidden');
|
||||
fetchPreviousChats(username);
|
||||
}
|
||||
|
||||
function startChat() {
|
||||
const selectedOptions = Array.from(document.querySelectorAll('#users-list option:checked'));
|
||||
selectedUsers = selectedOptions.map(option => option.value);
|
||||
if (selectedUsers.length === 0) {
|
||||
alert("Please select at least one user to start a chat.");
|
||||
return;
|
||||
}
|
||||
socket.send(JSON.stringify({ type: 'startChat', users: selectedUsers }));
|
||||
document.getElementById('chat-room-container').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function updateUserList() {
|
||||
const usersList = document.getElementById('users-list');
|
||||
usersList.innerHTML = '';
|
||||
users.forEach(user => {
|
||||
const li = document.createElement('li');
|
||||
li.innerText = user.username;
|
||||
usersList.appendChild(li);
|
||||
const option = document.createElement('option');
|
||||
option.value = user.sessionId;
|
||||
option.innerText = user.username;
|
||||
if (user.username === username) {
|
||||
option.innerText += " (me)";
|
||||
// option.disabled = true;
|
||||
}
|
||||
usersList.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchPreviousChats(username) {
|
||||
fetch(`/chats?username=${username}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
chats = data.chats;
|
||||
updateChatList();
|
||||
});
|
||||
}
|
||||
|
||||
function updateChatList() {
|
||||
const previousChats = document.getElementById('previous-chats');
|
||||
previousChats.innerHTML = '';
|
||||
chats.forEach(chat => {
|
||||
const chatDiv = document.createElement('div');
|
||||
chatDiv.classList.add('border', 'rounded', 'p-2', 'mb-2');
|
||||
const participants = chat.participants.join(', ');
|
||||
const status = chat.participants.map(participant => {
|
||||
const user = users.find(u => u.username === participant);
|
||||
return user ? `${participant} (online)` : `${participant} (offline)`;
|
||||
}).join(', ');
|
||||
chatDiv.innerHTML = `<strong>Participants:</strong> ${participants}<br><strong>Status:</strong> ${status}`;
|
||||
previousChats.appendChild(chatDiv);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,8 @@ let storeRecordings = false;
|
||||
let queueCounter = 0;
|
||||
|
||||
const sessions = new Map();
|
||||
const users = new Map(); // Store users with their usernames and session IDs
|
||||
const users = new Map();
|
||||
const chats = new Map(); // Store chat rooms
|
||||
|
||||
storage.init().then(() => {
|
||||
storage.getItem('language').then((value) => {
|
||||
@ -52,6 +53,11 @@ wss.on('connection', (ws) => {
|
||||
const { username } = data;
|
||||
users.set(ws.sessionId, { username, sessionId: ws.sessionId });
|
||||
broadcastUserList();
|
||||
} else if (data.type === 'startChat') {
|
||||
const { users: chatUsers } = data;
|
||||
const chatId = Math.random().toString(36).substring(2);
|
||||
chats.set(chatId, { participants: [ws.sessionId, ...chatUsers], messages: [] });
|
||||
broadcastUserList();
|
||||
} else if (data.type === 'audio') {
|
||||
handleAudioData(ws, data.audio);
|
||||
}
|
||||
@ -187,6 +193,12 @@ app.post('/upload', (req, res) => {
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/chats', (req, res) => {
|
||||
const { username } = req.query;
|
||||
const userChats = Array.from(chats.values()).filter(chat => chat.participants.includes(username));
|
||||
res.status(200).send({ chats: userChats });
|
||||
});
|
||||
|
||||
app.listen(PORT_HTTP, () => {
|
||||
console.log(`Server listening on port ${PORT_HTTP}`);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user