better vc ui
This commit is contained in:
parent
dd08cc88ae
commit
bc91533262
6 changed files with 826 additions and 270 deletions
137
webroot/voice.js
137
webroot/voice.js
|
|
@ -15,6 +15,35 @@ let isMicMuted = false;
|
|||
let remoteVideos = {}, videoDecryptChains = {};
|
||||
let camControl = null, screenControl = null;
|
||||
|
||||
const SPEAKING_HANGOVER_MS = 400;
|
||||
|
||||
function setTileSpeaking(clientId, speaking) {
|
||||
let tile = document.getElementById(`voice-tile-${clientId}`);
|
||||
if (!tile) return;
|
||||
|
||||
if (tile._speakingTimer) {
|
||||
clearTimeout(tile._speakingTimer);
|
||||
tile._speakingTimer = null;
|
||||
}
|
||||
|
||||
if (speaking) {
|
||||
tile.classList.add("speaking");
|
||||
tile._speakingTimer = setTimeout(() => {
|
||||
tile._speakingTimer = null;
|
||||
tile.classList.remove("speaking");
|
||||
}, SPEAKING_HANGOVER_MS);
|
||||
} else {
|
||||
tile.classList.remove("speaking");
|
||||
}
|
||||
}
|
||||
|
||||
function clearAllSpeaking() {
|
||||
for (const el of document.querySelectorAll(".voice-tile.speaking")) {
|
||||
if (el._speakingTimer) { clearTimeout(el._speakingTimer); el._speakingTimer = null; }
|
||||
el.classList.remove("speaking");
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
const now = Date.now();
|
||||
let changed = false;
|
||||
|
|
@ -32,6 +61,7 @@ setInterval(() => {
|
|||
|
||||
const voiceWorkletCode = `
|
||||
class AudioProcessor extends AudioWorkletProcessor {
|
||||
|
||||
constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
|
||||
process(inputs) {
|
||||
const input = inputs[0][0];
|
||||
|
|
@ -157,7 +187,7 @@ async function startVoiceSession(serverUrl) {
|
|||
|
||||
currentVoiceWs.onopen = async () => {
|
||||
document.getElementById("voice-status").innerText = "Connected";
|
||||
document.getElementById("voice-status").style.color = "#4cd137";
|
||||
document.getElementById("voice-status").style.color = "var(--big-green)";
|
||||
let btn = document.getElementById("voice-btn-mic");
|
||||
if (btn) {
|
||||
if (isMicMuted) btn.classList.add("voice-btn-danger");
|
||||
|
|
@ -210,9 +240,12 @@ async function startVoiceSession(serverUrl) {
|
|||
if (micLevelBar) micLevelBar.style.width = percent + '%';
|
||||
|
||||
if (db >= sensitivity) vadHangover = 75;
|
||||
let isSpeaking = vadHangover > 0 && !isMicMuted;
|
||||
setTileSpeaking(String(window.id), isSpeaking);
|
||||
|
||||
if (vadHangover > 0 && !isMicMuted) {
|
||||
vadHangover--;
|
||||
if (micLevelBar) micLevelBar.style.backgroundColor = '#27ae60';
|
||||
if (micLevelBar) micLevelBar.style.backgroundColor = 'var(--big-green)';
|
||||
|
||||
if (!voiceAesCryptoKey) return;
|
||||
const iv = crypto.getRandomValues(new Uint8Array(12));
|
||||
|
|
@ -221,7 +254,7 @@ async function startVoiceSession(serverUrl) {
|
|||
payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
||||
currentVoiceWs.send(payload.buffer);
|
||||
} else {
|
||||
if (micLevelBar) micLevelBar.style.backgroundColor = '#555';
|
||||
if (micLevelBar) micLevelBar.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -260,12 +293,7 @@ async function startVoiceSession(serverUrl) {
|
|||
const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
|
||||
if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
|
||||
|
||||
let userItem = document.getElementById(`voice-tile-${clientId}`);
|
||||
if (userItem) {
|
||||
userItem.classList.add("speaking");
|
||||
if (userItem.timer) clearTimeout(userItem.timer);
|
||||
userItem.timer = setTimeout(() => { userItem.classList.remove("speaking"); }, 500);
|
||||
}
|
||||
setTileSpeaking(clientId, true);
|
||||
} catch (err) {}
|
||||
});
|
||||
} else if (type === 1 || type === 2) {
|
||||
|
|
@ -417,45 +445,49 @@ function handleCallUpdate(data) {
|
|||
showIncomingCallUI(roomId);
|
||||
}
|
||||
} else if (state.length === 0) {
|
||||
let incomingUi = document.getElementById("incoming-call-popup");
|
||||
if (incomingUi) incomingUi.remove();
|
||||
dismissIncomingCall();
|
||||
}
|
||||
}
|
||||
|
||||
function showIncomingCallUI(roomId) {
|
||||
if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;
|
||||
|
||||
|
||||
let incomingUi = document.createElement("div");
|
||||
incomingUi.id = "incoming-call-popup";
|
||||
incomingUi.style.position = "fixed";
|
||||
incomingUi.style.top = "80px";
|
||||
incomingUi.style.left = "50%";
|
||||
incomingUi.style.transform = "translateX(-50%)";
|
||||
incomingUi.style.backgroundColor = "var(--main-bg-color, #1a1a1a)";
|
||||
incomingUi.style.padding = "15px 25px";
|
||||
incomingUi.style.borderRadius = "0.9rem";
|
||||
incomingUi.style.boxShadow = "0 1rem 3rem rgba(0, 0, 0, 0.5)";
|
||||
incomingUi.style.display = "flex";
|
||||
incomingUi.style.alignItems = "center";
|
||||
incomingUi.style.gap = "20px";
|
||||
incomingUi.style.zIndex = "9999";
|
||||
incomingUi.style.border = "var(--border-width, 1px) solid var(--light-border-color, #333)";
|
||||
|
||||
incomingUi.innerHTML = `
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span style="color: var(--fg-0); font-weight: bold; font-size: 1.1rem;">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
|
||||
<span style="color: var(--fg-1); font-size: 0.9rem;">${voiceActiveUsers.length} in chat</span>
|
||||
<div class="incoming-call-icon">
|
||||
${ICONS.call({width: "1.25rem", height: "1.25rem"})}
|
||||
</div>
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<button onclick="document.getElementById('incoming-call-popup').remove(); initiateVoiceCall('${roomId}')" style="background: #27ae60; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; color: white; display: flex; align-items: center; gap: 6px; font-weight: 500;">
|
||||
${ICONS.call({width: "16px", height: "16px"})} Join
|
||||
<div class="incoming-call-info">
|
||||
<span class="incoming-call-title">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
|
||||
<span class="incoming-call-subtitle">${voiceActiveUsers.length} in chat</span>
|
||||
</div>
|
||||
<div class="incoming-call-actions">
|
||||
<button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
|
||||
${ICONS.call({width: "1rem", height: "1rem"})} Join
|
||||
</button>
|
||||
<button onclick="document.getElementById('incoming-call-popup').remove()" style="background: #e74c3c; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; color: white; display: flex; align-items: center; gap: 6px; font-weight: 500;">
|
||||
${ICONS.close({width: "16px", height: "16px"})} Decline
|
||||
<button class="voice-call-btn decline" onclick="dismissIncomingCall()">
|
||||
${ICONS.close({width: "1rem", height: "1rem"})} Decline
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(incomingUi);
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => incomingUi.classList.add("show"));
|
||||
});
|
||||
}
|
||||
|
||||
function dismissIncomingCall() {
|
||||
let el = document.getElementById("incoming-call-popup");
|
||||
if (!el || el.classList.contains("hide")) return;
|
||||
el.classList.remove("show");
|
||||
el.classList.add("hide");
|
||||
setTimeout(() => el.remove(), 400);
|
||||
}
|
||||
|
||||
function joinIncomingCall(roomId) {
|
||||
dismissIncomingCall();
|
||||
initiateVoiceCall(roomId);
|
||||
}
|
||||
|
||||
async function sendVoiceSignalToUser(targetUserId, roomId) {
|
||||
|
|
@ -510,19 +542,20 @@ function showVoiceUI() {
|
|||
voiceUiContainer.id = "voice-call-popup";
|
||||
|
||||
voiceUiContainer.innerHTML = `
|
||||
<div id="voice-header" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="color: var(--fg-0); font-weight: 500;">Voice Chat</span>
|
||||
<div id="voice-header">
|
||||
<div class="voice-title">
|
||||
${ICONS.call({width: "1.1rem", height: "1.1rem"})}
|
||||
<span>Voice Chat</span>
|
||||
</div>
|
||||
<div id="voice-status" style="font-size: 0.8rem; color: var(--fg-1)">Connecting...</div>
|
||||
<div id="voice-status">Connecting...</div>
|
||||
</div>
|
||||
<div id="voice-users"></div>
|
||||
<div style="height: 4px; background: var(--bg-2); width: 100%;">
|
||||
<div id="voice-mic-level" style="height: 100%; width: 0%; background: #27ae60; transition: width 0.1s linear;"></div>
|
||||
<div class="voice-mic-meter">
|
||||
<div id="voice-mic-level"></div>
|
||||
</div>
|
||||
<div id="voice-footer" class="voice-controls">
|
||||
<button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="Mute Microphone">
|
||||
${ICONS.mic({width: "20px", height: "20px"})}
|
||||
${ICONS.mic({width: "1.4rem", height: "1.4rem"})}
|
||||
</button>
|
||||
<button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="Camera">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
|
||||
|
|
@ -531,12 +564,15 @@ function showVoiceUI() {
|
|||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
|
||||
</button>
|
||||
<button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="Disconnect">
|
||||
${ICONS.call({width: "20px", height: "20px"})}
|
||||
${ICONS.call({width: "1.4rem", height: "1.4rem"})}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
document.body.appendChild(voiceUiContainer);
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => voiceUiContainer.classList.add("show"));
|
||||
});
|
||||
|
||||
let header = document.getElementById("voice-header");
|
||||
let isDragging = false;
|
||||
|
|
@ -639,10 +675,6 @@ function updateVoiceUIUsers() {
|
|||
|
||||
let mediaEl = streamData.canvas || streamData.video;
|
||||
if (mediaEl) {
|
||||
mediaEl.style.width = "100%";
|
||||
mediaEl.style.height = "100%";
|
||||
mediaEl.style.objectFit = "cover";
|
||||
mediaEl.style.background = "#000";
|
||||
div.appendChild(mediaEl);
|
||||
}
|
||||
|
||||
|
|
@ -696,6 +728,9 @@ function showVoiceUserSettings(clientId, e) {
|
|||
if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
|
||||
popup.style.left = left + "px";
|
||||
popup.style.top = top + "px";
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => popup.classList.add("open"));
|
||||
});
|
||||
|
||||
const closePopup = (ev) => {
|
||||
if (!popup.contains(ev.target)) {
|
||||
|
|
@ -718,6 +753,7 @@ window.updateVoiceVol = function(clientId, val, type) {
|
|||
|
||||
function toggleVoiceMic() {
|
||||
isMicMuted = !isMicMuted;
|
||||
if (isMicMuted) setTileSpeaking(String(window.id), false);
|
||||
let btn = document.getElementById("voice-btn-mic");
|
||||
if (btn) {
|
||||
if (isMicMuted) {
|
||||
|
|
@ -779,9 +815,14 @@ function endVoiceSession() {
|
|||
currentVoiceCallType = null;
|
||||
currentVoiceCallId = null;
|
||||
|
||||
clearAllSpeaking();
|
||||
|
||||
if (voiceUiContainer) {
|
||||
voiceUiContainer.remove();
|
||||
let popupEl = voiceUiContainer;
|
||||
voiceUiContainer = null;
|
||||
popupEl.classList.remove("show");
|
||||
popupEl.classList.add("hide");
|
||||
setTimeout(() => popupEl.remove(), 350);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue