voice chat ui improvements
- better resize - better grid styling
This commit is contained in:
parent
bc91533262
commit
135fbf23ca
18 changed files with 1003 additions and 235 deletions
397
webroot/voice.js
397
webroot/voice.js
|
|
@ -17,6 +17,42 @@ let camControl = null, screenControl = null;
|
|||
|
||||
const SPEAKING_HANGOVER_MS = 400;
|
||||
|
||||
let voiceDragState = false;
|
||||
let voiceResizeAbort = null;
|
||||
|
||||
function clampVoiceWindowToViewport(popupEl) {
|
||||
const r = popupEl.getBoundingClientRect();
|
||||
const W = window.innerWidth, H = window.innerHeight;
|
||||
const w = Math.min(r.width, W);
|
||||
const h = Math.min(r.height, H);
|
||||
const l = Math.min(Math.max(r.left, 0), W - w);
|
||||
const t = Math.min(Math.max(r.top, 0), H - h);
|
||||
if (l !== r.left || t !== r.top || w !== r.width || h !== r.height) {
|
||||
popupEl.style.right = "auto";
|
||||
popupEl.style.bottom = "auto";
|
||||
popupEl.style.width = w + "px";
|
||||
popupEl.style.height = h + "px";
|
||||
popupEl.style.left = l + "px";
|
||||
popupEl.style.top = t + "px";
|
||||
}
|
||||
}
|
||||
|
||||
let voiceVolumeState = {};
|
||||
|
||||
function getStoredVolume(type, clientId) {
|
||||
let v = voiceVolumeState[`${type}:${clientId}`];
|
||||
return v === undefined ? 100 : v;
|
||||
}
|
||||
|
||||
function setVoiceStatus(state) {
|
||||
let el = document.getElementById("voice-status");
|
||||
if (!el) return;
|
||||
el.classList.toggle("connected", state === "connected");
|
||||
el.classList.toggle("connecting", state !== "connected");
|
||||
let textEl = el.querySelector(".voice-status-text");
|
||||
if (textEl) textEl.innerText = processBlah(state === "connected" ? "status.voice.connected" : "status.voice.connecting");
|
||||
}
|
||||
|
||||
function setTileSpeaking(clientId, speaking) {
|
||||
let tile = document.getElementById(`voice-tile-${clientId}`);
|
||||
if (!tile) return;
|
||||
|
|
@ -171,7 +207,7 @@ async function initiateVoiceCall(roomId = null) {
|
|||
async function startVoiceSession(serverUrl) {
|
||||
showVoiceUI();
|
||||
updateVoiceUIUsers();
|
||||
document.getElementById("voice-status").innerText = "Connecting...";
|
||||
setVoiceStatus("connecting");
|
||||
|
||||
try {
|
||||
const wsUrl = new URL(serverUrl);
|
||||
|
|
@ -186,8 +222,7 @@ async function startVoiceSession(serverUrl) {
|
|||
currentVoiceWs.binaryType = 'arraybuffer';
|
||||
|
||||
currentVoiceWs.onopen = async () => {
|
||||
document.getElementById("voice-status").innerText = "Connected";
|
||||
document.getElementById("voice-status").style.color = "var(--big-green)";
|
||||
setVoiceStatus("connected");
|
||||
let btn = document.getElementById("voice-btn-mic");
|
||||
if (btn) {
|
||||
if (isMicMuted) btn.classList.add("voice-btn-danger");
|
||||
|
|
@ -449,25 +484,47 @@ function handleCallUpdate(data) {
|
|||
}
|
||||
}
|
||||
|
||||
async function resolveCallerInfo(roomId) {
|
||||
let name = window.dmUsernameCache ? window.dmUsernameCache[roomId] : null;
|
||||
if (name && name.includes(':')) name = name.split(':')[0];
|
||||
if (!name && window.fetchAsync) {
|
||||
try {
|
||||
let fetched = await window.fetchAsync(`${window.url}/idtoname?id=${roomId}`);
|
||||
if (fetched && !fetched.startsWith("error:")) {
|
||||
name = fetched.includes(':') ? fetched.split(':')[0] : fetched;
|
||||
if (window.dmUsernameCache) window.dmUsernameCache[roomId] = name;
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
let pfpUrl = window.dmPfpCache ? window.dmPfpCache[roomId] : null;
|
||||
if (!pfpUrl && window.getAvatarUrl) {
|
||||
try { pfpUrl = await window.getAvatarUrl(roomId, name || "User"); } catch (e) {}
|
||||
if (pfpUrl && window.dmPfpCache) window.dmPfpCache[roomId] = pfpUrl;
|
||||
}
|
||||
return { name: name || processBlah("title.unknown"), pfpUrl };
|
||||
}
|
||||
|
||||
function showIncomingCallUI(roomId) {
|
||||
if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;
|
||||
|
||||
let cachedName = window.dmUsernameCache ? window.dmUsernameCache[roomId] : null;
|
||||
if (cachedName && cachedName.includes(':')) cachedName = cachedName.split(':')[0];
|
||||
let cachedPfp = window.dmPfpCache ? window.dmPfpCache[roomId] : null;
|
||||
|
||||
let incomingUi = document.createElement("div");
|
||||
incomingUi.id = "incoming-call-popup";
|
||||
incomingUi.innerHTML = `
|
||||
<div class="incoming-call-icon">
|
||||
${ICONS.call({width: "1.25rem", height: "1.25rem"})}
|
||||
</div>
|
||||
<img class="incoming-call-avatar" src="${cachedPfp || "assets/default_avatar.png"}" alt="">
|
||||
<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>
|
||||
<span class="incoming-call-name">${cachedName || "..."}</span>
|
||||
<span class="incoming-call-subtitle">${processBlah("title.incoming.call")} · ${processBlah(`:desc.call.in.chat:${voiceActiveUsers.length}`)}</span>
|
||||
</div>
|
||||
<div class="incoming-call-actions">
|
||||
<button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
|
||||
${ICONS.call({width: "1rem", height: "1rem"})} Join
|
||||
${ICONS.call({width: "1rem", height: "1rem"})} ${processBlah("action.call.join")}
|
||||
</button>
|
||||
<button class="voice-call-btn decline" onclick="dismissIncomingCall()">
|
||||
${ICONS.close({width: "1rem", height: "1rem"})} Decline
|
||||
${ICONS.close({width: "1rem", height: "1rem"})} ${processBlah("action.call.decline")}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -475,6 +532,14 @@ function showIncomingCallUI(roomId) {
|
|||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => incomingUi.classList.add("show"));
|
||||
});
|
||||
|
||||
resolveCallerInfo(roomId).then(({name, pfpUrl}) => {
|
||||
if (!document.body.contains(incomingUi)) return;
|
||||
let nameEl = incomingUi.querySelector(".incoming-call-name");
|
||||
let avatarEl = incomingUi.querySelector(".incoming-call-avatar");
|
||||
if (nameEl) nameEl.innerText = name;
|
||||
if (avatarEl && pfpUrl) avatarEl.src = pfpUrl;
|
||||
});
|
||||
}
|
||||
|
||||
function dismissIncomingCall() {
|
||||
|
|
@ -482,7 +547,7 @@ function dismissIncomingCall() {
|
|||
if (!el || el.classList.contains("hide")) return;
|
||||
el.classList.remove("show");
|
||||
el.classList.add("hide");
|
||||
setTimeout(() => el.remove(), 400);
|
||||
setTimeout(() => el.remove(), 300);
|
||||
}
|
||||
|
||||
function joinIncomingCall(roomId) {
|
||||
|
|
@ -545,25 +610,28 @@ function showVoiceUI() {
|
|||
<div id="voice-header">
|
||||
<div class="voice-title">
|
||||
${ICONS.call({width: "1.1rem", height: "1.1rem"})}
|
||||
<span>Voice Chat</span>
|
||||
<span>${processBlah("title.voice.chat")}</span>
|
||||
</div>
|
||||
<div id="voice-status" class="connecting">
|
||||
<span class="status-dot"></span>
|
||||
<span class="voice-status-text">${processBlah("status.voice.connecting")}</span>
|
||||
</div>
|
||||
<div id="voice-status">Connecting...</div>
|
||||
</div>
|
||||
<div id="voice-users"></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">
|
||||
<button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="${processBlah("action.call.mute")}">
|
||||
${ICONS.mic({width: "1.4rem", height: "1.4rem"})}
|
||||
</button>
|
||||
<button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="Camera">
|
||||
<button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="${processBlah("action.call.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>
|
||||
</button>
|
||||
<button id="voice-btn-screen" class="voice-btn" onclick="toggleVoiceScreen()" title="Share Screen">
|
||||
<button id="voice-btn-screen" class="voice-btn" onclick="toggleVoiceScreen()" title="${processBlah("action.call.screen")}">
|
||||
<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">
|
||||
<button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="${processBlah("action.call.disconnect")}">
|
||||
${ICONS.call({width: "1.4rem", height: "1.4rem"})}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -575,11 +643,12 @@ function showVoiceUI() {
|
|||
});
|
||||
|
||||
let header = document.getElementById("voice-header");
|
||||
let isDragging = false;
|
||||
let startX, startY, initialLeft, initialTop;
|
||||
|
||||
header.addEventListener('mousedown', (e) => {
|
||||
isDragging = true;
|
||||
|
||||
header.addEventListener('pointerdown', (e) => {
|
||||
if (e.button !== undefined && e.button !== 0) return;
|
||||
voiceDragState = true;
|
||||
try { header.setPointerCapture(e.pointerId); } catch (err) {}
|
||||
let rect = voiceUiContainer.getBoundingClientRect();
|
||||
initialLeft = rect.left;
|
||||
initialTop = rect.top;
|
||||
|
|
@ -589,17 +658,149 @@ function showVoiceUI() {
|
|||
voiceUiContainer.style.bottom = "auto";
|
||||
voiceUiContainer.style.left = initialLeft + "px";
|
||||
voiceUiContainer.style.top = initialTop + "px";
|
||||
clampVoiceWindowToViewport(voiceUiContainer);
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (!isDragging) return;
|
||||
|
||||
header.addEventListener('pointermove', (e) => {
|
||||
if (!voiceDragState) return;
|
||||
let dx = e.clientX - startX;
|
||||
let dy = e.clientY - startY;
|
||||
voiceUiContainer.style.left = (initialLeft + dx) + "px";
|
||||
voiceUiContainer.style.top = (initialTop + dy) + "px";
|
||||
clampVoiceWindowToViewport(voiceUiContainer);
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => { isDragging = false; });
|
||||
|
||||
let stopDrag = () => { voiceDragState = false; };
|
||||
header.addEventListener('pointerup', stopDrag);
|
||||
header.addEventListener('pointercancel', stopDrag);
|
||||
|
||||
ensureVoiceGridObserver();
|
||||
|
||||
setupVoiceWindowResize();
|
||||
}
|
||||
|
||||
function setupVoiceWindowResize() {
|
||||
const popup = voiceUiContainer;
|
||||
if (!popup || popup.dataset.resizeInit) return;
|
||||
popup.dataset.resizeInit = "1";
|
||||
|
||||
const minW = () => parseFloat(getComputedStyle(popup).minWidth) || 200;
|
||||
const minH = () => parseFloat(getComputedStyle(popup).minHeight) || 160;
|
||||
|
||||
const applySize = (l, t, w, h) => {
|
||||
const W = window.innerWidth, H = window.innerHeight;
|
||||
w = Math.round(Math.min(Math.max(w, minW()), W));
|
||||
h = Math.round(Math.min(Math.max(h, minH()), H));
|
||||
l = Math.round(Math.min(Math.max(l, 0), W - w));
|
||||
t = Math.round(Math.min(Math.max(t, 0), H - h));
|
||||
popup.style.right = "auto";
|
||||
popup.style.bottom = "auto";
|
||||
popup.style.width = w + "px";
|
||||
popup.style.height = h + "px";
|
||||
popup.style.left = l + "px";
|
||||
popup.style.top = t + "px";
|
||||
};
|
||||
|
||||
let edgeResizing = false;
|
||||
|
||||
["n", "s", "e", "w", "ne", "nw", "se", "sw"].forEach((dir) => {
|
||||
const handle = document.createElement("div");
|
||||
handle.className = `voice-resize-handle voice-resize-${dir}`;
|
||||
popup.appendChild(handle);
|
||||
|
||||
handle.addEventListener("pointerdown", (e) => {
|
||||
if (e.button !== undefined && e.button !== 0) return;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
edgeResizing = true;
|
||||
const sx = e.clientX, sy = e.clientY;
|
||||
const rect = popup.getBoundingClientRect();
|
||||
const sw = rect.width, sh = rect.height, sl = rect.left, st = rect.top;
|
||||
try { handle.setPointerCapture(e.pointerId); } catch (err) {}
|
||||
|
||||
const onMove = (ev) => {
|
||||
const dx = ev.clientX - sx, dy = ev.clientY - sy;
|
||||
let w = sw, h = sh, l = sl, t = st;
|
||||
if (dir.includes("e")) w = sw + dx;
|
||||
if (dir.includes("s")) h = sh + dy;
|
||||
if (dir.includes("w")) {
|
||||
w = sw - dx;
|
||||
l = sl + (sw - w);
|
||||
}
|
||||
if (dir.includes("n")) {
|
||||
h = sh - dy;
|
||||
t = st + (sh - h);
|
||||
}
|
||||
applySize(l, t, w, h);
|
||||
};
|
||||
const onUp = () => {
|
||||
edgeResizing = false;
|
||||
handle.removeEventListener("pointermove", onMove);
|
||||
handle.removeEventListener("pointerup", onUp);
|
||||
handle.removeEventListener("pointercancel", onUp);
|
||||
};
|
||||
handle.addEventListener("pointermove", onMove);
|
||||
handle.addEventListener("pointerup", onUp);
|
||||
handle.addEventListener("pointercancel", onUp);
|
||||
});
|
||||
});
|
||||
|
||||
// pinch-to-resize (dwa palce jak zoom)
|
||||
const pointers = new Map();
|
||||
let pinch = null;
|
||||
let suppressClick = false;
|
||||
|
||||
popup.addEventListener("pointerdown", (e) => {
|
||||
pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
||||
if (pointers.size === 2 && !pinch && !voiceDragState && !edgeResizing) {
|
||||
const [a, b] = [...pointers.values()];
|
||||
const rect = popup.getBoundingClientRect();
|
||||
pinch = {
|
||||
dist: Math.max(20, Math.hypot(a.x - b.x, a.y - b.y)),
|
||||
w: rect.width,
|
||||
h: rect.height
|
||||
};
|
||||
suppressClick = true;
|
||||
}
|
||||
if (pointers.size >= 2 || pinch) {
|
||||
try { popup.setPointerCapture(e.pointerId); } catch (err) {}
|
||||
}
|
||||
});
|
||||
|
||||
popup.addEventListener("pointermove", (e) => {
|
||||
if (!pointers.has(e.pointerId)) return;
|
||||
pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
||||
if (pointers.size === 2 && pinch) {
|
||||
const [a, b] = [...pointers.values()];
|
||||
const scale = Math.max(0.05, Math.hypot(a.x - b.x, a.y - b.y)) / pinch.dist;
|
||||
const rect = popup.getBoundingClientRect();
|
||||
const cx = rect.left + rect.width / 2;
|
||||
const cy = rect.top + rect.height / 2;
|
||||
applySize(cx - pinch.w * scale / 2, cy - pinch.h * scale / 2, pinch.w * scale, pinch.h * scale);
|
||||
}
|
||||
});
|
||||
|
||||
const releasePointer = (e) => {
|
||||
pointers.delete(e.pointerId);
|
||||
if (pointers.size < 2) pinch = null;
|
||||
if (pointers.size === 0) setTimeout(() => { suppressClick = false; }, 250);
|
||||
};
|
||||
popup.addEventListener("pointerup", releasePointer);
|
||||
popup.addEventListener("pointercancel", releasePointer);
|
||||
|
||||
popup.addEventListener("click", (e) => {
|
||||
if (suppressClick) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
suppressClick = false;
|
||||
}
|
||||
}, true);
|
||||
|
||||
if (voiceResizeAbort) voiceResizeAbort.abort();
|
||||
voiceResizeAbort = new AbortController();
|
||||
window.addEventListener("resize", () => {
|
||||
clampVoiceWindowToViewport(popup);
|
||||
}, { signal: voiceResizeAbort.signal });
|
||||
}
|
||||
|
||||
function updateVoiceUIUsers() {
|
||||
|
|
@ -610,9 +811,10 @@ function updateVoiceUIUsers() {
|
|||
let div = document.getElementById(`voice-tile-${u}`);
|
||||
if (!div) {
|
||||
div = document.createElement("div");
|
||||
div.className = "voice-tile";
|
||||
div.className = "voice-tile tile-enter";
|
||||
div.id = `voice-tile-${u}`;
|
||||
div.onclick = (e) => showVoiceUserSettings(u, e);
|
||||
setTimeout(() => div.classList.remove("tile-enter"), 400);
|
||||
|
||||
div.innerHTML = `
|
||||
<div class="voice-tile-name" id="voice-name-${u}">${u}</div>
|
||||
|
|
@ -670,8 +872,10 @@ function updateVoiceUIUsers() {
|
|||
let div = document.getElementById(`voice-tile-stream-${decoderId}`);
|
||||
if (!div) {
|
||||
div = document.createElement("div");
|
||||
div.className = "voice-tile";
|
||||
div.className = "voice-tile tile-enter";
|
||||
div.id = `voice-tile-stream-${decoderId}`;
|
||||
div.onclick = (e) => showVoiceUserSettings(clientId, e, true);
|
||||
setTimeout(() => div.classList.remove("tile-enter"), 400);
|
||||
|
||||
let mediaEl = streamData.canvas || streamData.video;
|
||||
if (mediaEl) {
|
||||
|
|
@ -689,7 +893,7 @@ function updateVoiceUIUsers() {
|
|||
if (authorName && authorName.includes(':')) authorName = authorName.split(':')[0];
|
||||
|
||||
let nameEl = document.getElementById(`voice-stream-name-${decoderId}`);
|
||||
if (nameEl) nameEl.innerText = `${authorName || clientId} (${type == '1' ? 'Cam' : 'Screen'})`;
|
||||
if (nameEl) nameEl.innerText = `${authorName || clientId} (${processBlah(type == '1' ? "label.stream.cam" : "label.stream.screen")})`;
|
||||
}
|
||||
|
||||
Array.from(container.children).forEach(child => {
|
||||
|
|
@ -700,26 +904,110 @@ function updateVoiceUIUsers() {
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
let orderedTiles = [];
|
||||
for (let u of voiceActiveUsers) {
|
||||
let userTile = document.getElementById(`voice-tile-${u}`);
|
||||
if (userTile) orderedTiles.push(userTile);
|
||||
for (let decoderId in remoteVideos) {
|
||||
if (decoderId.split('-')[0] === u) {
|
||||
let streamTile = document.getElementById(`voice-tile-stream-${decoderId}`);
|
||||
if (streamTile) orderedTiles.push(streamTile);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let tile of orderedTiles) {
|
||||
container.appendChild(tile);
|
||||
}
|
||||
|
||||
relayoutVoiceTiles();
|
||||
}
|
||||
|
||||
function showVoiceUserSettings(clientId, e) {
|
||||
let voiceGridRO = null;
|
||||
|
||||
function ensureVoiceGridObserver() {
|
||||
let container = document.getElementById("voice-users");
|
||||
if (!container || !container.isConnected || container.dataset.roInit) return;
|
||||
container.dataset.roInit = "1";
|
||||
if (!voiceGridRO) {
|
||||
voiceGridRO = new ResizeObserver(() => relayoutVoiceTiles());
|
||||
}
|
||||
voiceGridRO.observe(container);
|
||||
}
|
||||
|
||||
function relayoutVoiceTiles() {
|
||||
let container = document.getElementById("voice-users");
|
||||
if (!container || !container.isConnected) return;
|
||||
|
||||
const tiles = Array.from(container.children).filter(el => el.classList.contains("voice-tile"));
|
||||
const n = tiles.length;
|
||||
if (!n) return;
|
||||
|
||||
const rootFs = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
const cs = getComputedStyle(container);
|
||||
const innerW = container.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
|
||||
const innerH = container.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
|
||||
const minCol = 6.25 * rootFs;
|
||||
const minRow = 7 * rootFs;
|
||||
const gap = 0.75 * rootFs;
|
||||
|
||||
const maxCols = Math.max(1, Math.floor((innerW + gap) / (minCol + gap)));
|
||||
const cols = Math.min(n, maxCols);
|
||||
const rows = Math.ceil(n / cols);
|
||||
const w = Math.floor((innerW - gap * (cols - 1)) / cols);
|
||||
const h = Math.floor(Math.max(minRow, (innerH - gap * (rows - 1)) / rows));
|
||||
|
||||
const sig = `${n}:${cols}:${w}x${h}`;
|
||||
if (container.dataset.layoutSig === sig) return;
|
||||
container.dataset.layoutSig = sig;
|
||||
|
||||
container.style.setProperty("--voice-tile-w", w + "px");
|
||||
container.style.setProperty("--voice-tile-h", h + "px");
|
||||
}
|
||||
|
||||
let voiceSettingsState = null;
|
||||
|
||||
function hideVoiceUserSettings() {
|
||||
let popup = document.getElementById("voice-user-settings");
|
||||
if (popup) popup.remove();
|
||||
voiceSettingsState = null;
|
||||
document.removeEventListener('click', closeVoiceUserSettingsOnOutsideClick);
|
||||
}
|
||||
|
||||
function closeVoiceUserSettingsOnOutsideClick(ev) {
|
||||
let popup = document.getElementById("voice-user-settings");
|
||||
if (!popup) {
|
||||
hideVoiceUserSettings();
|
||||
return;
|
||||
}
|
||||
if (!popup.contains(ev.target)) hideVoiceUserSettings();
|
||||
}
|
||||
|
||||
function showVoiceUserSettings(clientId, e, isStream = false) {
|
||||
e.stopPropagation();
|
||||
let existing = document.getElementById("voice-user-settings");
|
||||
if (existing) existing.remove();
|
||||
|
||||
|
||||
if (voiceSettingsState && voiceSettingsState.clientId === clientId && voiceSettingsState.isStream === isStream) {
|
||||
hideVoiceUserSettings();
|
||||
return;
|
||||
}
|
||||
hideVoiceUserSettings();
|
||||
|
||||
voiceSettingsState = { clientId, isStream };
|
||||
|
||||
let popup = document.createElement("div");
|
||||
popup.id = "voice-user-settings";
|
||||
popup.innerHTML = `
|
||||
popup.innerHTML = isStream ? `
|
||||
<div class="voice-setting-row">
|
||||
<label>Mic Vol <span id="val-mic-${clientId}">100%</span></label>
|
||||
<input type="range" min="0" max="200" value="100" oninput="updateVoiceVol('${clientId}', this.value, 'mic')">
|
||||
<label>${processBlah("label.stream.volume")} <span id="val-screen-${clientId}">${getStoredVolume('screen', clientId)}%</span></label>
|
||||
<input type="range" min="0" max="200" value="${getStoredVolume('screen', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
|
||||
</div>
|
||||
` : `
|
||||
<div class="voice-setting-row">
|
||||
<label>Stream Vol <span id="val-screen-${clientId}">100%</span></label>
|
||||
<input type="range" min="0" max="200" value="100" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
|
||||
<label>${processBlah("label.user.volume")} <span id="val-vol-${clientId}">${getStoredVolume('vol', clientId)}%</span></label>
|
||||
<input type="range" min="0" max="200" value="${getStoredVolume('vol', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'vol')">
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
document.body.appendChild(popup);
|
||||
let rect = popup.getBoundingClientRect();
|
||||
let left = e.clientX;
|
||||
|
|
@ -731,17 +1019,12 @@ function showVoiceUserSettings(clientId, e) {
|
|||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => popup.classList.add("open"));
|
||||
});
|
||||
|
||||
const closePopup = (ev) => {
|
||||
if (!popup.contains(ev.target)) {
|
||||
popup.remove();
|
||||
document.removeEventListener('mousedown', closePopup);
|
||||
}
|
||||
};
|
||||
setTimeout(() => document.addEventListener('mousedown', closePopup), 10);
|
||||
|
||||
document.addEventListener('click', closeVoiceUserSettingsOnOutsideClick);
|
||||
}
|
||||
|
||||
window.updateVoiceVol = function(clientId, val, type) {
|
||||
voiceVolumeState[`${type}:${clientId}`] = val;
|
||||
let el = document.getElementById(`val-${type}-${clientId}`);
|
||||
if (el) el.innerText = val + '%';
|
||||
const audioId = type === 'screen' ? `${clientId}_screen` : clientId;
|
||||
|
|
@ -816,7 +1099,17 @@ function endVoiceSession() {
|
|||
currentVoiceCallId = null;
|
||||
|
||||
clearAllSpeaking();
|
||||
|
||||
|
||||
if (voiceResizeAbort) {
|
||||
voiceResizeAbort.abort();
|
||||
voiceResizeAbort = null;
|
||||
}
|
||||
|
||||
if (voiceGridRO) {
|
||||
voiceGridRO.disconnect();
|
||||
voiceGridRO = null;
|
||||
}
|
||||
|
||||
if (voiceUiContainer) {
|
||||
let popupEl = voiceUiContainer;
|
||||
voiceUiContainer = null;
|
||||
|
|
@ -936,7 +1229,7 @@ async function startHardwareVideo(btnEl, streamPromise, typeLabel, typeId) {
|
|||
} else if (typeId === 1) { camControl = null; }
|
||||
};
|
||||
return { stop: stopFunction };
|
||||
} catch (e) { console.error(e); alert(`No permission or feature not supported: ${typeLabel}`); return null; }
|
||||
} catch (e) { console.error(e); alert(processBlah(`:error.call.unsupported:${typeLabel}`)); return null; }
|
||||
}
|
||||
|
||||
function toggleVoiceCam() {
|
||||
|
|
@ -946,7 +1239,7 @@ function toggleVoiceCam() {
|
|||
} else {
|
||||
navigator.mediaDevices.getUserMedia({video: {width: {ideal: 1280}, height: {ideal: 720}}}).then(stream => {
|
||||
startHardwareVideo(btn, Promise.resolve(stream), "Camera", 1).then(ctrl => camControl = ctrl);
|
||||
}).catch(err => alert("Camera error: " + err.message));
|
||||
}).catch(err => alert(processBlah(`:error.call.camera:${err.message}`)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -955,11 +1248,11 @@ function toggleVoiceScreen() {
|
|||
if (screenControl) {
|
||||
screenControl.stop();
|
||||
} else {
|
||||
if (!navigator.mediaDevices.getDisplayMedia) { alert("Screen sharing is not supported on this browser."); return; }
|
||||
if (!navigator.mediaDevices.getDisplayMedia) { alert(processBlah("error.call.screen.unsupported")); return; }
|
||||
navigator.mediaDevices.getDisplayMedia({
|
||||
video: true, audio: { autoGainControl: false, echoCancellation: false, noiseSuppression: false }, systemAudio: "include", selfBrowserSurface: "exclude"
|
||||
}).then(stream => {
|
||||
startHardwareVideo(btn, Promise.resolve(stream), "Screen", 2).then(ctrl => screenControl = ctrl);
|
||||
}).catch(err => alert("Screen error: " + err.message));
|
||||
}).catch(err => alert(processBlah(`:error.call.screen:${err.message}`)));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue