2837 lines
125 KiB
JavaScript
2837 lines
125 KiB
JavaScript
let currentVoiceWs = null;
|
|
let currentVoiceCallId = null;
|
|
let currentVoiceCallType = null;
|
|
let voiceWsHeartbeat = null;
|
|
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,
|
|
// 2) IV(12B) = epoka(4B = SHA-256(ticketPublicId)[0..4]) || licznik(8B BE, ściśle rosnący)
|
|
// -> kolizja w ramach jednego nadawcy niemożliwa w obrębie epoki; każde dołączenie
|
|
// do calla ma unikalny ticketPublicId (single-use po stronie serwera), a licznik
|
|
// może się resetować TYLKO razem ze zmianą klucza root.
|
|
let voiceMySenderCryptoKey = null; // mój podklucz nadawcy (CryptoKey)
|
|
const voicePeerSenderKeys = new Map(); // clientIdStr -> Promise<CryptoKey> odbiorczy
|
|
let voiceSendEpoch = null; // Uint8Array(4)
|
|
let voiceSendCounter = 0n; // BigInt, monotoniczny w ramach epoki
|
|
|
|
//Promise rozstrzygany gdy operacja na kluczu root (ustawienie/wyczyszczenie)
|
|
//jest gotowa - pozwala innym kodom czekać zamiast wchodzić w wyścig z derivacją.
|
|
let voiceRootKeyReady = Promise.resolve();
|
|
|
|
const VOICE_HKDF_INFO_PREFIX = "larpix:voice:v1:";
|
|
|
|
function voiceHkdfInfoBytes(senderIdStr) {
|
|
const prefix = new TextEncoder().encode(VOICE_HKDF_INFO_PREFIX);
|
|
const idBytes = new TextEncoder().encode(String(senderIdStr));
|
|
const out = new Uint8Array(prefix.length + idBytes.length);
|
|
out.set(prefix, 0);
|
|
out.set(idBytes, prefix.length);
|
|
return out;
|
|
}
|
|
|
|
async function deriveVoiceSenderKey(rootBytes, senderIdStr) {
|
|
const ikm = await crypto.subtle.importKey("raw", rootBytes, "HKDF", false, ["deriveBits"]);
|
|
const bits = await crypto.subtle.deriveBits(
|
|
{name: "HKDF", hash: "SHA-256", salt: new Uint8Array(0), info: voiceHkdfInfoBytes(senderIdStr)},
|
|
ikm, 256
|
|
);
|
|
return await crypto.subtle.importKey("raw", new Uint8Array(bits), {name: "AES-GCM"}, false, ["encrypt", "decrypt"]);
|
|
}
|
|
|
|
//Jedyny punkt zmiany klucza root. Reset licznika jest poprawny wyłącznie tutaj -
|
|
//nowy root = świeża przestrzeń IV. Null czyści cały stan.
|
|
function setVoiceRootKey(bytesOrNull) {
|
|
const done = (async () => {
|
|
if (!bytesOrNull) {
|
|
voiceAesKeyBytes = null;
|
|
voiceMySenderCryptoKey = null;
|
|
voicePeerSenderKeys.clear();
|
|
return;
|
|
}
|
|
voicePeerSenderKeys.clear();
|
|
const k = await deriveVoiceSenderKey(bytesOrNull, String(window.id));
|
|
voiceAesKeyBytes = bytesOrNull;
|
|
voiceMySenderCryptoKey = k;
|
|
})();
|
|
voiceRootKeyReady = done;
|
|
return done;
|
|
}
|
|
|
|
//Epoka z unikalnego per-dołączenie ticketPublicId - deterministycznie, bez dodatkowego losowania.
|
|
function setVoiceEpochFromTicket(publicIdB64u) {
|
|
crypto.subtle.digest("SHA-256", new TextEncoder().encode(String(publicIdB64u))).then(d => {
|
|
voiceSendEpoch = new Uint8Array(d).slice(0, 4);
|
|
voiceSendCounter = 0n;
|
|
}).catch(() => { voiceSendEpoch = null; voiceSendCounter = 0n; });
|
|
}
|
|
|
|
//Jedynne źródło IV do wysyłki. Inkrementacja synchroniczna (single-thread JS = atomiczne).
|
|
function nextVoiceIv() {
|
|
if (!voiceSendEpoch) throw new Error("voice epoch not ready");
|
|
voiceSendCounter += 1n;
|
|
if (voiceSendCounter >= (1n << 63n)) throw new Error("voice iv counter exhausted"); //praktycznie nieosiągalne
|
|
const iv = new Uint8Array(12);
|
|
iv.set(voiceSendEpoch, 0);
|
|
let c = voiceSendCounter;
|
|
for (let i = 0; i < 8; i++) {
|
|
iv[11 - i] = Number(c & 0xffn);
|
|
c >>= 8n;
|
|
}
|
|
return iv;
|
|
}
|
|
|
|
//Podklucz odbiorczy danego nadawcy (cache). clientId to dziesiętny string ulonga -
|
|
//dokładnie ta sama forma, której nadawca użył przy derivacji własnego klucza.
|
|
function getVoicePeerSenderKey(clientIdStr) {
|
|
let p = voicePeerSenderKeys.get(clientIdStr);
|
|
if (!p && voiceAesKeyBytes) {
|
|
p = deriveVoiceSenderKey(voiceAesKeyBytes, clientIdStr);
|
|
voicePeerSenderKeys.set(clientIdStr, p);
|
|
}
|
|
return p || null;
|
|
}
|
|
|
|
|
|
let micStream = null, audioContext = null, isAudioWorkletLoaded = false;
|
|
let micSourceNode = null, senderNode = null, receiverNode = null, audioEncoder = null;
|
|
let remoteAudio = {}, audioDecoders = {}, audioDecryptChains = {};
|
|
let knownVoiceUsers = new Set();
|
|
let isMicMuted = false;
|
|
let remoteVideos = {}, videoDecryptChains = {};
|
|
let camControl = null, screenControl = null;
|
|
let screenReceiverNode = null;
|
|
let voiceOutputAudio = null;
|
|
let voiceLoopSendPc = null, voiceLoopRecvPc = null;
|
|
let voicePlayoutDest = null;
|
|
let voiceLoopWatchdog = null;
|
|
let voiceRemoteStream = null;
|
|
let voiceLoopRestarts = 0;
|
|
let voiceDeviceChangeHandler = null;
|
|
let voiceDeviceChangeTimer = null;
|
|
let isVoiceSpeakerMode = false;
|
|
|
|
const SPEAKING_HANGOVER_MS = 400;
|
|
|
|
// ===== Voice connection resilience =====
|
|
// Every client broadcasts a tiny encrypted ping so peers can tell "quiet
|
|
// user" apart from "crashed/half-open socket". Peers silent for too long are
|
|
// dropped locally; a dead server socket triggers an automatic rejoin.
|
|
const VOICE_PEER_TIMEOUT_MS = 7000;
|
|
const VOICE_PING_INTERVAL_MS = 2000;
|
|
const VOICE_SERVER_TIMEOUT_MS = 10000;
|
|
const VOICE_MAX_RECONNECTS = 2;
|
|
let peerLastSeen = {};
|
|
let deadPeers = new Set();
|
|
let lastVoiceServerPacketAt = 0;
|
|
//Czy w bieżącym okresie socketu byli jacyś inni uczestnicy - baza dla
|
|
//resetu baseline'u ciszy w watchdogu (patrz komentarz przy użyciu)
|
|
let voiceHadRemotePeers = false;
|
|
let voicePingTimer = null;
|
|
let voiceRosterRetryTimer = null;
|
|
let lastVoiceKeyRequestAt = 0;
|
|
let voiceReconnectAttempts = 0;
|
|
let voiceSocketOpenedAt = 0;
|
|
|
|
function cleanupPeerMedia(userId) {
|
|
for (const aid of [userId, `${userId}_screen`]) {
|
|
if (remoteAudio[aid]) {
|
|
if (audioDecryptChains[aid]) audioDecryptChains[aid].clear();
|
|
delete remoteAudio[aid];
|
|
delete audioDecryptChains[aid];
|
|
}
|
|
}
|
|
for (const decoderId of Object.keys(remoteVideos)) {
|
|
if (decoderId.split('-')[0] === userId) {
|
|
try { if (remoteVideos[decoderId].decoder) remoteVideos[decoderId].decoder.close(); } catch (e) {}
|
|
if (videoDecryptChains[decoderId]) videoDecryptChains[decoderId].clear();
|
|
delete remoteVideos[decoderId];
|
|
delete videoDecryptChains[decoderId];
|
|
}
|
|
}
|
|
}
|
|
|
|
function sendVoicePing() {
|
|
if (!currentVoiceWs || currentVoiceWs.readyState !== WebSocket.OPEN || !voiceMySenderCryptoKey) return;
|
|
const iv = nextVoiceIv();
|
|
crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceMySenderCryptoKey, new Uint8Array([Date.now() & 255])).then(cipher => {
|
|
if (!currentVoiceWs || currentVoiceWs.readyState !== WebSocket.OPEN) return;
|
|
const payload = new Uint8Array(14 + cipher.byteLength);
|
|
payload[0] = 5; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
|
currentVoiceWs.send(payload.buffer);
|
|
}).catch(() => {});
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
// Voice device/media settings - persisted locally, edited from the in-call
|
|
// settings popup (microphone, speaker, camera, quality/fps, mic sensitivity).
|
|
const VOICE_SETTINGS_KEY = "larpix_voice_settings";
|
|
const VOICE_SENSITIVITY_DEFAULT = -65;
|
|
const VOICE_RES_OPTIONS = [
|
|
{ value: "480x360", label: "360p" },
|
|
{ value: "640x480", label: "480p" },
|
|
{ value: "1280x720", label: "720p" },
|
|
{ value: "1920x1080", label: "1080p" },
|
|
{ value: "source", label: "SOURCE" }
|
|
];
|
|
const VOICE_FPS_OPTIONS = [15, 24, 30, 60];
|
|
let voiceSettings = loadVoiceSettings();
|
|
|
|
function loadVoiceSettings() {
|
|
const defaults = { micId: "", camId: "", speakerId: "", camRes: "1280x720", camFps: 24, screenRes: "1920x1080", screenFps: 30, sensitivity: VOICE_SENSITIVITY_DEFAULT };
|
|
try {
|
|
return Object.assign(defaults, JSON.parse(localStorage.getItem(VOICE_SETTINGS_KEY)) || {});
|
|
} catch (e) {
|
|
return defaults;
|
|
}
|
|
}
|
|
|
|
function saveVoiceSettings() {
|
|
try { localStorage.setItem(VOICE_SETTINGS_KEY, JSON.stringify(voiceSettings)); } catch (e) {}
|
|
}
|
|
|
|
function getVoiceMediaConfig(typeId) {
|
|
return typeId === 1
|
|
? { res: voiceSettings.camRes, fps: parseInt(voiceSettings.camFps) || 24 }
|
|
: { res: voiceSettings.screenRes, fps: parseInt(voiceSettings.screenFps) || 30 };
|
|
}
|
|
|
|
// Camera quality presets are treated as single-axis quality tiers (e.g. the
|
|
// longer edge of "1280x720"): the camera always opens at its NATIVE aspect
|
|
// ratio and is never steered toward a preset's own ratio like 4:3. Nothing is
|
|
// remembered - the actual geometry is detected from the live track settings
|
|
// every time (encoder config follows it automatically).
|
|
|
|
function buildVoiceMicConstraints(deviceId) {
|
|
const constraints = { audio: { echoCancellation: false, noiseSuppression: false, autoGainControl: false } };
|
|
if (deviceId) constraints.audio.deviceId = { exact: deviceId };
|
|
return constraints;
|
|
}
|
|
|
|
async function switchVoiceMic(deviceId) {
|
|
if (!audioContext || !senderNode) return;
|
|
let newStream;
|
|
try {
|
|
newStream = await navigator.mediaDevices.getUserMedia(buildVoiceMicConstraints(deviceId));
|
|
} catch (e) {
|
|
showBlahNotification("error:call.microphone");
|
|
return;
|
|
}
|
|
if (micStream) micStream.getTracks().forEach(t => t.stop());
|
|
micStream = newStream;
|
|
if (micSourceNode) { try { micSourceNode.disconnect(); } catch (e) {} }
|
|
micSourceNode = audioContext.createMediaStreamSource(micStream);
|
|
micSourceNode.connect(senderNode);
|
|
}
|
|
|
|
// Output device selection only applies where the web layer owns the output.
|
|
// With the native Android routing the OS owns the call audio path entirely.
|
|
async function applyVoiceSpeakerSink() {
|
|
if (getNativeVoiceRouting() || !voiceSettings.speakerId) return;
|
|
try { if (audioContext && audioContext.setSinkId) await audioContext.setSinkId(voiceSettings.speakerId); } catch (e) {}
|
|
try { if (voiceOutputAudio && voiceOutputAudio.setSinkId) await voiceOutputAudio.setSinkId(voiceSettings.speakerId); } catch (e) {}
|
|
}
|
|
|
|
let voiceConnectedAt = null;
|
|
let voiceTimerInterval = null;
|
|
let voicePingMs = null;
|
|
|
|
function formatVoiceDuration(ms) {
|
|
let totalSec = Math.floor(ms / 1000);
|
|
let h = Math.floor(totalSec / 3600);
|
|
let m = Math.floor((totalSec % 3600) / 60);
|
|
let s = totalSec % 60;
|
|
let mm = String(m).padStart(2, "0"), ss = String(s).padStart(2, "0");
|
|
return h > 0 ? `${h}:${mm}:${ss}` : `${m}:${ss}`;
|
|
}
|
|
|
|
function updateVoicePing() {
|
|
let pingEl = document.getElementById("voice-ping");
|
|
if (pingEl) pingEl.innerText = voicePingMs !== null ? `${voicePingMs} ms` : "";
|
|
}
|
|
|
|
function isMobileVoiceDevice() {
|
|
return /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent) && !!window.RTCPeerConnection;
|
|
}
|
|
|
|
function getNativeVoiceRouting() {
|
|
try {
|
|
return window.Capacitor && window.Capacitor.Plugins && window.Capacitor.Plugins.VoiceRouting ? window.Capacitor.Plugins.VoiceRouting : null;
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function teardownVoiceLoopback() {
|
|
if (voiceLoopWatchdog) { clearTimeout(voiceLoopWatchdog); voiceLoopWatchdog = null; }
|
|
document.removeEventListener("click", voicePlayRetry, true);
|
|
window.removeEventListener("voicemodechanged", voiceModeChangedHandler);
|
|
if (voiceDeviceChangeHandler && navigator.mediaDevices && navigator.mediaDevices.removeEventListener) {
|
|
navigator.mediaDevices.removeEventListener("devicechange", voiceDeviceChangeHandler);
|
|
}
|
|
voiceDeviceChangeHandler = null;
|
|
clearTimeout(voiceDeviceChangeTimer);
|
|
if (voiceLoopSendPc) { try { voiceLoopSendPc.close(); } catch (e) {} voiceLoopSendPc = null; }
|
|
if (voiceLoopRecvPc) { try { voiceLoopRecvPc.close(); } catch (e) {} voiceLoopRecvPc = null; }
|
|
if (voicePlayoutDest) { try { voicePlayoutDest.disconnect(); } catch (e) {} voicePlayoutDest = null; }
|
|
if (voiceOutputAudio) {
|
|
try { voiceOutputAudio.pause(); } catch (e) {}
|
|
voiceOutputAudio.srcObject = null;
|
|
voiceOutputAudio.remove();
|
|
voiceOutputAudio = null;
|
|
}
|
|
voiceRemoteStream = null;
|
|
}
|
|
|
|
function voicePlayRetry() {
|
|
if (voiceOutputAudio) voiceOutputAudio.play().catch(() => {});
|
|
}
|
|
|
|
function int16ToBase64(view) {
|
|
let bin = '';
|
|
const u8 = new Uint8Array(view.buffer, view.byteOffset, view.byteLength);
|
|
const STEP = 8192;
|
|
for (let i = 0; i < u8.length; i += STEP) {
|
|
bin += String.fromCharCode.apply(null, u8.subarray(i, Math.min(i + STEP, u8.length)));
|
|
}
|
|
return btoa(bin);
|
|
}
|
|
|
|
function handlePcmChunk(ev) {
|
|
const native = getNativeVoiceRouting();
|
|
if (!native || !native.nativeAudioFeed || !ev.data) return;
|
|
try {
|
|
native.nativeAudioFeed({ data: int16ToBase64(new Int16Array(ev.data)) }).catch(() => {});
|
|
} catch (e) {}
|
|
}
|
|
|
|
function stopNativePlayback() {
|
|
const native = getNativeVoiceRouting();
|
|
if (native && native.nativeAudioStop) native.nativeAudioStop().catch(() => {});
|
|
}
|
|
|
|
// Fired natively when Android reverted MODE_IN_COMMUNICATION and the plugin
|
|
// restored it - Chromium's playout track must be re-initialized afterwards.
|
|
function voiceModeChangedHandler() {
|
|
console.debug("Voice: native mode restore detected, replugging playout");
|
|
setTimeout(() => replugVoiceOutputElement(), 150);
|
|
setTimeout(() => replugVoiceOutputElement(), 700);
|
|
}
|
|
|
|
function voicePlayoutOk() {
|
|
let connected = voiceLoopRecvPc && voiceLoopRecvPc.connectionState === "connected";
|
|
let playing = voiceOutputAudio && !voiceOutputAudio.paused;
|
|
return !!connected && !!playing;
|
|
}
|
|
|
|
// Re-attaching the stream forces the browser audio stack to re-initialize its
|
|
// output track - needed after communication device changes on Android.
|
|
async function replugVoiceOutputElement() {
|
|
if (!voiceOutputAudio || !voiceRemoteStream) return;
|
|
console.debug("Voice: replugging WebRTC playout element");
|
|
try { voiceOutputAudio.pause(); } catch (e) {}
|
|
voiceOutputAudio.srcObject = null;
|
|
voiceOutputAudio.srcObject = voiceRemoteStream;
|
|
try { await voiceOutputAudio.play(); } catch (e) {}
|
|
applyVoiceSpeakerSink();
|
|
}
|
|
|
|
function fallbackVoiceToMediaOutput() {
|
|
if (!receiverNode || !audioContext || !voicePlayoutDest) return;
|
|
console.warn("Voice: WebRTC playout unavailable, falling back to media output");
|
|
teardownVoiceLoopback();
|
|
try { receiverNode.disconnect(); } catch (e) {}
|
|
try { receiverNode.connect(audioContext.destination); } catch (e) {}
|
|
}
|
|
|
|
function recoverVoiceLoopback() {
|
|
if (!receiverNode || !audioContext || !voicePlayoutDest) return;
|
|
const native = getNativeVoiceRouting();
|
|
|
|
// First aid: re-plug the playout element (fixes stuck routes after device switches)
|
|
replugVoiceOutputElement().then(() => {
|
|
setTimeout(() => {
|
|
if (!voicePlayoutDest || voicePlayoutOk()) return;
|
|
if (native && voiceLoopRestarts < 2) {
|
|
voiceLoopRestarts++;
|
|
console.warn("Voice: restarting WebRTC loopback (attempt " + voiceLoopRestarts + ")");
|
|
const wasSpeaker = isVoiceSpeakerMode;
|
|
teardownVoiceLoopback();
|
|
isVoiceSpeakerMode = wasSpeaker;
|
|
setupVoiceOutput();
|
|
} else {
|
|
fallbackVoiceToMediaOutput();
|
|
}
|
|
}, 800);
|
|
});
|
|
}
|
|
|
|
function setupVoiceOutput() {
|
|
if (!audioContext || !receiverNode) return;
|
|
try { receiverNode.disconnect(); } catch (e) {}
|
|
if (screenReceiverNode) {
|
|
try { screenReceiverNode.disconnect(); } catch (e) {}
|
|
screenReceiverNode.connect(audioContext.destination);
|
|
}
|
|
|
|
const native = getNativeVoiceRouting();
|
|
|
|
// App + native plugin: the mixed call audio is played by a native AudioTrack
|
|
// (USAGE_VOICE_COMMUNICATION), so it follows the call volume slider and the
|
|
// earpiece/speaker switch. Nothing is output through the WebAudio graph.
|
|
// The receiver worklet forwards mixed PCM straight here (~20 ms packets).
|
|
if (native && isMobileVoiceDevice()) {
|
|
stopNativePlayback();
|
|
receiverNode.port.onmessage = handlePcmChunk;
|
|
if (native.nativeAudioStart) native.nativeAudioStart({ sampleRate: audioContext.sampleRate }).catch(() => {});
|
|
return;
|
|
}
|
|
|
|
if (!isMobileVoiceDevice()) {
|
|
receiverNode.connect(audioContext.destination);
|
|
return;
|
|
}
|
|
|
|
// Browser-only speaker mode plays through plain media output.
|
|
// With the native plugin present, routing stays on the call path
|
|
// and the speaker switch is handled natively.
|
|
if (isVoiceSpeakerMode) {
|
|
receiverNode.connect(audioContext.destination);
|
|
return;
|
|
}
|
|
|
|
voiceLoopRestarts = 0;
|
|
teardownVoiceLoopback();
|
|
voicePlayoutDest = audioContext.createMediaStreamDestination();
|
|
receiverNode.connect(voicePlayoutDest);
|
|
|
|
voiceLoopSendPc = new RTCPeerConnection();
|
|
voiceLoopRecvPc = new RTCPeerConnection();
|
|
voiceLoopSendPc.onicecandidate = e => { if (e.candidate) try { voiceLoopRecvPc.addIceCandidate(e.candidate); } catch (err) {} };
|
|
voiceLoopRecvPc.onicecandidate = e => { if (e.candidate) try { voiceLoopSendPc.addIceCandidate(e.candidate); } catch (err) {} };
|
|
voiceLoopRecvPc.onconnectionstatechange = () => {
|
|
const st = voiceLoopRecvPc && voiceLoopRecvPc.connectionState;
|
|
if (st === "failed") recoverVoiceLoopback();
|
|
};
|
|
voiceLoopRecvPc.ontrack = e => {
|
|
voiceRemoteStream = e.streams[0];
|
|
if (!voiceOutputAudio) {
|
|
voiceOutputAudio = document.createElement("audio");
|
|
voiceOutputAudio.autoplay = true;
|
|
voiceOutputAudio.setAttribute("playsinline", "");
|
|
document.body.appendChild(voiceOutputAudio);
|
|
}
|
|
voiceOutputAudio.srcObject = voiceRemoteStream;
|
|
voiceOutputAudio.play().catch(() => {});
|
|
applyVoiceSpeakerSink();
|
|
};
|
|
document.addEventListener("click", voicePlayRetry, true);
|
|
window.addEventListener("voicemodechanged", voiceModeChangedHandler);
|
|
if (navigator.mediaDevices && navigator.mediaDevices.addEventListener) {
|
|
voiceDeviceChangeHandler = () => {
|
|
clearTimeout(voiceDeviceChangeTimer);
|
|
// Audio route changed (BT/headset/speaker) - re-init the playout track
|
|
voiceDeviceChangeTimer = setTimeout(() => replugVoiceOutputElement(), 400);
|
|
};
|
|
navigator.mediaDevices.addEventListener("devicechange", voiceDeviceChangeHandler);
|
|
}
|
|
voiceLoopSendPc.addTrack(voicePlayoutDest.stream.getAudioTracks()[0], voicePlayoutDest.stream);
|
|
voiceLoopSendPc.createOffer()
|
|
.then(offer => voiceLoopSendPc.setLocalDescription(offer))
|
|
.then(() => voiceLoopRecvPc.setRemoteDescription(voiceLoopSendPc.localDescription))
|
|
.then(() => voiceLoopRecvPc.createAnswer())
|
|
.then(answer => voiceLoopRecvPc.setLocalDescription(answer))
|
|
.then(() => voiceLoopSendPc.setRemoteDescription(voiceLoopRecvPc.localDescription))
|
|
.catch(() => {
|
|
recoverVoiceLoopback();
|
|
});
|
|
|
|
// Safety net: verify the WebRTC playout actually produces sound and repair it if not
|
|
if (voiceLoopWatchdog) clearTimeout(voiceLoopWatchdog);
|
|
voiceLoopWatchdog = setTimeout(() => {
|
|
voiceLoopWatchdog = null;
|
|
if (!voicePlayoutDest) return;
|
|
voicePlayRetry();
|
|
setTimeout(() => {
|
|
if (!voicePlayoutDest || voicePlayoutOk()) return;
|
|
recoverVoiceLoopback();
|
|
}, 600);
|
|
}, 4000);
|
|
}
|
|
|
|
window.toggleVoiceSpeakerMode = async function() {
|
|
isVoiceSpeakerMode = !isVoiceSpeakerMode;
|
|
let btn = document.getElementById("voice-btn-speaker");
|
|
if (btn) btn.classList.toggle("voice-btn-active", isVoiceSpeakerMode);
|
|
|
|
const native = getNativeVoiceRouting();
|
|
if (native && native.setSpeaker) {
|
|
// Native routing keeps playback on the call volume stream - only the
|
|
// physical output (earpiece <-> loudspeaker) changes, like a phone call.
|
|
// The native AudioTrack follows the communication device automatically.
|
|
try { await native.setSpeaker({ enabled: isVoiceSpeakerMode }); } catch (e) {}
|
|
setTimeout(() => replugVoiceOutputElement(), 250);
|
|
setTimeout(() => replugVoiceOutputElement(), 900);
|
|
setTimeout(() => { if (voicePlayoutDest && !voicePlayoutOk()) recoverVoiceLoopback(); }, 1700);
|
|
return;
|
|
}
|
|
|
|
if (!receiverNode) return;
|
|
try { receiverNode.disconnect(); } catch (e) {}
|
|
|
|
if (!isVoiceSpeakerMode && voicePlayoutDest) {
|
|
receiverNode.connect(voicePlayoutDest);
|
|
if (voiceOutputAudio) voiceOutputAudio.play().catch(() => {});
|
|
} else {
|
|
receiverNode.connect(audioContext.destination);
|
|
if (voiceOutputAudio) { try { voiceOutputAudio.pause(); } catch (e) {} }
|
|
}
|
|
};
|
|
|
|
function setVoiceStatus(state) {
|
|
let el = document.getElementById("voice-status");
|
|
if (!el) return;
|
|
el.classList.toggle("connected", state === "connected");
|
|
el.classList.toggle("connecting", state === "connecting");
|
|
el.classList.toggle("disconnected", state === "disconnected");
|
|
|
|
let textEl = el.querySelector(".voice-status-text");
|
|
if (state === "connected") {
|
|
if (voiceConnectedAt === null) voiceConnectedAt = Date.now();
|
|
if (!voiceTimerInterval) {
|
|
voiceTimerInterval = setInterval(() => {
|
|
let tickEl = document.querySelector("#voice-status .voice-status-text");
|
|
if (tickEl && voiceConnectedAt !== null) tickEl.innerText = formatVoiceDuration(Date.now() - voiceConnectedAt);
|
|
}, 1000);
|
|
}
|
|
if (textEl) textEl.innerText = formatVoiceDuration(Date.now() - voiceConnectedAt);
|
|
updateVoicePing();
|
|
} else {
|
|
if (voiceTimerInterval) { clearInterval(voiceTimerInterval); voiceTimerInterval = null; }
|
|
//Anchor czasu NIE jest kasowany przy "connecting" - reconnect w trakcie
|
|
//rozmowy nie może resetować licznika na 00:00; czyszczone tylko przy
|
|
//realnym rozłączeniu (disconnected z endVoiceSession)
|
|
if (state === "disconnected") { voiceConnectedAt = null; voicePingMs = null; updateVoicePing(); }
|
|
if (textEl) textEl.innerText = processBlah(state === "disconnected" ? "status.voice.disconnected" : "status.voice.connecting");
|
|
}
|
|
}
|
|
|
|
function setTileSpeaking(clientId, speaking, streamDecoderId = null) {
|
|
let tile = document.getElementById(`voice-tile-${clientId}`);
|
|
if (streamDecoderId) {
|
|
let streamTile = document.getElementById(`voice-tile-stream-${streamDecoderId}`);
|
|
if (streamTile) tile = streamTile;
|
|
}
|
|
if (!tile) return;
|
|
|
|
if (tile._speakingTimer) {
|
|
clearTimeout(tile._speakingTimer);
|
|
tile._speakingTimer = null;
|
|
}
|
|
|
|
if (speaking) {
|
|
tile.classList.add("speaking");
|
|
tile._speakingTimer = setTimeout(() => {
|
|
tile._speakingTimer = null;
|
|
tile.classList.remove("speaking");
|
|
}, SPEAKING_HANGOVER_MS);
|
|
} else {
|
|
tile.classList.remove("speaking");
|
|
}
|
|
}
|
|
|
|
function clearAllSpeaking() {
|
|
for (const el of document.querySelectorAll(".voice-tile.speaking")) {
|
|
if (el._speakingTimer) { clearTimeout(el._speakingTimer); el._speakingTimer = null; }
|
|
el.classList.remove("speaking");
|
|
}
|
|
}
|
|
|
|
setInterval(() => {
|
|
const now = Date.now();
|
|
let changed = false;
|
|
for (const [decoderId, data] of Object.entries(remoteVideos)) {
|
|
if (now - data.lastUpdate > 3000) {
|
|
if (data.decoder) { try { data.decoder.close(); } catch (e) {} }
|
|
if (videoDecryptChains[decoderId]) videoDecryptChains[decoderId].clear();
|
|
delete remoteVideos[decoderId];
|
|
delete videoDecryptChains[decoderId];
|
|
changed = true;
|
|
}
|
|
}
|
|
// Stale remote audio streams - quiet users send nothing, but their entry
|
|
// is recreated on their very next packet, so pruning is always safe.
|
|
for (const aid of Object.keys(remoteAudio)) {
|
|
if (now - remoteAudio[aid].lastUpdate > 6000) {
|
|
const rn = aid.endsWith("_screen") ? screenReceiverNode : receiverNode;
|
|
if (rn) rn.port.postMessage({action: 'remove', clientId: aid});
|
|
if (audioDecryptChains[aid]) audioDecryptChains[aid].clear();
|
|
delete remoteAudio[aid];
|
|
delete audioDecryptChains[aid];
|
|
}
|
|
}
|
|
// Ghost peers: still on the room roster but totally silent (pings count as
|
|
// life). Audyt S15: UKRYWANIE ich z UI tworzyło niewidzialnego
|
|
// podsłuchiwacza - voice-server dalej relayaudio do ich socketu, a u innych
|
|
// znikał z listy. Teraz peer zostaje WIDOCZNY (roster serwera jest źródłem
|
|
// prawdy); czyścimy jedynie jego kanały mediów - wrócą z pierwszym pakietem.
|
|
// deadPeers pełni tu rolę znacznika "media już wycięte", nie "ukryty".
|
|
let ghostRemoved = false;
|
|
for (const u of voiceActiveUsers) {
|
|
if (u === String(window.id)) continue;
|
|
if (!peerLastSeen[u]) { peerLastSeen[u] = now; continue; }
|
|
if (now - peerLastSeen[u] > VOICE_PEER_TIMEOUT_MS && !deadPeers.has(u)) {
|
|
deadPeers.add(u);
|
|
cleanupPeerMedia(u);
|
|
ghostRemoved = true;
|
|
}
|
|
}
|
|
if (ghostRemoved) {
|
|
updateVoiceUIUsers();
|
|
}
|
|
// Half-open socket watchdog + backgrounded-tab audio recovery.
|
|
if (currentVoiceWs && currentVoiceWs.readyState === WebSocket.OPEN) {
|
|
const others = voiceActiveUsers.filter(u => u !== String(window.id)).length;
|
|
// Baseline ciszy odświeżany przy przejściu 0->N uczestników: solo w
|
|
// rozmowie NIE MA żadnego ruchu przychodzącego, więc po pojawieniu się
|
|
// nowej osoby lastVoiceServerPacketAt bywa nieświeży z okresu solo.
|
|
// Bez tego resetu join drugiej osoby natychmiast spełniał warunek
|
|
// ">10s bez inbound" i rozłączał zdrowy socket (fałszywy alarm).
|
|
if (others > 0 && !voiceHadRemotePeers) lastVoiceServerPacketAt = now;
|
|
voiceHadRemotePeers = others > 0;
|
|
// Alive peers ping every 2s regardless of mute, so total inbound
|
|
// silence while others are present means the socket is dead.
|
|
if (others > 0 && now - lastVoiceServerPacketAt > VOICE_SERVER_TIMEOUT_MS) {
|
|
console.warn("Voice: no inbound traffic, forcing reconnect");
|
|
try { currentVoiceWs.close(); } catch (e) {}
|
|
} else if (audioContext && audioContext.state !== 'running') {
|
|
//Nie tylko "suspended" - iOS/Safari zna też "interrupted"; każdy
|
|
//stan != running przy żywej rozmowie wymaga próby wznowienia.
|
|
//Dokładamy też kickstart-na-geście, jeśli jeszcze nie jest uzbrojony
|
|
//(armVoiceContextKickstart sam jest idempotentny)
|
|
audioContext.resume().catch(() => {});
|
|
armVoiceContextKickstart();
|
|
}
|
|
// Safety net for the call-key handshake: if others are in the call but
|
|
// we never received the root key (raced/lost signal), ask for it
|
|
// instead of staying deaf until someone refreshes the page.
|
|
if (others > 0 && !voiceAesKeyBytes && now - lastVoiceKeyRequestAt > 4000) {
|
|
lastVoiceKeyRequestAt = now;
|
|
console.debug("Voice: requesting call key from peers");
|
|
for (const u of voiceActiveUsers) {
|
|
if (u !== String(window.id)) sendVoiceSignalToUser(u, currentVoiceCallId, true);
|
|
}
|
|
}
|
|
}
|
|
if (changed) updateVoiceUIUsers();
|
|
}, 2000);
|
|
|
|
const voiceWorkletCode = `
|
|
class AudioProcessor extends AudioWorkletProcessor {
|
|
|
|
constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
|
|
process(inputs) {
|
|
const input = inputs[0][0];
|
|
if (!input) return true;
|
|
let sumSquares = 0;
|
|
for (let i = 0; i < input.length; i++) {
|
|
let s = Math.max(-1, Math.min(1, input[i]));
|
|
sumSquares += s * s;
|
|
this.buffer[this.pointer++] = s < 0 ? s * 0x8000 : s * 0x7FFF;
|
|
if (this.pointer >= 1024) {
|
|
const rms = Math.sqrt(sumSquares / 1024);
|
|
const db = 20 * Math.log10(rms || 0.0001);
|
|
this.port.postMessage({ audioData: this.buffer.buffer, db: db },[this.buffer.buffer]);
|
|
this.buffer = new Int16Array(1024);
|
|
this.pointer = 0;
|
|
sumSquares = 0;
|
|
}
|
|
} return true;
|
|
}
|
|
}
|
|
class AudioReceiver extends AudioWorkletProcessor {
|
|
// Jitter buffer targets in samples (@48 kHz):
|
|
// PREBUF_START - initial prebuffer before first playback (~43 ms)
|
|
// PREBUF_RESUME - re-prebuffer after a starvation event (~32 ms)
|
|
// HARD_LIMIT - burst ceiling (~128 ms): snap back to target immediately
|
|
// Backlog slightly above target is drained by a gentle trim (1 sample per
|
|
// quantum) instead of letting latency creep up to the hard limit.
|
|
constructor(options) {
|
|
super();
|
|
this.users = {};
|
|
this.volumes = {};
|
|
const opts = (options && options.processorOptions) || {};
|
|
this.forward = !!opts.forward;
|
|
this.acc = new Int16Array(960); // ~20 ms @ 48 kHz
|
|
this.accLen = 0;
|
|
|
|
this.port.onmessage = (e) => {
|
|
if (e.data.action === 'clear') { this.users = {}; this.volumes = {}; return; }
|
|
if (e.data.action === 'setVolume') { this.volumes[e.data.clientId] = e.data.volume; return; }
|
|
if (e.data.action === 'remove') { delete this.users[e.data.clientId]; return; }
|
|
|
|
const { clientId, audioData } = e.data;
|
|
if (!this.users[clientId]) this.users[clientId] = { buffer: new Int16Array(65536), readPtr: 0, writePtr: 0, buffering: true, started: false };
|
|
const user = this.users[clientId];
|
|
const intData = new Int16Array(audioData);
|
|
for (let i = 0; i < intData.length; i++) {
|
|
user.buffer[user.writePtr] = intData[i];
|
|
user.writePtr = (user.writePtr + 1) % 65536;
|
|
}
|
|
};
|
|
}
|
|
process(inputs, outputs) {
|
|
const output = outputs[0][0];
|
|
if (!output) return true;
|
|
output.fill(0);
|
|
for (const id in this.users) {
|
|
const user = this.users[id];
|
|
let available = (user.writePtr - user.readPtr + 65536) % 65536;
|
|
if (user.buffering && available >= (user.started ? 1536 : 2048)) { user.buffering = false; user.started = true; }
|
|
|
|
if (!user.buffering) {
|
|
if (available < output.length) { user.buffering = true; }
|
|
else {
|
|
if (available > 6144) user.readPtr = (user.writePtr - 2048 + 65536) % 65536;
|
|
else if (available > 2049) user.readPtr = (user.readPtr + 1) % 65536;
|
|
let vol = this.volumes[id] !== undefined ? this.volumes[id] : 1.0;
|
|
for (let i = 0; i < output.length; i++) {
|
|
output[i] += (user.buffer[user.readPtr] / 32768) * vol;
|
|
user.readPtr = (user.readPtr + 1) % 65536;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (this.forward && this.port) {
|
|
for (let i = 0; i < output.length; i++) {
|
|
const s = Math.max(-1, Math.min(1, output[i]));
|
|
this.acc[this.accLen++] = s < 0 ? s * 0x8000 : s * 0x7FFF;
|
|
if (this.accLen >= this.acc.length) {
|
|
this.port.postMessage(this.acc.buffer, [this.acc.buffer]);
|
|
this.acc = new Int16Array(960);
|
|
this.accLen = 0;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
}
|
|
registerProcessor('audio-sender', AudioProcessor);
|
|
registerProcessor('audio-receiver', AudioReceiver);`;
|
|
|
|
class TaskQueue {
|
|
constructor() { this.queue = []; this.isProcessing = false; }
|
|
enqueue(task) { this.queue.push(task); this.processNext(); }
|
|
async processNext() {
|
|
if (this.isProcessing || this.queue.length === 0) return;
|
|
this.isProcessing = true;
|
|
try { await this.queue.shift()(); } catch (e) { }
|
|
this.isProcessing = false;
|
|
this.processNext();
|
|
}
|
|
clear() { this.queue = []; }
|
|
}
|
|
|
|
let voiceJoinInFlight = false;
|
|
|
|
//Ograniczony log diagnostyczny toru głosu - pierwsze kilka wystąpień danego
|
|
//problemu trafia do konsoli, dalej cicho (brak spamu przy długich rozmowach)
|
|
let voiceErrorLogsLeft = 6;
|
|
function voiceLogError(where, err) {
|
|
if (voiceErrorLogsLeft > 0) {
|
|
voiceErrorLogsLeft--;
|
|
console.warn("Voice: error [" + where + "]", err);
|
|
}
|
|
}
|
|
|
|
//Wznawia AudioContext przy pierwszym geście użytkownika (polityka autoplay
|
|
//może zablokować kontekst stworzony po async-owych krokach dołączania do
|
|
//rozmowy). Listenery są one-shot i zdejmują się nawzajem.
|
|
let voiceCtxKickstartHandler = null;
|
|
function armVoiceContextKickstart() {
|
|
if (!audioContext) return;
|
|
if (voiceCtxKickstartHandler) return; //już uzbrojone
|
|
voiceCtxKickstartHandler = () => {
|
|
audioContext.resume({}).then(() => {
|
|
if (audioContext.state === 'running') {
|
|
console.warn("Voice: AudioContext resumed after user gesture");
|
|
document.removeEventListener('click', voiceCtxKickstartHandler);
|
|
document.removeEventListener('touchend', voiceCtxKickstartHandler);
|
|
document.removeEventListener('keydown', voiceCtxKickstartHandler);
|
|
voiceCtxKickstartHandler = null;
|
|
}
|
|
}).catch(() => {});
|
|
};
|
|
document.addEventListener('click', voiceCtxKickstartHandler);
|
|
document.addEventListener('touchend', voiceCtxKickstartHandler);
|
|
document.addEventListener('keydown', voiceCtxKickstartHandler);
|
|
}
|
|
|
|
async function initiateVoiceCall(roomId = null) {
|
|
if (currentVoiceWs || voiceJoinInFlight) {
|
|
showBlahNotification("error:already.in.call");
|
|
return;
|
|
}
|
|
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 {
|
|
showAction("action.call.init", "callinit");
|
|
const joined = await requestVoiceJoin();
|
|
clearAction("callinit");
|
|
|
|
if (joined) {
|
|
await startVoiceSession(joined.serverUrl, joined.ticket);
|
|
} else {
|
|
//S14: nieudany join nie może zostawiać ustawionego currentVoiceCallId/
|
|
//Type - uzbrojony gate sygnalizacji pozwalał obcemu na wstrzyknięcie
|
|
//"klucza rozmowy", a zatruty klucz przechodziłby do następnej rozmowy
|
|
currentVoiceCallId = null;
|
|
currentVoiceCallType = null;
|
|
}
|
|
} finally {
|
|
voiceJoinInFlight = false;
|
|
}
|
|
}
|
|
|
|
// Asks the main server for a voice server IP plus a fresh single-use ticket.
|
|
// The join payload carries publicId/connKey/proof - the client encrypts the
|
|
// proof with connKey (AES-GCM) so the wire never contains a usable credential.
|
|
async function requestVoiceJoin() {
|
|
let res = await fetchEncrypted("room/voice/join", JSON.stringify({
|
|
string1: currentVoiceCallType,
|
|
string2: currentVoiceCallId
|
|
}));
|
|
if (!res.startsWith("success:")) {
|
|
showBlahNotification(res);
|
|
return null;
|
|
}
|
|
const payload = res.substring("success:".length);
|
|
const parts = payload.split("|");
|
|
if (parts.length !== 4) return null;
|
|
|
|
let serverUrl = parts[0];
|
|
const [publicId, connKey, proof] = [parts[1], parts[2], parts[3]];
|
|
//epoka IV z unikalnego (single-use) publicId - każde dołączenie = rozłączna przestrzeń IV
|
|
setVoiceEpochFromTicket(publicId);
|
|
if (!serverUrl.startsWith("ws://") && !serverUrl.startsWith("wss://")) {
|
|
serverUrl = serverUrl.includes("localhost") || serverUrl.includes("127.0.0.1") ? "ws://" + serverUrl : "wss://" + serverUrl;
|
|
}
|
|
|
|
try {
|
|
const keyBytes = b64uToBytes(connKey);
|
|
const key = await crypto.subtle.importKey("raw", keyBytes, "AES-GCM", false, ["encrypt"]);
|
|
const iv = crypto.getRandomValues(new Uint8Array(12));
|
|
const ct = new Uint8Array(await crypto.subtle.encrypt({name: "AES-GCM", iv}, key, b64uToBytes(proof)));
|
|
const ticket = `${publicId}.${bytesToB64u(iv)}.${bytesToB64u(ct)}`;
|
|
return {serverUrl, ticket};
|
|
} catch (e) {
|
|
console.warn("Voice: failed to build ticket frame", e);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function b64uToBytes(s) {
|
|
const bin = atob(s.replace(/-/g, "+").replace(/_/g, "/"));
|
|
const out = new Uint8Array(bin.length);
|
|
for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
|
|
return out;
|
|
}
|
|
|
|
function bytesToB64u(a) {
|
|
let bin = "";
|
|
for (const byte of a) bin += String.fromCharCode(byte);
|
|
return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
|
|
}
|
|
|
|
async function startVoiceSession(serverUrl, ticket) {
|
|
if (!ticket) throw new Error("missing voice ticket");
|
|
// Single-session invariant: a stale socket (e.g. a double-fired join)
|
|
// must be replaced BEFORE its onopen sends the same ticket twice -
|
|
// otherwise the duplicate validation burns the single-use ticket.
|
|
if (currentVoiceWs) {
|
|
try { currentVoiceWs.onclose = null; currentVoiceWs.close(); } catch (e) {}
|
|
currentVoiceWs = null;
|
|
}
|
|
const myTicket = ticket; // captured PER INVOCATION - the global may be
|
|
// overwritten by a racing second join, and reading it inside onopen made
|
|
// both sockets send the same (already consumed) ticket.
|
|
showVoiceUI();
|
|
updateVoiceUIUsers();
|
|
setVoiceStatus("connecting");
|
|
updateVoiceChatTitle();
|
|
|
|
try {
|
|
const wsUrl = new URL(serverUrl);
|
|
if (!wsUrl.pathname.endsWith("/ws")) {
|
|
wsUrl.pathname = (wsUrl.pathname === "/" ? "" : wsUrl.pathname) + "/ws";
|
|
}
|
|
wsUrl.searchParams.set("room", currentVoiceCallId);
|
|
wsUrl.searchParams.set("userId", window.id);
|
|
|
|
currentVoiceWs = new WebSocket(wsUrl.toString());
|
|
currentVoiceWs.binaryType = 'arraybuffer';
|
|
|
|
currentVoiceWs.onopen = async () => {
|
|
// Ticket must be the very first frame - the voice server
|
|
// authenticates the connection before joining it to the room.
|
|
voiceSocketOpenedAt = Date.now();
|
|
console.debug("Voice: sending ticket", String(myTicket).split(".")[0]);
|
|
currentVoiceWs.send(myTicket);
|
|
|
|
setVoiceStatus("connected");
|
|
let btn = document.getElementById("voice-btn-mic");
|
|
if (btn) {
|
|
if (isMicMuted) btn.classList.add("voice-btn-danger");
|
|
else btn.classList.remove("voice-btn-danger");
|
|
}
|
|
|
|
const fetchUsers = async () => {
|
|
if (!currentVoiceWs || currentVoiceWs.readyState !== WebSocket.OPEN || !currentVoiceCallId) return;
|
|
try {
|
|
const baseUrl = currentVoiceWs.url.split('/ws')[0];
|
|
const httpUrl = baseUrl.replace('ws:', 'http:').replace('wss:', 'https:');
|
|
const t0 = performance.now();
|
|
const res = await fetch(`${httpUrl}/room/users?room=${currentVoiceCallId}`);
|
|
const usersRaw = await res.json();
|
|
voicePingMs = Math.round(performance.now() - t0);
|
|
updateVoicePing();
|
|
const rawUsers = usersRaw.map(u => String(u));
|
|
//Serwer jest źródłem prawdy o składzie - nie filtrujemy po
|
|
//deadPeers (audyt S15: ukryty peer nadal dostaje audio)
|
|
for (const gone of [...deadPeers]) {
|
|
if (!rawUsers.includes(gone)) deadPeers.delete(gone);
|
|
}
|
|
const users = rawUsers;
|
|
let changed = (users.length !== voiceActiveUsers.length);
|
|
for(let u of users) if(!voiceActiveUsers.includes(u)) changed = true;
|
|
if(changed) {
|
|
voiceActiveUsers = users;
|
|
updateVoiceUIUsers();
|
|
}
|
|
} catch (e) {}
|
|
};
|
|
fetchUsers();
|
|
//The voice-server roster is joined only AFTER ticket validation (an
|
|
//HTTP roundtrip to the main server), so the immediate fetch can still
|
|
//miss us - retry quickly until our own tile shows up instead of
|
|
//staring at an empty call for the first heartbeat.
|
|
if (voiceRosterRetryTimer) clearInterval(voiceRosterRetryTimer);
|
|
let rosterTries = 0;
|
|
voiceRosterRetryTimer = setInterval(() => {
|
|
if (!currentVoiceWs || currentVoiceWs.readyState !== WebSocket.OPEN ||
|
|
voiceActiveUsers.includes(String(window.id)) || ++rosterTries > 12) {
|
|
clearInterval(voiceRosterRetryTimer);
|
|
voiceRosterRetryTimer = null;
|
|
return;
|
|
}
|
|
fetchUsers();
|
|
}, 400);
|
|
|
|
voiceReconnectAttempts = 0;
|
|
lastVoiceServerPacketAt = Date.now();
|
|
if (voicePingTimer) clearInterval(voicePingTimer);
|
|
voicePingTimer = setInterval(sendVoicePing, VOICE_PING_INTERVAL_MS);
|
|
|
|
//S16: getUserMedia/worklet/rezump AudioContext potrafią rzucić
|
|
//(brak uprawnień, zniknięte urządzenie) - bez obsługi zostawał
|
|
//"connected" zombie-call ze spalonym single-use ticketem i bez
|
|
//mikrofonu, bez powiadomienia i bez recovery
|
|
try {
|
|
// Reconnects reuse the live mic stream - only capture a new one
|
|
// when the previous is gone (full teardown or track ended).
|
|
if (!micStream || micStream.getTracks().some(t => t.readyState !== 'live')) {
|
|
micStream = await navigator.mediaDevices.getUserMedia(buildVoiceMicConstraints(voiceSettings.micId));
|
|
if (micSourceNode) { try { micSourceNode.disconnect(); } catch (e) {} micSourceNode = null; }
|
|
}
|
|
|
|
const nativeRouting = getNativeVoiceRouting();
|
|
if (nativeRouting && nativeRouting.startCall) {
|
|
try { await nativeRouting.startCall(); } catch (e) {}
|
|
}
|
|
|
|
if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)({sampleRate: 48000});
|
|
if (!isAudioWorkletLoaded) {
|
|
await audioContext.audioWorklet.addModule(URL.createObjectURL(new Blob([voiceWorkletCode], {type: 'application/javascript'})));
|
|
senderNode = new AudioWorkletNode(audioContext, 'audio-sender');
|
|
const forwardPcm = !!(getNativeVoiceRouting() && isMobileVoiceDevice());
|
|
receiverNode = new AudioWorkletNode(audioContext, 'audio-receiver', {processorOptions: {forward: forwardPcm}});
|
|
screenReceiverNode = new AudioWorkletNode(audioContext, 'audio-receiver');
|
|
isAudioWorkletLoaded = true;
|
|
}
|
|
if (audioContext.state !== 'running') {
|
|
try { await audioContext.resume(); } catch (e) {}
|
|
}
|
|
if (audioContext.state !== 'running') {
|
|
//Polityka autoplay / stan "interrupted": kontekst nie wstał
|
|
//samoaktualizacyjnie. Bez tego cisza w OBIE strony (mikrofon
|
|
//i głośnik żyją w tym samym kontekście), mimo że wskaźniki
|
|
//mówienia i screen share działają (nie potrzebują kontekstu).
|
|
console.warn("Voice: AudioContext not running after open (" + audioContext.state + ") - arming user-gesture kickstart");
|
|
armVoiceContextKickstart();
|
|
}
|
|
applyVoiceSpeakerSink();
|
|
setupVoiceOutput();
|
|
|
|
if (micSourceNode) {
|
|
try { micSourceNode.disconnect(); } catch (e) {}
|
|
micSourceNode = null;
|
|
}
|
|
micSourceNode = audioContext.createMediaStreamSource(micStream);
|
|
micSourceNode.connect(senderNode);
|
|
} catch (err) {
|
|
console.error("Voice: call setup failed", err);
|
|
showBlahNotification("error:call.connect.failed");
|
|
endVoiceSession();
|
|
return;
|
|
}
|
|
|
|
let vadHangover = 0;
|
|
senderNode.port.onmessage = async (e) => {
|
|
if (!currentVoiceWs || currentVoiceWs.readyState !== WebSocket.OPEN) return;
|
|
// Backpressure valve: when the socket is congested, drop mic
|
|
// frames instead of queueing them - queued audio would arrive
|
|
// minutes late and drown the connection for every stream.
|
|
if (currentVoiceWs.bufferedAmount > 256 * 1024) {
|
|
vadHangover = 0;
|
|
return;
|
|
}
|
|
const {audioData, db} = e.data;
|
|
const sensitivity = voiceSettings.sensitivity;
|
|
const percent = Math.max(0, Math.min(100, (db + 80) / 80 * 100));
|
|
|
|
let micLevelBar = document.getElementById("voice-mic-level");
|
|
let vdsLevelFill = document.getElementById("vds-sens-fill");
|
|
if (micLevelBar) micLevelBar.style.width = percent + '%';
|
|
if (vdsLevelFill) vdsLevelFill.style.width = percent + '%';
|
|
|
|
if (db >= sensitivity) vadHangover = 75;
|
|
let isSpeaking = vadHangover > 0 && !isMicMuted;
|
|
setTileSpeaking(String(window.id), isSpeaking);
|
|
|
|
if (vadHangover > 0 && !isMicMuted) {
|
|
vadHangover--;
|
|
if (micLevelBar) micLevelBar.style.backgroundColor = 'var(--big-green)';
|
|
if (vdsLevelFill) vdsLevelFill.style.backgroundColor = 'var(--big-green)';
|
|
|
|
if (!voiceMySenderCryptoKey) return;
|
|
const iv = nextVoiceIv();
|
|
const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceMySenderCryptoKey, audioData);
|
|
const payload = new Uint8Array(14 + cipher.byteLength);
|
|
payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
|
currentVoiceWs.send(payload.buffer);
|
|
} else {
|
|
if (micLevelBar) micLevelBar.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
|
|
if (vdsLevelFill) vdsLevelFill.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
|
|
}
|
|
};
|
|
};
|
|
|
|
currentVoiceWs.onmessage = async (e) => {
|
|
const arrayBuffer = e.data;
|
|
const view = new DataView(arrayBuffer);
|
|
let clientId = view.getBigUint64(0, true).toString();
|
|
|
|
// Any inbound frame proves this peer (and the socket) are alive.
|
|
lastVoiceServerPacketAt = Date.now();
|
|
peerLastSeen[clientId] = lastVoiceServerPacketAt;
|
|
if (deadPeers.has(clientId)) deadPeers.delete(clientId);
|
|
|
|
const type = view.getUint8(8);
|
|
if (type === 5) return; // liveness ping - presence already recorded
|
|
|
|
if (!voiceActiveUsers.includes(clientId) && clientId !== String(window.id)) {
|
|
const baseUrl = currentVoiceWs.url.split('/ws')[0];
|
|
const httpUrl = baseUrl.replace('ws:', 'http:').replace('wss:', 'https:');
|
|
fetch(`${httpUrl}/room/users?room=${currentVoiceCallId}`).then(res => res.json()).then(usersRaw => {
|
|
//bez filtra deadPeers - serwer jest źródłem prawdy (audyt S15)
|
|
voiceActiveUsers = usersRaw.map(u => String(u));
|
|
updateVoiceUIUsers();
|
|
}).catch(()=>{});
|
|
}
|
|
|
|
const isKeyFrame = view.getUint8(9) === 1;
|
|
const iv = new Uint8Array(arrayBuffer, 10, 12);
|
|
const ciphertext = new Uint8Array(arrayBuffer, 22);
|
|
|
|
if (!voiceAesKeyBytes) return;
|
|
|
|
//podklucz nadawcy - deterministyczny z (root, clientId)
|
|
const senderKeyPromise = getVoicePeerSenderKey(clientId);
|
|
|
|
if (type === 0 || type === 4) {
|
|
const isScreenAudio = (type === 4);
|
|
const audioId = isScreenAudio ? `${clientId}_screen` : clientId;
|
|
if (!remoteAudio[audioId]) remoteAudio[audioId] = { lastUpdate: Date.now() };
|
|
remoteAudio[audioId].lastUpdate = Date.now();
|
|
|
|
if (!audioDecryptChains[audioId]) audioDecryptChains[audioId] = new TaskQueue();
|
|
|
|
const targetReceiver = isScreenAudio ? screenReceiverNode : receiverNode;
|
|
audioDecryptChains[audioId].enqueue(async () => {
|
|
try {
|
|
const senderKey = await senderKeyPromise;
|
|
if (!senderKey) {
|
|
voiceLogError('media.nokey[' + audioId + ']', new Error('brak podklucza nadawcy - root nie zainstalowany?'));
|
|
return;
|
|
}
|
|
const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, senderKey, ciphertext);
|
|
if(targetReceiver) targetReceiver.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
|
|
|
|
setTileSpeaking(clientId, true, isScreenAudio ? `${clientId}-2` : null);
|
|
} catch (err) {
|
|
voiceLogError('media.decrypt[' + audioId + ']', err);
|
|
}
|
|
});
|
|
} else if (type === 1 || type === 2) {
|
|
const decoderId = `${clientId}-${type}`;
|
|
if (!videoDecryptChains[decoderId]) videoDecryptChains[decoderId] = new TaskQueue();
|
|
|
|
videoDecryptChains[decoderId].enqueue(async () => {
|
|
try {
|
|
const senderKey = await senderKeyPromise;
|
|
if (!senderKey) return;
|
|
const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, senderKey, ciphertext);
|
|
|
|
if (!remoteVideos[decoderId]) {
|
|
const canvas = document.createElement('canvas');
|
|
remoteVideos[decoderId] = {
|
|
lastUpdate: Date.now(),
|
|
hasKeyFrame: false,
|
|
decoder: null,
|
|
canvas: canvas
|
|
};
|
|
updateVoiceUIUsers();
|
|
}
|
|
|
|
const streamData = remoteVideos[decoderId];
|
|
streamData.lastUpdate = Date.now();
|
|
|
|
if (!streamData.decoder) {
|
|
if (!isKeyFrame) return;
|
|
const canvas = streamData.canvas;
|
|
const ctx = canvas.getContext('2d');
|
|
streamData.decoder = new VideoDecoder({
|
|
output: (frame) => {
|
|
canvas.width = frame.displayWidth;
|
|
canvas.height = frame.displayHeight;
|
|
ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);
|
|
frame.close();
|
|
},
|
|
error: e => {
|
|
if (remoteVideos[decoderId]) {
|
|
try { remoteVideos[decoderId].decoder.close(); } catch(err) {}
|
|
remoteVideos[decoderId].decoder = null;
|
|
remoteVideos[decoderId].hasKeyFrame = false;
|
|
}
|
|
}
|
|
});
|
|
streamData.decoder.configure({codec: 'av01.0.04M.08'});
|
|
streamData.hasKeyFrame = true;
|
|
}
|
|
|
|
if (!streamData.hasKeyFrame) {
|
|
if (isKeyFrame) streamData.hasKeyFrame = true;
|
|
else return;
|
|
}
|
|
|
|
const chunk = new EncodedVideoChunk({
|
|
type: isKeyFrame ? 'key' : 'delta',
|
|
timestamp: Math.trunc(performance.now() * 1000),
|
|
data: decryptedBuffer
|
|
});
|
|
|
|
try {
|
|
streamData.decoder.decode(chunk);
|
|
} catch(err) {
|
|
try { streamData.decoder.close(); } catch(e){}
|
|
streamData.decoder = null;
|
|
streamData.hasKeyFrame = false;
|
|
}
|
|
} catch (err) {}
|
|
});
|
|
} else if (type === 3) {
|
|
(async () => {
|
|
try {
|
|
const senderKey = await senderKeyPromise;
|
|
if (!senderKey) return;
|
|
const decrypted = await crypto.subtle.decrypt({name: "AES-GCM", iv}, senderKey, ciphertext);
|
|
const stoppedTypeId = new Uint8Array(decrypted)[0];
|
|
if (stoppedTypeId === 4) {
|
|
const audioId = `${clientId}_screen`;
|
|
if (remoteAudio[audioId]) {
|
|
if(audioDecryptChains[audioId]) audioDecryptChains[audioId].clear();
|
|
delete audioDecryptChains[audioId]; delete remoteAudio[audioId];
|
|
if(screenReceiverNode) screenReceiverNode.port.postMessage({ action: 'remove', clientId: audioId });
|
|
}
|
|
} else {
|
|
const decoderId = `${clientId}-${stoppedTypeId}`;
|
|
if (remoteVideos[decoderId]) {
|
|
try { if(remoteVideos[decoderId].decoder) remoteVideos[decoderId].decoder.close(); } catch (e) {}
|
|
if(videoDecryptChains[decoderId]) videoDecryptChains[decoderId].clear();
|
|
delete remoteVideos[decoderId]; delete videoDecryptChains[decoderId];
|
|
updateVoiceUIUsers();
|
|
}
|
|
}
|
|
} catch (err) {}
|
|
})();
|
|
}
|
|
};
|
|
|
|
currentVoiceWs.onclose = (ev) => {
|
|
console.debug("Voice: socket closed", JSON.stringify({ reason: ev && ev.reason, code: ev && ev.code, aliveForMs: Date.now() - voiceSocketOpenedAt }));
|
|
// Server closes with reason "Kicked" when another connection took
|
|
// our userId slot (second device/tab). Reconnecting would start an
|
|
// infinite kick-war - give up cleanly instead. Any other close
|
|
// (network drop, watchdog) is a reconnect candidate.
|
|
if (ev && ev.reason === "Kicked") {
|
|
endVoiceSession();
|
|
return;
|
|
}
|
|
// Rejected right after opening = ticket/server-key problem.
|
|
// Retrying cannot succeed - surface it instead of looping.
|
|
if (ev && ev.reason && Date.now() - voiceSocketOpenedAt < 6000) {
|
|
console.error("Voice: connection rejected by server:", ev.reason);
|
|
showBlahNotification("error:voice.ticket.rejected");
|
|
endVoiceSession();
|
|
return;
|
|
}
|
|
scheduleVoiceReconnect();
|
|
};
|
|
|
|
} catch(err) {
|
|
console.error(err);
|
|
showBlahNotification("error:call.connect.failed");
|
|
endVoiceSession();
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
//Roster rozmowy podmieniamy TYLKO dla pokoju, w którym faktycznie trwa
|
|
//nasza rozmowa (audyt S13): call_update otwartego czatu nie może wyzerować
|
|
//kafelków ani rozdzielić kluczy trwającej rozmowy w innym pokoju
|
|
if (roomId !== currentVoiceCallId) return;
|
|
let state = incomingState;
|
|
voiceActiveUsers = state;
|
|
|
|
if (currentVoiceCallId === roomId) {
|
|
let myIdStr = String(window.id);
|
|
if (!voiceAesKeyBytes && state.length === 1 && state[0] === myIdStr) {
|
|
setVoiceRootKey(crypto.getRandomValues(new Uint8Array(32)));
|
|
}
|
|
//The root key is set asynchronously - wait for it before distributing.
|
|
//Otherwise a fast second join produces [me,peer] while the derivation
|
|
//is still running, no signal is sent and the peer never gets the key
|
|
//(audio stayed broken for everyone until someone refreshed the page).
|
|
await voiceRootKeyReady;
|
|
if (voiceAesKeyBytes) {
|
|
for (let u of state) {
|
|
if (u !== myIdStr) sendVoiceSignalToUser(u, roomId);
|
|
}
|
|
} else if (state.length > 0 && Date.now() - lastVoiceKeyRequestAt > 1500) {
|
|
//Jesteśmy w rozmowie BEZ klucza (np. dołączyliśmy do trwającej) -
|
|
//nie czekamy na tick watchdoga (do 4 s), prosimy natychmiast,
|
|
//inaczej pierwsze sekundy rozmowy są u nas i u nich ciszą
|
|
lastVoiceKeyRequestAt = Date.now();
|
|
console.warn("Voice: joined keyless - requesting call key now");
|
|
for (const u of state) {
|
|
if (u !== String(window.id)) sendVoiceSignalToUser(u, roomId, true);
|
|
}
|
|
}
|
|
updateVoiceUIUsers();
|
|
|
|
for (let u in remoteAudio) {
|
|
let pureU = u.replace("_screen", "");
|
|
if (!voiceActiveUsers.includes(pureU) && pureU !== myIdStr) {
|
|
if (audioDecoders[u]) try { audioDecoders[u].close(); } catch(e){}
|
|
delete audioDecoders[u];
|
|
delete remoteAudio[u];
|
|
const rn = u.endsWith("_screen") ? screenReceiverNode : receiverNode;
|
|
if(rn) rn.port.postMessage({ action: 'remove', clientId: u });
|
|
}
|
|
}
|
|
|
|
for (let decoderId in remoteVideos) {
|
|
let pureU = decoderId.split('-')[0];
|
|
if (!voiceActiveUsers.includes(pureU) && pureU !== myIdStr) {
|
|
if (remoteVideos[decoderId].decoder) { try { remoteVideos[decoderId].decoder.close(); } catch(e){} }
|
|
if (videoDecryptChains[decoderId]) videoDecryptChains[decoderId].clear();
|
|
delete remoteVideos[decoderId];
|
|
delete videoDecryptChains[decoderId];
|
|
updateVoiceUIUsers();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
async function resolveCallerInfo(roomId) {
|
|
if (window.fetchEncrypted) {
|
|
try {
|
|
let infoPayload = await fetchEncrypted("group/info", roomId);
|
|
if (infoPayload && infoPayload.startsWith("{")) {
|
|
let info = JSON.parse(infoPayload);
|
|
if (info.string2) {
|
|
let pfpUrl = null;
|
|
if (window.getGroupAvatarUrl) {
|
|
try { pfpUrl = await getGroupAvatarUrl(roomId, info.string2); } catch (e) {}
|
|
}
|
|
return { name: info.string2, pfpUrl };
|
|
}
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
|
|
let targetId = String(roomId);
|
|
let parts = targetId.split('_');
|
|
let myId = `${window.id};${window.host}`;
|
|
if (parts.length === 2 && (parts[0] === myId || parts[1] === myId)) {
|
|
targetId = parts[0] === myId ? parts[1] : parts[0];
|
|
}
|
|
|
|
let name = window.dmUsernameCache ? window.dmUsernameCache[targetId] : null;
|
|
if (!name && window.fetchAsync) {
|
|
try {
|
|
let fetched = await window.fetchAsync(`${window.url}/idtoname?id=${targetId}`);
|
|
if (fetched && !fetched.startsWith("error:")) {
|
|
name = fetched;
|
|
if (window.dmUsernameCache) window.dmUsernameCache[targetId] = fetched;
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
|
|
let pfpUrl = window.dmPfpCache ? window.dmPfpCache[targetId] : null;
|
|
if (!pfpUrl && window.getAvatarUrl) {
|
|
try { pfpUrl = await window.getAvatarUrl(targetId, name || "User"); } catch (e) {}
|
|
if (pfpUrl && window.dmPfpCache) window.dmPfpCache[targetId] = pfpUrl;
|
|
}
|
|
return { name: (name ? name.split(':')[0] : null) || processBlah("title.unknown"), pfpUrl };
|
|
}
|
|
|
|
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
|
|
// HTML - they are assigned via textContent/src after the skeleton.
|
|
incomingUi.innerHTML = `
|
|
<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:${participantCount}`)}</span>
|
|
</div>
|
|
<div class="incoming-call-actions">
|
|
<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()">
|
|
${ICONS.close({width: "1rem", height: "1rem"})} ${processBlah("action.call.decline")}
|
|
</button>
|
|
</div>
|
|
`;
|
|
incomingUi.querySelector(".incoming-call-name").textContent = cachedName || "...";
|
|
incomingUi.querySelector(".incoming-call-avatar").src = cachedPfp || "assets/default_avatar.png";
|
|
document.body.appendChild(incomingUi);
|
|
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;
|
|
});
|
|
}
|
|
|
|
//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");
|
|
el.classList.add("hide");
|
|
setTimeout(() => el.remove(), 300);
|
|
}
|
|
|
|
function joinIncomingCall(roomId) {
|
|
dismissIncomingCall();
|
|
initiateVoiceCall(roomId);
|
|
}
|
|
|
|
async function sendVoiceSignalToUser(targetUserId, roomId, requestData = false) {
|
|
try {
|
|
let setupPayloadJson;
|
|
if (!requestData && voiceAesKeyBytes) {
|
|
let publicKeysRaw = await fetchAsync(`${url}/user/key/getpublic?id=${targetUserId}`);
|
|
let publicKeys = JSON.parse(publicKeysRaw);
|
|
let hybrid = await deriveHybridKeyToUser(publicKeys);
|
|
|
|
let encForMember = await encryptAesGcmToBase64(uint8ToBase64(voiceAesKeyBytes), hybrid.aesKeyBytes);
|
|
setupPayloadJson = JSON.stringify({
|
|
v: 1,
|
|
ctMlKem: hybrid.ciphertextMlKemBase64,
|
|
enc: encForMember
|
|
});
|
|
} else {
|
|
//Prośba o klucz rozmowy (bez sekretów) - adresat z kluczem odpowie pełnym sygnałem.
|
|
setupPayloadJson = JSON.stringify({ v: 1, needKey: true });
|
|
}
|
|
|
|
let payload = JSON.stringify({
|
|
string1: currentVoiceCallType,
|
|
string2: roomId,
|
|
string3: JSON.stringify({ to: targetUserId, from: window.id, data: setupPayloadJson })
|
|
});
|
|
await fetchEncrypted("room/signal", payload);
|
|
} catch(e) {
|
|
console.error("Failed to send voice signal", e);
|
|
}
|
|
}
|
|
|
|
async function handleRoomSignal(data) {
|
|
let parts = data.split(":");
|
|
let roomId = parts[1];
|
|
let signalStr = parts.slice(2).join(":");
|
|
let signalObj = JSON.parse(signalStr);
|
|
|
|
if (String(signalObj.to) === String(window.id) && roomId === currentVoiceCallId) {
|
|
try {
|
|
let setupData = JSON.parse(signalObj.data);
|
|
if (setupData.needKey) {
|
|
//Peer nie dostał klucza rozmowy (wygryziony/zagubiony sygnał) -
|
|
//odeślij mu go, ale tylko jeśli sami już go mamy.
|
|
if (voiceAesKeyBytes) await sendVoiceSignalToUser(signalObj.from, roomId);
|
|
return;
|
|
}
|
|
if (!voiceAesKeyBytes) {
|
|
let publicKeysRaw = await fetchAsync(`${url}/user/key/getpublic?id=${signalObj.from}`);
|
|
let otherPublicKeysObj = JSON.parse(publicKeysRaw);
|
|
let aesKeyBytes = await deriveHybridKeyFromSetup(otherPublicKeysObj, setupData.ctMlKem);
|
|
let decRoomKeyB64 = await decryptAesGcmFromBase64(setupData.enc, aesKeyBytes);
|
|
await setVoiceRootKey(base64ToUint8(decRoomKeyB64));
|
|
console.warn("Voice: call key installed (from peer " + signalObj.from + ")");
|
|
}
|
|
} catch(e) {
|
|
console.error("Signal decryption failed", e);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function resolveVoiceChatTitle() {
|
|
try {
|
|
if (currentVoiceCallType === 'groups') {
|
|
if (!currentVoiceCallId || !window.fetchEncrypted) return null;
|
|
let infoPayload = await fetchEncrypted("group/info", currentVoiceCallId);
|
|
if (infoPayload && infoPayload.startsWith("{")) {
|
|
return JSON.parse(infoPayload).string2 || null;
|
|
}
|
|
return null;
|
|
}
|
|
if (!currentVoiceCallId) return null;
|
|
let parts = String(currentVoiceCallId).split('_');
|
|
let myId = `${window.id};${window.host}`;
|
|
let targetId = parts[0] === myId ? parts[1] : parts[0];
|
|
if (!targetId) return null;
|
|
let name = window.dmUsernameCache ? window.dmUsernameCache[targetId] : null;
|
|
if (!name && window.fetchAsync) {
|
|
name = await window.fetchAsync(`${window.url}/idtoname?id=${targetId}`);
|
|
if (name && !name.startsWith("error:") && window.dmUsernameCache) window.dmUsernameCache[targetId] = name;
|
|
}
|
|
if (!name || name.startsWith("error:")) return null;
|
|
return name.split(':')[0];
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function updateVoiceChatTitle() {
|
|
let name = await resolveVoiceChatTitle();
|
|
let el = document.querySelector("#voice-header .voice-title span");
|
|
if (el && name) el.innerText = name;
|
|
}
|
|
|
|
// ===== In-call voice/device settings popup =====
|
|
let voiceDevicePopupEl = null;
|
|
let voiceLabelProbed = { mic: false, cam: false };
|
|
|
|
function hideVoiceDeviceSettings() {
|
|
if (!voiceDevicePopupEl) return;
|
|
closeOpenVoiceDropdown();
|
|
document.removeEventListener('click', closeVoiceDeviceSettingsOnOutsideClick);
|
|
let el = voiceDevicePopupEl;
|
|
voiceDevicePopupEl = null;
|
|
el.classList.remove('show');
|
|
const settingsBtn = document.getElementById('voice-btn-settings');
|
|
if (settingsBtn) settingsBtn.classList.remove('active');
|
|
setTimeout(() => el.remove(), 250);
|
|
}
|
|
|
|
function closeVoiceDeviceSettingsOnOutsideClick(ev) {
|
|
if (!voiceDevicePopupEl) return;
|
|
const t = ev.target;
|
|
if (voiceDevicePopupEl.contains(t)) return;
|
|
// Clicks in the floating dropdown layer or its anchor keep the popup open.
|
|
if (openVoiceDropdown && (openVoiceDropdown.dd.contains(t) || openVoiceDropdown.anchor.contains(t))) return;
|
|
hideVoiceDeviceSettings();
|
|
}
|
|
|
|
function categorizeVoiceDevices(devices) {
|
|
const name = (list, fallbackBase) => list.map((d, i) => ({ deviceId: d.deviceId, label: d.label || `${fallbackBase} ${i + 1}` }));
|
|
return {
|
|
mics: name(devices.filter(d => d.kind === 'audioinput'), 'Microphone'),
|
|
cams: name(devices.filter(d => d.kind === 'videoinput'), 'Camera'),
|
|
speakers: name(devices.filter(d => d.kind === 'audiooutput'), 'Speaker')
|
|
};
|
|
}
|
|
|
|
// Fast - safe to call on every popup open, blocks the UI for milliseconds.
|
|
async function enumerateVoiceDevices() {
|
|
try {
|
|
return categorizeVoiceDevices(await navigator.mediaDevices.enumerateDevices());
|
|
} catch (e) {
|
|
return { mics: [], cams: [], speakers: [] };
|
|
}
|
|
}
|
|
|
|
// Labels are only exposed after permission was granted at least once. Probes
|
|
// (a short getUserMedia per kind) can take seconds - callers must render the
|
|
// popup first and only refresh with this afterwards.
|
|
async function ensureVoiceDeviceLabels() {
|
|
let devices = [];
|
|
try { devices = await navigator.mediaDevices.enumerateDevices(); } catch (e) { return null; }
|
|
|
|
const micUnlabeled = devices.some(d => d.kind === 'audioinput' && !d.label);
|
|
const camUnlabeled = devices.some(d => d.kind === 'videoinput' && !d.label);
|
|
let probed = false;
|
|
|
|
if (micUnlabeled && !voiceLabelProbed.mic) {
|
|
voiceLabelProbed.mic = true;
|
|
probed = true;
|
|
try { const t = await navigator.mediaDevices.getUserMedia({ audio: true }); t.getTracks().forEach(t2 => t2.stop()); } catch (e) {}
|
|
}
|
|
if (camUnlabeled && !voiceLabelProbed.cam) {
|
|
voiceLabelProbed.cam = true;
|
|
probed = true;
|
|
try { const t = await navigator.mediaDevices.getUserMedia({ video: true }); t.getTracks().forEach(t2 => t2.stop()); } catch (e) {}
|
|
}
|
|
|
|
return probed ? enumerateVoiceDevices() : null;
|
|
}
|
|
|
|
function restartVoiceCamIfActive() {
|
|
if (!camControl) return;
|
|
camControl.stop();
|
|
// stop() is async (it releases the camera after awaits) - poll until the
|
|
// control is actually gone before reopening, otherwise Android's camera
|
|
// HAL is still busy and getUserMedia fails with NotReadableError.
|
|
const attempt = (tries) => {
|
|
setTimeout(() => {
|
|
if (!currentVoiceWs) return;
|
|
if (camControl) { if (tries < 20) attempt(tries + 1); return; }
|
|
toggleVoiceCam();
|
|
}, 300);
|
|
};
|
|
attempt(0);
|
|
}
|
|
|
|
// Selects render their option list as a fixed-position layer attached to
|
|
// <body> (portal) so it can escape the settings popup bounds and is never
|
|
// clipped by the scrolling popup body or distorted by its transform.
|
|
let openVoiceDropdown = null;
|
|
|
|
const voiceDropdownOutsideCloser = (ev) => {
|
|
if (!openVoiceDropdown) return;
|
|
const t = ev.target;
|
|
if (openVoiceDropdown.dd.contains(t) || openVoiceDropdown.anchor.contains(t)) return;
|
|
closeOpenVoiceDropdown();
|
|
};
|
|
|
|
function closeOpenVoiceDropdown() {
|
|
const cur = openVoiceDropdown;
|
|
if (!cur) return;
|
|
openVoiceDropdown = null;
|
|
cur.dd.classList.remove('vds-open');
|
|
cur.anchor.classList.remove('open');
|
|
setTimeout(() => cur.dd.remove(), 220);
|
|
document.removeEventListener('click', voiceDropdownOutsideCloser, true);
|
|
window.removeEventListener('resize', closeOpenVoiceDropdown);
|
|
const bodyEl = document.getElementById('vds-body');
|
|
if (bodyEl) bodyEl.removeEventListener('scroll', closeOpenVoiceDropdown);
|
|
}
|
|
|
|
function openVoiceFloatingDropdown(anchor, dd) {
|
|
closeOpenVoiceDropdown();
|
|
document.body.appendChild(dd);
|
|
|
|
const margin = 8;
|
|
const rect = anchor.getBoundingClientRect();
|
|
dd.style.width = 'auto';
|
|
dd.style.minWidth = rect.width + 'px';
|
|
dd.style.left = Math.min(Math.max(rect.left, margin), Math.max(margin, window.innerWidth - rect.width - margin)) + 'px';
|
|
|
|
const ddH = dd.offsetHeight;
|
|
let top = rect.bottom + 6;
|
|
if (top + ddH > window.innerHeight - margin) {
|
|
top = Math.max(margin, rect.top - ddH - 6);
|
|
}
|
|
dd.style.top = top + 'px';
|
|
|
|
anchor.classList.add('open');
|
|
requestAnimationFrame(() => dd.classList.add('vds-open'));
|
|
openVoiceDropdown = { dd, anchor };
|
|
|
|
setTimeout(() => {
|
|
document.addEventListener('click', voiceDropdownOutsideCloser, true);
|
|
window.addEventListener('resize', closeOpenVoiceDropdown);
|
|
const bodyEl = document.getElementById('vds-body');
|
|
if (bodyEl) bodyEl.addEventListener('scroll', closeOpenVoiceDropdown);
|
|
}, 0);
|
|
}
|
|
|
|
function createVoiceSelect(options, selectedValue, onChange) {
|
|
const wrap = document.createElement('div');
|
|
wrap.className = 'custom-select';
|
|
const value = document.createElement('div');
|
|
value.className = 'custom-select-value';
|
|
const span = document.createElement('span');
|
|
let current = String(options.find(o => String(o.value) === String(selectedValue))?.value ?? '');
|
|
const currentOption = () => options.find(o => String(o.value) === current) || options[0];
|
|
span.textContent = currentOption() ? currentOption().label : '';
|
|
value.appendChild(span);
|
|
value.insertAdjacentHTML('beforeend', ICONS.chevronDown({ className: 'chevron', style: 'width: 1.1rem; height: 1.1rem; opacity: 0.7;' }));
|
|
|
|
value.onclick = () => {
|
|
if (openVoiceDropdown && openVoiceDropdown.anchor === wrap) {
|
|
closeOpenVoiceDropdown();
|
|
return;
|
|
}
|
|
const dd = document.createElement('div');
|
|
dd.className = 'custom-select-options vds-floating';
|
|
for (const opt of options) {
|
|
const el = document.createElement('div');
|
|
el.className = 'custom-select-option';
|
|
el.textContent = opt.label;
|
|
if (String(opt.value) === current) el.classList.add('selected');
|
|
el.onclick = (ev) => {
|
|
// Keep the outside-click closer from treating this as an
|
|
// outside click - the option layer lives outside the popup.
|
|
ev.stopPropagation();
|
|
current = String(opt.value);
|
|
span.textContent = opt.label;
|
|
closeOpenVoiceDropdown();
|
|
onChange(current);
|
|
};
|
|
dd.appendChild(el);
|
|
}
|
|
openVoiceFloatingDropdown(wrap, dd);
|
|
};
|
|
|
|
wrap.appendChild(value);
|
|
return wrap;
|
|
}
|
|
|
|
function voiceSettingRow(labelText, controlEl) {
|
|
const row = document.createElement('div');
|
|
row.className = 'vds-row';
|
|
const label = document.createElement('label');
|
|
label.textContent = labelText;
|
|
row.appendChild(label);
|
|
row.appendChild(controlEl);
|
|
return row;
|
|
}
|
|
|
|
function buildQualityFpsGrid(mediaTypeId) {
|
|
const grid = document.createElement('div');
|
|
grid.className = 'vds-grid';
|
|
const resOptions = VOICE_RES_OPTIONS.slice();
|
|
const fpsOptions = VOICE_FPS_OPTIONS.map(f => ({ value: f, label: `${f} FPS` }));
|
|
const cfg = getVoiceMediaConfig(mediaTypeId);
|
|
|
|
const resWrap = document.createElement('div');
|
|
resWrap.className = 'vds-cell';
|
|
const resLabel = document.createElement('label');
|
|
resLabel.textContent = processBlah(mediaTypeId === 1 ? 'label.voice.camera.quality' : 'label.voice.screen.quality');
|
|
const resSelect = createVoiceSelect(resOptions, cfg.res, v => {
|
|
if (mediaTypeId === 1) {
|
|
voiceSettings.camRes = v;
|
|
saveVoiceSettings();
|
|
// Size changes reopen the camera cleanly - mutating capture size
|
|
// mid-stream makes Android cameras flicker between sensor modes.
|
|
restartVoiceCamIfActive();
|
|
} else {
|
|
voiceSettings.screenRes = v;
|
|
saveVoiceSettings();
|
|
}
|
|
});
|
|
resWrap.appendChild(resLabel);
|
|
resWrap.appendChild(resSelect);
|
|
|
|
const fpsWrap = document.createElement('div');
|
|
fpsWrap.className = 'vds-cell';
|
|
const fpsLabel = document.createElement('label');
|
|
fpsLabel.textContent = processBlah(mediaTypeId === 1 ? 'label.voice.camera.fps' : 'label.voice.screen.fps');
|
|
const fpsSelect = createVoiceSelect(fpsOptions, cfg.fps, v => {
|
|
if (mediaTypeId === 1) {
|
|
voiceSettings.camFps = parseInt(v);
|
|
saveVoiceSettings();
|
|
// Mid-stream frame-rate renegotiation can make Android cameras
|
|
// wander between sensor modes (aspect ratio flicker) - reopen
|
|
// cleanly instead, same as resolution changes.
|
|
restartVoiceCamIfActive();
|
|
} else {
|
|
voiceSettings.screenFps = parseInt(v);
|
|
saveVoiceSettings();
|
|
}
|
|
});
|
|
fpsWrap.appendChild(fpsLabel);
|
|
fpsWrap.appendChild(fpsSelect);
|
|
|
|
grid.appendChild(resWrap);
|
|
grid.appendChild(fpsWrap);
|
|
return grid;
|
|
}
|
|
|
|
function clampVoiceDevicePopupToViewport(popup) {
|
|
const W = window.innerWidth, H = window.innerHeight;
|
|
const w = popup.offsetWidth, h = popup.offsetHeight;
|
|
let left = Math.round((W - w) / 2), top = Math.round((H - h) / 2);
|
|
left = Math.min(Math.max(left, 8), Math.max(8, W - w - 8));
|
|
top = Math.min(Math.max(top, 8), Math.max(8, H - h - 8));
|
|
popup.style.left = left + 'px';
|
|
popup.style.top = top + 'px';
|
|
}
|
|
|
|
// Centered via explicit px coordinates (not CSS translate) so the opening
|
|
// animation never shifts the popup and dragging is a plain left/top change.
|
|
function makeVoiceDeviceSettingsDraggable(popup) {
|
|
const header = popup.querySelector('#vds-header');
|
|
let dragging = false, startX = 0, startY = 0, startL = 0, startT = 0;
|
|
|
|
header.addEventListener('pointerdown', (e) => {
|
|
if (e.button !== undefined && e.button !== 0) return;
|
|
if (e.target.closest('#vds-close')) return;
|
|
closeOpenVoiceDropdown();
|
|
dragging = true;
|
|
try { header.setPointerCapture(e.pointerId); } catch (err) {}
|
|
const rect = popup.getBoundingClientRect();
|
|
startL = rect.left; startT = rect.top;
|
|
startX = e.clientX; startY = e.clientY;
|
|
e.preventDefault();
|
|
});
|
|
header.addEventListener('pointermove', (e) => {
|
|
if (!dragging) return;
|
|
const W = window.innerWidth, H = window.innerHeight;
|
|
let l = startL + (e.clientX - startX);
|
|
let t = startT + (e.clientY - startY);
|
|
l = Math.min(Math.max(l, 8), Math.max(8, W - popup.offsetWidth - 8));
|
|
t = Math.min(Math.max(t, 8), Math.max(8, H - popup.offsetHeight - 8));
|
|
popup.style.left = l + 'px';
|
|
popup.style.top = t + 'px';
|
|
});
|
|
const stopDrag = () => { dragging = false; };
|
|
header.addEventListener('pointerup', stopDrag);
|
|
header.addEventListener('pointercancel', stopDrag);
|
|
}
|
|
|
|
function buildVoiceSettingsBody(body, nativeRouting, devices) {
|
|
const deviceOptions = (list) => [{ value: '', label: processBlah('label.voice.default') }].concat(list.map(d => ({ value: d.deviceId, label: d.label })));
|
|
|
|
// Microphone - switching mid-call swaps the captured track live.
|
|
body.appendChild(voiceSettingRow(processBlah('label.voice.microphone'),
|
|
createVoiceSelect(deviceOptions(devices.mics), voiceSettings.micId, v => {
|
|
voiceSettings.micId = v;
|
|
saveVoiceSettings();
|
|
switchVoiceMic(v);
|
|
})
|
|
));
|
|
|
|
// Output device - not available with native Android routing (the OS owns
|
|
// the call audio path there).
|
|
if (!nativeRouting && devices.speakers.length > 0) {
|
|
body.appendChild(voiceSettingRow(processBlah('label.voice.speaker'),
|
|
createVoiceSelect(deviceOptions(devices.speakers), voiceSettings.speakerId, v => {
|
|
voiceSettings.speakerId = v;
|
|
saveVoiceSettings();
|
|
applyVoiceSpeakerSink();
|
|
})
|
|
));
|
|
}
|
|
|
|
// Camera device
|
|
body.appendChild(voiceSettingRow(processBlah('label.voice.camera'),
|
|
createVoiceSelect(deviceOptions(devices.cams), voiceSettings.camId, v => {
|
|
voiceSettings.camId = v;
|
|
saveVoiceSettings();
|
|
restartVoiceCamIfActive();
|
|
})
|
|
));
|
|
|
|
// Quality/FPS - picked up live by the encoder config check.
|
|
body.appendChild(buildQualityFpsGrid(1));
|
|
|
|
// Screen share quality/FPS
|
|
body.appendChild(buildQualityFpsGrid(2));
|
|
|
|
// Mic input sensitivity (VAD threshold)
|
|
const sensPercent = (voiceSettings.sensitivity + 80) / 80 * 100;
|
|
const sensRow = document.createElement('div');
|
|
sensRow.className = 'vds-row';
|
|
sensRow.innerHTML = `
|
|
<label>${processBlah('label.voice.sensitivity')} <span id="vds-sens-val">${voiceSettings.sensitivity} dB</span></label>
|
|
<div class="vds-sens-meter">
|
|
<div class="vds-sens-fill" id="vds-sens-fill"></div>
|
|
<div class="vds-sens-mark" id="vds-sens-mark" style="left: ${sensPercent}%"></div>
|
|
<input type="range" id="vds-sens-slider" min="-80" max="0" step="1" value="${voiceSettings.sensitivity}">
|
|
</div>
|
|
`;
|
|
body.appendChild(sensRow);
|
|
const sliderEl = sensRow.querySelector('#vds-sens-slider');
|
|
const applySensitivity = (raw) => {
|
|
const v = Math.max(-80, Math.min(0, Math.round(raw)));
|
|
voiceSettings.sensitivity = v;
|
|
saveVoiceSettings();
|
|
const valEl = document.getElementById('vds-sens-val');
|
|
const markEl = document.getElementById('vds-sens-mark');
|
|
if (valEl) valEl.innerText = `${v} dB`;
|
|
if (markEl) markEl.style.left = ((v + 80) / 80 * 100) + '%';
|
|
};
|
|
// Native touch-dragging of range thumbs is unreliable inside the WebView -
|
|
// drive touch/pen drags explicitly from pointer events. Mouse stays native.
|
|
const applyFromPointer = (e) => {
|
|
const rect = sliderEl.getBoundingClientRect();
|
|
if (rect.width <= 0) return;
|
|
const pct = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
|
|
applySensitivity(-80 + pct * 80);
|
|
sliderEl.value = String(voiceSettings.sensitivity);
|
|
};
|
|
sliderEl.addEventListener('pointerdown', (e) => {
|
|
if (e.pointerType === 'mouse') return;
|
|
e.preventDefault(); // own the gesture - no native range handling
|
|
try { sliderEl.setPointerCapture(e.pointerId); } catch (err) {}
|
|
applyFromPointer(e);
|
|
});
|
|
sliderEl.addEventListener('pointermove', (e) => {
|
|
if (e.pointerType === 'mouse') return;
|
|
try { if (!sliderEl.hasPointerCapture(e.pointerId)) return; } catch (err) { return; }
|
|
applyFromPointer(e);
|
|
});
|
|
sliderEl.addEventListener('pointerup', (e) => {
|
|
try { if (sliderEl.hasPointerCapture(e.pointerId)) sliderEl.releasePointerCapture(e.pointerId); } catch (err) {}
|
|
});
|
|
sliderEl.oninput = function () { applySensitivity(parseInt(this.value)); };
|
|
}
|
|
|
|
window.showVoiceDeviceSettings = async function (e) {
|
|
if (e) e.stopPropagation();
|
|
if (voiceDevicePopupEl) { hideVoiceDeviceSettings(); return; }
|
|
if (!voiceUiContainer) return;
|
|
|
|
const nativeRouting = getNativeVoiceRouting();
|
|
const popup = document.createElement('div');
|
|
popup.id = 'voice-device-settings';
|
|
popup.innerHTML = `
|
|
<div id="vds-header">
|
|
<span>${ICONS.settings({width: "1rem", height: "1rem"})} ${processBlah("action.call.settings")}</span>
|
|
<button id="vds-close">${ICONS.close({width: "1rem", height: "1rem"})}</button>
|
|
</div>
|
|
<div id="vds-body"></div>
|
|
`;
|
|
// Hidden until positioned: base CSS keeps opacity 0 without .show.
|
|
popup.style.left = '0px';
|
|
popup.style.top = '0px';
|
|
document.body.appendChild(popup);
|
|
voiceDevicePopupEl = popup;
|
|
makeVoiceDeviceSettingsDraggable(popup);
|
|
popup.querySelector('#vds-close').onclick = hideVoiceDeviceSettings;
|
|
|
|
const body = popup.querySelector('#vds-body');
|
|
|
|
// Show immediately with a fast enumeration - never block on getUserMedia
|
|
// label probes here, otherwise taps land on nothing and feel ignored.
|
|
let devices = await enumerateVoiceDevices();
|
|
if (!voiceDevicePopupEl || voiceDevicePopupEl !== popup) { popup.remove(); return; }
|
|
|
|
buildVoiceSettingsBody(body, nativeRouting, devices);
|
|
|
|
clampVoiceDevicePopupToViewport(popup);
|
|
requestAnimationFrame(() => requestAnimationFrame(() => popup.classList.add('show')));
|
|
const settingsBtn = document.getElementById('voice-btn-settings');
|
|
if (settingsBtn) settingsBtn.classList.add('active');
|
|
document.addEventListener('click', closeVoiceDeviceSettingsOnOutsideClick);
|
|
|
|
// Upgrade generic labels ("Camera 1") in the background once probed.
|
|
const refreshed = await ensureVoiceDeviceLabels();
|
|
if (refreshed && voiceDevicePopupEl === popup) {
|
|
closeOpenVoiceDropdown();
|
|
body.innerHTML = '';
|
|
buildVoiceSettingsBody(body, nativeRouting, refreshed);
|
|
}
|
|
};
|
|
|
|
function showVoiceUI() {
|
|
if (voiceUiContainer) return;
|
|
|
|
voiceUiContainer = document.createElement("div");
|
|
voiceUiContainer.id = "voice-call-popup";
|
|
|
|
voiceUiContainer.innerHTML = `
|
|
<div id="voice-header">
|
|
<div class="voice-title">
|
|
${ICONS.call({width: "1.1rem", height: "1.1rem"})}
|
|
<span>${processBlah("title.voice.chat")}</span>
|
|
</div>
|
|
<div id="voice-status" class="connecting">
|
|
<span class="status-dot"></span>
|
|
<span class="status-ping" id="voice-ping"></span>
|
|
<span class="voice-status-text">${processBlah("status.voice.connecting")}</span>
|
|
</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="${processBlah("action.call.mute")}">
|
|
${ICONS.mic({width: "1.4rem", height: "1.4rem"})}
|
|
</button>
|
|
<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="${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-settings" class="voice-btn" onclick="showVoiceDeviceSettings(event)" title="${processBlah("action.call.settings")}">
|
|
${ICONS.settings({width: "1.3rem", height: "1.3rem"})}
|
|
</button>
|
|
${(isMobileVoiceDevice() && getNativeVoiceRouting()) ? `<button id="voice-btn-speaker" class="voice-btn${isVoiceSpeakerMode ? " voice-btn-active" : ""}" onclick="toggleVoiceSpeakerMode()" title="${processBlah("action.call.speaker")}">
|
|
${ICONS.speaker({width: "1.4rem", height: "1.4rem"})}
|
|
</button>` : ""}
|
|
<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>
|
|
`;
|
|
|
|
document.body.appendChild(voiceUiContainer);
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => voiceUiContainer.classList.add("show"));
|
|
});
|
|
|
|
let header = document.getElementById("voice-header");
|
|
let startX, startY, initialLeft, initialTop;
|
|
|
|
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;
|
|
startX = e.clientX;
|
|
startY = e.clientY;
|
|
voiceUiContainer.style.right = "auto";
|
|
voiceUiContainer.style.bottom = "auto";
|
|
voiceUiContainer.style.left = initialLeft + "px";
|
|
voiceUiContainer.style.top = initialTop + "px";
|
|
clampVoiceWindowToViewport(voiceUiContainer);
|
|
});
|
|
|
|
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);
|
|
});
|
|
|
|
let stopDrag = () => { voiceDragState = false; };
|
|
header.addEventListener('pointerup', stopDrag);
|
|
header.addEventListener('pointercancel', stopDrag);
|
|
|
|
ensureVoiceFooterFits(voiceUiContainer);
|
|
|
|
ensureVoiceGridObserver();
|
|
|
|
setupVoiceWindowResize();
|
|
}
|
|
|
|
// Raises the popup's min-width so the footer buttons always fit with the same
|
|
// side padding the footer uses, regardless of how many buttons are rendered.
|
|
function ensureVoiceFooterFits(popupEl) {
|
|
let footer = popupEl.querySelector("#voice-footer");
|
|
if (!footer) return;
|
|
const cs = getComputedStyle(footer);
|
|
let need = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
|
|
const kids = Array.from(footer.children);
|
|
const gap = parseFloat(cs.columnGap) || parseFloat(cs.gap) || 0;
|
|
kids.forEach((kid, i) => {
|
|
if (i > 0) need += gap;
|
|
need += kid.offsetWidth;
|
|
});
|
|
const bcs = getComputedStyle(popupEl);
|
|
need += ((parseFloat(bcs.borderLeftWidth) || 0) + (parseFloat(bcs.borderRightWidth) || 0));
|
|
if (need > 0) {
|
|
popupEl.style.minWidth = Math.ceil(need) + "px";
|
|
clampVoiceWindowToViewport(popupEl);
|
|
}
|
|
}
|
|
|
|
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() {
|
|
let container = document.getElementById("voice-users");
|
|
if (!container) return;
|
|
|
|
for (let u of voiceActiveUsers) {
|
|
let div = document.getElementById(`voice-tile-${u}`);
|
|
if (!div) {
|
|
div = document.createElement("div");
|
|
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>
|
|
<div class="voice-tile-icons" id="voice-icons-${u}"></div>
|
|
`;
|
|
container.appendChild(div);
|
|
}
|
|
|
|
let authorName = window.dmUsernameCache ? window.dmUsernameCache[u] : null;
|
|
if (!authorName && window.fetchAsync) {
|
|
authorName = u;
|
|
window.fetchAsync(`${window.url}/idtoname?id=${u}`).then(async fullUsername => {
|
|
if (fullUsername && !fullUsername.startsWith("error:")) {
|
|
if (window.dmUsernameCache) window.dmUsernameCache[u] = fullUsername;
|
|
if (window.dmPfpCache && window.getAvatarUrl) window.dmPfpCache[u] = await window.getAvatarUrl(u, fullUsername);
|
|
updateVoiceUIUsers();
|
|
}
|
|
});
|
|
}
|
|
let resolvedName = authorName && authorName !== u ? authorName : null;
|
|
if (!resolvedName && u === String(window.id) && window.username) resolvedName = window.host ? `${window.username}:${window.host}` : window.username;
|
|
|
|
let avatarRes = window.dmPfpCache ? window.dmPfpCache[u] : null;
|
|
let avatarUrl = avatarRes ? avatarRes : "assets/default_avatar.png";
|
|
|
|
if (!avatarRes && window.getAvatarUrl) {
|
|
//Nie podawaj numerycznego ID jako "nazwy" - fallback SVG z cyframi
|
|
//(id) wygląda jak bug; gdy nie znamy nazwy, neutralny "User"
|
|
const nameForAvatar = (authorName && authorName !== u) ? authorName : "User";
|
|
getAvatarUrl(u, nameForAvatar).then(url => {
|
|
if(url) {
|
|
window.dmPfpCache[u] = url;
|
|
let el = document.getElementById(`voice-tile-${u}`);
|
|
if (el) el.style.backgroundImage = `url('${url.replace(/'/g, "\\'")}')`;
|
|
}
|
|
});
|
|
}
|
|
|
|
div.style.backgroundImage = `url('${avatarUrl.replace(/'/g, "\\'")}')`;
|
|
let nameEl = document.getElementById(`voice-name-${u}`);
|
|
if (nameEl) nameEl.innerText = resolvedName ? `${resolvedName} (${u})` : String(u);
|
|
}
|
|
|
|
Array.from(container.children).forEach(child => {
|
|
if (child.id.startsWith("voice-tile-") && !child.id.startsWith("voice-tile-stream-")) {
|
|
let u = child.id.replace("voice-tile-", "");
|
|
if (!voiceActiveUsers.includes(u)) {
|
|
child.remove();
|
|
}
|
|
}
|
|
});
|
|
|
|
for (let decoderId in remoteVideos) {
|
|
let streamData = remoteVideos[decoderId];
|
|
let clientId = decoderId.split('-')[0];
|
|
let type = decoderId.split('-')[1];
|
|
|
|
let div = document.getElementById(`voice-tile-stream-${decoderId}`);
|
|
if (!div) {
|
|
div = document.createElement("div");
|
|
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) {
|
|
div.appendChild(mediaEl);
|
|
}
|
|
|
|
let nameDiv = document.createElement("div");
|
|
nameDiv.className = "voice-tile-name";
|
|
nameDiv.id = `voice-stream-name-${decoderId}`;
|
|
div.appendChild(nameDiv);
|
|
container.appendChild(div);
|
|
}
|
|
|
|
let authorName = window.dmUsernameCache ? window.dmUsernameCache[clientId] : null;
|
|
if (!authorName && clientId === String(window.id) && window.username) authorName = window.host ? `${window.username}:${window.host}` : window.username;
|
|
|
|
let streamLabel = processBlah(type == '1' ? "label.stream.cam" : "label.stream.screen");
|
|
let baseName = authorName && authorName !== clientId ? `${authorName} (${clientId})` : clientId;
|
|
|
|
let nameEl = document.getElementById(`voice-stream-name-${decoderId}`);
|
|
if (nameEl) nameEl.innerText = `${baseName} · ${streamLabel}`;
|
|
}
|
|
|
|
Array.from(container.children).forEach(child => {
|
|
if (child.id.startsWith("voice-tile-stream-")) {
|
|
let decoderId = child.id.replace("voice-tile-stream-", "");
|
|
if (!remoteVideos[decoderId]) {
|
|
child.remove();
|
|
}
|
|
}
|
|
});
|
|
|
|
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();
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
/*
|
|
* Wszystkie kafelki to kwadraty o wspólnym rozmiarze --voice-tile-size.
|
|
* Wybieramy największy rozmiar kwadratu, przy którym n kafelków mieści się
|
|
* w oknie rozmowy - układanie i zawijanie do następnych rzędów robi sam
|
|
* flex-wrap w CSS (justify-content: center).
|
|
*/
|
|
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);
|
|
|
|
if (!isFinite(innerW) || !isFinite(innerH) || !isFinite(rootFs) || innerW <= 0 || innerH <= 0 || rootFs <= 0) {
|
|
container.style.removeProperty("--voice-tile-size");
|
|
delete container.dataset.layoutSig;
|
|
return;
|
|
}
|
|
|
|
const gap = 0.75 * rootFs;
|
|
const minSize = 4.5 * rootFs; // poniżej tego wolimy scrollować niż spłaszczać
|
|
|
|
//Największy kwadrat, przy którym n kafelków mieści się w dostępnej powierzchni:
|
|
//próbujemy liczby kolumn 1..n, dla każdej wyliczamy ograniczony rozmiar
|
|
//(szerokość kolumny vs wysokość rzędu) i bierzemy najlepszy wariant.
|
|
let best = 0;
|
|
for (let cols = 1; cols <= n; cols++) {
|
|
const rows = Math.ceil(n / cols);
|
|
const s = Math.min(
|
|
(innerW - gap * (cols - 1)) / cols,
|
|
(innerH - gap * (rows - 1)) / rows
|
|
);
|
|
if (s > best) best = s;
|
|
}
|
|
|
|
const size = Math.max(minSize, Math.floor(best));
|
|
const sig = `${n}:${size}`;
|
|
if (container.dataset.layoutSig === sig) return;
|
|
container.dataset.layoutSig = sig;
|
|
|
|
container.style.setProperty("--voice-tile-size", size + "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();
|
|
|
|
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 = isStream ? `
|
|
<div class="voice-setting-row">
|
|
<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>${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;
|
|
let top = e.clientY;
|
|
if (left + 200 > window.innerWidth) left = window.innerWidth - 210;
|
|
if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
|
|
popup.style.left = left + "px";
|
|
popup.style.top = top + "px";
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => popup.classList.add("open"));
|
|
});
|
|
|
|
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;
|
|
const volumeMultiplier = parseInt(val) / 100.0;
|
|
const rn = type === 'screen' ? screenReceiverNode : receiverNode;
|
|
if (rn) {
|
|
rn.port.postMessage({ action: 'setVolume', clientId: audioId, volume: volumeMultiplier });
|
|
}
|
|
};
|
|
|
|
function toggleVoiceMic() {
|
|
isMicMuted = !isMicMuted;
|
|
if (isMicMuted) setTileSpeaking(String(window.id), false);
|
|
let btn = document.getElementById("voice-btn-mic");
|
|
if (btn) {
|
|
if (isMicMuted) {
|
|
btn.classList.add("voice-btn-danger");
|
|
} else {
|
|
btn.classList.remove("voice-btn-danger");
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tears down only the transport-level state (socket, remote streams, key),
|
|
// keeping the UI, mic stream and AudioContext alive for an automatic rejoin.
|
|
function teardownVoiceTransport() {
|
|
if (voicePingTimer) { clearInterval(voicePingTimer); voicePingTimer = null; }
|
|
if (voiceWsHeartbeat) { clearInterval(voiceWsHeartbeat); voiceWsHeartbeat = null; }
|
|
if (camControl) { try { camControl.stop(); } catch (e) {} camControl = null; }
|
|
if (screenControl) { try { screenControl.stop(); } catch (e) {} screenControl = null; }
|
|
if (currentVoiceWs) {
|
|
try { currentVoiceWs.onclose = null; currentVoiceWs.close(); } catch (e) {}
|
|
currentVoiceWs = null;
|
|
}
|
|
for (const decoderId of Object.keys(remoteVideos)) {
|
|
try { if (remoteVideos[decoderId].decoder) remoteVideos[decoderId].decoder.close(); } catch (e) {}
|
|
}
|
|
remoteVideos = {};
|
|
videoDecryptChains = {};
|
|
remoteAudio = {};
|
|
audioDecryptChains = {};
|
|
peerLastSeen = {};
|
|
deadPeers.clear();
|
|
if (voiceRosterRetryTimer) { clearInterval(voiceRosterRetryTimer); voiceRosterRetryTimer = null; }
|
|
lastVoiceKeyRequestAt = 0;
|
|
//Stale participants from the previous attempt must not linger in the UI
|
|
voiceActiveUsers = [];
|
|
updateVoiceUIUsers();
|
|
if (receiverNode) receiverNode.port.postMessage({action: 'clear'});
|
|
if (screenReceiverNode) screenReceiverNode.port.postMessage({action: 'clear'});
|
|
setVoiceRootKey(null);
|
|
voiceSendEpoch = null;
|
|
voiceSendCounter = 0n;
|
|
lastVoiceServerPacketAt = Date.now();
|
|
}
|
|
|
|
function scheduleVoiceReconnect() {
|
|
if (!currentVoiceCallId || !currentVoiceCallType) {
|
|
// Real hangup already ran its cleanup.
|
|
return;
|
|
}
|
|
if (voiceReconnectAttempts >= VOICE_MAX_RECONNECTS) {
|
|
showBlahNotification("error:voice.reconnect.failed");
|
|
endVoiceSession();
|
|
return;
|
|
}
|
|
voiceReconnectAttempts++;
|
|
setVoiceStatus("connecting");
|
|
teardownVoiceTransport();
|
|
setTimeout(async () => {
|
|
if (!currentVoiceCallId || !currentVoiceCallType) return;
|
|
try {
|
|
// Tickets are single-use - every reconnect needs a fresh one.
|
|
const joined = await requestVoiceJoin();
|
|
if (!joined) { endVoiceSession(); return; }
|
|
await startVoiceSession(joined.serverUrl, joined.ticket);
|
|
} catch (err) {
|
|
console.warn("Voice reconnect failed", err);
|
|
scheduleVoiceReconnect();
|
|
}
|
|
}, 800);
|
|
}
|
|
|
|
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) {}
|
|
}
|
|
isVoiceSpeakerMode = false;
|
|
voiceLoopRestarts = 0;
|
|
stopNativePlayback();
|
|
|
|
if (currentVoiceCallId) {
|
|
let payload = JSON.stringify({ string1: currentVoiceCallType, string2: currentVoiceCallId });
|
|
if (window.fetchEncrypted) window.fetchEncrypted("room/voice/leave", payload).catch(()=>{});
|
|
}
|
|
|
|
if (currentVoiceWs) {
|
|
try { currentVoiceWs.close(); } catch(e){}
|
|
currentVoiceWs = null;
|
|
}
|
|
if (micStream) {
|
|
micStream.getTracks().forEach(t => t.stop());
|
|
micStream = null;
|
|
}
|
|
if (micSourceNode) { micSourceNode.disconnect(); micSourceNode = null; }
|
|
if (audioEncoder) { try { audioEncoder.close(); } catch(e){} audioEncoder = null; }
|
|
|
|
if (voiceWsHeartbeat) { clearInterval(voiceWsHeartbeat); voiceWsHeartbeat = null; }
|
|
if (voicePingTimer) { clearInterval(voicePingTimer); voicePingTimer = null; }
|
|
if (voiceRosterRetryTimer) { clearInterval(voiceRosterRetryTimer); voiceRosterRetryTimer = null; }
|
|
peerLastSeen = {};
|
|
deadPeers.clear();
|
|
lastVoiceKeyRequestAt = 0;
|
|
voiceActiveUsers = [];
|
|
voiceHadRemotePeers = false;
|
|
|
|
for (let id in audioDecoders) {
|
|
try { audioDecoders[id].close(); } catch(e){}
|
|
}
|
|
for (let id in audioDecryptChains) {
|
|
if(audioDecryptChains[id]) audioDecryptChains[id].clear();
|
|
}
|
|
audioDecoders = {};
|
|
audioDecryptChains = {};
|
|
remoteAudio = {};
|
|
|
|
if (receiverNode) {
|
|
receiverNode.port.postMessage({ action: 'clear' });
|
|
try { receiverNode.disconnect(); } catch (e) {}
|
|
}
|
|
if (screenReceiverNode) {
|
|
screenReceiverNode.port.postMessage({ action: 'clear' });
|
|
try { screenReceiverNode.disconnect(); } catch (e) {}
|
|
}
|
|
teardownVoiceLoopback();
|
|
|
|
if (camControl) { camControl.stop(); camControl = null; }
|
|
if (screenControl) { screenControl.stop(); screenControl = null; }
|
|
|
|
for (let id in remoteVideos) {
|
|
if (remoteVideos[id].decoder) { try { remoteVideos[id].decoder.close(); } catch(e){} }
|
|
}
|
|
remoteVideos = {};
|
|
videoDecryptChains = {};
|
|
|
|
setVoiceRootKey(null);
|
|
voiceSendEpoch = null;
|
|
voiceSendCounter = 0n;
|
|
currentVoiceWs = null;
|
|
currentVoiceCallType = null;
|
|
currentVoiceCallId = null;
|
|
|
|
clearAllSpeaking();
|
|
|
|
if (voiceResizeAbort) {
|
|
voiceResizeAbort.abort();
|
|
voiceResizeAbort = null;
|
|
}
|
|
|
|
if (voiceGridRO) {
|
|
voiceGridRO.disconnect();
|
|
voiceGridRO = null;
|
|
}
|
|
|
|
if (voiceUiContainer) {
|
|
let popupEl = voiceUiContainer;
|
|
voiceUiContainer = null;
|
|
popupEl.classList.remove("show");
|
|
popupEl.classList.add("hide");
|
|
setTimeout(() => popupEl.remove(), 350);
|
|
}
|
|
}
|
|
|
|
async function startHardwareVideo(btnEl, streamPromise, typeLabel, typeId) {
|
|
try {
|
|
const stream = await streamPromise;
|
|
const videoTrack = stream.getVideoTracks()[0];
|
|
const videoEl = document.createElement('video');
|
|
videoEl.srcObject = stream; videoEl.muted = true; videoEl.playsInline = true; videoEl.autoplay = true; videoEl.play();
|
|
|
|
const decoderId = window.id + '-' + typeId;
|
|
remoteVideos[decoderId] = { video: videoEl };
|
|
updateVoiceUIUsers();
|
|
|
|
btnEl.classList.add('voice-btn-active');
|
|
let screenAudioEncoder = null, screenAudioSourceNode = null, screenSenderNode = null;
|
|
|
|
if (typeId === 2) {
|
|
const audioTracks = stream.getAudioTracks();
|
|
if (audioTracks.length > 0) {
|
|
screenAudioSourceNode = audioContext.createMediaStreamSource(stream);
|
|
screenSenderNode = new AudioWorkletNode(audioContext, 'audio-sender');
|
|
screenSenderNode.port.onmessage = async (e) => {
|
|
if (currentVoiceWs?.readyState !== WebSocket.OPEN || !voiceMySenderCryptoKey) return;
|
|
// Same backpressure valve as the mic sender.
|
|
if (currentVoiceWs.bufferedAmount > 256 * 1024) return;
|
|
const iv = nextVoiceIv();
|
|
const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceMySenderCryptoKey, e.data.audioData);
|
|
const payload = new Uint8Array(14 + cipher.byteLength);
|
|
payload[0] = 4; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
|
currentVoiceWs.send(payload.buffer);
|
|
};
|
|
screenAudioSourceNode.connect(screenSenderNode);
|
|
}
|
|
}
|
|
|
|
const getCurrentConfig = () => {
|
|
const mediaCfg = getVoiceMediaConfig(typeId);
|
|
const fps = mediaCfg.fps;
|
|
const resVal = mediaCfg.res;
|
|
const settings = videoTrack.getSettings();
|
|
let sourceWidth = settings.width || 1280, sourceHeight = settings.height || 720, width, height;
|
|
if (resVal === "source") { width = sourceWidth; height = sourceHeight; } else {
|
|
const [targetW, targetH] = resVal.split('x').map(Number);
|
|
const ratio = Math.min(targetW / sourceWidth, targetH / sourceHeight);
|
|
if (ratio < 1) { width = sourceWidth * ratio; height = sourceHeight * ratio; } else { width = sourceWidth; height = sourceHeight; }
|
|
}
|
|
width = Math.floor(width / 2) * 2; height = Math.floor(height / 2) * 2;
|
|
// A WebSocket relay saturates fast: uncapped w*h*fps bitrates
|
|
// (several Mb/s) choke the shared call socket, which stalls audio
|
|
// for everyone. Keep generous-but-safe ceilings per stream type.
|
|
const bitrate = Math.min(Math.floor(width * height * fps * 0.07), typeId === 1 ? 2_000_000 : 3_000_000);
|
|
return { width, height, fps, bitrate };
|
|
};
|
|
|
|
let currentConfig = getCurrentConfig(), isRunning = true, frameCount = 0;
|
|
const encoder = new VideoEncoder({
|
|
output: async (chunk) => {
|
|
if (currentVoiceWs?.readyState !== WebSocket.OPEN || !voiceMySenderCryptoKey) return;
|
|
const buffer = new ArrayBuffer(chunk.byteLength); chunk.copyTo(buffer);
|
|
const iv = nextVoiceIv();
|
|
const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceMySenderCryptoKey, buffer);
|
|
const payload = new Uint8Array(14 + cipher.byteLength);
|
|
payload[0] = typeId; payload[1] = chunk.type === 'key' ? 1 : 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
|
currentVoiceWs.send(payload.buffer);
|
|
}, error: (e) => { stopFunction(); }
|
|
});
|
|
encoder.configure({codec: 'av01.0.04M.08', width: currentConfig.width, height: currentConfig.height, framerate: currentConfig.fps, bitrate: currentConfig.bitrate, latencyMode: 'realtime'});
|
|
|
|
// Transient capture-mode wobbles must not thrash the encoder -
|
|
// commit only after ~300 ms stable. Camera size/fps changes arrive
|
|
// via a clean reopen (see buildQualityFpsGrid); the screen share
|
|
// surface is never re-constrained, the encoder just rescales.
|
|
let pendingCfg = null, pendingAt = 0;
|
|
const cfgEquals = (a, b) => !!a && !!b && a.width === b.width && a.height === b.height && a.fps === b.fps;
|
|
|
|
const encodeLoop = () => {
|
|
if (!isRunning) return;
|
|
const newConfig = getCurrentConfig();
|
|
let forceKeyframe = false;
|
|
if (!cfgEquals(newConfig, currentConfig)) {
|
|
if (!cfgEquals(newConfig, pendingCfg)) {
|
|
pendingCfg = newConfig;
|
|
pendingAt = performance.now();
|
|
} else if (performance.now() - pendingAt > 300) {
|
|
currentConfig = newConfig; forceKeyframe = true; frameCount = 0; pendingCfg = null;
|
|
encoder.configure({codec: 'av01.0.04M.08', width: currentConfig.width, height: currentConfig.height, framerate: currentConfig.fps, bitrate: currentConfig.bitrate, latencyMode: 'realtime'});
|
|
}
|
|
} else if (pendingCfg) {
|
|
pendingCfg = null; // wiggle reverted on its own - ignore
|
|
}
|
|
|
|
if (encoder.state === 'configured' && encoder.encodeQueueSize <= 2 && currentVoiceWs.bufferedAmount < 1024 * 256 && videoEl.readyState >= 2) {
|
|
let frame = null;
|
|
try {
|
|
frame = new VideoFrame(videoEl, {timestamp: Math.trunc(performance.now() * 1000)});
|
|
frameCount++;
|
|
encoder.encode(frame, {keyFrame: forceKeyframe || (frameCount % (currentConfig.fps * 2)) === 0});
|
|
} catch (err) { } finally { if (frame) frame.close(); }
|
|
}
|
|
setTimeout(encodeLoop, 1000 / currentConfig.fps);
|
|
};
|
|
setTimeout(encodeLoop, 500);
|
|
|
|
videoTrack.onended = () => { if(isRunning) stopFunction(); };
|
|
const stopFunction = async () => {
|
|
if (!isRunning) return;
|
|
isRunning = false; try { encoder.close(); } catch (e) {} stream.getTracks().forEach(t => t.stop());
|
|
|
|
delete remoteVideos[decoderId];
|
|
updateVoiceUIUsers();
|
|
btnEl.classList.remove('voice-btn-active');
|
|
|
|
if (currentVoiceWs?.readyState === WebSocket.OPEN && voiceMySenderCryptoKey) {
|
|
const buffer = new Uint8Array([typeId]); const iv = nextVoiceIv();
|
|
const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceMySenderCryptoKey, buffer);
|
|
const payload = new Uint8Array(14 + cipher.byteLength);
|
|
payload[0] = 3; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14); currentVoiceWs.send(payload.buffer);
|
|
}
|
|
|
|
if (typeId === 2) {
|
|
if (screenAudioSourceNode) { screenAudioSourceNode.disconnect(); screenAudioSourceNode = null; }
|
|
if (screenSenderNode) { screenSenderNode.disconnect(); screenSenderNode = null; }
|
|
if (screenAudioEncoder) { try { screenAudioEncoder.close(); } catch (e) {} screenAudioEncoder = null; }
|
|
if (currentVoiceWs?.readyState === WebSocket.OPEN && voiceMySenderCryptoKey) {
|
|
const bufferAudioInfo = new Uint8Array([4]); const ivA = nextVoiceIv();
|
|
const cipherA = await crypto.subtle.encrypt({name: "AES-GCM", iv: ivA}, voiceMySenderCryptoKey, bufferAudioInfo);
|
|
const payloadA = new Uint8Array(14 + cipherA.byteLength);
|
|
payloadA[0] = 3; payloadA[1] = 0; payloadA.set(ivA, 2); payloadA.set(new Uint8Array(cipherA), 14); currentVoiceWs.send(payloadA.buffer);
|
|
}
|
|
screenControl = null;
|
|
} else if (typeId === 1) { camControl = null; }
|
|
};
|
|
return { stop: stopFunction };
|
|
} catch (e) { console.error(e); alert(processBlah(`:error.call.unsupported:${typeLabel}`)); return null; }
|
|
}
|
|
|
|
// Opens the camera honoring the saved device/quality. A saved deviceId can
|
|
// become stale (device list changes across sessions) - fall back to the
|
|
// default camera instead of failing with OverconstrainedError.
|
|
async function getVoiceCamStream() {
|
|
const camCfg = getVoiceMediaConfig(1);
|
|
const constraintsFor = (deviceId) => {
|
|
const video = {frameRate: {ideal: camCfg.fps}};
|
|
if (camCfg.res !== "source") {
|
|
const [w, h] = camCfg.res.split('x').map(Number);
|
|
// Single-axis ideal: no implied aspect ratio, the camera keeps its
|
|
// native one and only the resolution tier changes.
|
|
video.width = {ideal: Math.max(w, h)};
|
|
}
|
|
if (deviceId) video.deviceId = {exact: deviceId};
|
|
return {video};
|
|
};
|
|
try {
|
|
return await navigator.mediaDevices.getUserMedia(constraintsFor(voiceSettings.camId));
|
|
} catch (e) {
|
|
if (!voiceSettings.camId) throw e;
|
|
voiceSettings.camId = "";
|
|
saveVoiceSettings();
|
|
return navigator.mediaDevices.getUserMedia(constraintsFor(undefined));
|
|
}
|
|
}
|
|
|
|
function toggleVoiceCam() {
|
|
let btn = document.getElementById("voice-btn-cam");
|
|
if (camControl) {
|
|
camControl.stop();
|
|
} else {
|
|
getVoiceCamStream().then(stream => {
|
|
startHardwareVideo(btn, Promise.resolve(stream), "Camera", 1).then(ctrl => camControl = ctrl);
|
|
}).catch(err => alert(processBlah(`:error.call.camera:${err.message || err.name || "?"}`)));
|
|
}
|
|
}
|
|
|
|
function toggleVoiceScreen() {
|
|
let btn = document.getElementById("voice-btn-screen");
|
|
if (screenControl) {
|
|
screenControl.stop();
|
|
} else {
|
|
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(processBlah(`:error.call.screen:${err.message || err.name || "?"}`)));
|
|
}
|
|
}
|