From bcf445916c0d2d5c87dd9797d913d37859471f72 Mon Sep 17 00:00:00 2001 From: denis0001-dev Date: Mon, 13 Oct 2025 20:48:35 +0300 Subject: [PATCH] Clean up --- frontend/src/core/calls/e2eeWorker.ts | 5 - frontend/src/core/calls/encryption.ts | 26 ++- frontend/src/core/calls/signaling.ts | 100 ++++---- frontend/src/core/calls/webrtc.ts | 216 ++++-------------- .../src/core/hooks/useDownloadAppScreen.tsx | 2 +- frontend/src/core/types.d.ts | 83 ++++++- frontend/src/core/websocket.ts | 10 +- frontend/src/pages/chat/hooks/useCall.ts | 41 +--- frontend/src/pages/chat/hooks/useDM.ts | 2 +- .../pages/chat/ui/right/calls/CallWindow.tsx | 8 - .../src/pages/chat/ui/right/panels/DMPanel.ts | 2 +- frontend/src/utils/utils.ts | 30 +++ 12 files changed, 225 insertions(+), 300 deletions(-) diff --git a/frontend/src/core/calls/e2eeWorker.ts b/frontend/src/core/calls/e2eeWorker.ts index 0feb9a5..d12a771 100644 --- a/frontend/src/core/calls/e2eeWorker.ts +++ b/frontend/src/core/calls/e2eeWorker.ts @@ -49,7 +49,6 @@ function makeIV(encodedFrame: EncodedFrame): ArrayBuffer { view.setUint32(4, metadata.synchronizationSource || 0, false); // Middle 4 bytes view.setUint32(8, 0, false); // Last 4 bytes (padding for 12-byte IV) - return ivBuffer; } } catch (e) { @@ -71,8 +70,6 @@ addEventListener("rtctransform", (event) => { const isEncrypting = mode === 'encrypt'; - console.log(`E2EE Worker started in ${mode.toUpperCase()} mode`); - let frameCount = 0; async function transform(encodedFrame: EncodedFrame, controller: TransformStreamDefaultController) { @@ -131,11 +128,9 @@ addEventListener("rtctransform", (event) => { result.set(encryptedArray, 0); } - // CRITICAL: Video frames need ArrayBuffer, not Uint8Array encodedFrame.data = result.buffer; controller.enqueue(encodedFrame); - } catch (e) { // FAIL SECURELY: Never send unencrypted frames const data = new Uint8Array(encodedFrame.data); diff --git a/frontend/src/core/calls/encryption.ts b/frontend/src/core/calls/encryption.ts index 9ab4ebe..304768c 100644 --- a/frontend/src/core/calls/encryption.ts +++ b/frontend/src/core/calls/encryption.ts @@ -3,6 +3,7 @@ import { randomBytes } from "@/utils/crypto/kdf"; import { b64, ub64 } from "@/utils/utils"; import { ecdhSharedSecret, deriveWrappingKey } from "@/utils/crypto/asymmetric"; import { getCurrentKeys } from "@/core/api/authApi"; +import type { WrappedSessionKeyPayload } from "@/core/types"; export interface CallSessionKey { key: Uint8Array; @@ -24,7 +25,8 @@ export interface EncryptedCallMessage { } /** - * Generate a call session key (for initiator only) + * Generates a new call session key for end-to-end encryption + * @returns Promise that resolves to a session key with its hash for display */ export async function generateCallSessionKey(): Promise { // Generate session key material @@ -44,7 +46,7 @@ export async function generateCallSessionKey(): Promise { * Rotate a session key by generating a completely new key * This provides forward secrecy for long-running calls */ -export async function rotateCallSessionKey(_currentSessionKey: CallSessionKey): Promise { +export async function rotateCallSessionKey(): Promise { // Generate new session key material (completely independent of current key) const newSessionKeyMaterial = randomBytes(32); @@ -127,7 +129,7 @@ export async function deriveCallSessionKeyFromSharedSecret( /** * Encrypt a call signaling message with the session key */ -export async function encryptCallMessage(message: any, sessionKey: Uint8Array): Promise { +export async function encryptCallMessage(message: Record, sessionKey: Uint8Array): Promise { const messageKey = await importAesGcmKey(sessionKey); const encrypted = await aesGcmEncrypt(messageKey, new TextEncoder().encode(JSON.stringify(message))); @@ -143,7 +145,7 @@ export async function encryptCallMessage(message: any, sessionKey: Uint8Array): /** * Decrypt a call signaling message */ -export async function decryptCallMessage(encryptedMessage: EncryptedCallMessage, sessionKey: Uint8Array): Promise { +export async function decryptCallMessage(encryptedMessage: EncryptedCallMessage, sessionKey: Uint8Array): Promise> { const messageKey = await importAesGcmKey(sessionKey); const decrypted = await aesGcmDecrypt(messageKey, ub64(encryptedMessage.iv), ub64(encryptedMessage.ciphertext)); return JSON.parse(new TextDecoder().decode(decrypted)); @@ -177,14 +179,11 @@ export function generateCallEmojis(sessionKeyHash: string): string[] { // HKDF info for CALL key wrapping (distinct from DM's info) const CALL_INFO = new Uint8Array([2]); -export interface WrappedSessionKeyPayload { - salt: string; // b64 salt used in HKDF - iv2: string; // b64 IV used to wrap session key - wrapped: string; // b64 ciphertext of wrapped session key -} - /** - * Wrap a session key for a recipient using ECDH (X25519) and AES-GCM + * Wraps a call session key for a specific recipient using ECDH key exchange + * @param recipientPublicKeyB64 - The recipient's public key in base64 format + * @param sessionKey - The session key to wrap + * @returns Promise that resolves to the wrapped session key payload */ export async function wrapCallSessionKeyForRecipient(recipientPublicKeyB64: string, sessionKey: Uint8Array): Promise { const keys = getCurrentKeys(); @@ -221,7 +220,10 @@ export async function createSharedSecretAndDeriveSessionKey( } /** - * Unwrap a received session key using sender's public key + * Unwraps a call session key received from a sender using ECDH key exchange + * @param senderPublicKeyB64 - The sender's public key in base64 format + * @param payload - The wrapped session key payload + * @returns Promise that resolves to the unwrapped session key */ export async function unwrapCallSessionKeyFromSender(senderPublicKeyB64: string, payload: WrappedSessionKeyPayload): Promise { const keys = getCurrentKeys(); diff --git a/frontend/src/core/calls/signaling.ts b/frontend/src/core/calls/signaling.ts index b89d161..19fcf3f 100644 --- a/frontend/src/core/calls/signaling.ts +++ b/frontend/src/core/calls/signaling.ts @@ -1,4 +1,4 @@ -import type { CallInvite, CallSignalingMessage } from "@/core/types"; +import type { CallSignalingMessage, CallAcceptData, CallRejectData, CallOfferData, CallAnswerData, CallIceCandidateData, CallEndData, CallVideoToggleData, CallScreenShareToggleData, CallInviteMessageData } from "@/core/types"; import * as WebRTC from "./webrtc"; export interface CallState { @@ -9,6 +9,9 @@ export interface CallState { setRemoteScreenSharing: (enabled: boolean) => void; } +/** + * Handles incoming WebSocket messages related to call signaling + */ export class CallSignalingHandler { private getState: () => CallState; @@ -16,55 +19,56 @@ export class CallSignalingHandler { this.getState = getState; } + /** + * Routes incoming call signaling messages to appropriate handlers + */ handleWebSocketMessage(message: CallSignalingMessage) { - if (message.type !== "call_signaling") { - return; - } - const { data } = message; if (!data) { - console.warn("Received call_signaling message with no data:", message); + console.warn("Received call signaling message with no data:", message); return; } - console.log("Received signaling message:", data.type, "from user", data.fromUserId, "full data:", data); - - switch (data.type) { + switch (message.type) { case "call_invite": - this.handleCallInvite(data as CallInvite); + this.handleCallInvite(message, data as CallInviteMessageData); break; case "call_accept": - this.handleCallAccept(data); + this.handleCallAccept(data as CallAcceptData); break; case "call_reject": - this.handleCallReject(data); + this.handleCallReject(data as CallRejectData); break; case "call_offer": - this.handleCallOffer(data); + this.handleCallOffer(message, data as CallOfferData); break; case "call_answer": - this.handleCallAnswer(data); + this.handleCallAnswer(message, data as CallAnswerData); break; case "call_ice_candidate": - this.handleIceCandidate(data); + this.handleIceCandidate(message, data as CallIceCandidateData); break; case "call_end": - this.handleCallEnd(data); + this.handleCallEnd(data as CallEndData); break; case "call_session_key": - this.handleCallSessionKey(data); + this.handleCallSessionKey(message); break; case "call_video_toggle": - this.handleVideoToggle(data); + this.handleVideoToggle(message, data as CallVideoToggleData); break; case "call_screen_share_toggle": - this.handleScreenShareToggle(data); + this.handleScreenShareToggle(message, data as CallScreenShareToggleData); break; } } - private async handleCallInvite(data: CallInvite) { - const { fromUserId, fromUsername } = data; + /** + * Handles incoming call invitation + */ + private async handleCallInvite(message: CallSignalingMessage, data: CallInviteMessageData) { + const { fromUsername } = data; + const fromUserId = message.fromUserId; const state = this.getState(); // First, create the peer connection in WebRTC service @@ -74,7 +78,10 @@ export class CallSignalingHandler { state.receiveCall(fromUserId, fromUsername); } - private async handleCallAccept(data: any) { + /** + * Handles call acceptance from remote peer + */ + private async handleCallAccept(data: CallAcceptData) { const { fromUserId } = data; // Initiator should create and send offer now try { @@ -84,7 +91,10 @@ export class CallSignalingHandler { } } - private handleCallReject(data: any) { + /** + * Handles call rejection from remote peer + */ + private handleCallReject(data: CallRejectData) { const state = this.getState(); const { fromUserId } = data; @@ -97,22 +107,19 @@ export class CallSignalingHandler { state.endCall(); } - private async handleCallOffer(data: any) { - const { fromUserId, data: offer } = data; - await WebRTC.handleCallOffer(fromUserId, offer); + private async handleCallOffer(message: CallSignalingMessage, data: CallOfferData) { + await WebRTC.handleCallOffer(message.fromUserId, data); } - private async handleCallAnswer(data: any) { - const { fromUserId, data: answer } = data; - await WebRTC.handleCallAnswer(fromUserId, answer); + private async handleCallAnswer(message: CallSignalingMessage, data: CallAnswerData) { + await WebRTC.handleCallAnswer(message.fromUserId, data); } - private async handleIceCandidate(data: any) { - const { fromUserId, data: candidate } = data; - await WebRTC.handleIceCandidate(fromUserId, candidate); + private async handleIceCandidate(message: CallSignalingMessage, data: CallIceCandidateData) { + await WebRTC.handleIceCandidate(message.fromUserId, data); } - private handleCallEnd(data: any) { + private handleCallEnd(data: CallEndData) { const state = this.getState(); const { fromUserId } = data; @@ -125,43 +132,38 @@ export class CallSignalingHandler { state.endCall(); } - private handleCallSessionKey({ sessionKeyHash, data, ...message }: CallSignalingMessage) { + private handleCallSessionKey(message: CallSignalingMessage) { const state = this.getState(); + const { sessionKeyHash, data } = message; if (sessionKeyHash) { state.setCallSessionKeyHash(sessionKeyHash); } - if (data?.wrappedSessionKey && message.fromUserId) { + if (data && 'wrappedSessionKey' in data && data.wrappedSessionKey && message.fromUserId) { WebRTC.receiveWrappedSessionKey(message.fromUserId, data.wrappedSessionKey, sessionKeyHash); } } - private handleVideoToggle(data: any) { - console.log("handleVideoToggle called with data:", data); + private handleVideoToggle(message: CallSignalingMessage, data: CallVideoToggleData) { const state = this.getState(); - const { fromUserId, data: toggleData } = data; - if (toggleData && typeof toggleData.enabled === "boolean" && fromUserId) { - console.log("Setting remote video enabled to:", toggleData.enabled); + if (data && typeof data.enabled === "boolean" && message.fromUserId) { // Update Zustand state (for UI) - state.setRemoteVideoEnabled(toggleData.enabled); + state.setRemoteVideoEnabled(data.enabled); // Update WebRTC internal state (for track routing) - WebRTC.setRemoteVideoEnabled(fromUserId, toggleData.enabled); + WebRTC.setRemoteVideoEnabled(message.fromUserId, data.enabled); } else { console.warn("Invalid toggle data:", data); } } - private handleScreenShareToggle(data: any) { - console.log("handleScreenShareToggle called with data:", data); + private handleScreenShareToggle(message: CallSignalingMessage, data: CallScreenShareToggleData) { const state = this.getState(); - const { fromUserId, data: toggleData } = data; - if (toggleData && typeof toggleData.enabled === "boolean" && fromUserId) { - console.log("Setting remote screen sharing to:", toggleData.enabled); + if (data && typeof data.enabled === "boolean" && message.fromUserId) { // Update Zustand state (for UI) - state.setRemoteScreenSharing(toggleData.enabled); + state.setRemoteScreenSharing(data.enabled); // Update WebRTC internal state (for track routing) - WebRTC.setRemoteScreenSharing(fromUserId, toggleData.enabled); + WebRTC.setRemoteScreenSharing(message.fromUserId, data.enabled); } else { console.warn("Invalid toggle data:", data); } diff --git a/frontend/src/core/calls/webrtc.ts b/frontend/src/core/calls/webrtc.ts index e18607c..6d67e47 100644 --- a/frontend/src/core/calls/webrtc.ts +++ b/frontend/src/core/calls/webrtc.ts @@ -1,10 +1,16 @@ import { getAuthHeaders } from "@/core/api/authApi"; -import type { CallSignalingMessage, IceServersResponse } from "@/core/types"; +import type { CallSignalingMessage, IceServersResponse, WrappedSessionKeyPayload } from "@/core/types"; import { request } from "@/core/websocket"; import { wrapCallSessionKeyForRecipient, unwrapCallSessionKeyFromSender, rotateCallSessionKey } from "./encryption"; import { fetchUserPublicKey } from "@/core/api/dmApi"; import { importAesGcmKey } from "@/utils/crypto/symmetric"; import E2EEWorker from "./e2eeWorker?worker"; +import { delay } from "@/utils/utils"; + +// Constants +const DEFAULT_ICE_SERVERS = [{ urls: "stun:fromchat.ru:3478" }]; +const KEY_ROTATION_INTERVAL = 10 * 60 * 1000; // 10 minutes +const NEGOTIATION_DELAY = 100; // ms export interface WebRTCCall { peerConnection: RTCPeerConnection; @@ -77,12 +83,13 @@ export function setRemoteScreenShareHandler(handler: (userId: number, stream: Me onRemoteScreenShare = handler; } +/** + * Sends a signaling message via WebSocket + */ async function sendSignalingMessage(message: CallSignalingMessage) { if (!authToken) { throw new Error("No auth token available"); } - - console.log("Sending signaling message:", message.type, "to user", message.toUserId); await request({ type: "call_signaling", @@ -94,12 +101,13 @@ async function sendSignalingMessage(message: CallSignalingMessage) { }); } +/** + * Fetches ICE servers from the backend, with fallback to default STUN server + */ async function getIceServers(): Promise { - const defaultIceServers = [{ urls: "stun:fromchat.ru:3478" }]; - if (!authToken) { console.warn("No auth token available for ICE servers"); - return defaultIceServers; + return DEFAULT_ICE_SERVERS; } try { @@ -118,10 +126,9 @@ async function getIceServers(): Promise { } // Fallback to STUN only if backend fails - return defaultIceServers; + return DEFAULT_ICE_SERVERS; } - async function createPeerConnection(userId: number): Promise { const iceServers = await getIceServers(); @@ -154,11 +161,7 @@ async function createPeerConnection(userId: number): Promise calls.set(userId, call); - peerConnection.addEventListener("icegatheringstatechange", () => { - console.log("ICE gathering state changed:", peerConnection.iceGatheringState); - }); - - // Add ICE candidate event listener for debugging and sending + // Add ICE candidate event listener for sending peerConnection.addEventListener("icecandidate", async (event) => { if (event.candidate) { // Send ICE candidate to remote peer @@ -180,11 +183,11 @@ async function createPeerConnection(userId: number): Promise }); peerConnection.addEventListener("iceconnectionstatechange", () => { - console.log("ICE connection state changed:", peerConnection.iceConnectionState); + // ICE connection state changed }); peerConnection.addEventListener("signalingstatechange", () => { - console.log("Signaling state changed:", peerConnection.signalingState); + // Signaling state changed }); // Handle renegotiation when tracks are added/removed @@ -210,10 +213,9 @@ async function createPeerConnection(userId: number): Promise const offer = await peerConnection.createOffer(); await peerConnection.setLocalDescription(offer); - console.log("Sending renegotiation offer to user", userId); await sendSignalingMessage({ type: "call_offer", - fromUserId: 0, + fromUserId: 0, // Will be set by server toUserId: userId, data: offer }); @@ -230,8 +232,6 @@ async function createPeerConnection(userId: number): Promise // Handle remote stream peerConnection.addEventListener("track", async (event) => { - console.log("Received track:", event.track.kind, "from user", userId, "stream ID:", event.streams[0]?.id); - const [remoteStream] = event.streams; const call = calls.get(userId); if (call && remoteStream) { @@ -243,96 +243,55 @@ async function createPeerConnection(userId: number): Promise const receiver = call.peerConnection.getReceivers().find(r => r.track === track); if (receiver && !call.transformedReceivers.has(receiver)) { const key = await importAesGcmKey(call.sessionKey); - console.log(`Applying decrypt transform to newly received ${track.kind} track:`); - console.log("- sessionId:", call.sessionId); - console.log("- sessionKey (first 8 bytes):", Array.from(new Uint8Array(call.sessionKey).slice(0, 8))); - // @ts-ignore receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt', sessionId: call.sessionId }); call.transformedReceivers.add(receiver); - console.log(`Decrypt transform applied successfully to ${track.kind} track`); } } catch (error) { console.error("Failed to apply E2EE to received track:", error); } - } else { - console.log(`Skipping decrypt transform for ${track.kind} track - session key not available or RTCRtpScriptTransform not supported`); - console.log("Session key exists:", !!call.sessionKey); - console.log("RTCRtpScriptTransform available:", !!window.RTCRtpScriptTransform); } // Determine stream type based on track kind and signaling state - console.log(`Track received: kind=${track.kind}, isRemoteScreenSharing=${call.isRemoteScreenSharing}, isRemoteVideoEnabled=${call.isRemoteVideoEnabled}`); - if (track.kind === "video") { - const receiver = call.peerConnection.getReceivers().find(r => r.track === track); - const transceiver = receiver ? call.peerConnection.getTransceivers().find(t => t.receiver === receiver) : null; - - console.log("Video track transceiver mid:", transceiver?.mid); - console.log("Video sender mid:", call.videoSender ? call.peerConnection.getTransceivers().find(t => t.sender === call.videoSender)?.mid : "none"); - console.log("Screen share sender mid:", call.screenShareSender ? call.peerConnection.getTransceivers().find(t => t.sender === call.screenShareSender)?.mid : "none"); - let isScreenShare = false; let isVideo = false; if (call.isRemoteScreenSharing && call.isRemoteVideoEnabled) { // Both active - route based on which one we haven't received yet - console.log("Both features active - routing based on received track counts"); - console.log("Received video tracks:", call.receivedVideoTrackCount); - console.log("Received screen share tracks:", call.receivedScreenShareTrackCount); - // Simple logic: if we haven't received video yet, this is video // if we haven't received screen share yet, this is screen share if (call.receivedVideoTrackCount === 0) { isVideo = true; call.receivedVideoTrackCount++; - console.log("Routing as video (first video track)"); } else if (call.receivedScreenShareTrackCount === 0) { isScreenShare = true; call.receivedScreenShareTrackCount++; - console.log("Routing as screen share (first screen share track)"); } else { - // Both already received - this shouldn't happen, log warning - console.warn("Both tracks already received, but got another video track!"); - console.warn("This might be a track replacement, routing as screen share by default"); + // Both already received - this might be a track replacement isScreenShare = true; } } else if (call.isRemoteScreenSharing) { - console.log("Only screen share active"); isScreenShare = true; call.receivedScreenShareTrackCount++; } else if (call.isRemoteVideoEnabled) { - console.log("Only video active"); isVideo = true; call.receivedVideoTrackCount++; - } else { - console.log("Neither video nor screen share active - this shouldn't happen!"); } - console.log("Routing decision: isScreenShare:", isScreenShare, "isVideo:", isVideo); - if (isScreenShare) { - console.log("Detected screen share track, notifying handler"); if (onRemoteScreenShare) { onRemoteScreenShare(userId, remoteStream); - } else { - console.warn("onRemoteScreenShare handler not set!"); } } else if (isVideo) { - console.log("Detected video track, notifying handler"); if (onRemoteVideoStream) { onRemoteVideoStream(userId, remoteStream); - } else { - console.warn("onRemoteVideoStream handler not set!"); } } } else if (track.kind === "audio") { - console.log("Detected audio track, notifying handler"); // Handle remote audio (existing behavior) call.remoteStream = remoteStream; if (onRemoteStream) { onRemoteStream(userId, remoteStream); - } else { - console.warn("onRemoteStream handler not set!"); } } } @@ -340,7 +299,7 @@ async function createPeerConnection(userId: number): Promise // Handle connection state changes peerConnection.addEventListener("connectionstatechange", () => { - console.log("WebRTC connection state changed:", peerConnection.connectionState); + // WebRTC connection state changed const call = calls.get(userId); if (call) { if (onCallStateChange) { @@ -364,6 +323,12 @@ async function createPeerConnection(userId: number): Promise return peerConnection; } +/** + * Initiates a call to the specified user + * @param userId - The ID of the user to call + * @param username - The username of the user to call + * @returns Promise that resolves to true if call was initiated successfully + */ export async function initiateCall(userId: number, username: string): Promise { try { // Get user media @@ -400,7 +365,9 @@ export async function initiateCall(userId: number, username: string): Promise { try { - // @ts-ignore if (!call.sessionKey || !window.RTCRtpScriptTransform) { - console.log("Skipping E2EE transforms - session key or RTCRtpScriptTransform not available"); return; } - console.log("Applying E2EE transforms for call", call.remoteUserId); const key = await importAesGcmKey(call.sessionKey); call.sessionCryptoKey = key; @@ -462,8 +426,6 @@ async function applyE2EETransforms(call: WebRTCCall): Promise { const receivers = call.peerConnection.getReceivers(); for (const receiver of receivers) { if (receiver.track && !call.transformedReceivers.has(receiver)) { - console.log(`Applying decrypt transform to ${receiver.track.kind} receiver`); - // @ts-ignore receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt', sessionId: call.sessionId }); call.transformedReceivers.add(receiver); } @@ -473,8 +435,6 @@ async function applyE2EETransforms(call: WebRTCCall): Promise { const senders = call.peerConnection.getSenders(); for (const sender of senders) { if (sender.track && !call.transformedSenders.has(sender)) { - console.log(`Applying encrypt transform to ${sender.track.kind} sender`); - // @ts-ignore sender.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'encrypt', sessionId: call.sessionId }); call.transformedSenders.add(sender); } @@ -491,13 +451,10 @@ export async function setSessionKey(userId: number, keyBytes: Uint8Array): Promi return; } - console.log("setSessionKey: Setting session key for user", userId); call.sessionKey = keyBytes; call.lastKeyRotation = Date.now(); - console.log("setSessionKey: Applying E2EE transforms..."); await applyE2EETransforms(call); - console.log("setSessionKey: E2EE transforms applied successfully"); // Start key rotation timer (rotate every 10 minutes for long calls) if (call.keyRotationTimer) { @@ -506,7 +463,7 @@ export async function setSessionKey(userId: number, keyBytes: Uint8Array): Promi call.keyRotationTimer = setInterval(async () => { await rotateSessionKey(userId); - }, 10 * 60 * 1000); // 10 minutes + }, KEY_ROTATION_INTERVAL); } /** @@ -517,15 +474,8 @@ async function rotateSessionKey(userId: number): Promise { if (!call || !call.sessionKey) return; try { - console.log("Rotating session key for call", userId); - // Generate new session key - const currentSessionKey = { - key: call.sessionKey, - hash: "" // We'll generate a new hash - }; - - const newSessionKey = await rotateCallSessionKey(currentSessionKey); + const newSessionKey = await rotateCallSessionKey(); // Update the call with new session key call.sessionKey = newSessionKey.key; @@ -533,17 +483,14 @@ async function rotateSessionKey(userId: number): Promise { // Reapply E2EE transforms with new key await applyE2EETransforms(call); - - console.log("Session key rotated successfully for call", userId); } catch (error) { console.error("Failed to rotate session key:", error); } } -export async function receiveWrappedSessionKey(fromUserId: number, wrappedPayload: any, sessionKeyHash?: string): Promise { +export async function receiveWrappedSessionKey(fromUserId: number, wrappedPayload: WrappedSessionKeyPayload, sessionKeyHash?: string): Promise { if (!authToken) return; try { - console.log("receiveWrappedSessionKey called for user", fromUserId, "hash:", sessionKeyHash); const senderPublicKey = await fetchUserPublicKey(fromUserId, authToken); if (!senderPublicKey) { console.error("Failed to get sender public key"); @@ -554,7 +501,6 @@ export async function receiveWrappedSessionKey(fromUserId: number, wrappedPayloa return; } - console.log("Unwrapping session key..."); // Unwrap the session key from the encrypted payload const unwrappedSessionKey = await unwrapCallSessionKeyFromSender(senderPublicKey, { salt: wrappedPayload.salt, @@ -562,15 +508,18 @@ export async function receiveWrappedSessionKey(fromUserId: number, wrappedPayloa wrapped: wrappedPayload.wrapped }); - console.log("Session key unwrapped successfully, setting it..."); // Use the unwrapped session key directly (both sides should have the same key) await setSessionKey(fromUserId, unwrappedSessionKey); - console.log("Session key set successfully for user", fromUserId); } catch (e) { console.error("Failed to unwrap session key:", e); } } +/** + * Accepts an incoming call from the specified user + * @param userId - The ID of the user who initiated the call + * @returns Promise that resolves to true if call was accepted successfully + */ export async function acceptCall(userId: number): Promise { try { let call = calls.get(userId); @@ -656,7 +605,7 @@ export async function onRemoteAccepted(userId: number): Promise { try { // Small delay to ensure remote peer finishes processing the accept // This prevents race conditions where our offer arrives before they're ready - await new Promise(resolve => setTimeout(resolve, 100)); + await delay(NEGOTIATION_DELAY); // Create offer const offer = await call.peerConnection.createOffer(); @@ -677,21 +626,16 @@ export async function onRemoteAccepted(userId: number): Promise { async function createE2EETransform(call: WebRTCCall, sessionKey: Uint8Array, sessionId?: string): Promise { try { - // @ts-ignore if (!sessionKey || !window.RTCRtpScriptTransform) { - console.log("Skipping E2EE transform in createE2EETransform - not supported or no session key"); return; } - console.log("Creating E2EE transform with sessionId:", sessionId); const key = await importAesGcmKey(sessionKey); // Apply to receivers that don't already have transforms const receivers = call.peerConnection.getReceivers(); for (const receiver of receivers) { if (receiver.track && !call.transformedReceivers.has(receiver)) { - console.log(`Applying decrypt transform to ${receiver.track.kind} in createE2EETransform`); - // @ts-ignore receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt', sessionId }); call.transformedReceivers.add(receiver); } @@ -701,8 +645,6 @@ async function createE2EETransform(call: WebRTCCall, sessionKey: Uint8Array, ses const senders = call.peerConnection.getSenders(); for (const sender of senders) { if (sender.track && !call.transformedSenders.has(sender)) { - console.log(`Applying encrypt transform to ${sender.track.kind} in createE2EETransform`); - // @ts-ignore sender.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'encrypt', sessionId }); call.transformedSenders.add(sender); } @@ -717,11 +659,8 @@ async function createE2EETransform(call: WebRTCCall, sessionKey: Uint8Array, ses export async function handleCallOffer(userId: number, offer: RTCSessionDescriptionInit): Promise { let call = calls.get(userId); - console.log("handleCallOffer called for user", userId, "offer type:", offer.type); - // Handle race condition - offer might arrive before peer connection is created if (!call) { - console.log("No call found for offer, creating peer connection (race condition handling)"); await createPeerConnection(userId); call = calls.get(userId); if (!call) { @@ -732,7 +671,6 @@ export async function handleCallOffer(userId: number, offer: RTCSessionDescripti try { // Ensure we have local media before answering if (!call.localStream) { - console.log("Getting local media for answer"); try { const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); call.localStream = localStream; @@ -743,24 +681,17 @@ export async function handleCallOffer(userId: number, offer: RTCSessionDescripti } } - console.log("Setting remote description with", offer.sdp?.split('\n').filter(l => l.includes('m=')).join(', ')); - // Set remote description await call.peerConnection.setRemoteDescription(offer); - console.log("Creating answer..."); // Create answer const answer = await call.peerConnection.createAnswer(); await call.peerConnection.setLocalDescription(answer); - console.log("Answer created with", answer.sdp?.split('\n').filter(l => l.includes('m=')).join(', ')); - // Attach transforms on callee side if session key is available // If not available yet, setSessionKey will apply them when it arrives if (call.sessionKey) { await createE2EETransform(call, call.sessionKey, call.sessionId); - } else { - console.log("Session key not yet available in handleCallOffer - will apply transforms when key arrives"); } // Send answer to remote peer @@ -770,8 +701,6 @@ export async function handleCallOffer(userId: number, offer: RTCSessionDescripti toUserId: userId, data: answer }); - - console.log("Answer sent successfully"); } catch (error) { console.error("Failed to handle offer:", error); throw error; @@ -785,15 +714,8 @@ export async function handleCallAnswer(userId: number, answer: RTCSessionDescrip } try { - console.log("handleCallAnswer - setting remote description"); - console.log("Answer SDP media lines:", answer.sdp?.split('\n').filter(l => l.includes('m=')).join(', ')); - await call.peerConnection.setRemoteDescription(answer); - console.log("Remote description set successfully"); - console.log("Current receivers after answer:", call.peerConnection.getReceivers().map(r => r.track?.kind)); - console.log("Current senders after answer:", call.peerConnection.getSenders().map(s => s.track?.kind)); - // Reset negotiating flag call.isNegotiating = false; @@ -801,8 +723,6 @@ export async function handleCallAnswer(userId: number, answer: RTCSessionDescrip // If not available yet, setSessionKey will apply them when it arrives if (call.sessionKey) { await createE2EETransform(call, call.sessionKey, call.sessionId); - } else { - console.log("Session key not yet available in handleCallAnswer - will apply transforms when key arrives"); } // Check if there are new receivers with tracks that haven't been notified yet @@ -811,7 +731,6 @@ export async function handleCallAnswer(userId: number, answer: RTCSessionDescrip for (const receiver of receivers) { if (receiver.track) { const track = receiver.track; - console.log("Checking receiver track:", track.kind); // Find the stream for this track const transceiver = call.peerConnection.getTransceivers().find(t => t.receiver === receiver); @@ -820,7 +739,6 @@ export async function handleCallAnswer(userId: number, answer: RTCSessionDescrip if (track.kind === "video" && onRemoteVideoStream) { // Create a MediaStream from the track const stream = new MediaStream([track]); - console.log("Manually notifying remote video stream handler"); onRemoteVideoStream(userId, stream); } } @@ -835,13 +753,11 @@ export async function handleCallAnswer(userId: number, answer: RTCSessionDescrip export async function handleIceCandidate(userId: number, candidate: RTCIceCandidateInit): Promise { let call = calls.get(userId); if (!call) { - console.warn("No call found for ICE candidate from user", userId, "- might arrive before connection setup"); // Don't create peer connection here - ICE candidates will be gathered again after connection is established return; } try { - console.log("Adding ICE candidate from user", userId, ":", candidate); await call.peerConnection.addIceCandidate(candidate); } catch (error) { console.error("Failed to add ICE candidate:", error); @@ -863,7 +779,8 @@ export function toggleMute(userId: number): boolean { } // Create a silent audio track using Web Audio API - const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)(); + const AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext; + const audioContext = new AudioContextClass(); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); @@ -949,25 +866,14 @@ export async function toggleVideo(userId: number): Promise { const sender = call.peerConnection.addTrack(videoTrack, videoStream); call.videoSender = sender; - console.log("Video track added successfully"); - console.log("Current senders:", call.peerConnection.getSenders().map(s => s.track?.kind)); - console.log("Current transceivers:", call.peerConnection.getTransceivers().map(t => ({ - sender: t.sender.track?.kind, - receiver: t.receiver.track?.kind, - direction: t.direction, - mid: t.mid - }))); - // Apply E2EE transform with header-preserving encryption for video if (call.sessionKey && window.RTCRtpScriptTransform) { try { const key = await importAesGcmKey(call.sessionKey); - console.log("Applying E2EE to video sender with header preservation"); const sender = call.peerConnection.getSenders().find(s => s.track === videoTrack); if (sender && !call.transformedSenders.has(sender)) { sender.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: "encrypt", sessionId: call.sessionId }); call.transformedSenders.add(sender); - console.log("E2EE applied to video sender successfully"); } } catch (error) { console.error("Failed to apply E2EE to video:", error); @@ -977,14 +883,10 @@ export async function toggleVideo(userId: number): Promise { // Notify local video stream handler if (onLocalVideoStream) { - console.log("Calling onLocalVideoStream handler with stream:", videoStream); onLocalVideoStream(userId, videoStream); - } else { - console.warn("onLocalVideoStream handler is not set!"); } // Send signaling message to notify remote peer - console.log("Sending call_video_toggle with enabled: true"); await sendSignalingMessage({ type: "call_video_toggle", fromUserId: 0, @@ -992,7 +894,6 @@ export async function toggleVideo(userId: number): Promise { data: { enabled: true } }); - console.log("Video enabled successfully"); return true; } catch (error) { console.error("Failed to enable video:", error); @@ -1062,9 +963,8 @@ export async function toggleScreenShare(userId: number): Promise { writable: false, configurable: true }); - console.log("Set screen share stream ID to:", screenStream.id); } catch (e) { - console.warn("Failed to set custom stream ID, using default:", screenStream.id); + // Use default stream ID } call.screenShareStream = screenStream; @@ -1075,7 +975,6 @@ export async function toggleScreenShare(userId: number): Promise { // Handle when user stops sharing via browser UI videoTrack.addEventListener("ended", async () => { - console.log("Screen share track ended by browser controls"); // Clean up screen share state if (call.screenShareStream) { @@ -1118,7 +1017,6 @@ export async function toggleScreenShare(userId: number): Promise { // Send signaling message FIRST to notify remote peer before adding track // This ensures the receiver knows it's screen share before the track arrives - console.log("Sending screen share toggle BEFORE adding track"); await sendSignalingMessage({ type: "call_screen_share_toggle", fromUserId: 0, @@ -1127,56 +1025,32 @@ export async function toggleScreenShare(userId: number): Promise { }); // Small delay to ensure signaling message is processed before track arrives - await new Promise(resolve => setTimeout(resolve, 100)); + await delay(NEGOTIATION_DELAY); const sender = call.peerConnection.addTrack(videoTrack, screenStream); call.screenShareSender = sender; - console.log("Screen share track added, immediately applying E2EE transform"); - // CRITICAL: Apply E2EE transform IMMEDIATELY after track is added if (call.sessionKey && window.RTCRtpScriptTransform) { try { const key = await importAesGcmKey(call.sessionKey); - console.log("Applying E2EE to screen share sender:"); - console.log("- sessionId:", call.sessionId); - console.log("- sessionKey (first 8 bytes):", Array.from(new Uint8Array(call.sessionKey).slice(0, 8))); - console.log("Available senders:", call.peerConnection.getSenders().map(s => ({ - track: s.track?.kind, - id: s.track?.id - }))); - console.log("Looking for screen share track:", videoTrack.id); - const sender = call.peerConnection.getSenders().find(s => s.track === videoTrack); - console.log("Found screen share sender:", !!sender); if (sender && !call.transformedSenders.has(sender)) { sender.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: "encrypt", sessionId: call.sessionId }); call.transformedSenders.add(sender); - console.log("E2EE applied to screen share sender successfully"); - } else { - console.log("Screen share sender not found or already transformed"); } } catch (error) { console.error("Failed to apply E2EE to screen share:", error); throw error; // Fail securely } - } else { - console.log("Skipping E2EE for screen share - session key not available yet"); - console.log("Session key exists:", !!call.sessionKey); - console.log("RTCRtpScriptTransform available:", !!window.RTCRtpScriptTransform); } - // Let browser handle screen share settings naturally - // Avoid applying constraints that might cause glitches - // Notify local screen share handler if (onLocalScreenShare) { onLocalScreenShare(userId, screenStream); } - console.log("Screen share setup complete - using existing session key:", call.sessionId); - return true; } catch (error) { console.error("Failed to enable screen sharing:", error); @@ -1259,12 +1133,10 @@ export function cleanupCall(userId: number): void { export function setRemoteVideoEnabled(userId: number, enabled: boolean): void { const call = calls.get(userId); if (call) { - console.log(`Setting remote video enabled to ${enabled} for user ${userId}`); call.isRemoteVideoEnabled = enabled; // Reset counter when feature is disabled if (!enabled) { call.receivedVideoTrackCount = 0; - console.log("Reset video track counter"); } } } @@ -1275,12 +1147,10 @@ export function setRemoteVideoEnabled(userId: number, enabled: boolean): void { export function setRemoteScreenSharing(userId: number, enabled: boolean): void { const call = calls.get(userId); if (call) { - console.log(`Setting remote screen sharing to ${enabled} for user ${userId}`); call.isRemoteScreenSharing = enabled; // Reset counter when feature is disabled if (!enabled) { call.receivedScreenShareTrackCount = 0; - console.log("Reset screen share track counter"); } } } diff --git a/frontend/src/core/hooks/useDownloadAppScreen.tsx b/frontend/src/core/hooks/useDownloadAppScreen.tsx index bc058f2..b7999ab 100644 --- a/frontend/src/core/hooks/useDownloadAppScreen.tsx +++ b/frontend/src/core/hooks/useDownloadAppScreen.tsx @@ -1,5 +1,5 @@ import { Navigate } from "react-router-dom"; -import { MINIMUM_WIDTH } from "../config"; +import { MINIMUM_WIDTH } from "@/core/config"; import useWindowSize from "./useWindowSize"; export default function useDownloadAppScreen() { diff --git a/frontend/src/core/types.d.ts b/frontend/src/core/types.d.ts index d57fc3b..940ba78 100644 --- a/frontend/src/core/types.d.ts +++ b/frontend/src/core/types.d.ts @@ -435,11 +435,17 @@ export interface DialogProps { } // Call types -export interface CallInvite extends CallSignalingData { - type: "call_invite"; +export interface CallSignalingData { fromUserId: number; + toUserId: number; +} + +export interface CallInviteData { + fromUsername: string; +} + +export interface CallInviteMessageData { fromUsername: string; - timestamp: string; } export type CallSignalingDataType = "call_offer" | "call_answer" | "call_ice_candidate" | "call_end" | "call_invite" | "call_accept" | "call_reject" | "call_session_key" | "call_signaling" | "call_video_toggle" | "call_screen_share_toggle"; @@ -449,19 +455,76 @@ export interface CallSignalingMessage extends WebSocketMessage { fromUserId: number; toUserId: number; sessionKeyHash?: string; - data: any; + data: CallSignalingMessageData; +} + +export type CallSignalingMessageData = + | CallInviteMessageData + | CallAcceptData + | CallRejectData + | CallOfferData + | CallAnswerData + | CallIceCandidateData + | CallEndData + | CallSessionKeyData + | CallVideoToggleData + | CallScreenShareToggleData; + +export interface CallAcceptData { + fromUserId: number; +} + +export interface CallRejectData { + fromUserId: number; +} + +export interface CallOfferData extends RTCSessionDescriptionInit { +} + +export interface CallAnswerData extends RTCSessionDescriptionInit { +} + +export interface CallIceCandidateData extends RTCIceCandidateInit { +} + +export interface CallEndData { + fromUserId: number; +} + +export interface CallSessionKeyData { + wrappedSessionKey?: WrappedSessionKeyPayload; +} + +export interface CallVideoToggleData { + enabled: boolean; +} + +export interface CallScreenShareToggleData { + enabled: boolean; +} + +export interface CallVideoToggleMessageData { + fromUserId: number; + data: CallVideoToggleData; +} + +export interface CallScreenShareToggleMessageData { + fromUserId: number; + data: CallScreenShareToggleData; +} + +export interface WrappedSessionKeyPayload { + salt: string; + iv2: string; + wrapped: string; } export interface CallVideoToggleMessage extends CallSignalingMessage { type: "call_video_toggle"; - data: { - enabled: boolean; - }; + data: CallVideoToggleData; } export interface CallScreenShareToggleMessage extends CallSignalingMessage { type: "call_screen_share_toggle"; - data: { - enabled: boolean; - }; + data: CallScreenShareToggleData; } \ No newline at end of file diff --git a/frontend/src/core/websocket.ts b/frontend/src/core/websocket.ts index 8784694..1a6d736 100644 --- a/frontend/src/core/websocket.ts +++ b/frontend/src/core/websocket.ts @@ -6,9 +6,9 @@ */ import { API_WS_BASE_URL } from "./config"; -import type { CallSignalingMessage, WebSocketMessage } from "./types"; +import type { WebSocketMessage } from "./types"; import { delay } from "@/utils/utils"; -import { CallSignalingHandler } from "@/core/calls/signaling"; +import { CallSignalingHandler } from "./calls/signaling"; /** * Creates a new WebSocket connection to the chat server @@ -109,11 +109,11 @@ async function onError() { websocket.addEventListener("message", (e) => { try { - const response: CallSignalingMessage = JSON.parse(e.data); + const response: WebSocketMessage = JSON.parse(e.data); // Handle call signaling messages - if (callSignalingHandler && response.type === "call_signaling") { - callSignalingHandler.handleWebSocketMessage(response); + if (callSignalingHandler && response.type === "call_signaling" && response.data) { + callSignalingHandler.handleWebSocketMessage(response.data); } // Route message to global handler if set diff --git a/frontend/src/pages/chat/hooks/useCall.ts b/frontend/src/pages/chat/hooks/useCall.ts index 0b6757e..f945fcf 100644 --- a/frontend/src/pages/chat/hooks/useCall.ts +++ b/frontend/src/pages/chat/hooks/useCall.ts @@ -4,6 +4,7 @@ import { CallSignalingHandler } from "@/core/calls/signaling"; import { setCallSignalingHandler } from "@/core/websocket"; import { generateCallSessionKey, generateCallEmojis } from "@/core/calls/encryption"; import { createRef, useEffect } from "react"; +import { doAfterInteraction } from "@/utils/utils"; // Global refs shared across all instances let globalRemoteAudioRef = createRef(); @@ -91,14 +92,7 @@ export default function useCall() { }); el.play().catch(() => { - // Try to play after user interaction if autoplay is blocked - const playAfterInteraction = () => { - el.play().catch(() => {}); - document.removeEventListener("click", playAfterInteraction); - document.removeEventListener("touchstart", playAfterInteraction); - }; - document.addEventListener("click", playAfterInteraction); - document.addEventListener("touchstart", playAfterInteraction); + doAfterInteraction(() => el.play()); }); } catch (e) { console.warn("failed to attach remote stream:", e); @@ -107,9 +101,7 @@ export default function useCall() { // Set up local video stream handler WebRTC.setLocalVideoStreamHandler((_userId: number, stream: MediaStream | null) => { - console.log("Local video stream handler called, stream:", stream, "ref exists:", !!localVideoRef.current); if (!localVideoRef.current) { - console.warn("Local video ref not available yet"); return; } const el = localVideoRef.current; @@ -118,9 +110,9 @@ export default function useCall() { el.muted = true; // Always mute local video to avoid feedback el.autoplay = true; if (stream) { - console.log("Playing local video stream"); el.play().catch((err) => { console.error("Failed to play local video:", err); + doAfterInteraction(() => el.play()).catch(() => {}); }); } } catch (e) { @@ -130,9 +122,7 @@ export default function useCall() { // Set up remote video stream handler WebRTC.setRemoteVideoStreamHandler((_userId: number, stream: MediaStream | null) => { - console.log("Remote video stream handler called, stream:", stream, "ref exists:", !!remoteVideoRef.current); if (!remoteVideoRef.current) { - console.warn("Remote video ref not available yet"); return; } const el = remoteVideoRef.current; @@ -141,16 +131,9 @@ export default function useCall() { el.muted = false; el.autoplay = true; if (stream) { - console.log("Playing remote video stream"); el.play().catch((err) => { console.error("Failed to play remote video:", err); - const playAfterInteraction = () => { - el.play().catch(() => {}); - document.removeEventListener("click", playAfterInteraction); - document.removeEventListener("touchstart", playAfterInteraction); - }; - document.addEventListener("click", playAfterInteraction); - document.addEventListener("touchstart", playAfterInteraction); + doAfterInteraction(() => el.play()).catch(() => {}); }); } } catch (e) { @@ -160,9 +143,7 @@ export default function useCall() { // Set up local screen share handler WebRTC.setLocalScreenShareHandler((_userId: number, stream: MediaStream | null) => { - console.log("Local screen share handler called, stream:", stream, "ref exists:", !!localScreenShareRef.current); if (!localScreenShareRef.current) { - console.warn("Local screen share ref not available yet"); return; } const el = localScreenShareRef.current; @@ -171,9 +152,9 @@ export default function useCall() { el.muted = true; el.autoplay = true; if (stream) { - console.log("Playing local screen share"); el.play().catch((err) => { console.error("Failed to play local screen share:", err); + doAfterInteraction(() => el.play()).catch(() => {}); }); } } catch (e) { @@ -183,9 +164,7 @@ export default function useCall() { // Set up remote screen share handler WebRTC.setRemoteScreenShareHandler((_userId: number, stream: MediaStream | null) => { - console.log("Remote screen share handler called, stream:", stream, "ref exists:", !!remoteScreenShareRef.current); if (!remoteScreenShareRef.current) { - console.warn("Remote screen share ref not available yet"); return; } const el = remoteScreenShareRef.current; @@ -194,16 +173,9 @@ export default function useCall() { el.muted = false; el.autoplay = true; if (stream) { - console.log("Playing remote screen share"); el.play().catch((err) => { console.error("Failed to play remote screen share:", err); - const playAfterInteraction = () => { - el.play().catch(() => {}); - document.removeEventListener("click", playAfterInteraction); - document.removeEventListener("touchstart", playAfterInteraction); - }; - document.addEventListener("click", playAfterInteraction); - document.addEventListener("touchstart", playAfterInteraction); + doAfterInteraction(() => el.play()).catch(() => {}); }); } } catch (e) { @@ -245,7 +217,6 @@ export default function useCall() { const hasPermission = await requestAudioPermissions(); if (!hasPermission) { - console.log("Audio permission denied"); return; } diff --git a/frontend/src/pages/chat/hooks/useDM.ts b/frontend/src/pages/chat/hooks/useDM.ts index 189ef64..07029c3 100644 --- a/frontend/src/pages/chat/hooks/useDM.ts +++ b/frontend/src/pages/chat/hooks/useDM.ts @@ -6,7 +6,7 @@ import { fetchDMHistory, decryptDm, sendDMViaWebSocket -} from "../../../core/api/dmApi"; +} from "@/core/api/dmApi"; import type { User, Message, DmEncryptedJSON } from "@/core/types"; import { websocket } from "@/core/websocket"; diff --git a/frontend/src/pages/chat/ui/right/calls/CallWindow.tsx b/frontend/src/pages/chat/ui/right/calls/CallWindow.tsx index 794db42..7413a0a 100644 --- a/frontend/src/pages/chat/ui/right/calls/CallWindow.tsx +++ b/frontend/src/pages/chat/ui/right/calls/CallWindow.tsx @@ -88,11 +88,9 @@ export function CallWindow() { } else { if (shouldRender) { // Call ended - start exit animation - console.log(`Call ended - starting exit animation. Was minimized: ${wasMinimized}`); setIsVisible(false); // After animation completes, stop rendering const timer = setTimeout(() => { - console.log("Exit animation complete, removing window"); setShouldRender(false); setCallData(null); setWasMinimized(false); @@ -195,12 +193,6 @@ export function CallWindow() { left: pipPosition.x, top: pipPosition.y } : undefined} - ref={(el) => { - if (el && !isVisible) { - console.log(`Window classes: ${el.className}`); - console.log(`Window state - was minimized: ${wasMinimized}, visible: ${isVisible}`); - } - }} onMouseDown={(e) => { if (call.isMinimized) { // Only start dragging if not clicking on a button diff --git a/frontend/src/pages/chat/ui/right/panels/DMPanel.ts b/frontend/src/pages/chat/ui/right/panels/DMPanel.ts index 179b62f..fbb0046 100644 --- a/frontend/src/pages/chat/ui/right/panels/DMPanel.ts +++ b/frontend/src/pages/chat/ui/right/panels/DMPanel.ts @@ -6,7 +6,7 @@ import { sendDmWithFiles, editDmEnvelope, deleteDmEnvelope -} from "../../../../../core/api/dmApi"; +} from "@/core/api/dmApi"; import type { DmEncryptedJSON, DmEnvelope, DMWebSocketMessage, EncryptedMessageJson, Message } from "@/core/types"; import type { UserState } from "@/pages/chat/state"; diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts index b3b10de..f678d26 100644 --- a/frontend/src/utils/utils.ts +++ b/frontend/src/utils/utils.ts @@ -43,4 +43,34 @@ export function ub64(s: string): Uint8Array { export function id(id: string): T { return document.getElementById(id) as unknown as T +} + +/** + * Runs the specified callback after `click` or `touchstart` event is triggered. + * + * @param action The action to perform after interaction + * @returns A function to clean up the event listeners. + */ +export function doAfterInteraction(action?: () => (T | Promise)): Promise { + return new Promise((resolve, reject) => { + function doAfterInteractionInner() { + document.removeEventListener("click", doAfterInteractionInner); + document.removeEventListener("touchstart", doAfterInteractionInner); + try { + const result = action?.(); + if (result instanceof Promise) { + result.then(resolve); + } else { + resolve(result as T); + } + } catch (error) { + reject(error); + } + } + + document.addEventListener("click", doAfterInteractionInner); + document.addEventListener("touchstart", doAfterInteractionInner); + + setTimeout(reject, 10000); + }); } \ No newline at end of file