voice chat indicators
This commit is contained in:
parent
d618ee3134
commit
b12a75cfc4
8 changed files with 464 additions and 42 deletions
|
|
@ -55,6 +55,7 @@ const ICONS = {
|
|||
video: (props) => ICONS._feather(`<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>`, props),
|
||||
file: (props) => ICONS._feather(`<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>`, props),
|
||||
mic: (props) => ICONS._feather(`<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line>`, props),
|
||||
headphones: (props) => ICONS._feather(`<path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path>`, props),
|
||||
speaker: (props) => ICONS._create(`<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path>`, { viewBox: "0 0 24 24", width: "1.4rem", height: "1.4rem", fill: "var(--text-color)", stroke: "none" }, props),
|
||||
|
||||
home: (props) => ICONS._create(`<path d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z" stroke="currentColor" stroke-width="1.28" stroke-linejoin="round" stroke-linecap="round" transform="translate(0 0.5)"/>`, { viewBox: "-1 -1 18 18", width: "1.5rem", height: "1.5rem", fill: "none", stroke: "none" }, props),
|
||||
|
|
|
|||
|
|
@ -2674,6 +2674,8 @@ async function renderDms(res) {
|
|||
let isRead = dmData.string3 === "true";
|
||||
let nameStyle = isRead ? "opacity: 0.8;" : "opacity: 1;";
|
||||
|
||||
seedCallStateFromList(dmIdRaw, dmData.call === true);
|
||||
|
||||
let safeTargetUsername = encodeURIComponent(targetUsername).replace(/'/g, "%27");
|
||||
|
||||
let unreadBadge = `<div class="unread-badge ${isRead ? "" : "show"}"></div>`;
|
||||
|
|
@ -2686,6 +2688,7 @@ async function renderDms(res) {
|
|||
<span class="room-id" style="font-size: 0.8rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtml(targetUsername)} (${escapeHtml(targetId.split(';')[0])})</span>
|
||||
</div>
|
||||
${unreadBadge}
|
||||
${getCallIndicatorHtml()}
|
||||
</button>
|
||||
`;
|
||||
count++;
|
||||
|
|
@ -2694,6 +2697,7 @@ async function renderDms(res) {
|
|||
if (count > 0) {
|
||||
container.innerHTML = html;
|
||||
container.classList.remove("empty");
|
||||
updateVoicePresenceUI();
|
||||
} else {
|
||||
container.innerHTML = `<p style="opacity: 0.5;"><blah>desc.no.dms</blah></p>`;
|
||||
container.classList.add("empty");
|
||||
|
|
@ -2731,6 +2735,8 @@ async function renderGroups(res) {
|
|||
let isRead = groupData.string3 === "true";
|
||||
let nameStyle = isRead ? "opacity: 0.8;" : "opacity: 1;";
|
||||
|
||||
seedCallStateFromList(groupId, groupData.call === true);
|
||||
|
||||
let infoRes = await fetchEncrypted("group/info", groupId);
|
||||
if (infoRes && infoRes.startsWith("{")) {
|
||||
let info = JSON.parse(infoRes);
|
||||
|
|
@ -2750,6 +2756,7 @@ async function renderGroups(res) {
|
|||
<span class="room-id" style="font-size: 0.8rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtmlText(groupId.replace(';', ':'))}</span>
|
||||
</div>
|
||||
${unreadBadge}
|
||||
${getCallIndicatorHtml()}
|
||||
</button>
|
||||
`;
|
||||
count++;
|
||||
|
|
@ -2762,6 +2769,7 @@ async function renderGroups(res) {
|
|||
if (count > 0) {
|
||||
container.innerHTML = html;
|
||||
container.classList.remove("empty");
|
||||
updateVoicePresenceUI();
|
||||
} else {
|
||||
container.innerHTML = `<p style="opacity: 0.5;"><blah>desc.no.groups</blah></p>`;
|
||||
container.classList.add("empty");
|
||||
|
|
@ -2813,6 +2821,101 @@ function escapeHtmlText(value) {
|
|||
return escapeHtml(String(value ?? ""));
|
||||
}
|
||||
|
||||
// --- Wskaźniki aktywnej rozmowy głosowej (zielone słuchawki) ---
|
||||
|
||||
function getCallIndicatorHtml() {
|
||||
return `<div class="call-indicator">${ICONS.headphones({ width: "1rem", height: "1rem", stroke: "var(--big-green)" })}</div>`;
|
||||
}
|
||||
|
||||
function roomHasActiveCall(roomId) {
|
||||
if (!roomId || !window.activeCallsByRoom) return false;
|
||||
//Semantyka mapy: klucz ISTNIEJE = rozmowa trwa. Pusta tablica oznacza
|
||||
//"aktywna, ale skład jeszcze nieznany" (seed z listy DM/grup).
|
||||
return Array.isArray(window.activeCallsByRoom[sanitizeId(roomId)]);
|
||||
}
|
||||
|
||||
//Zapisuje flagę "trwa rozmowa" z listy DM/grup (nie nadpisuje znanej listy
|
||||
//uczestników z call_update - ta jest dokładniejsza).
|
||||
function ensureActiveCallsMap() {
|
||||
//Obiekt bez prototypu - klucze pochodzą z danych sieciowych (roomId), a
|
||||
//zapis np. pod "__proto__" na zwykłym obiekcie zanieczyściłby prototyp
|
||||
if (!window.activeCallsByRoom) window.activeCallsByRoom = Object.create(null);
|
||||
return window.activeCallsByRoom;
|
||||
}
|
||||
|
||||
function seedCallStateFromList(roomId, hasCall) {
|
||||
if (!hasCall) return;
|
||||
let map = ensureActiveCallsMap();
|
||||
let key = sanitizeId(roomId);
|
||||
if (!Array.isArray(map[key])) {
|
||||
map[key] = [];
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCallIndicator(rootEl, show) {
|
||||
if (!rootEl) return;
|
||||
let ind = rootEl.querySelector(".call-indicator");
|
||||
if (ind) ind.classList.toggle("show", !!show);
|
||||
}
|
||||
|
||||
//Odświeża wskaźniki rozmów: listy DM/grup, przyciski call w top-barach
|
||||
//oraz wiersze członków w panelu details.
|
||||
//roomIds = null -> pełna synchronizacja (po renderze list),
|
||||
//roomIds = [id] -> tylko wskazane pokoje (ścieżka gorąca: call_update),
|
||||
// żeby przy dużych listach nie skanować całego DOM.
|
||||
function updateVoicePresenceUI(roomIds = null) {
|
||||
let targets = Array.isArray(roomIds) ? roomIds.map(r => sanitizeId(r)) : null;
|
||||
|
||||
[["dms-list", "dm-btn-"], ["groups-list", "group-btn-"]].forEach(([listId, prefix]) => {
|
||||
let container = document.getElementById(listId);
|
||||
if (!container) return;
|
||||
container.querySelectorAll(".room-entry").forEach(btn => {
|
||||
if (!btn.id.startsWith(prefix)) return;
|
||||
let roomId = btn.id.substring(prefix.length);
|
||||
if (targets && !targets.includes(roomId)) return;
|
||||
toggleCallIndicator(btn, roomHasActiveCall(roomId));
|
||||
});
|
||||
});
|
||||
|
||||
let currentKey = window.currentDmId ? sanitizeId(window.currentDmId) : null;
|
||||
let currentAffected = targets === null || (currentKey !== null && targets.includes(currentKey));
|
||||
if (!currentAffected) return;
|
||||
|
||||
let inCurrent = roomHasActiveCall(window.currentDmId);
|
||||
document.querySelectorAll(".room-action-call svg").forEach(svg => {
|
||||
svg.style.fill = inCurrent ? "var(--big-green)" : "";
|
||||
});
|
||||
|
||||
if (currentKey) {
|
||||
let users = (window.activeCallsByRoom && window.activeCallsByRoom[currentKey]) || [];
|
||||
let detailsBar = document.getElementById("roomdetailsbar");
|
||||
if (detailsBar) {
|
||||
detailsBar.querySelectorAll(".room-entry[data-member-id]").forEach(btn => {
|
||||
toggleCallIndicator(btn, users.includes(btn.getAttribute("data-member-id")));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Pobiera aktualny skład rozmowy dla otwartego pokoju (snapshot po otwarciu -
|
||||
//call_update przychodzi dopiero przy join/leave).
|
||||
async function refreshRoomCallState() {
|
||||
try {
|
||||
if (!window.currentDmId || !window.currentRoomType) return;
|
||||
let res = await fetchEncrypted("room/voice/state", JSON.stringify({
|
||||
string1: window.currentRoomType,
|
||||
string2: window.currentDmId
|
||||
}));
|
||||
if (!res || !res.startsWith("[") || !window.currentDmId) return;
|
||||
let participants = JSON.parse(res).map(u => String(u).split(";")[0]);
|
||||
let map = ensureActiveCallsMap();
|
||||
let key = sanitizeId(window.currentDmId);
|
||||
if (participants.length > 0) map[key] = participants;
|
||||
else delete map[key];
|
||||
updateVoicePresenceUI([key]);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
async function generateDmMembersHtml(targetId, targetUsername) {
|
||||
let myIdStr = id + ";" + host;
|
||||
let myUsername = await fetchAsync(`${url}/idtoname?id=${myIdStr}`);
|
||||
|
|
@ -2831,19 +2934,21 @@ async function generateDmMembersHtml(targetId, targetUsername) {
|
|||
<div class="sidebar-section-header" style="margin-top: 0.5rem; margin-bottom: 0.5rem; width: 100%;">
|
||||
<span style="padding-left: 0.6rem; font-size: 0.8rem; font-weight: bold; opacity: 0.5; text-transform: uppercase;"><blah>title.members</blah></span>
|
||||
</div>
|
||||
<button class="room-entry" onclick="openProfile('${safeTargetId}')" style="margin-bottom: 0;">
|
||||
<button class="room-entry" data-member-id="${sanitizeId(targetId.split(';')[0])}" onclick="openProfile('${safeTargetId}')" style="margin-bottom: 0;">
|
||||
<img src="${targetPfp}" class="room-pfp">
|
||||
<div style="display: flex; flex-direction: column; text-align: left; overflow: hidden; width: 100%; margin-left: 0.37rem;">
|
||||
<span class="room-name">${targetDisplayName}</span>
|
||||
<span class="room-id" style="font-size: 0.8rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtmlText(targetUsername)}</span>
|
||||
</div>
|
||||
${getCallIndicatorHtml()}
|
||||
</button>
|
||||
<button class="room-entry" onclick="openProfile('${safeMyId}')" style="margin-bottom: 0;">
|
||||
<button class="room-entry" data-member-id="${sanitizeId(String(id))}" onclick="openProfile('${safeMyId}')" style="margin-bottom: 0;">
|
||||
<img src="${myPfp}" class="room-pfp">
|
||||
<div style="display: flex; flex-direction: column; text-align: left; overflow: hidden; width: 100%; margin-left: 0.37rem;">
|
||||
<span class="room-name">${myDisplaySafe}</span>
|
||||
<span class="room-id" style="font-size: 0.8rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtmlText(myUsername)}</span>
|
||||
</div>
|
||||
${getCallIndicatorHtml()}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -2972,14 +3077,16 @@ async function generateGroupMembersHtml(groupId, groupName) {
|
|||
let memberDisplayName = escapeHtml(memberUsername.split(':')[0]);
|
||||
let safeMemberId = sanitizeId(memberId);
|
||||
let safeGroupId = sanitizeId(groupId);
|
||||
let memberNumericId = sanitizeId(String(memberId).split(';')[0]);
|
||||
|
||||
html += `
|
||||
<button class="room-entry" onclick="openProfile('${safeMemberId}')" oncontextmenu="handleMemberContextMenu(event, '${safeGroupId}', '${safeMemberId}')" style="margin-bottom: 0;">
|
||||
<button class="room-entry" data-member-id="${memberNumericId}" onclick="openProfile('${safeMemberId}')" oncontextmenu="handleMemberContextMenu(event, '${safeGroupId}', '${safeMemberId}')" style="margin-bottom: 0;">
|
||||
<img src="${memberPfp}" class="room-pfp">
|
||||
<div style="display: flex; flex-direction: column; text-align: left; overflow: hidden; width: 100%; margin-left: 0.37rem;">
|
||||
<span class="room-name">${memberDisplayName}</span>
|
||||
<span class="room-id" style="font-size: 0.8rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtml(memberUsername)}</span>
|
||||
</div>
|
||||
${getCallIndicatorHtml()}
|
||||
</button>`;
|
||||
}
|
||||
|
||||
|
|
@ -3067,6 +3174,9 @@ async function openDm(dmId, username, targetId, type = 'dms') {
|
|||
}
|
||||
await switchDetailsContent("title.details", membersHtml);
|
||||
|
||||
updateVoicePresenceUI();
|
||||
refreshRoomCallState();
|
||||
|
||||
let msgContainer = document.getElementById("chat-messages");
|
||||
if (msgContainer) {
|
||||
msgContainer.innerHTML = `<div style="text-align: center; opacity: 0.5; padding: 1rem;"><blah>desc.messages.loading</blah></div>`;
|
||||
|
|
|
|||
|
|
@ -1201,6 +1201,27 @@ input:checked + .toggle-slider:before {
|
|||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Zielone słuchawki - wskaźnik trwającej rozmowy głosowej.
|
||||
Bez prawego marginesu: prawa krawędź ikony jest wtedy dokładnie na paddingu
|
||||
wiersza (0.6rem) - symetrycznie do pfp po lewej stronie. */
|
||||
.call-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transform: scale(0);
|
||||
}
|
||||
.call-indicator.show {
|
||||
transform: scale(1);
|
||||
}
|
||||
.call-indicator svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Custom Select */
|
||||
.custom-select {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,16 @@ let voiceActiveUsers = [];
|
|||
let voiceAesKeyBytes = null; // grupowy klucz rozmowy (root) - dystrybuowany hybrydą PQ
|
||||
let voiceUiContainer = null;
|
||||
|
||||
//Pokój, dla którego aktualnie wisi banner rozmowy przychodzącej. Banner jest
|
||||
//GLOBALNY - działa niezależnie od tego, jaki czat jest otwarty (app-WebSocket
|
||||
//jest aktywny cały czas i dostaje call_update dla wszystkich naszych pokoi).
|
||||
let incomingCallRoomId = null;
|
||||
//Pokoje opuszczone przed chwilą: broadcast call_update po naszym leave przychodzi
|
||||
//asynchronicznie - bez tej blokady zaraz po wyjściu z rozmowy wyskoczyłby nam
|
||||
//banner "ktoś dzwoni" z pokoju, który sami właśnie opuściliśmy.
|
||||
//Bez prototypu - kluczami są roomId z sieci (ochrona przed prototype pollution).
|
||||
const voiceRecentlyLeftRooms = Object.create(null);
|
||||
|
||||
// === Gwarantowana unikalność IV (AES-GCM): ===
|
||||
// 1) każdy nadawca szyfruje WŁASNYM podkluczem HKDF(root, "larpix:voice:v1:"+senderId)
|
||||
// -> kolizja między nadawcami niemożliwa z konstrukcji,
|
||||
|
|
@ -748,8 +758,14 @@ async function initiateVoiceCall(roomId = null) {
|
|||
showBlahNotification("error:already.in.call");
|
||||
return;
|
||||
}
|
||||
currentVoiceCallType = window.currentRoomType === "groups" ? "groups" : "dms";
|
||||
currentVoiceCallId = roomId || window.currentDmId;
|
||||
if (!currentVoiceCallId) return;
|
||||
//Typ pokoju MUSI wynikać z samego ID - przy joinie z bannera otwarty czat
|
||||
//nie ma nic wspólnego z pokojem, do którego się dzwoni. Wcześniejszy kod
|
||||
//brał typ z aktualnie otwartego pokoju, więc serwer sprawdzał członkostwo
|
||||
//w złym typie pokoju i zwracał "error:forbidden".
|
||||
//Formaty: DM = "idA;domA_idB;domB" (zawiera '_'), grupa = "id;domena".
|
||||
currentVoiceCallType = String(currentVoiceCallId).includes("_") ? "dms" : "groups";
|
||||
voiceJoinInFlight = true;
|
||||
|
||||
try {
|
||||
|
|
@ -1153,14 +1169,51 @@ async function startVoiceSession(serverUrl, ticket) {
|
|||
async function handleCallUpdate(data) {
|
||||
let parts = data.split(":");
|
||||
let roomId = parts[1];
|
||||
let incomingState = [];
|
||||
if (parts.slice(2).join(":") !== "") {
|
||||
try { incomingState = JSON.parse(parts.slice(2).join(":")).map(u => String(u)); } catch (e) {}
|
||||
}
|
||||
|
||||
if (typeof ensureActiveCallsMap !== "function") return;
|
||||
let callMap = ensureActiveCallsMap();
|
||||
let roomKey = sanitizeId(roomId);
|
||||
let prev = callMap[roomKey];
|
||||
//Brak klucza = brak rozmowy; pusta tablica = aktywna, skład nieznany (seed)
|
||||
if (incomingState.length > 0) callMap[roomKey] = incomingState;
|
||||
else delete callMap[roomKey];
|
||||
|
||||
//Optymalizacja: identyczny stan nie wymaga żadnej pracy po stronie UI
|
||||
//(serwer/duplikaty mogą wysłać to samo wielokrotnie przy dużym ruchu).
|
||||
//Porównujemy też samą AKTYWNOŚĆ - przejście "seed[] -> koniec rozmowy"
|
||||
//(usunięcie klucza) musi odświeżyć UI mimo identycznej pustej listy.
|
||||
let activeBefore = Array.isArray(prev);
|
||||
let activeAfter = incomingState.length > 0;
|
||||
let changed = activeBefore !== activeAfter ||
|
||||
(activeAfter && !(prev.length === incomingState.length &&
|
||||
prev.every((u, i) => u === incomingState[i])));
|
||||
//Targetowana aktualizacja - przerysowujemy wskaźniki TYLKO tego pokoju
|
||||
if (changed && typeof updateVoicePresenceUI === "function") updateVoicePresenceUI([roomKey]);
|
||||
|
||||
//--- GLOBALNA obsługa rozmowy przychodzącej. Działa dla KAŻDEGO pokoju, w
|
||||
//którym jesteśmy członkiem, niezależnie od otwartego czatu.
|
||||
let myIdStr = String(window.id);
|
||||
let amInThisCall = incomingState.includes(myIdStr);
|
||||
let leftAgo = Date.now() - (voiceRecentlyLeftRooms[roomId] || 0);
|
||||
if (amInThisCall || incomingState.length === 0) {
|
||||
if (incomingCallRoomId === roomId) dismissIncomingCall();
|
||||
} else if (leftAgo > 3000 && !voiceJoinInFlight) {
|
||||
if (incomingCallRoomId === roomId) {
|
||||
//Banner już wisi dla tego pokoju - odśwież tylko licznik uczestników
|
||||
updateIncomingCallSubtitle(incomingState.length);
|
||||
} else if (!currentVoiceWs) {
|
||||
showIncomingCallUI(roomId, incomingState.length);
|
||||
}
|
||||
}
|
||||
|
||||
//Ignore updates for rooms we have nothing to do with - they would otherwise
|
||||
//overwrite the participant list of an ongoing call and wipe its tiles.
|
||||
if (roomId !== currentVoiceCallId && roomId !== window.currentDmId) return;
|
||||
let state = [];
|
||||
if(parts.slice(2).join(":") !== "") {
|
||||
let stateRaw = JSON.parse(parts.slice(2).join(":"));
|
||||
state = stateRaw.map(u => String(u)).filter(u => !deadPeers.has(u));
|
||||
}
|
||||
let state = incomingState.filter(u => !deadPeers.has(u));
|
||||
voiceActiveUsers = state;
|
||||
|
||||
if (currentVoiceCallId === roomId) {
|
||||
|
|
@ -1201,13 +1254,6 @@ async function handleCallUpdate(data) {
|
|||
updateVoiceUIUsers();
|
||||
}
|
||||
}
|
||||
} else if (state.length > 0 && !state.includes(String(window.id))) {
|
||||
// Someone is in a call, and we are not. Show incoming call banner if it's the current room.
|
||||
if (window.currentDmId === roomId) {
|
||||
showIncomingCallUI(roomId);
|
||||
}
|
||||
} else if (state.length === 0) {
|
||||
dismissIncomingCall();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1254,13 +1300,28 @@ async function resolveCallerInfo(roomId) {
|
|||
return { name: (name ? name.split(':')[0] : null) || processBlah("title.unknown"), pfpUrl };
|
||||
}
|
||||
|
||||
function showIncomingCallUI(roomId) {
|
||||
if (document.getElementById("incoming-call-popup") || currentVoiceWs || voiceJoinInFlight) return;
|
||||
function showIncomingCallUI(roomId, participantCount = null) {
|
||||
if (currentVoiceWs || voiceJoinInFlight) 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;
|
||||
|
||||
//Zamiana bannera na inny pokój - stary usuwamy natychmiast (inaczej
|
||||
//guard po id zablokowałby pokazanie nowego do czasu końca animacji)
|
||||
let existing = document.getElementById("incoming-call-popup");
|
||||
if (existing) existing.remove();
|
||||
incomingCallRoomId = roomId;
|
||||
|
||||
if (participantCount === null) {
|
||||
let known = window.activeCallsByRoom ? window.activeCallsByRoom[sanitizeId(roomId)] : null;
|
||||
participantCount = Array.isArray(known) && known.length > 0 ? known.length : voiceActiveUsers.length;
|
||||
}
|
||||
|
||||
//roomId trafia do inline onclick - sanityzujemy, żeby nic nie mogło
|
||||
//wyjść poza atrybut/string JS (defense in depth; ID z naszego serwera)
|
||||
let safeRoomId = sanitizeId(roomId);
|
||||
|
||||
let incomingUi = document.createElement("div");
|
||||
incomingUi.id = "incoming-call-popup";
|
||||
// Remote-controlled values (username/avatar) are NEVER interpolated into
|
||||
|
|
@ -1269,10 +1330,10 @@ function showIncomingCallUI(roomId) {
|
|||
<img class="incoming-call-avatar" alt="">
|
||||
<div class="incoming-call-info">
|
||||
<span class="incoming-call-name"></span>
|
||||
<span class="incoming-call-subtitle">${processBlah("title.incoming.call")} · ${processBlah(`:desc.call.in.chat:${voiceActiveUsers.length}`)}</span>
|
||||
<span class="incoming-call-subtitle">${processBlah("title.incoming.call")} · ${processBlah(`:desc.call.in.chat:${participantCount}`)}</span>
|
||||
</div>
|
||||
<div class="incoming-call-actions">
|
||||
<button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
|
||||
<button class="voice-call-btn accept" onclick="joinIncomingCall('${safeRoomId}')">
|
||||
${ICONS.call({width: "1rem", height: "1rem"})} ${processBlah("action.call.join")}
|
||||
</button>
|
||||
<button class="voice-call-btn decline" onclick="dismissIncomingCall()">
|
||||
|
|
@ -1296,7 +1357,14 @@ function showIncomingCallUI(roomId) {
|
|||
});
|
||||
}
|
||||
|
||||
//Aktualizuje tylko licznik uczestników w wiszącym bannerze (bez re-renderu)
|
||||
function updateIncomingCallSubtitle(participantCount) {
|
||||
let el = document.querySelector("#incoming-call-popup .incoming-call-subtitle");
|
||||
if (el) el.textContent = `${processBlah("title.incoming.call")} · ${processBlah(`:desc.call.in.chat:${participantCount}`)}`;
|
||||
}
|
||||
|
||||
function dismissIncomingCall() {
|
||||
incomingCallRoomId = null;
|
||||
let el = document.getElementById("incoming-call-popup");
|
||||
if (!el || el.classList.contains("hide")) return;
|
||||
el.classList.remove("show");
|
||||
|
|
@ -2382,6 +2450,17 @@ function endVoiceSession() {
|
|||
setVoiceStatus("disconnected");
|
||||
hideVoiceDeviceSettings();
|
||||
|
||||
//Oznacz pokój jako "właśnie opuszczony" - broadcast call_update po naszym
|
||||
//leave wróci do nas z opóźnieniem i bez tego globalna obsługa bannera
|
||||
//uznałaby, że ktoś dzwoni z pokoju, który sami właśnie opuściliśmy.
|
||||
if (currentVoiceCallId) {
|
||||
let now = Date.now();
|
||||
voiceRecentlyLeftRooms[currentVoiceCallId] = now;
|
||||
for (let k in voiceRecentlyLeftRooms) {
|
||||
if (now - voiceRecentlyLeftRooms[k] > 30000) delete voiceRecentlyLeftRooms[k];
|
||||
}
|
||||
}
|
||||
|
||||
const nativeRouting = getNativeVoiceRouting();
|
||||
if (nativeRouting && nativeRouting.stopCall) {
|
||||
try { nativeRouting.stopCall(); } catch (e) {}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ const ICONS = {
|
|||
video: (props) => ICONS._feather(`<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>`, props),
|
||||
file: (props) => ICONS._feather(`<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>`, props),
|
||||
mic: (props) => ICONS._feather(`<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line>`, props),
|
||||
headphones: (props) => ICONS._feather(`<path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path>`, props),
|
||||
speaker: (props) => ICONS._create(`<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path>`, { viewBox: "0 0 24 24", width: "1.4rem", height: "1.4rem", fill: "var(--text-color)", stroke: "none" }, props),
|
||||
|
||||
home: (props) => ICONS._create(`<path d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z" stroke="currentColor" stroke-width="1.28" stroke-linejoin="round" stroke-linecap="round" transform="translate(0 0.5)"/>`, { viewBox: "-1 -1 18 18", width: "1.5rem", height: "1.5rem", fill: "none", stroke: "none" }, props),
|
||||
|
|
|
|||
116
webroot/main.js
116
webroot/main.js
|
|
@ -2674,6 +2674,8 @@ async function renderDms(res) {
|
|||
let isRead = dmData.string3 === "true";
|
||||
let nameStyle = isRead ? "opacity: 0.8;" : "opacity: 1;";
|
||||
|
||||
seedCallStateFromList(dmIdRaw, dmData.call === true);
|
||||
|
||||
let safeTargetUsername = encodeURIComponent(targetUsername).replace(/'/g, "%27");
|
||||
|
||||
let unreadBadge = `<div class="unread-badge ${isRead ? "" : "show"}"></div>`;
|
||||
|
|
@ -2686,6 +2688,7 @@ async function renderDms(res) {
|
|||
<span class="room-id" style="font-size: 0.8rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtml(targetUsername)} (${escapeHtml(targetId.split(';')[0])})</span>
|
||||
</div>
|
||||
${unreadBadge}
|
||||
${getCallIndicatorHtml()}
|
||||
</button>
|
||||
`;
|
||||
count++;
|
||||
|
|
@ -2694,6 +2697,7 @@ async function renderDms(res) {
|
|||
if (count > 0) {
|
||||
container.innerHTML = html;
|
||||
container.classList.remove("empty");
|
||||
updateVoicePresenceUI();
|
||||
} else {
|
||||
container.innerHTML = `<p style="opacity: 0.5;"><blah>desc.no.dms</blah></p>`;
|
||||
container.classList.add("empty");
|
||||
|
|
@ -2731,6 +2735,8 @@ async function renderGroups(res) {
|
|||
let isRead = groupData.string3 === "true";
|
||||
let nameStyle = isRead ? "opacity: 0.8;" : "opacity: 1;";
|
||||
|
||||
seedCallStateFromList(groupId, groupData.call === true);
|
||||
|
||||
let infoRes = await fetchEncrypted("group/info", groupId);
|
||||
if (infoRes && infoRes.startsWith("{")) {
|
||||
let info = JSON.parse(infoRes);
|
||||
|
|
@ -2750,6 +2756,7 @@ async function renderGroups(res) {
|
|||
<span class="room-id" style="font-size: 0.8rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtmlText(groupId.replace(';', ':'))}</span>
|
||||
</div>
|
||||
${unreadBadge}
|
||||
${getCallIndicatorHtml()}
|
||||
</button>
|
||||
`;
|
||||
count++;
|
||||
|
|
@ -2762,6 +2769,7 @@ async function renderGroups(res) {
|
|||
if (count > 0) {
|
||||
container.innerHTML = html;
|
||||
container.classList.remove("empty");
|
||||
updateVoicePresenceUI();
|
||||
} else {
|
||||
container.innerHTML = `<p style="opacity: 0.5;"><blah>desc.no.groups</blah></p>`;
|
||||
container.classList.add("empty");
|
||||
|
|
@ -2813,6 +2821,101 @@ function escapeHtmlText(value) {
|
|||
return escapeHtml(String(value ?? ""));
|
||||
}
|
||||
|
||||
// --- Wskaźniki aktywnej rozmowy głosowej (zielone słuchawki) ---
|
||||
|
||||
function getCallIndicatorHtml() {
|
||||
return `<div class="call-indicator">${ICONS.headphones({ width: "1rem", height: "1rem", stroke: "var(--big-green)" })}</div>`;
|
||||
}
|
||||
|
||||
function roomHasActiveCall(roomId) {
|
||||
if (!roomId || !window.activeCallsByRoom) return false;
|
||||
//Semantyka mapy: klucz ISTNIEJE = rozmowa trwa. Pusta tablica oznacza
|
||||
//"aktywna, ale skład jeszcze nieznany" (seed z listy DM/grup).
|
||||
return Array.isArray(window.activeCallsByRoom[sanitizeId(roomId)]);
|
||||
}
|
||||
|
||||
//Zapisuje flagę "trwa rozmowa" z listy DM/grup (nie nadpisuje znanej listy
|
||||
//uczestników z call_update - ta jest dokładniejsza).
|
||||
function ensureActiveCallsMap() {
|
||||
//Obiekt bez prototypu - klucze pochodzą z danych sieciowych (roomId), a
|
||||
//zapis np. pod "__proto__" na zwykłym obiekcie zanieczyściłby prototyp
|
||||
if (!window.activeCallsByRoom) window.activeCallsByRoom = Object.create(null);
|
||||
return window.activeCallsByRoom;
|
||||
}
|
||||
|
||||
function seedCallStateFromList(roomId, hasCall) {
|
||||
if (!hasCall) return;
|
||||
let map = ensureActiveCallsMap();
|
||||
let key = sanitizeId(roomId);
|
||||
if (!Array.isArray(map[key])) {
|
||||
map[key] = [];
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCallIndicator(rootEl, show) {
|
||||
if (!rootEl) return;
|
||||
let ind = rootEl.querySelector(".call-indicator");
|
||||
if (ind) ind.classList.toggle("show", !!show);
|
||||
}
|
||||
|
||||
//Odświeża wskaźniki rozmów: listy DM/grup, przyciski call w top-barach
|
||||
//oraz wiersze członków w panelu details.
|
||||
//roomIds = null -> pełna synchronizacja (po renderze list),
|
||||
//roomIds = [id] -> tylko wskazane pokoje (ścieżka gorąca: call_update),
|
||||
// żeby przy dużych listach nie skanować całego DOM.
|
||||
function updateVoicePresenceUI(roomIds = null) {
|
||||
let targets = Array.isArray(roomIds) ? roomIds.map(r => sanitizeId(r)) : null;
|
||||
|
||||
[["dms-list", "dm-btn-"], ["groups-list", "group-btn-"]].forEach(([listId, prefix]) => {
|
||||
let container = document.getElementById(listId);
|
||||
if (!container) return;
|
||||
container.querySelectorAll(".room-entry").forEach(btn => {
|
||||
if (!btn.id.startsWith(prefix)) return;
|
||||
let roomId = btn.id.substring(prefix.length);
|
||||
if (targets && !targets.includes(roomId)) return;
|
||||
toggleCallIndicator(btn, roomHasActiveCall(roomId));
|
||||
});
|
||||
});
|
||||
|
||||
let currentKey = window.currentDmId ? sanitizeId(window.currentDmId) : null;
|
||||
let currentAffected = targets === null || (currentKey !== null && targets.includes(currentKey));
|
||||
if (!currentAffected) return;
|
||||
|
||||
let inCurrent = roomHasActiveCall(window.currentDmId);
|
||||
document.querySelectorAll(".room-action-call svg").forEach(svg => {
|
||||
svg.style.fill = inCurrent ? "var(--big-green)" : "";
|
||||
});
|
||||
|
||||
if (currentKey) {
|
||||
let users = (window.activeCallsByRoom && window.activeCallsByRoom[currentKey]) || [];
|
||||
let detailsBar = document.getElementById("roomdetailsbar");
|
||||
if (detailsBar) {
|
||||
detailsBar.querySelectorAll(".room-entry[data-member-id]").forEach(btn => {
|
||||
toggleCallIndicator(btn, users.includes(btn.getAttribute("data-member-id")));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Pobiera aktualny skład rozmowy dla otwartego pokoju (snapshot po otwarciu -
|
||||
//call_update przychodzi dopiero przy join/leave).
|
||||
async function refreshRoomCallState() {
|
||||
try {
|
||||
if (!window.currentDmId || !window.currentRoomType) return;
|
||||
let res = await fetchEncrypted("room/voice/state", JSON.stringify({
|
||||
string1: window.currentRoomType,
|
||||
string2: window.currentDmId
|
||||
}));
|
||||
if (!res || !res.startsWith("[") || !window.currentDmId) return;
|
||||
let participants = JSON.parse(res).map(u => String(u).split(";")[0]);
|
||||
let map = ensureActiveCallsMap();
|
||||
let key = sanitizeId(window.currentDmId);
|
||||
if (participants.length > 0) map[key] = participants;
|
||||
else delete map[key];
|
||||
updateVoicePresenceUI([key]);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
async function generateDmMembersHtml(targetId, targetUsername) {
|
||||
let myIdStr = id + ";" + host;
|
||||
let myUsername = await fetchAsync(`${url}/idtoname?id=${myIdStr}`);
|
||||
|
|
@ -2831,19 +2934,21 @@ async function generateDmMembersHtml(targetId, targetUsername) {
|
|||
<div class="sidebar-section-header" style="margin-top: 0.5rem; margin-bottom: 0.5rem; width: 100%;">
|
||||
<span style="padding-left: 0.6rem; font-size: 0.8rem; font-weight: bold; opacity: 0.5; text-transform: uppercase;"><blah>title.members</blah></span>
|
||||
</div>
|
||||
<button class="room-entry" onclick="openProfile('${safeTargetId}')" style="margin-bottom: 0;">
|
||||
<button class="room-entry" data-member-id="${sanitizeId(targetId.split(';')[0])}" onclick="openProfile('${safeTargetId}')" style="margin-bottom: 0;">
|
||||
<img src="${targetPfp}" class="room-pfp">
|
||||
<div style="display: flex; flex-direction: column; text-align: left; overflow: hidden; width: 100%; margin-left: 0.37rem;">
|
||||
<span class="room-name">${targetDisplayName}</span>
|
||||
<span class="room-id" style="font-size: 0.8rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtmlText(targetUsername)}</span>
|
||||
</div>
|
||||
${getCallIndicatorHtml()}
|
||||
</button>
|
||||
<button class="room-entry" onclick="openProfile('${safeMyId}')" style="margin-bottom: 0;">
|
||||
<button class="room-entry" data-member-id="${sanitizeId(String(id))}" onclick="openProfile('${safeMyId}')" style="margin-bottom: 0;">
|
||||
<img src="${myPfp}" class="room-pfp">
|
||||
<div style="display: flex; flex-direction: column; text-align: left; overflow: hidden; width: 100%; margin-left: 0.37rem;">
|
||||
<span class="room-name">${myDisplaySafe}</span>
|
||||
<span class="room-id" style="font-size: 0.8rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtmlText(myUsername)}</span>
|
||||
</div>
|
||||
${getCallIndicatorHtml()}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -2972,14 +3077,16 @@ async function generateGroupMembersHtml(groupId, groupName) {
|
|||
let memberDisplayName = escapeHtml(memberUsername.split(':')[0]);
|
||||
let safeMemberId = sanitizeId(memberId);
|
||||
let safeGroupId = sanitizeId(groupId);
|
||||
let memberNumericId = sanitizeId(String(memberId).split(';')[0]);
|
||||
|
||||
html += `
|
||||
<button class="room-entry" onclick="openProfile('${safeMemberId}')" oncontextmenu="handleMemberContextMenu(event, '${safeGroupId}', '${safeMemberId}')" style="margin-bottom: 0;">
|
||||
<button class="room-entry" data-member-id="${memberNumericId}" onclick="openProfile('${safeMemberId}')" oncontextmenu="handleMemberContextMenu(event, '${safeGroupId}', '${safeMemberId}')" style="margin-bottom: 0;">
|
||||
<img src="${memberPfp}" class="room-pfp">
|
||||
<div style="display: flex; flex-direction: column; text-align: left; overflow: hidden; width: 100%; margin-left: 0.37rem;">
|
||||
<span class="room-name">${memberDisplayName}</span>
|
||||
<span class="room-id" style="font-size: 0.8rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtml(memberUsername)}</span>
|
||||
</div>
|
||||
${getCallIndicatorHtml()}
|
||||
</button>`;
|
||||
}
|
||||
|
||||
|
|
@ -3067,6 +3174,9 @@ async function openDm(dmId, username, targetId, type = 'dms') {
|
|||
}
|
||||
await switchDetailsContent("title.details", membersHtml);
|
||||
|
||||
updateVoicePresenceUI();
|
||||
refreshRoomCallState();
|
||||
|
||||
let msgContainer = document.getElementById("chat-messages");
|
||||
if (msgContainer) {
|
||||
msgContainer.innerHTML = `<div style="text-align: center; opacity: 0.5; padding: 1rem;"><blah>desc.messages.loading</blah></div>`;
|
||||
|
|
|
|||
|
|
@ -1201,6 +1201,27 @@ input:checked + .toggle-slider:before {
|
|||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Zielone słuchawki - wskaźnik trwającej rozmowy głosowej.
|
||||
Bez prawego marginesu: prawa krawędź ikony jest wtedy dokładnie na paddingu
|
||||
wiersza (0.6rem) - symetrycznie do pfp po lewej stronie. */
|
||||
.call-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transform: scale(0);
|
||||
}
|
||||
.call-indicator.show {
|
||||
transform: scale(1);
|
||||
}
|
||||
.call-indicator svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Custom Select */
|
||||
.custom-select {
|
||||
position: relative;
|
||||
|
|
|
|||
113
webroot/voice.js
113
webroot/voice.js
|
|
@ -6,6 +6,16 @@ let voiceActiveUsers = [];
|
|||
let voiceAesKeyBytes = null; // grupowy klucz rozmowy (root) - dystrybuowany hybrydą PQ
|
||||
let voiceUiContainer = null;
|
||||
|
||||
//Pokój, dla którego aktualnie wisi banner rozmowy przychodzącej. Banner jest
|
||||
//GLOBALNY - działa niezależnie od tego, jaki czat jest otwarty (app-WebSocket
|
||||
//jest aktywny cały czas i dostaje call_update dla wszystkich naszych pokoi).
|
||||
let incomingCallRoomId = null;
|
||||
//Pokoje opuszczone przed chwilą: broadcast call_update po naszym leave przychodzi
|
||||
//asynchronicznie - bez tej blokady zaraz po wyjściu z rozmowy wyskoczyłby nam
|
||||
//banner "ktoś dzwoni" z pokoju, który sami właśnie opuściliśmy.
|
||||
//Bez prototypu - kluczami są roomId z sieci (ochrona przed prototype pollution).
|
||||
const voiceRecentlyLeftRooms = Object.create(null);
|
||||
|
||||
// === Gwarantowana unikalność IV (AES-GCM): ===
|
||||
// 1) każdy nadawca szyfruje WŁASNYM podkluczem HKDF(root, "larpix:voice:v1:"+senderId)
|
||||
// -> kolizja między nadawcami niemożliwa z konstrukcji,
|
||||
|
|
@ -748,8 +758,14 @@ async function initiateVoiceCall(roomId = null) {
|
|||
showBlahNotification("error:already.in.call");
|
||||
return;
|
||||
}
|
||||
currentVoiceCallType = window.currentRoomType === "groups" ? "groups" : "dms";
|
||||
currentVoiceCallId = roomId || window.currentDmId;
|
||||
if (!currentVoiceCallId) return;
|
||||
//Typ pokoju MUSI wynikać z samego ID - przy joinie z bannera otwarty czat
|
||||
//nie ma nic wspólnego z pokojem, do którego się dzwoni. Wcześniejszy kod
|
||||
//brał typ z aktualnie otwartego pokoju, więc serwer sprawdzał członkostwo
|
||||
//w złym typie pokoju i zwracał "error:forbidden".
|
||||
//Formaty: DM = "idA;domA_idB;domB" (zawiera '_'), grupa = "id;domena".
|
||||
currentVoiceCallType = String(currentVoiceCallId).includes("_") ? "dms" : "groups";
|
||||
voiceJoinInFlight = true;
|
||||
|
||||
try {
|
||||
|
|
@ -1153,14 +1169,51 @@ async function startVoiceSession(serverUrl, ticket) {
|
|||
async function handleCallUpdate(data) {
|
||||
let parts = data.split(":");
|
||||
let roomId = parts[1];
|
||||
let incomingState = [];
|
||||
if (parts.slice(2).join(":") !== "") {
|
||||
try { incomingState = JSON.parse(parts.slice(2).join(":")).map(u => String(u)); } catch (e) {}
|
||||
}
|
||||
|
||||
if (typeof ensureActiveCallsMap !== "function") return;
|
||||
let callMap = ensureActiveCallsMap();
|
||||
let roomKey = sanitizeId(roomId);
|
||||
let prev = callMap[roomKey];
|
||||
//Brak klucza = brak rozmowy; pusta tablica = aktywna, skład nieznany (seed)
|
||||
if (incomingState.length > 0) callMap[roomKey] = incomingState;
|
||||
else delete callMap[roomKey];
|
||||
|
||||
//Optymalizacja: identyczny stan nie wymaga żadnej pracy po stronie UI
|
||||
//(serwer/duplikaty mogą wysłać to samo wielokrotnie przy dużym ruchu).
|
||||
//Porównujemy też samą AKTYWNOŚĆ - przejście "seed[] -> koniec rozmowy"
|
||||
//(usunięcie klucza) musi odświeżyć UI mimo identycznej pustej listy.
|
||||
let activeBefore = Array.isArray(prev);
|
||||
let activeAfter = incomingState.length > 0;
|
||||
let changed = activeBefore !== activeAfter ||
|
||||
(activeAfter && !(prev.length === incomingState.length &&
|
||||
prev.every((u, i) => u === incomingState[i])));
|
||||
//Targetowana aktualizacja - przerysowujemy wskaźniki TYLKO tego pokoju
|
||||
if (changed && typeof updateVoicePresenceUI === "function") updateVoicePresenceUI([roomKey]);
|
||||
|
||||
//--- GLOBALNA obsługa rozmowy przychodzącej. Działa dla KAŻDEGO pokoju, w
|
||||
//którym jesteśmy członkiem, niezależnie od otwartego czatu.
|
||||
let myIdStr = String(window.id);
|
||||
let amInThisCall = incomingState.includes(myIdStr);
|
||||
let leftAgo = Date.now() - (voiceRecentlyLeftRooms[roomId] || 0);
|
||||
if (amInThisCall || incomingState.length === 0) {
|
||||
if (incomingCallRoomId === roomId) dismissIncomingCall();
|
||||
} else if (leftAgo > 3000 && !voiceJoinInFlight) {
|
||||
if (incomingCallRoomId === roomId) {
|
||||
//Banner już wisi dla tego pokoju - odśwież tylko licznik uczestników
|
||||
updateIncomingCallSubtitle(incomingState.length);
|
||||
} else if (!currentVoiceWs) {
|
||||
showIncomingCallUI(roomId, incomingState.length);
|
||||
}
|
||||
}
|
||||
|
||||
//Ignore updates for rooms we have nothing to do with - they would otherwise
|
||||
//overwrite the participant list of an ongoing call and wipe its tiles.
|
||||
if (roomId !== currentVoiceCallId && roomId !== window.currentDmId) return;
|
||||
let state = [];
|
||||
if(parts.slice(2).join(":") !== "") {
|
||||
let stateRaw = JSON.parse(parts.slice(2).join(":"));
|
||||
state = stateRaw.map(u => String(u)).filter(u => !deadPeers.has(u));
|
||||
}
|
||||
let state = incomingState.filter(u => !deadPeers.has(u));
|
||||
voiceActiveUsers = state;
|
||||
|
||||
if (currentVoiceCallId === roomId) {
|
||||
|
|
@ -1201,13 +1254,6 @@ async function handleCallUpdate(data) {
|
|||
updateVoiceUIUsers();
|
||||
}
|
||||
}
|
||||
} else if (state.length > 0 && !state.includes(String(window.id))) {
|
||||
// Someone is in a call, and we are not. Show incoming call banner if it's the current room.
|
||||
if (window.currentDmId === roomId) {
|
||||
showIncomingCallUI(roomId);
|
||||
}
|
||||
} else if (state.length === 0) {
|
||||
dismissIncomingCall();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1254,13 +1300,28 @@ async function resolveCallerInfo(roomId) {
|
|||
return { name: (name ? name.split(':')[0] : null) || processBlah("title.unknown"), pfpUrl };
|
||||
}
|
||||
|
||||
function showIncomingCallUI(roomId) {
|
||||
if (document.getElementById("incoming-call-popup") || currentVoiceWs || voiceJoinInFlight) return;
|
||||
function showIncomingCallUI(roomId, participantCount = null) {
|
||||
if (currentVoiceWs || voiceJoinInFlight) 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;
|
||||
|
||||
//Zamiana bannera na inny pokój - stary usuwamy natychmiast (inaczej
|
||||
//guard po id zablokowałby pokazanie nowego do czasu końca animacji)
|
||||
let existing = document.getElementById("incoming-call-popup");
|
||||
if (existing) existing.remove();
|
||||
incomingCallRoomId = roomId;
|
||||
|
||||
if (participantCount === null) {
|
||||
let known = window.activeCallsByRoom ? window.activeCallsByRoom[sanitizeId(roomId)] : null;
|
||||
participantCount = Array.isArray(known) && known.length > 0 ? known.length : voiceActiveUsers.length;
|
||||
}
|
||||
|
||||
//roomId trafia do inline onclick - sanityzujemy, żeby nic nie mogło
|
||||
//wyjść poza atrybut/string JS (defense in depth; ID z naszego serwera)
|
||||
let safeRoomId = sanitizeId(roomId);
|
||||
|
||||
let incomingUi = document.createElement("div");
|
||||
incomingUi.id = "incoming-call-popup";
|
||||
// Remote-controlled values (username/avatar) are NEVER interpolated into
|
||||
|
|
@ -1269,10 +1330,10 @@ function showIncomingCallUI(roomId) {
|
|||
<img class="incoming-call-avatar" alt="">
|
||||
<div class="incoming-call-info">
|
||||
<span class="incoming-call-name"></span>
|
||||
<span class="incoming-call-subtitle">${processBlah("title.incoming.call")} · ${processBlah(`:desc.call.in.chat:${voiceActiveUsers.length}`)}</span>
|
||||
<span class="incoming-call-subtitle">${processBlah("title.incoming.call")} · ${processBlah(`:desc.call.in.chat:${participantCount}`)}</span>
|
||||
</div>
|
||||
<div class="incoming-call-actions">
|
||||
<button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
|
||||
<button class="voice-call-btn accept" onclick="joinIncomingCall('${safeRoomId}')">
|
||||
${ICONS.call({width: "1rem", height: "1rem"})} ${processBlah("action.call.join")}
|
||||
</button>
|
||||
<button class="voice-call-btn decline" onclick="dismissIncomingCall()">
|
||||
|
|
@ -1296,7 +1357,14 @@ function showIncomingCallUI(roomId) {
|
|||
});
|
||||
}
|
||||
|
||||
//Aktualizuje tylko licznik uczestników w wiszącym bannerze (bez re-renderu)
|
||||
function updateIncomingCallSubtitle(participantCount) {
|
||||
let el = document.querySelector("#incoming-call-popup .incoming-call-subtitle");
|
||||
if (el) el.textContent = `${processBlah("title.incoming.call")} · ${processBlah(`:desc.call.in.chat:${participantCount}`)}`;
|
||||
}
|
||||
|
||||
function dismissIncomingCall() {
|
||||
incomingCallRoomId = null;
|
||||
let el = document.getElementById("incoming-call-popup");
|
||||
if (!el || el.classList.contains("hide")) return;
|
||||
el.classList.remove("show");
|
||||
|
|
@ -2382,6 +2450,17 @@ function endVoiceSession() {
|
|||
setVoiceStatus("disconnected");
|
||||
hideVoiceDeviceSettings();
|
||||
|
||||
//Oznacz pokój jako "właśnie opuszczony" - broadcast call_update po naszym
|
||||
//leave wróci do nas z opóźnieniem i bez tego globalna obsługa bannera
|
||||
//uznałaby, że ktoś dzwoni z pokoju, który sami właśnie opuściliśmy.
|
||||
if (currentVoiceCallId) {
|
||||
let now = Date.now();
|
||||
voiceRecentlyLeftRooms[currentVoiceCallId] = now;
|
||||
for (let k in voiceRecentlyLeftRooms) {
|
||||
if (now - voiceRecentlyLeftRooms[k] > 30000) delete voiceRecentlyLeftRooms[k];
|
||||
}
|
||||
}
|
||||
|
||||
const nativeRouting = getNativeVoiceRouting();
|
||||
if (nativeRouting && nativeRouting.stopCall) {
|
||||
try { nativeRouting.stopCall(); } catch (e) {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue