olcxjas-softworks/LarpixClient
2
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 3

better vc ui

Browse source
This commit is contained in:
olcxja 2026-08-23 11:39:24 +02:00
commit bc91533262
6 changed files with 826 additions and 270 deletions
Download patch file Download diff file Expand all files Collapse all files

14
android/app/src/main/assets/public/main.js
View file

@ -1461,8 +1461,8 @@ function showFixedContextMenu(rect, html) {
fixedContextMenu.style.transition = 'none'; fixedContextMenu.style.transition = 'none';
fixedContextMenu.style.opacity = '0'; fixedContextMenu.style.opacity = '0';
fixedContextMenu.style.left = '0px'; fixedContextMenu.style.left = '0rem';
fixedContextMenu.style.top = '0px'; fixedContextMenu.style.top = '0rem';
fixedContextMenu.classList.add("show"); fixedContextMenu.classList.add("show");
@ -3139,7 +3139,7 @@ async function generateMessagesHtml(entries, isPinnedContext = false) {
let safeType = encodeURIComponent(att.type).replace(/'/g, "%27"); let safeType = encodeURIComponent(att.type).replace(/'/g, "%27");
let safeName = encodeURIComponent(att.name).replace(/'/g, "%27"); let safeName = encodeURIComponent(att.name).replace(/'/g, "%27");
attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 120px; max-width: 300px; min-height: 100px; max-height: 300px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')"> attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 7.5rem; max-width: 18.75rem; min-height: 6.25rem; max-height: 18.75rem; background: rgba(0,0,0,0.2); border: 0.0625rem solid var(--border-color); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')">
<div style="padding: 1rem; text-align: center; color: var(--text-color);"> <div style="padding: 1rem; text-align: center; color: var(--text-color);">
${iconSvg} ${iconSvg}
<div style="font-size: 0.8rem; margin-top: 0.5rem; word-break: break-all;">${escapeHtml(displayName)}</div> <div style="font-size: 0.8rem; margin-top: 0.5rem; word-break: break-all;">${escapeHtml(displayName)}</div>
@ -3653,12 +3653,12 @@ async function downloadAndRenderAttachment(container, msgId, attId, type, name,
container.dataset.url = blobUrl; container.dataset.url = blobUrl;
if (type.startsWith("image/")) { if (type.startsWith("image/")) {
container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 300px; display: block;" onclick="window.open('${blobUrl}', '_blank')">`; container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 18.75rem; display: block;" onclick="window.open('${blobUrl}', '_blank')">`;
} else if (type.startsWith("video/")) { } else if (type.startsWith("video/")) {
container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 300px; display: block;"></video>`; container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 18.75rem; display: block;"></video>`;
} else { } else {
container.innerHTML = originalHtml; container.innerHTML = originalHtml;
container.style.border = "1px solid var(--accent-color)"; container.style.border = "0.0625rem solid var(--accent-color)";
let a = document.createElement("a"); let a = document.createElement("a");
a.href = blobUrl; a.href = blobUrl;
a.download = name; a.download = name;
@ -3716,7 +3716,7 @@ function renderAttachmentsPreview() {
} }
html += ` html += `
<div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;"> <div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;">
<div style="flex-shrink: 0; color: var(--accent-color); display: flex; align-items: center;">${iconHtml}</div> <div style="flex-shrink: 0; color: var(--accent-color); display: flex; align-items: center;">${iconHtml}</div>
<div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color); font-weight: 500; flex-grow: 1;">${escapeHtml(file.name)}</div> <div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color); font-weight: 500; flex-grow: 1;">${escapeHtml(file.name)}</div>
<button onclick="removeDraftAttachment(${index})" style="background: transparent; color: var(--text-color); border: none; width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.125rem; opacity: 0.6; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'"> <button onclick="removeDraftAttachment(${index})" style="background: transparent; color: var(--text-color); border: none; width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.125rem; opacity: 0.6; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'">

441
android/app/src/main/assets/public/style.css
View file

@ -1022,35 +1022,43 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
} }
/* Custom Zoom Slider Styling */ /* Custom Zoom Slider Styling */
#cropper-zoom { #cropper-zoom,
-webkit-appearance: none; .voice-setting-row input[type="range"] {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
outline: none;
margin: 10px 0;
}
#cropper-zoom::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 16px; width: 100%;
height: 16px; height: 0.375rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 0.1875rem;
outline: none;
}
#cropper-zoom {
margin: 0.625rem 0;
}
#cropper-zoom::-webkit-slider-thumb,
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1rem;
height: 1rem;
border-radius: 50%; border-radius: 50%;
background: var(--text-color); background: var(--text-color);
cursor: pointer; cursor: pointer;
transition: transform 0.2s, background 0.2s; transition: transform 0.2s, background 0.2s;
} }
#cropper-zoom::-webkit-slider-thumb:hover { #cropper-zoom::-webkit-slider-thumb:hover,
.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2); transform: scale(1.2);
background: #fff; background: #fff;
} }
#cropper-zoom::-moz-range-thumb { #cropper-zoom::-moz-range-thumb,
width: 16px; .voice-setting-row input[type="range"]::-moz-range-thumb {
height: 16px; width: 1rem;
height: 1rem;
border-radius: 50%; border-radius: 50%;
background: var(--text-color); background: var(--text-color);
cursor: pointer; cursor: pointer;
@ -1058,7 +1066,8 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
border: none; border: none;
} }
#cropper-zoom::-moz-range-thumb:hover { #cropper-zoom::-moz-range-thumb:hover,
.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.2); transform: scale(1.2);
background: #fff; background: #fff;
} }
@ -1234,9 +1243,9 @@ input:checked + .toggle-slider:before {
z-index: 100; z-index: 100;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: translateY(-10px); transform: translateY(-0.625rem);
transition: all 0.2s ease; transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.5); box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.5);
padding: 0.4rem; padding: 0.4rem;
pointer-events: none; pointer-events: none;
} }
@ -1277,8 +1286,10 @@ input:checked + .toggle-slider:before {
/* Voice UI Styles */ /* Voice UI Styles */
#voice-call-popup { #voice-call-popup {
position: fixed; position: fixed;
width: 600px; width: 37.5rem;
height: 450px; height: 28.125rem;
min-width: 20rem;
min-height: 14rem;
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
border: var(--border-width) solid var(--light-border-color); border: var(--border-width) solid var(--light-border-color);
border-radius: 0.9rem; border-radius: 0.9rem;
@ -1288,25 +1299,68 @@ input:checked + .toggle-slider:before {
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
resize: both; resize: both;
opacity: 0;
transform: translateY(1.5rem) scale(0.92);
pointer-events: none;
transition:
opacity 0.2s ease,
transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#voice-call-popup.show {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
#voice-call-popup.hide {
opacity: 0;
transform: translateY(1rem) scale(0.95);
} }
#voice-header { #voice-header {
height: 3rem; height: 3rem;
background: var(--light-border-color); flex-shrink: 0;
background: rgba(255, 255, 255, 0.03);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 15px; justify-content: space-between;
padding: 0 0.9375rem;
cursor: grab; cursor: grab;
font-weight: bold; font-weight: bold;
user-select: none; user-select: none;
border-bottom: var(--border-width) solid rgba(255,255,255,0.05); -webkit-user-select: none;
border-bottom: var(--border-width) solid var(--light-border-color);
}
#voice-header:active {
cursor: grabbing;
}
.voice-title {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-color);
}
.voice-title svg {
width: 1.1rem;
height: 1.1rem;
pointer-events: none !important;
}
#voice-status {
font-size: 0.75rem;
font-weight: 600;
color: var(--darker-text-color);
background: rgba(255, 255, 255, 0.05);
border: var(--border-width) solid var(--light-border-color);
padding: 0.15rem 0.6rem;
border-radius: 50rem;
} }
#voice-users { #voice-users {
padding: 15px; padding: 0.9375rem;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
gap: 12px; gap: 0.75rem;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; flex-grow: 1;
} }
@ -1314,94 +1368,253 @@ input:checked + .toggle-slider:before {
.voice-tile { .voice-tile {
position: relative; position: relative;
background: var(--light-border-color); background: var(--light-border-color);
border-radius: 8px;
overflow: hidden;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.3); border-radius: 0.65rem;
cursor: pointer;
border: 2px solid transparent;
}
.voice-tile.speaking {
border-color: #4cd137;
box-shadow: 0 0 8px 2px #4cd137;
}
.voice-tile-name {
position: absolute;
bottom: 6px;
left: 6px;
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
background: rgba(0,0,0,0.6);
border-radius: 4px;
color: #fff;
max-width: calc(100% - 12px);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; cursor: pointer;
white-space: nowrap; border: var(--border-width) solid transparent;
box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
animation: voice-tile-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
} }
.voice-tile:hover {
.voice-tile-icons { transform: translateY(-0.125rem);
position: absolute;
bottom: 6px;
right: 6px;
display: flex;
gap: 4px;
} }
.voice-tile video,
.voice-tile video { .voice-tile canvas {
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
background: #000; background: #000;
} }
@keyframes voice-tile-in {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.voice-tile.speaking {
border-color: var(--big-green);
box-shadow: 0 0 0.3rem rgba(120, 200, 120, 0.45);
}
.voice-tile-name {
position: absolute;
bottom: 0.375rem;
left: 0.375rem;
font-size: 0.6875rem;
font-weight: 600;
padding: 0.125rem 0.5rem;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(0.5rem);
-webkit-backdrop-filter: blur(0.5rem);
border-radius: 50rem;
color: #fff;
max-width: calc(100% - 0.75rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
.voice-tile-icons {
position: absolute;
bottom: 0.375rem;
right: 0.375rem;
display: flex;
gap: 0.25rem;
}
.voice-tile-icons svg {
filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.6));
}
.voice-mic-meter {
height: 0.25rem;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.06);
width: 100%;
}
#voice-mic-level {
height: 100%;
width: 0%;
background: rgba(255, 255, 255, 0.15);
transition: width 0.1s linear, background-color 0.2s ease;
}
.voice-controls { .voice-controls {
height: 4rem; height: 4rem;
background: var(--main-bg-color); flex-shrink: 0;
background: rgba(255, 255, 255, 0.02);
border-top: var(--border-width) solid var(--light-border-color); border-top: var(--border-width) solid var(--light-border-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 15px; gap: 0.9375rem;
padding: 0 0.9375rem;
} }
.voice-btn { .voice-btn {
border: var(--border-width) solid var(--light-border-color); border: var(--border-width) solid var(--light-border-color);
background: var(--main-bg-color); background: rgba(255, 255, 255, 0.05);
color: var(--fg-1); color: var(--text-color) !important;
border-radius: 0.6rem; width: 2.6rem;
padding: 0.6rem 1rem; height: 2.6rem;
flex-shrink: 0;
margin: 0;
padding: 0;
border-radius: 0.8rem;
cursor: pointer; cursor: pointer;
font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px;
transition: all 0.2s;
}
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
touch-action: manipulation;
}
.voice-btn svg {
width: 1.4rem;
height: 1.4rem;
pointer-events: none !important;
}
.voice-btn:hover { .voice-btn:hover {
background: var(--light-border-color); background: rgba(255, 255, 255, 0.1);
}
.voice-btn:active, .voice-btn.is-pressed {
transform: var(--press-scale);
} }
.voice-btn.voice-btn-active { .voice-btn.voice-btn-active {
background: #27ae60; background: var(--big-green) !important;
color: #fff; border-color: transparent !important;
border-color: #27ae60; color: white !important;
} }
.voice-btn.voice-btn-active:hover {
.voice-btn-danger { filter: brightness(1.1);
background: #e74c3c !important; }
.voice-btn.voice-btn-danger {
background: var(--big-red) !important;
border-color: transparent !important;
color: white !important; color: white !important;
border-color: #e74c3c !important;
} }
.voice-btn-danger:hover { /* Incoming Call Popup */
background: #c0392b !important; #incoming-call-popup {
border-color: #c0392b !important; position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(calc(-100% - 3rem));
display: flex;
align-items: center;
gap: 1rem;
padding: 0.7rem 0.7rem 0.7rem 1rem;
background: rgba(255, 255, 255, 0.015);
backdrop-filter: blur(1.2rem);
-webkit-backdrop-filter: blur(1.2rem);
border: var(--border-width) solid var(--big-green);
border-radius: 0.9rem;
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
z-index: 9999;
opacity: 0;
transition:
opacity 0.25s ease,
transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#incoming-call-popup.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
#incoming-call-popup.hide {
opacity: 0;
transform: translateX(-50%) translateY(calc(-100% - 2rem));
}
.incoming-call-icon {
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
border-radius: 50%;
background: var(--big-green);
color: white !important;
display: flex;
align-items: center;
justify-content: center;
animation: voice-call-pulse 1.5s ease-out infinite;
}
.incoming-call-icon svg {
width: 1.25rem;
height: 1.25rem;
pointer-events: none !important;
}
@keyframes voice-call-pulse {
0% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0.45); }
70% { box-shadow: 0 0 0 0.8rem hsla(120, 60%, 55%, 0); }
100% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0); }
}
.incoming-call-info {
display: flex;
flex-direction: column;
gap: 0.1rem;
text-align: left;
}
.incoming-call-title {
font-weight: bold;
font-size: 1.05rem;
color: var(--text-color);
}
.incoming-call-subtitle {
font-size: 0.85rem;
color: var(--darker-text-color);
opacity: 0.8;
}
.incoming-call-actions {
display: flex;
gap: 0.5rem;
margin-left: 0.4rem;
}
.voice-call-btn {
height: 2.4rem;
padding: 0 0.9375rem;
margin: 0;
border-radius: 0.8rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
font-weight: 700;
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
touch-action: manipulation;
}
.voice-call-btn svg {
width: 1rem;
height: 1rem;
pointer-events: none !important;
}
.voice-call-btn.accept {
background: var(--big-green) !important;
border: none !important;
color: white !important;
}
.voice-call-btn.decline {
background: rgba(255, 255, 255, 0.05) !important;
border: var(--border-width) solid var(--light-border-color) !important;
color: var(--text-color) !important;
}
.voice-call-btn.accept:hover {
filter: brightness(1.12);
}
.voice-call-btn.decline:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.voice-call-btn:active, .voice-call-btn.is-pressed {
transform: var(--press-scale);
} }
/* Voice User Settings Popup */ /* Voice User Settings Popup */
@ -1409,39 +1622,63 @@ input:checked + .toggle-slider:before {
position: fixed; position: fixed;
background: var(--main-bg-color); background: var(--main-bg-color);
border: var(--border-width) solid var(--light-border-color); border: var(--border-width) solid var(--light-border-color);
padding: 15px; padding: 0.4rem;
border-radius: 8px; border-radius: 0.8rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.5); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
z-index: 10000; z-index: 10000;
min-width: 13rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
transform-origin: top left;
transform: scale(0.9);
opacity: 0;
pointer-events: none;
transition:
opacity 0.15s ease,
transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#voice-user-settings.open {
transform: scale(1);
opacity: 1;
pointer-events: auto;
} }
.voice-setting-row { .voice-setting-row {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 10px; gap: 0.3rem;
margin-bottom: 0;
padding: 0.5rem;
border-radius: 0.65rem;
}
.voice-setting-row:hover {
background-color: rgba(255, 255, 255, 0.04);
} }
.voice-setting-row label { .voice-setting-row label {
font-size: 11px; font-size: 0.75rem;
color: var(--fg-1); font-weight: 600;
color: var(--darker-text-color);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.voice-setting-row input[type="range"] { .voice-setting-row input[type="range"] {
margin: 0;
width: 100%; width: 100%;
height: 4px;
appearance: none; appearance: none;
background: var(--bg-2); -webkit-appearance: none;
outline: none; outline: none;
border-radius: 2px;
} }
.voice-setting-row input[type="range"]::-webkit-slider-thumb { @media (max-width: 55rem) {
appearance: none; #voice-call-popup {
width: 12px; width: calc(100vw - 2rem);
height: 12px; height: 60vh;
background: var(--accent); left: 1rem;
border-radius: 50%; right: unset;
cursor: pointer; }
#incoming-call-popup {
width: calc(100vw - 2rem);
box-sizing: border-box;
}
} }

137
android/app/src/main/assets/public/voice.js
View file

@ -15,6 +15,35 @@ let isMicMuted = false;
let remoteVideos = {}, videoDecryptChains = {}; let remoteVideos = {}, videoDecryptChains = {};
let camControl = null, screenControl = null; 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(() => { setInterval(() => {
const now = Date.now(); const now = Date.now();
let changed = false; let changed = false;
@ -32,6 +61,7 @@ setInterval(() => {
const voiceWorkletCode = ` const voiceWorkletCode = `
class AudioProcessor extends AudioWorkletProcessor { class AudioProcessor extends AudioWorkletProcessor {
constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; } constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
process(inputs) { process(inputs) {
const input = inputs[0][0]; const input = inputs[0][0];
@ -157,7 +187,7 @@ async function startVoiceSession(serverUrl) {
currentVoiceWs.onopen = async () => { currentVoiceWs.onopen = async () => {
document.getElementById("voice-status").innerText = "Connected"; 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"); let btn = document.getElementById("voice-btn-mic");
if (btn) { if (btn) {
if (isMicMuted) btn.classList.add("voice-btn-danger"); if (isMicMuted) btn.classList.add("voice-btn-danger");
@ -210,9 +240,12 @@ async function startVoiceSession(serverUrl) {
if (micLevelBar) micLevelBar.style.width = percent + '%'; if (micLevelBar) micLevelBar.style.width = percent + '%';
if (db >= sensitivity) vadHangover = 75; if (db >= sensitivity) vadHangover = 75;
let isSpeaking = vadHangover > 0 && !isMicMuted;
setTileSpeaking(String(window.id), isSpeaking);
if (vadHangover > 0 && !isMicMuted) { if (vadHangover > 0 && !isMicMuted) {
vadHangover--; vadHangover--;
if (micLevelBar) micLevelBar.style.backgroundColor = '#27ae60'; if (micLevelBar) micLevelBar.style.backgroundColor = 'var(--big-green)';
if (!voiceAesCryptoKey) return; if (!voiceAesCryptoKey) return;
const iv = crypto.getRandomValues(new Uint8Array(12)); 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); payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
currentVoiceWs.send(payload.buffer); currentVoiceWs.send(payload.buffer);
} else { } 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); const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]); if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
let userItem = document.getElementById(`voice-tile-${clientId}`); setTileSpeaking(clientId, true);
if (userItem) {
userItem.classList.add("speaking");
if (userItem.timer) clearTimeout(userItem.timer);
userItem.timer = setTimeout(() => { userItem.classList.remove("speaking"); }, 500);
}
} catch (err) {} } catch (err) {}
}); });
} else if (type === 1 || type === 2) { } else if (type === 1 || type === 2) {
@ -417,45 +445,49 @@ function handleCallUpdate(data) {
showIncomingCallUI(roomId); showIncomingCallUI(roomId);
} }
} else if (state.length === 0) { } else if (state.length === 0) {
let incomingUi = document.getElementById("incoming-call-popup"); dismissIncomingCall();
if (incomingUi) incomingUi.remove();
} }
} }
function showIncomingCallUI(roomId) { function showIncomingCallUI(roomId) {
if (document.getElementById("incoming-call-popup") || currentVoiceWs) return; if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;
let incomingUi = document.createElement("div"); let incomingUi = document.createElement("div");
incomingUi.id = "incoming-call-popup"; 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 = ` incomingUi.innerHTML = `
<div style="display: flex; flex-direction: column;"> <div class="incoming-call-icon">
<span style="color: var(--fg-0); font-weight: bold; font-size: 1.1rem;">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span> ${ICONS.call({width: "1.25rem", height: "1.25rem"})}
<span style="color: var(--fg-1); font-size: 0.9rem;">${voiceActiveUsers.length} in chat</span>
</div> </div>
<div style="display: flex; gap: 10px;"> <div class="incoming-call-info">
<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;"> <span class="incoming-call-title">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
${ICONS.call({width: "16px", height: "16px"})} Join <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>
<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;"> <button class="voice-call-btn decline" onclick="dismissIncomingCall()">
${ICONS.close({width: "16px", height: "16px"})} Decline ${ICONS.close({width: "1rem", height: "1rem"})} Decline
</button> </button>
</div> </div>
`; `;
document.body.appendChild(incomingUi); 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) { async function sendVoiceSignalToUser(targetUserId, roomId) {
@ -510,19 +542,20 @@ function showVoiceUI() {
voiceUiContainer.id = "voice-call-popup"; voiceUiContainer.id = "voice-call-popup";
voiceUiContainer.innerHTML = ` voiceUiContainer.innerHTML = `
<div id="voice-header" style="display: flex; justify-content: space-between; align-items: center; width: 100%;"> <div id="voice-header">
<div style="display: flex; align-items: center; gap: 8px;"> <div class="voice-title">
<span style="color: var(--fg-0); font-weight: 500;">Voice Chat</span> ${ICONS.call({width: "1.1rem", height: "1.1rem"})}
<span>Voice Chat</span>
</div> </div>
<div id="voice-status" style="font-size: 0.8rem; color: var(--fg-1)">Connecting...</div> <div id="voice-status">Connecting...</div>
</div> </div>
<div id="voice-users"></div> <div id="voice-users"></div>
<div style="height: 4px; background: var(--bg-2); width: 100%;"> <div class="voice-mic-meter">
<div id="voice-mic-level" style="height: 100%; width: 0%; background: #27ae60; transition: width 0.1s linear;"></div> <div id="voice-mic-level"></div>
</div> </div>
<div id="voice-footer" class="voice-controls"> <div id="voice-footer" class="voice-controls">
<button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="Mute Microphone"> <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>
<button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="Camera"> <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> <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> <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>
<button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="Disconnect"> <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> </button>
</div> </div>
`; `;
document.body.appendChild(voiceUiContainer); document.body.appendChild(voiceUiContainer);
requestAnimationFrame(() => {
requestAnimationFrame(() => voiceUiContainer.classList.add("show"));
});
let header = document.getElementById("voice-header"); let header = document.getElementById("voice-header");
let isDragging = false; let isDragging = false;
@ -639,10 +675,6 @@ function updateVoiceUIUsers() {
let mediaEl = streamData.canvas || streamData.video; let mediaEl = streamData.canvas || streamData.video;
if (mediaEl) { if (mediaEl) {
mediaEl.style.width = "100%";
mediaEl.style.height = "100%";
mediaEl.style.objectFit = "cover";
mediaEl.style.background = "#000";
div.appendChild(mediaEl); div.appendChild(mediaEl);
} }
@ -696,6 +728,9 @@ function showVoiceUserSettings(clientId, e) {
if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10; if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
popup.style.left = left + "px"; popup.style.left = left + "px";
popup.style.top = top + "px"; popup.style.top = top + "px";
requestAnimationFrame(() => {
requestAnimationFrame(() => popup.classList.add("open"));
});
const closePopup = (ev) => { const closePopup = (ev) => {
if (!popup.contains(ev.target)) { if (!popup.contains(ev.target)) {
@ -718,6 +753,7 @@ window.updateVoiceVol = function(clientId, val, type) {
function toggleVoiceMic() { function toggleVoiceMic() {
isMicMuted = !isMicMuted; isMicMuted = !isMicMuted;
if (isMicMuted) setTileSpeaking(String(window.id), false);
let btn = document.getElementById("voice-btn-mic"); let btn = document.getElementById("voice-btn-mic");
if (btn) { if (btn) {
if (isMicMuted) { if (isMicMuted) {
@ -779,9 +815,14 @@ function endVoiceSession() {
currentVoiceCallType = null; currentVoiceCallType = null;
currentVoiceCallId = null; currentVoiceCallId = null;
clearAllSpeaking();
if (voiceUiContainer) { if (voiceUiContainer) {
voiceUiContainer.remove(); let popupEl = voiceUiContainer;
voiceUiContainer = null; voiceUiContainer = null;
popupEl.classList.remove("show");
popupEl.classList.add("hide");
setTimeout(() => popupEl.remove(), 350);
} }
} }

14
webroot/main.js
View file

@ -1461,8 +1461,8 @@ function showFixedContextMenu(rect, html) {
fixedContextMenu.style.transition = 'none'; fixedContextMenu.style.transition = 'none';
fixedContextMenu.style.opacity = '0'; fixedContextMenu.style.opacity = '0';
fixedContextMenu.style.left = '0px'; fixedContextMenu.style.left = '0rem';
fixedContextMenu.style.top = '0px'; fixedContextMenu.style.top = '0rem';
fixedContextMenu.classList.add("show"); fixedContextMenu.classList.add("show");
@ -3139,7 +3139,7 @@ async function generateMessagesHtml(entries, isPinnedContext = false) {
let safeType = encodeURIComponent(att.type).replace(/'/g, "%27"); let safeType = encodeURIComponent(att.type).replace(/'/g, "%27");
let safeName = encodeURIComponent(att.name).replace(/'/g, "%27"); let safeName = encodeURIComponent(att.name).replace(/'/g, "%27");
attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 120px; max-width: 300px; min-height: 100px; max-height: 300px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')"> attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 7.5rem; max-width: 18.75rem; min-height: 6.25rem; max-height: 18.75rem; background: rgba(0,0,0,0.2); border: 0.0625rem solid var(--border-color); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')">
<div style="padding: 1rem; text-align: center; color: var(--text-color);"> <div style="padding: 1rem; text-align: center; color: var(--text-color);">
${iconSvg} ${iconSvg}
<div style="font-size: 0.8rem; margin-top: 0.5rem; word-break: break-all;">${escapeHtml(displayName)}</div> <div style="font-size: 0.8rem; margin-top: 0.5rem; word-break: break-all;">${escapeHtml(displayName)}</div>
@ -3653,12 +3653,12 @@ async function downloadAndRenderAttachment(container, msgId, attId, type, name,
container.dataset.url = blobUrl; container.dataset.url = blobUrl;
if (type.startsWith("image/")) { if (type.startsWith("image/")) {
container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 300px; display: block;" onclick="window.open('${blobUrl}', '_blank')">`; container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 18.75rem; display: block;" onclick="window.open('${blobUrl}', '_blank')">`;
} else if (type.startsWith("video/")) { } else if (type.startsWith("video/")) {
container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 300px; display: block;"></video>`; container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 18.75rem; display: block;"></video>`;
} else { } else {
container.innerHTML = originalHtml; container.innerHTML = originalHtml;
container.style.border = "1px solid var(--accent-color)"; container.style.border = "0.0625rem solid var(--accent-color)";
let a = document.createElement("a"); let a = document.createElement("a");
a.href = blobUrl; a.href = blobUrl;
a.download = name; a.download = name;
@ -3716,7 +3716,7 @@ function renderAttachmentsPreview() {
} }
html += ` html += `
<div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;"> <div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;">
<div style="flex-shrink: 0; color: var(--accent-color); display: flex; align-items: center;">${iconHtml}</div> <div style="flex-shrink: 0; color: var(--accent-color); display: flex; align-items: center;">${iconHtml}</div>
<div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color); font-weight: 500; flex-grow: 1;">${escapeHtml(file.name)}</div> <div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color); font-weight: 500; flex-grow: 1;">${escapeHtml(file.name)}</div>
<button onclick="removeDraftAttachment(${index})" style="background: transparent; color: var(--text-color); border: none; width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.125rem; opacity: 0.6; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'"> <button onclick="removeDraftAttachment(${index})" style="background: transparent; color: var(--text-color); border: none; width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.125rem; opacity: 0.6; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'">

441
webroot/style.css
View file

@ -1022,35 +1022,43 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
} }
/* Custom Zoom Slider Styling */ /* Custom Zoom Slider Styling */
#cropper-zoom { #cropper-zoom,
-webkit-appearance: none; .voice-setting-row input[type="range"] {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
outline: none;
margin: 10px 0;
}
#cropper-zoom::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 16px; width: 100%;
height: 16px; height: 0.375rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 0.1875rem;
outline: none;
}
#cropper-zoom {
margin: 0.625rem 0;
}
#cropper-zoom::-webkit-slider-thumb,
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1rem;
height: 1rem;
border-radius: 50%; border-radius: 50%;
background: var(--text-color); background: var(--text-color);
cursor: pointer; cursor: pointer;
transition: transform 0.2s, background 0.2s; transition: transform 0.2s, background 0.2s;
} }
#cropper-zoom::-webkit-slider-thumb:hover { #cropper-zoom::-webkit-slider-thumb:hover,
.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2); transform: scale(1.2);
background: #fff; background: #fff;
} }
#cropper-zoom::-moz-range-thumb { #cropper-zoom::-moz-range-thumb,
width: 16px; .voice-setting-row input[type="range"]::-moz-range-thumb {
height: 16px; width: 1rem;
height: 1rem;
border-radius: 50%; border-radius: 50%;
background: var(--text-color); background: var(--text-color);
cursor: pointer; cursor: pointer;
@ -1058,7 +1066,8 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
border: none; border: none;
} }
#cropper-zoom::-moz-range-thumb:hover { #cropper-zoom::-moz-range-thumb:hover,
.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.2); transform: scale(1.2);
background: #fff; background: #fff;
} }
@ -1234,9 +1243,9 @@ input:checked + .toggle-slider:before {
z-index: 100; z-index: 100;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: translateY(-10px); transform: translateY(-0.625rem);
transition: all 0.2s ease; transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.5); box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.5);
padding: 0.4rem; padding: 0.4rem;
pointer-events: none; pointer-events: none;
} }
@ -1277,8 +1286,10 @@ input:checked + .toggle-slider:before {
/* Voice UI Styles */ /* Voice UI Styles */
#voice-call-popup { #voice-call-popup {
position: fixed; position: fixed;
width: 600px; width: 37.5rem;
height: 450px; height: 28.125rem;
min-width: 20rem;
min-height: 14rem;
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
border: var(--border-width) solid var(--light-border-color); border: var(--border-width) solid var(--light-border-color);
border-radius: 0.9rem; border-radius: 0.9rem;
@ -1288,25 +1299,68 @@ input:checked + .toggle-slider:before {
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
resize: both; resize: both;
opacity: 0;
transform: translateY(1.5rem) scale(0.92);
pointer-events: none;
transition:
opacity 0.2s ease,
transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#voice-call-popup.show {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
#voice-call-popup.hide {
opacity: 0;
transform: translateY(1rem) scale(0.95);
} }
#voice-header { #voice-header {
height: 3rem; height: 3rem;
background: var(--light-border-color); flex-shrink: 0;
background: rgba(255, 255, 255, 0.03);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 15px; justify-content: space-between;
padding: 0 0.9375rem;
cursor: grab; cursor: grab;
font-weight: bold; font-weight: bold;
user-select: none; user-select: none;
border-bottom: var(--border-width) solid rgba(255,255,255,0.05); -webkit-user-select: none;
border-bottom: var(--border-width) solid var(--light-border-color);
}
#voice-header:active {
cursor: grabbing;
}
.voice-title {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-color);
}
.voice-title svg {
width: 1.1rem;
height: 1.1rem;
pointer-events: none !important;
}
#voice-status {
font-size: 0.75rem;
font-weight: 600;
color: var(--darker-text-color);
background: rgba(255, 255, 255, 0.05);
border: var(--border-width) solid var(--light-border-color);
padding: 0.15rem 0.6rem;
border-radius: 50rem;
} }
#voice-users { #voice-users {
padding: 15px; padding: 0.9375rem;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
gap: 12px; gap: 0.75rem;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; flex-grow: 1;
} }
@ -1314,94 +1368,253 @@ input:checked + .toggle-slider:before {
.voice-tile { .voice-tile {
position: relative; position: relative;
background: var(--light-border-color); background: var(--light-border-color);
border-radius: 8px;
overflow: hidden;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.3); border-radius: 0.65rem;
cursor: pointer;
border: 2px solid transparent;
}
.voice-tile.speaking {
border-color: #4cd137;
box-shadow: 0 0 8px 2px #4cd137;
}
.voice-tile-name {
position: absolute;
bottom: 6px;
left: 6px;
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
background: rgba(0,0,0,0.6);
border-radius: 4px;
color: #fff;
max-width: calc(100% - 12px);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; cursor: pointer;
white-space: nowrap; border: var(--border-width) solid transparent;
box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
animation: voice-tile-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
} }
.voice-tile:hover {
.voice-tile-icons { transform: translateY(-0.125rem);
position: absolute;
bottom: 6px;
right: 6px;
display: flex;
gap: 4px;
} }
.voice-tile video,
.voice-tile video { .voice-tile canvas {
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
background: #000; background: #000;
} }
@keyframes voice-tile-in {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.voice-tile.speaking {
border-color: var(--big-green);
box-shadow: 0 0 0.3rem rgba(120, 200, 120, 0.45);
}
.voice-tile-name {
position: absolute;
bottom: 0.375rem;
left: 0.375rem;
font-size: 0.6875rem;
font-weight: 600;
padding: 0.125rem 0.5rem;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(0.5rem);
-webkit-backdrop-filter: blur(0.5rem);
border-radius: 50rem;
color: #fff;
max-width: calc(100% - 0.75rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
.voice-tile-icons {
position: absolute;
bottom: 0.375rem;
right: 0.375rem;
display: flex;
gap: 0.25rem;
}
.voice-tile-icons svg {
filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.6));
}
.voice-mic-meter {
height: 0.25rem;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.06);
width: 100%;
}
#voice-mic-level {
height: 100%;
width: 0%;
background: rgba(255, 255, 255, 0.15);
transition: width 0.1s linear, background-color 0.2s ease;
}
.voice-controls { .voice-controls {
height: 4rem; height: 4rem;
background: var(--main-bg-color); flex-shrink: 0;
background: rgba(255, 255, 255, 0.02);
border-top: var(--border-width) solid var(--light-border-color); border-top: var(--border-width) solid var(--light-border-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 15px; gap: 0.9375rem;
padding: 0 0.9375rem;
} }
.voice-btn { .voice-btn {
border: var(--border-width) solid var(--light-border-color); border: var(--border-width) solid var(--light-border-color);
background: var(--main-bg-color); background: rgba(255, 255, 255, 0.05);
color: var(--fg-1); color: var(--text-color) !important;
border-radius: 0.6rem; width: 2.6rem;
padding: 0.6rem 1rem; height: 2.6rem;
flex-shrink: 0;
margin: 0;
padding: 0;
border-radius: 0.8rem;
cursor: pointer; cursor: pointer;
font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px;
transition: all 0.2s;
}
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
touch-action: manipulation;
}
.voice-btn svg {
width: 1.4rem;
height: 1.4rem;
pointer-events: none !important;
}
.voice-btn:hover { .voice-btn:hover {
background: var(--light-border-color); background: rgba(255, 255, 255, 0.1);
}
.voice-btn:active, .voice-btn.is-pressed {
transform: var(--press-scale);
} }
.voice-btn.voice-btn-active { .voice-btn.voice-btn-active {
background: #27ae60; background: var(--big-green) !important;
color: #fff; border-color: transparent !important;
border-color: #27ae60; color: white !important;
} }
.voice-btn.voice-btn-active:hover {
.voice-btn-danger { filter: brightness(1.1);
background: #e74c3c !important; }
.voice-btn.voice-btn-danger {
background: var(--big-red) !important;
border-color: transparent !important;
color: white !important; color: white !important;
border-color: #e74c3c !important;
} }
.voice-btn-danger:hover { /* Incoming Call Popup */
background: #c0392b !important; #incoming-call-popup {
border-color: #c0392b !important; position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(calc(-100% - 3rem));
display: flex;
align-items: center;
gap: 1rem;
padding: 0.7rem 0.7rem 0.7rem 1rem;
background: rgba(255, 255, 255, 0.015);
backdrop-filter: blur(1.2rem);
-webkit-backdrop-filter: blur(1.2rem);
border: var(--border-width) solid var(--big-green);
border-radius: 0.9rem;
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
z-index: 9999;
opacity: 0;
transition:
opacity 0.25s ease,
transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#incoming-call-popup.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
#incoming-call-popup.hide {
opacity: 0;
transform: translateX(-50%) translateY(calc(-100% - 2rem));
}
.incoming-call-icon {
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
border-radius: 50%;
background: var(--big-green);
color: white !important;
display: flex;
align-items: center;
justify-content: center;
animation: voice-call-pulse 1.5s ease-out infinite;
}
.incoming-call-icon svg {
width: 1.25rem;
height: 1.25rem;
pointer-events: none !important;
}
@keyframes voice-call-pulse {
0% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0.45); }
70% { box-shadow: 0 0 0 0.8rem hsla(120, 60%, 55%, 0); }
100% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0); }
}
.incoming-call-info {
display: flex;
flex-direction: column;
gap: 0.1rem;
text-align: left;
}
.incoming-call-title {
font-weight: bold;
font-size: 1.05rem;
color: var(--text-color);
}
.incoming-call-subtitle {
font-size: 0.85rem;
color: var(--darker-text-color);
opacity: 0.8;
}
.incoming-call-actions {
display: flex;
gap: 0.5rem;
margin-left: 0.4rem;
}
.voice-call-btn {
height: 2.4rem;
padding: 0 0.9375rem;
margin: 0;
border-radius: 0.8rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
font-weight: 700;
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
touch-action: manipulation;
}
.voice-call-btn svg {
width: 1rem;
height: 1rem;
pointer-events: none !important;
}
.voice-call-btn.accept {
background: var(--big-green) !important;
border: none !important;
color: white !important;
}
.voice-call-btn.decline {
background: rgba(255, 255, 255, 0.05) !important;
border: var(--border-width) solid var(--light-border-color) !important;
color: var(--text-color) !important;
}
.voice-call-btn.accept:hover {
filter: brightness(1.12);
}
.voice-call-btn.decline:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.voice-call-btn:active, .voice-call-btn.is-pressed {
transform: var(--press-scale);
} }
/* Voice User Settings Popup */ /* Voice User Settings Popup */
@ -1409,39 +1622,63 @@ input:checked + .toggle-slider:before {
position: fixed; position: fixed;
background: var(--main-bg-color); background: var(--main-bg-color);
border: var(--border-width) solid var(--light-border-color); border: var(--border-width) solid var(--light-border-color);
padding: 15px; padding: 0.4rem;
border-radius: 8px; border-radius: 0.8rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.5); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
z-index: 10000; z-index: 10000;
min-width: 13rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
transform-origin: top left;
transform: scale(0.9);
opacity: 0;
pointer-events: none;
transition:
opacity 0.15s ease,
transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#voice-user-settings.open {
transform: scale(1);
opacity: 1;
pointer-events: auto;
} }
.voice-setting-row { .voice-setting-row {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 10px; gap: 0.3rem;
margin-bottom: 0;
padding: 0.5rem;
border-radius: 0.65rem;
}
.voice-setting-row:hover {
background-color: rgba(255, 255, 255, 0.04);
} }
.voice-setting-row label { .voice-setting-row label {
font-size: 11px; font-size: 0.75rem;
color: var(--fg-1); font-weight: 600;
color: var(--darker-text-color);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.voice-setting-row input[type="range"] { .voice-setting-row input[type="range"] {
margin: 0;
width: 100%; width: 100%;
height: 4px;
appearance: none; appearance: none;
background: var(--bg-2); -webkit-appearance: none;
outline: none; outline: none;
border-radius: 2px;
} }
.voice-setting-row input[type="range"]::-webkit-slider-thumb { @media (max-width: 55rem) {
appearance: none; #voice-call-popup {
width: 12px; width: calc(100vw - 2rem);
height: 12px; height: 60vh;
background: var(--accent); left: 1rem;
border-radius: 50%; right: unset;
cursor: pointer; }
#incoming-call-popup {
width: calc(100vw - 2rem);
box-sizing: border-box;
}
} }

137
webroot/voice.js
View file

@ -15,6 +15,35 @@ let isMicMuted = false;
let remoteVideos = {}, videoDecryptChains = {}; let remoteVideos = {}, videoDecryptChains = {};
let camControl = null, screenControl = null; 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(() => { setInterval(() => {
const now = Date.now(); const now = Date.now();
let changed = false; let changed = false;
@ -32,6 +61,7 @@ setInterval(() => {
const voiceWorkletCode = ` const voiceWorkletCode = `
class AudioProcessor extends AudioWorkletProcessor { class AudioProcessor extends AudioWorkletProcessor {
constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; } constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
process(inputs) { process(inputs) {
const input = inputs[0][0]; const input = inputs[0][0];
@ -157,7 +187,7 @@ async function startVoiceSession(serverUrl) {
currentVoiceWs.onopen = async () => { currentVoiceWs.onopen = async () => {
document.getElementById("voice-status").innerText = "Connected"; 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"); let btn = document.getElementById("voice-btn-mic");
if (btn) { if (btn) {
if (isMicMuted) btn.classList.add("voice-btn-danger"); if (isMicMuted) btn.classList.add("voice-btn-danger");
@ -210,9 +240,12 @@ async function startVoiceSession(serverUrl) {
if (micLevelBar) micLevelBar.style.width = percent + '%'; if (micLevelBar) micLevelBar.style.width = percent + '%';
if (db >= sensitivity) vadHangover = 75; if (db >= sensitivity) vadHangover = 75;
let isSpeaking = vadHangover > 0 && !isMicMuted;
setTileSpeaking(String(window.id), isSpeaking);
if (vadHangover > 0 && !isMicMuted) { if (vadHangover > 0 && !isMicMuted) {
vadHangover--; vadHangover--;
if (micLevelBar) micLevelBar.style.backgroundColor = '#27ae60'; if (micLevelBar) micLevelBar.style.backgroundColor = 'var(--big-green)';
if (!voiceAesCryptoKey) return; if (!voiceAesCryptoKey) return;
const iv = crypto.getRandomValues(new Uint8Array(12)); 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); payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
currentVoiceWs.send(payload.buffer); currentVoiceWs.send(payload.buffer);
} else { } 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); const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]); if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
let userItem = document.getElementById(`voice-tile-${clientId}`); setTileSpeaking(clientId, true);
if (userItem) {
userItem.classList.add("speaking");
if (userItem.timer) clearTimeout(userItem.timer);
userItem.timer = setTimeout(() => { userItem.classList.remove("speaking"); }, 500);
}
} catch (err) {} } catch (err) {}
}); });
} else if (type === 1 || type === 2) { } else if (type === 1 || type === 2) {
@ -417,45 +445,49 @@ function handleCallUpdate(data) {
showIncomingCallUI(roomId); showIncomingCallUI(roomId);
} }
} else if (state.length === 0) { } else if (state.length === 0) {
let incomingUi = document.getElementById("incoming-call-popup"); dismissIncomingCall();
if (incomingUi) incomingUi.remove();
} }
} }
function showIncomingCallUI(roomId) { function showIncomingCallUI(roomId) {
if (document.getElementById("incoming-call-popup") || currentVoiceWs) return; if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;
let incomingUi = document.createElement("div"); let incomingUi = document.createElement("div");
incomingUi.id = "incoming-call-popup"; 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 = ` incomingUi.innerHTML = `
<div style="display: flex; flex-direction: column;"> <div class="incoming-call-icon">
<span style="color: var(--fg-0); font-weight: bold; font-size: 1.1rem;">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span> ${ICONS.call({width: "1.25rem", height: "1.25rem"})}
<span style="color: var(--fg-1); font-size: 0.9rem;">${voiceActiveUsers.length} in chat</span>
</div> </div>
<div style="display: flex; gap: 10px;"> <div class="incoming-call-info">
<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;"> <span class="incoming-call-title">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
${ICONS.call({width: "16px", height: "16px"})} Join <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>
<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;"> <button class="voice-call-btn decline" onclick="dismissIncomingCall()">
${ICONS.close({width: "16px", height: "16px"})} Decline ${ICONS.close({width: "1rem", height: "1rem"})} Decline
</button> </button>
</div> </div>
`; `;
document.body.appendChild(incomingUi); 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) { async function sendVoiceSignalToUser(targetUserId, roomId) {
@ -510,19 +542,20 @@ function showVoiceUI() {
voiceUiContainer.id = "voice-call-popup"; voiceUiContainer.id = "voice-call-popup";
voiceUiContainer.innerHTML = ` voiceUiContainer.innerHTML = `
<div id="voice-header" style="display: flex; justify-content: space-between; align-items: center; width: 100%;"> <div id="voice-header">
<div style="display: flex; align-items: center; gap: 8px;"> <div class="voice-title">
<span style="color: var(--fg-0); font-weight: 500;">Voice Chat</span> ${ICONS.call({width: "1.1rem", height: "1.1rem"})}
<span>Voice Chat</span>
</div> </div>
<div id="voice-status" style="font-size: 0.8rem; color: var(--fg-1)">Connecting...</div> <div id="voice-status">Connecting...</div>
</div> </div>
<div id="voice-users"></div> <div id="voice-users"></div>
<div style="height: 4px; background: var(--bg-2); width: 100%;"> <div class="voice-mic-meter">
<div id="voice-mic-level" style="height: 100%; width: 0%; background: #27ae60; transition: width 0.1s linear;"></div> <div id="voice-mic-level"></div>
</div> </div>
<div id="voice-footer" class="voice-controls"> <div id="voice-footer" class="voice-controls">
<button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="Mute Microphone"> <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>
<button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="Camera"> <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> <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> <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>
<button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="Disconnect"> <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> </button>
</div> </div>
`; `;
document.body.appendChild(voiceUiContainer); document.body.appendChild(voiceUiContainer);
requestAnimationFrame(() => {
requestAnimationFrame(() => voiceUiContainer.classList.add("show"));
});
let header = document.getElementById("voice-header"); let header = document.getElementById("voice-header");
let isDragging = false; let isDragging = false;
@ -639,10 +675,6 @@ function updateVoiceUIUsers() {
let mediaEl = streamData.canvas || streamData.video; let mediaEl = streamData.canvas || streamData.video;
if (mediaEl) { if (mediaEl) {
mediaEl.style.width = "100%";
mediaEl.style.height = "100%";
mediaEl.style.objectFit = "cover";
mediaEl.style.background = "#000";
div.appendChild(mediaEl); div.appendChild(mediaEl);
} }
@ -696,6 +728,9 @@ function showVoiceUserSettings(clientId, e) {
if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10; if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
popup.style.left = left + "px"; popup.style.left = left + "px";
popup.style.top = top + "px"; popup.style.top = top + "px";
requestAnimationFrame(() => {
requestAnimationFrame(() => popup.classList.add("open"));
});
const closePopup = (ev) => { const closePopup = (ev) => {
if (!popup.contains(ev.target)) { if (!popup.contains(ev.target)) {
@ -718,6 +753,7 @@ window.updateVoiceVol = function(clientId, val, type) {
function toggleVoiceMic() { function toggleVoiceMic() {
isMicMuted = !isMicMuted; isMicMuted = !isMicMuted;
if (isMicMuted) setTileSpeaking(String(window.id), false);
let btn = document.getElementById("voice-btn-mic"); let btn = document.getElementById("voice-btn-mic");
if (btn) { if (btn) {
if (isMicMuted) { if (isMicMuted) {
@ -779,9 +815,14 @@ function endVoiceSession() {
currentVoiceCallType = null; currentVoiceCallType = null;
currentVoiceCallId = null; currentVoiceCallId = null;
clearAllSpeaking();
if (voiceUiContainer) { if (voiceUiContainer) {
voiceUiContainer.remove(); let popupEl = voiceUiContainer;
voiceUiContainer = null; voiceUiContainer = null;
popupEl.classList.remove("show");
popupEl.classList.add("hide");
setTimeout(() => popupEl.remove(), 350);
} }
} }