FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Start the implementation

Browse Source
This commit is contained in:
denis0001-dev
2025-10-11 14:05:44 +03:00
Unverified
parent 1b2f825a74
commit caf595e968
10 changed files with 1210 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/core/calls/e2eeWorker.ts
+34 -60
View File
@@ -1,6 +1,7 @@
/**
* E2EE Worker for WebRTC Insertable Streams
* Conditionally encrypts or decrypts encoded audio frames using AES-GCM
* Encrypts/decrypts encoded audio and video frames using AES-GCM
* Optimized for both small audio frames and large video frames
*/
export interface EncodedFrame {
@@ -10,87 +11,60 @@ export interface EncodedFrame {
export interface WorkerOptions {
key: CryptoKey;
mode: 'encrypt' | 'decrypt';
sessionId?: string; // For replay protection
sessionId?: string;
}
addEventListener("rtctransform", (event) => {
const { transformer } = event;
const { readable, writable } = transformer;
const { key, mode, sessionId } = transformer.options as WorkerOptions;
const { key, mode } = transformer.options as WorkerOptions;
// Generate a random base IV once per transform session
const ivBase = crypto.getRandomValues(new Uint8Array(8)); // 8 random bytes
// Use a synchronized counter for IV generation
// Both sides must start from the same point for the same session
let frameCounter = 0;
let lastFrameTime = 0;
const FRAME_WINDOW_MS = 5000; // 5 second window for replay protection
// Track sender vs receiver side independently
// Each side maintains its own counter
const isEncrypting = mode === 'encrypt';
async function transform(encodedFrame: EncodedFrame, controller: TransformStreamDefaultController<EncodedFrame>) {
try {
const currentTime = Date.now();
// Replay protection for decryption
if (mode === 'decrypt') {
// Simple time-based replay protection
if (currentTime - lastFrameTime > FRAME_WINDOW_MS && lastFrameTime > 0) {
console.warn("Potential replay attack detected - frame outside time window");
controller.error(new Error("Replay attack detected"));
return;
}
lastFrameTime = currentTime;
}
// Create IV: 8 random bytes + 4-byte frame counter
// Create a unique IV for each frame using the counter
// Format: 12 bytes total = 8 bytes of zeros + 4 bytes counter
const iv = new Uint8Array(12);
iv.set(ivBase, 0); // Copy random base
const view = new DataView(iv.buffer);
view.setUint32(8, frameCounter++, false); // Big-endian frame counter
view.setUint32(8, frameCounter++, false); // Big-endian counter
const data = new Uint8Array(encodedFrame.data);
// Add frame metadata for authentication
const frameMetadata = new TextEncoder().encode(JSON.stringify({
frameNumber: frameCounter - 1,
timestamp: currentTime,
sessionId: sessionId || 'default'
}));
// Combine frame data with metadata
const combinedData = new Uint8Array(data.length + frameMetadata.length);
combinedData.set(frameMetadata, 0);
combinedData.set(data, frameMetadata.length);
const params: AesGcmParams = { name: 'AES-GCM', iv };
let result: ArrayBuffer;
if (mode === 'encrypt') {
result = await crypto.subtle.encrypt(params, key, combinedData);
if (isEncrypting) {
// Encrypt: just encrypt the raw frame data
result = await crypto.subtle.encrypt(params, key, data);
} else {
result = await crypto.subtle.decrypt(params, key, combinedData);
// Verify frame metadata on decryption
const decryptedData = new Uint8Array(result);
const metadataLength = frameMetadata.length;
const extractedMetadata = decryptedData.slice(0, metadataLength);
const extractedData = decryptedData.slice(metadataLength);
try {
const metadata = JSON.parse(new TextDecoder().decode(extractedMetadata));
if (metadata.frameNumber !== frameCounter - 1) {
throw new Error("Frame sequence number mismatch");
}
result = extractedData.buffer;
} catch (parseError) {
console.warn("Frame authentication failed:", parseError);
controller.error(new Error("Frame authentication failed"));
return;
}
// Decrypt: just decrypt the raw frame data
result = await crypto.subtle.decrypt(params, key, data);
}
// Update frame data with encrypted/decrypted result
encodedFrame.data = new Uint8Array(result);
controller.enqueue(encodedFrame);
} catch (e) {
console.error(`E2EE ${mode} failed:`, e);
controller.error(new Error(`E2EE ${mode} failed`));
// Log error but don't stop the stream - allows graceful degradation
console.error(`E2EE ${mode} failed for frame ${frameCounter}:`, e);
// For decryption errors, we can't recover - must drop the frame
if (!isEncrypting) {
// Just drop the frame silently to avoid breaking the stream
return;
}
// For encryption errors, pass through unencrypted as last resort
console.warn("Passing through unencrypted frame due to encryption failure");
controller.enqueue(encodedFrame);
}
}
frontend/src/core/calls/signaling.ts
+38 -4
View File
@@ -5,6 +5,8 @@ export interface CallState {
receiveCall: (userId: number, username: string) => void;
endCall: () => void;
setCallSessionKeyHash: (sessionKeyHash: string) => void;
setRemoteVideoEnabled: (enabled: boolean) => void;
setRemoteScreenSharing: (enabled: boolean) => void;
}
export class CallSignalingHandler {
@@ -52,6 +54,12 @@ export class CallSignalingHandler {
case "call_session_key":
this.handleCallSessionKey(data);
break;
case "call_video_toggle":
this.handleVideoToggle(data);
break;
case "call_screen_share_toggle":
this.handleScreenShareToggle(data);
break;
}
}
@@ -59,11 +67,11 @@ export class CallSignalingHandler {
const { fromUserId, fromUsername } = data;
const state = this.getState();
// Show incoming call UI
state.receiveCall(fromUserId, fromUsername);
// Handle incoming call in WebRTC service
// First, create the peer connection in WebRTC service
await WebRTC.handleIncomingCall(fromUserId, fromUsername);
// Then show incoming call UI
state.receiveCall(fromUserId, fromUsername);
}
private async handleCallAccept(data: any) {
@@ -126,4 +134,30 @@ export class CallSignalingHandler {
WebRTC.receiveWrappedSessionKey(message.fromUserId, data.wrappedSessionKey, sessionKeyHash);
}
}
private handleVideoToggle(data: any) {
console.log("handleVideoToggle called with data:", data);
const state = this.getState();
const { data: toggleData } = data;
if (toggleData && typeof toggleData.enabled === "boolean") {
console.log("Setting remote video enabled to:", toggleData.enabled);
state.setRemoteVideoEnabled(toggleData.enabled);
} else {
console.warn("Invalid toggle data:", toggleData);
}
}
private handleScreenShareToggle(data: any) {
console.log("handleScreenShareToggle called with data:", data);
const state = this.getState();
const { data: toggleData } = data;
if (toggleData && typeof toggleData.enabled === "boolean") {
console.log("Setting remote screen sharing to:", toggleData.enabled);
state.setRemoteScreenSharing(toggleData.enabled);
} else {
console.warn("Invalid toggle data:", toggleData);
}
}
}
frontend/src/core/calls/webrtc.ts
+434 -48
View File
@@ -1,21 +1,25 @@
import { getAuthHeaders } from "@/core/api/authApi";
import type { CallSignalingMessage, IceServersResponse } from "@/core/types";
import { request } from "@/core/websocket";
import { wrapCallSessionKeyForRecipient, unwrapCallSessionKeyFromSender } from "./encryption";
import { wrapCallSessionKeyForRecipient, unwrapCallSessionKeyFromSender, rotateCallSessionKey } from "./encryption";
import { fetchUserPublicKey } from "@/core/api/dmApi";
import { importAesGcmKey } from "@/utils/crypto/symmetric";
import E2EEWorker from "./e2eeWorker?worker";
import { rotateCallSessionKey, createSharedSecretAndDeriveSessionKey } from "./encryption";
export interface WebRTCCall {
peerConnection: RTCPeerConnection;
localStream: MediaStream | null;
remoteStream: MediaStream | null;
localVideoStream: MediaStream | null;
screenShareStream: MediaStream | null;
isInitiator: boolean;
remoteUserId: number;
remoteUsername: string;
isEnding?: boolean;
isMuted?: boolean;
isLocalVideoEnabled: boolean;
isScreenSharing: boolean;
isNegotiating?: boolean;
// Insertable Streams E2EE
sessionKey?: Uint8Array | null;
sessionCryptoKey?: CryptoKey | null;
@@ -28,6 +32,10 @@ export interface WebRTCCall {
export let authToken: string | null = null;
export let onCallStateChange: ((userId: number, state: string) => void) | null = null;
export let onRemoteStream: ((userId: number, stream: MediaStream) => void) | null = null;
export let onLocalVideoStream: ((userId: number, stream: MediaStream | null) => void) | null = null;
export let onRemoteVideoStream: ((userId: number, stream: MediaStream | null) => void) | null = null;
export let onLocalScreenShare: ((userId: number, stream: MediaStream | null) => void) | null = null;
export let onRemoteScreenShare: ((userId: number, stream: MediaStream | null) => void) | null = null;
const calls: Map<number, WebRTCCall> = new Map();
export function setAuthToken(token: string) {
@@ -42,6 +50,22 @@ export function setRemoteStreamHandler(handler: (userId: number, stream: MediaSt
onRemoteStream = handler;
}
export function setLocalVideoStreamHandler(handler: (userId: number, stream: MediaStream | null) => void) {
onLocalVideoStream = handler;
}
export function setRemoteVideoStreamHandler(handler: (userId: number, stream: MediaStream | null) => void) {
onRemoteVideoStream = handler;
}
export function setLocalScreenShareHandler(handler: (userId: number, stream: MediaStream | null) => void) {
onLocalScreenShare = handler;
}
export function setRemoteScreenShareHandler(handler: (userId: number, stream: MediaStream | null) => void) {
onRemoteScreenShare = handler;
}
async function sendSignalingMessage(message: CallSignalingMessage) {
if (!authToken) {
throw new Error("No auth token available");
@@ -99,10 +123,14 @@ async function createPeerConnection(userId: number): Promise<RTCPeerConnection>
peerConnection,
localStream: null,
remoteStream: null,
localVideoStream: null,
screenShareStream: null,
isInitiator: false,
remoteUserId: userId,
remoteUsername: "",
isMuted: false,
isLocalVideoEnabled: false,
isScreenSharing: false,
sessionKey: null,
sessionCryptoKey: null,
sessionId: crypto.randomUUID()
@@ -144,17 +172,103 @@ async function createPeerConnection(userId: number): Promise<RTCPeerConnection>
});
peerConnection.addEventListener("signalingstatechange", () => {
// Signaling state changed
console.log("Signaling state changed:", peerConnection.signalingState);
});
// Handle renegotiation when tracks are added/removed
peerConnection.addEventListener("negotiationneeded", async () => {
try {
console.log("Negotiation needed for user", userId);
const call = calls.get(userId);
if (!call) {
console.log("Skipping renegotiation - call not found");
return;
}
// Prevent multiple simultaneous negotiations
if (call.isNegotiating) {
console.log("Already negotiating, skipping");
return;
}
// Skip if we're in "stable" state and haven't finished the initial handshake
if (peerConnection.signalingState !== "stable") {
console.log("Skipping renegotiation - signaling state is", peerConnection.signalingState);
return;
}
call.isNegotiating = true;
console.log("Creating new offer for renegotiation (signalingState:", peerConnection.signalingState + ")");
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
console.log("Sending renegotiation offer to user", userId);
await sendSignalingMessage({
type: "call_offer",
fromUserId: 0,
toUserId: userId,
data: offer
});
call.isNegotiating = false;
} catch (error) {
console.error("Failed to handle negotiation:", error);
const call = calls.get(userId);
if (call) {
call.isNegotiating = false;
}
}
});
// Handle remote stream
peerConnection.addEventListener("track", (event) => {
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) {
call.remoteStream = remoteStream;
if (onRemoteStream) {
onRemoteStream(userId, remoteStream);
if (call && remoteStream) {
const track = event.track;
// Apply E2EE transform to the receiver for this new track if session key is available
// Currently disabled for video tracks due to counter synchronization issues
if (call.sessionKey && window.RTCRtpScriptTransform && track.kind === "audio") {
try {
const key = await importAesGcmKey(call.sessionKey);
const receiver = call.peerConnection.getReceivers().find(r => r.track === track);
if (receiver) {
console.log(`Applying decrypt transform to newly received ${track.kind} track`);
// @ts-ignore
receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt', sessionId: call.sessionId });
}
} catch (error) {
console.error("Failed to apply E2EE to received track:", error);
}
}
// Determine stream type based on track kind and stream ID
const streamId = remoteStream.id;
// Check if this is a screen share stream (we'll use a convention: screen share streams have "screen" in their ID)
if (streamId.includes("screen")) {
console.log("Detected screen share track, notifying handler");
// Handle remote screen share
if (onRemoteScreenShare) {
onRemoteScreenShare(userId, remoteStream);
}
} else if (track.kind === "video") {
console.log("Detected video track, notifying handler");
// Handle remote video
if (onRemoteVideoStream) {
onRemoteVideoStream(userId, remoteStream);
}
} 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);
}
}
}
});
@@ -168,10 +282,10 @@ async function createPeerConnection(userId: number): Promise<RTCPeerConnection>
onCallStateChange(userId, peerConnection.connectionState);
}
// Clean up if connection failed or closed
// Clean up only on permanent failures
// Don't end on "disconnected" - ICE can recover from temporary disconnections
if (peerConnection.connectionState === "failed" ||
peerConnection.connectionState === "closed" ||
peerConnection.connectionState === "disconnected") {
peerConnection.connectionState === "closed") {
// Only send end call message if we're not already cleaning up
const call = calls.get(userId);
if (call && !call.isEnding) {
@@ -270,20 +384,37 @@ export async function sendWrappedCallSessionKey(userId: number, sessionKey: Uint
async function applyE2EETransforms(call: WebRTCCall): Promise<void> {
try {
// @ts-ignore
if (!call.sessionKey || !window.RTCRtpScriptTransform) return;
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;
const receiver = call.peerConnection.getReceivers().find(r => r.track && r.track.kind === 'audio');
if (receiver) {
// @ts-ignore
receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt' });
// Apply to audio receivers only (video E2EE requires synchronized counters)
const receivers = call.peerConnection.getReceivers();
for (const receiver of receivers) {
if (receiver.track && receiver.track.kind === "audio") {
console.log(`Applying decrypt transform to ${receiver.track.kind} receiver`);
// @ts-ignore
receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt', sessionId: call.sessionId });
}
}
const sender = call.peerConnection.getSenders().find(s => s.track && s.track.kind === 'audio');
if (sender) {
// @ts-ignore
sender.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'encrypt' });
// Apply to audio senders only (video E2EE requires synchronized counters)
const senders = call.peerConnection.getSenders();
for (const sender of senders) {
if (sender.track && sender.track.kind === "audio") {
console.log(`Applying encrypt transform to ${sender.track.kind} sender`);
// @ts-ignore
sender.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'encrypt', sessionId: call.sessionId });
}
}
} catch {}
} catch (error) {
console.error("Failed to apply E2EE transforms:", error);
}
}
export async function setSessionKey(userId: number, keyBytes: Uint8Array): Promise<void> {
@@ -341,19 +472,15 @@ export async function receiveWrappedSessionKey(fromUserId: number, wrappedPayloa
if (!senderPublicKey) return;
if (!wrappedPayload || !sessionKeyHash) return;
// First unwrap the session key from the encrypted payload (for validation)
await unwrapCallSessionKeyFromSender(senderPublicKey, {
// Unwrap the session key from the encrypted payload
const unwrappedSessionKey = await unwrapCallSessionKeyFromSender(senderPublicKey, {
salt: wrappedPayload.salt,
iv2: wrappedPayload.iv2,
wrapped: wrappedPayload.wrapped
});
// Then derive the actual session key from the shared secret
const call = calls.get(fromUserId);
const isInitiator = call?.isInitiator ?? false;
const derivedSessionKey = await createSharedSecretAndDeriveSessionKey(senderPublicKey, sessionKeyHash, isInitiator);
await setSessionKey(fromUserId, derivedSessionKey.key);
// Use the unwrapped session key directly (both sides should have the same key)
await setSessionKey(fromUserId, unwrappedSessionKey);
} catch (e) {
console.error("Failed to unwrap session key:", e);
}
@@ -369,10 +496,12 @@ export async function acceptCall(userId: number): Promise<boolean> {
if (!call) return false;
}
// Get user media and attach
const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
call.localStream = localStream;
localStream.getTracks().forEach(track => call!.peerConnection.addTrack(track, localStream));
// Get user media and attach (only if not already attached)
if (!call.localStream) {
const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
call.localStream = localStream;
localStream.getTracks().forEach(track => call!.peerConnection.addTrack(track, localStream));
}
// Notify initiator that callee accepted; initiator will generate offer
await sendSignalingMessage({
@@ -440,6 +569,10 @@ export async function onRemoteAccepted(userId: number): Promise<void> {
}
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));
// Create offer
const offer = await call.peerConnection.createOffer();
await call.peerConnection.setLocalDescription(offer);
@@ -459,39 +592,88 @@ export async function onRemoteAccepted(userId: number): Promise<void> {
async function createE2EETransform(sessionKey: NonNullable<WebRTCCall['sessionKey']>, peerConnection: RTCPeerConnection, sessionId?: string): Promise<void> {
try {
if (sessionKey && window.RTCRtpScriptTransform) {
const key = await importAesGcmKey(sessionKey);
const receiver = peerConnection.getReceivers().find(r => r.track && r.track.kind === 'audio');
if (receiver) {
// @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 audio receivers only (video E2EE requires synchronized counters)
const receivers = peerConnection.getReceivers();
for (const receiver of receivers) {
if (receiver.track && receiver.track.kind === "audio") {
console.log(`Applying decrypt transform to ${receiver.track.kind} in createE2EETransform`);
// @ts-ignore
receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt', sessionId });
}
const sender = peerConnection.getSenders().find(s => s.track && s.track.kind === 'audio');
if (sender) {
}
// Apply to audio senders only (video E2EE requires synchronized counters)
const senders = peerConnection.getSenders();
for (const sender of senders) {
if (sender.track && sender.track.kind === "audio") {
console.log(`Applying encrypt transform to ${sender.track.kind} in createE2EETransform`);
// @ts-ignore
sender.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'encrypt', sessionId });
}
}
} catch (error) {
console.error("Failed to create E2EE transform:", error);
throw error;
// Don't throw - let the call continue without E2EE
}
}
export async function handleCallOffer(userId: number, offer: RTCSessionDescriptionInit): Promise<void> {
const call = calls.get(userId);
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) {
throw new Error("No call found for offer");
console.log("No call found for offer, creating peer connection (race condition handling)");
await createPeerConnection(userId);
call = calls.get(userId);
if (!call) {
throw new Error("Failed to create call for offer");
}
}
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;
localStream.getTracks().forEach(track => call!.peerConnection.addTrack(track, localStream));
} catch (mediaError) {
console.error("Failed to get local media:", mediaError);
// Continue anyway - we can still receive media
}
}
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);
// Attach transforms on callee side if session key set and insertable streams supported
await createE2EETransform(call.sessionKey!, call.peerConnection, call.sessionId);
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.sessionKey, call.peerConnection, call.sessionId);
} else {
console.log("Session key not yet available in handleCallOffer - will apply transforms when key arrives");
}
// Send answer to remote peer
await sendSignalingMessage({
@@ -500,6 +682,8 @@ 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;
@@ -514,8 +698,17 @@ export async function handleCallAnswer(userId: number, answer: RTCSessionDescrip
try {
await call.peerConnection.setRemoteDescription(answer);
// After signaling completes, attach transforms on initiator side if supported
await createE2EETransform(call.sessionKey!, call.peerConnection, call.sessionId);
// Reset negotiating flag
call.isNegotiating = false;
// Attach transforms on initiator side if session key is available
// If not available yet, setSessionKey will apply them when it arrives
if (call.sessionKey) {
await createE2EETransform(call.sessionKey, call.peerConnection, call.sessionId);
} else {
console.log("Session key not yet available in handleCallAnswer - will apply transforms when key arrives");
}
} catch (error) {
console.error("Failed to handle answer:", error);
throw error;
@@ -523,9 +716,10 @@ export async function handleCallAnswer(userId: number, answer: RTCSessionDescrip
}
export async function handleIceCandidate(userId: number, candidate: RTCIceCandidateInit): Promise<void> {
const call = calls.get(userId);
let call = calls.get(userId);
if (!call) {
console.warn("No call found for ICE candidate from user", userId);
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;
}
@@ -616,6 +810,188 @@ export function getCall(userId: number): WebRTCCall | undefined {
return calls.get(userId);
}
export async function toggleVideo(userId: number): Promise<boolean> {
const call = calls.get(userId);
if (!call) {
return false;
}
if (!call.isLocalVideoEnabled) {
// Enable video
try {
const videoStream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: false
});
call.localVideoStream = videoStream;
call.isLocalVideoEnabled = true;
// Add video track to peer connection
const videoTrack = videoStream.getVideoTracks()[0];
call.peerConnection.addTrack(videoTrack, videoStream);
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
})));
// Note: E2EE for video is temporarily disabled for testing
// Will re-enable with proper counter synchronization
console.log("Video sent without E2EE (will implement synchronized encryption)");
// 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,
toUserId: userId,
data: { enabled: true }
});
console.log("Video enabled successfully");
return true;
} catch (error) {
console.error("Failed to enable video:", error);
return false;
}
} else {
// Disable video
if (call.localVideoStream) {
call.localVideoStream.getTracks().forEach(track => {
track.stop();
// Remove track from peer connection
const senders = call.peerConnection.getSenders();
const videoSender = senders.find(s => s.track === track);
if (videoSender) {
call.peerConnection.removeTrack(videoSender);
}
});
call.localVideoStream = null;
}
call.isLocalVideoEnabled = false;
// Notify local video stream handler
if (onLocalVideoStream) {
onLocalVideoStream(userId, null);
}
// Send signaling message to notify remote peer
await sendSignalingMessage({
type: "call_video_toggle",
fromUserId: 0,
toUserId: userId,
data: { enabled: false }
});
return false;
}
}
export async function toggleScreenShare(userId: number): Promise<boolean> {
const call = calls.get(userId);
if (!call) {
return false;
}
if (!call.isScreenSharing) {
// Enable screen sharing
try {
// @ts-ignore - getDisplayMedia might not be in all TypeScript versions
const screenStream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: false
});
// Set a special ID to identify screen share streams
Object.defineProperty(screenStream, "id", {
value: `screen-${crypto.randomUUID()}`,
writable: false
});
call.screenShareStream = screenStream;
call.isScreenSharing = true;
// Add screen share track to peer connection
const videoTrack = screenStream.getVideoTracks()[0];
// Handle when user stops sharing via browser UI
videoTrack.addEventListener("ended", () => {
toggleScreenShare(userId);
});
call.peerConnection.addTrack(videoTrack, screenStream);
console.log("Screen share track added successfully");
// Note: E2EE for screen share is temporarily disabled for testing
// Will re-enable with proper counter synchronization
console.log("Screen share sent without E2EE (will implement synchronized encryption)");
// Notify local screen share handler
if (onLocalScreenShare) {
onLocalScreenShare(userId, screenStream);
}
// Send signaling message to notify remote peer
await sendSignalingMessage({
type: "call_screen_share_toggle",
fromUserId: 0,
toUserId: userId,
data: { enabled: true }
});
return true;
} catch (error) {
console.error("Failed to enable screen sharing:", error);
return false;
}
} else {
// Disable screen sharing
if (call.screenShareStream) {
call.screenShareStream.getTracks().forEach(track => {
track.stop();
// Remove track from peer connection
const senders = call.peerConnection.getSenders();
const screenSender = senders.find(s => s.track === track);
if (screenSender) {
call.peerConnection.removeTrack(screenSender);
}
});
call.screenShareStream = null;
}
call.isScreenSharing = false;
// Notify local screen share handler
if (onLocalScreenShare) {
onLocalScreenShare(userId, null);
}
// Send signaling message to notify remote peer
await sendSignalingMessage({
type: "call_screen_share_toggle",
fromUserId: 0,
toUserId: userId,
data: { enabled: false }
});
return false;
}
}
export function cleanupCall(userId: number): void {
const call = calls.get(userId);
if (call) {
@@ -634,6 +1010,16 @@ export function cleanupCall(userId: number): void {
call.localStream.getTracks().forEach(track => track.stop());
}
// Stop local video stream
if (call.localVideoStream) {
call.localVideoStream.getTracks().forEach(track => track.stop());
}
// Stop screen share stream
if (call.screenShareStream) {
call.screenShareStream.getTracks().forEach(track => track.stop());
}
calls.delete(userId);
}
}
frontend/src/core/types.d.ts
Vendored
+15 -1
View File
@@ -442,7 +442,7 @@ export interface CallInvite extends CallSignalingData {
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";
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";
export interface CallSignalingMessage extends WebSocketMessage {
type: CallSignalingDataType;
@@ -450,4 +450,18 @@ export interface CallSignalingMessage extends WebSocketMessage {
toUserId: number;
sessionKeyHash?: string;
data: any;
}
export interface CallVideoToggleMessage extends CallSignalingMessage {
type: "call_video_toggle";
data: {
enabled: boolean;
};
}
export interface CallScreenShareToggleMessage extends CallSignalingMessage {
type: "call_screen_share_toggle";
data: {
enabled: boolean;
};
}
frontend/src/pages/chat/css/_callWindow.scss
+154 -52
View File
@@ -5,7 +5,9 @@
position: fixed;
z-index: 1000;
width: 300px;
min-width: 800px;
width: fit-content;
max-width: 1200px;
background-color: rgba($color-dark-surface, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
@@ -16,6 +18,8 @@
transition: opacity 0.3s $transition, transform 0.3s $transition;
transform-origin: center;
user-select: none;
display: flex;
flex-direction: column;
&.visible {
opacity: 1;
@@ -100,12 +104,13 @@
border-bottom: 1px solid $color-dark-outline-variant;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
.window-controls {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: flex;
gap: 8px;
.minimize-btn {
color: $color-dark-on-surface-variant;
@@ -117,69 +122,143 @@
}
}
.user-info-centered {
.call-header-info {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
gap: 4px;
text-align: center;
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
.username {
margin: 0;
font-size: 18px;
font-weight: 600;
color: $color-dark-on-surface;
}
.status {
margin: 0;
font-size: 14px;
color: $color-dark-on-surface-variant;
font-weight: 500;
}
.encryption-emojis {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 8px;
.encryption-emoji {
font-size: 20px;
display: inline-block;
animation: emoji-pulse 2s ease-in-out infinite;
&:nth-child(1) { animation-delay: 0s; }
&:nth-child(2) { animation-delay: 0.2s; }
&:nth-child(3) { animation-delay: 0.4s; }
&:nth-child(4) { animation-delay: 0.6s; }
}
}
}
}
.call-content {
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
z-index: 1;
flex: 1;
.video-tiles-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
min-height: 240px;
}
.video-tile {
position: relative;
background: rgba($color-dark-surface-variant, 0.4);
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba($color-dark-outline, 0.3);
.video-element {
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: 0 0 20px rgba(33, 150, 243, 0.3);
transition: box-shadow 0.3s ease;
position: relative;
z-index: 1;
}
// Colored shadow based on call state
.gradient-calling & {
box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
.video-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
height: 100%;
background: rgba($color-dark-surface-variant, 0.6);
.placeholder-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.gradient-connecting & {
box-shadow: 0 0 20px rgba(33, 150, 243, 0.4);
}
.gradient-active & {
box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
.placeholder-username {
font-size: 16px;
font-weight: 500;
color: $color-dark-on-surface;
}
}
.user-details {
.username {
margin: 0;
font-size: 18px;
font-weight: 600;
color: $color-dark-on-surface;
}
.tile-label {
position: absolute;
bottom: 8px;
left: 8px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.7);
color: white;
font-size: 12px;
font-weight: 500;
border-radius: 4px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.status {
margin: 4px 0 0 0;
font-size: 14px;
color: $color-dark-on-surface-variant;
font-weight: 500;
&.local-video {
.video-element {
transform: scaleX(-1); // Mirror local video
}
}
}
.encryption-emojis {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 8px;
.screen-share-tile {
aspect-ratio: 16 / 9;
min-height: 400px;
grid-column: 1 / -1;
border: 2px solid rgba($color-dark-primary, 0.5);
.encryption-emoji {
font-size: 20px;
display: inline-block;
animation: emoji-pulse 2s ease-in-out infinite;
&:nth-child(1) { animation-delay: 0s; }
&:nth-child(2) { animation-delay: 0.2s; }
&:nth-child(3) { animation-delay: 0.4s; }
&:nth-child(4) { animation-delay: 0.6s; }
}
}
.video-element {
object-fit: contain;
background: rgba(0, 0, 0, 0.8);
}
.tile-label {
font-size: 14px;
padding: 6px 12px;
background: rgba($color-dark-primary, 0.8);
color: $color-dark-on-primary;
}
}
}
@@ -189,6 +268,29 @@
display: flex;
justify-content: center;
gap: 12px;
border-top: 1px solid $color-dark-outline-variant;
position: relative;
z-index: 1;
mdui-button-icon {
&[icon="call_end"] {
background: rgba(244, 67, 54, 0.2);
color: rgb(244, 67, 54);
&:hover {
background: rgba(244, 67, 54, 0.3);
}
}
&[icon="videocam"],
&[icon="videocam_off"],
&[icon="screen_share"],
&[icon="stop_screen_share"] {
&:hover {
background: rgba($color-dark-primary, 0.1);
}
}
}
}
// Minimized call bar
frontend/src/pages/chat/hooks/useAudioCall.ts
+15 -7
View File
@@ -2,7 +2,7 @@ import { useAppState } from "@/pages/chat/state";
import * as WebRTC from "@/core/calls/webrtc";
import { CallSignalingHandler } from "@/core/calls/signaling";
import { setCallSignalingHandler } from "@/core/websocket";
import { generateCallSessionKey, generateCallEmojis, createCallSessionKeyFromHash } from "@/core/calls/encryption";
import { generateCallSessionKey, generateCallEmojis } from "@/core/calls/encryption";
import { createRef, useEffect } from "react";
// Global audio ref shared across all instances
@@ -25,7 +25,15 @@ export default function useAudioCall() {
state.receiveCall(userId, username);
},
endCall,
setCallSessionKeyHash
setCallSessionKeyHash,
setRemoteVideoEnabled: (enabled: boolean) => {
const state = useAppState.getState();
state.setRemoteVideoEnabled(enabled);
},
setRemoteScreenSharing: (enabled: boolean) => {
const state = useAppState.getState();
state.setRemoteScreenSharing(enabled);
}
}));
setCallSignalingHandler(signalingHandler);
@@ -207,12 +215,12 @@ export default function useAudioCall() {
async function handleCallSessionKey(sessionKeyHash: string) {
try {
// Create session key from the hash provided by the caller
const sessionKey = await createCallSessionKeyFromHash(sessionKeyHash);
const emojis = generateCallEmojis(sessionKey.hash);
setCallEncryption(sessionKey.hash, emojis);
// Just generate and display the emojis from the hash
// The actual session key will arrive via the wrapped key mechanism
const emojis = generateCallEmojis(sessionKeyHash);
setCallEncryption(sessionKeyHash, emojis);
} catch (error) {
console.error("Failed to create call session key from hash:", error);
console.error("Failed to generate call emojis from hash:", error);
}
};
frontend/src/pages/chat/hooks/useCall.ts
+389
View File
@@ -0,0 +1,389 @@
import { useAppState } from "@/pages/chat/state";
import * as WebRTC from "@/core/calls/webrtc";
import { CallSignalingHandler } from "@/core/calls/signaling";
import { setCallSignalingHandler } from "@/core/websocket";
import { generateCallSessionKey, generateCallEmojis } from "@/core/calls/encryption";
import { createRef, useEffect } from "react";
// Global refs shared across all instances
let globalRemoteAudioRef = createRef<HTMLAudioElement>();
let globalLocalVideoRef = createRef<HTMLVideoElement>();
let globalRemoteVideoRef = createRef<HTMLVideoElement>();
let globalLocalScreenShareRef = createRef<HTMLVideoElement>();
let globalRemoteScreenShareRef = createRef<HTMLVideoElement>();
export default function useCall() {
const {
chat,
startCall,
endCall,
setCallStatus,
toggleMute,
toggleVideo,
toggleScreenShare,
setCallEncryption,
setCallSessionKeyHash,
setRemoteVideoEnabled,
setRemoteScreenSharing,
user
} = useAppState();
const remoteAudioRef = globalRemoteAudioRef;
const localVideoRef = globalLocalVideoRef;
const remoteVideoRef = globalRemoteVideoRef;
const localScreenShareRef = globalLocalScreenShareRef;
const remoteScreenShareRef = globalRemoteScreenShareRef;
useEffect(() => {
if (user.authToken) {
WebRTC.setAuthToken(user.authToken);
}
// Initialize call signaling handler
const signalingHandler = new CallSignalingHandler(() => ({
receiveCall: (userId: number, username: string) => {
// Use the receiveCall function from state
const state = useAppState.getState();
state.receiveCall(userId, username);
},
endCall,
setCallSessionKeyHash,
setRemoteVideoEnabled,
setRemoteScreenSharing
}));
setCallSignalingHandler(signalingHandler);
// Set up call state change handler
WebRTC.setCallStateChangeHandler((userId: number, state: string) => {
const call = chat.call;
if (call.remoteUserId === userId) {
switch (state) {
case "connecting":
setCallStatus("connecting");
break;
case "connected":
setCallStatus("active");
break;
case "disconnected":
case "failed":
case "closed":
endCall();
break;
}
}
});
// Set up remote audio stream handler
WebRTC.setRemoteStreamHandler((_userId: number, stream: MediaStream) => {
if (!remoteAudioRef.current) {
return;
}
const el = remoteAudioRef.current;
try {
el.srcObject = stream;
el.muted = false;
el.volume = 1.0;
el.autoplay = true;
// Handle audio events
el.addEventListener("error", () => {
console.warn("[AUDIO] element error", (el.error?.message) || el.error);
});
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);
});
} catch (e) {
console.warn("failed to attach remote stream:", e);
}
});
// 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;
try {
el.srcObject = stream;
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);
});
}
} catch (e) {
console.warn("failed to attach local video stream:", e);
}
});
// 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;
try {
el.srcObject = stream;
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);
});
}
} catch (e) {
console.warn("failed to attach remote video stream:", e);
}
});
// 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;
try {
el.srcObject = stream;
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);
});
}
} catch (e) {
console.warn("failed to attach local screen share stream:", e);
}
});
// 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;
try {
el.srcObject = stream;
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);
});
}
} catch (e) {
console.warn("failed to attach remote screen share stream:", e);
}
});
return () => {
WebRTC.cleanup();
setCallSignalingHandler(null);
};
}, [user.authToken, chat.call.remoteUserId, setCallStatus, endCall, startCall, setRemoteVideoEnabled, setRemoteScreenSharing]);
// Watch for session key hash changes and generate emojis
useEffect(() => {
if (chat.call.sessionKeyHash && chat.call.encryptionEmojis.length === 0) {
const emojis = generateCallEmojis(chat.call.sessionKeyHash);
setCallEncryption(chat.call.sessionKeyHash, emojis);
}
}, [chat.call.sessionKeyHash, chat.call.encryptionEmojis.length, setCallEncryption]);
async function requestAudioPermissions(): Promise<boolean> {
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: false
});
// Stop the stream immediately as we just needed permission
stream.getTracks().forEach(track => track.stop());
return true;
} catch (error) {
console.error("Failed to get audio permissions:", error);
return false;
}
}
async function initiateCall(userId: number, username: string) {
const hasPermission = await requestAudioPermissions();
if (!hasPermission) {
console.log("Audio permission denied");
return;
}
let sessionKey;
try {
// Generate call session key and emojis
sessionKey = await generateCallSessionKey();
const emojis = generateCallEmojis(sessionKey.hash);
// Start the call in state
startCall(userId, username);
setCallStatus("calling");
setCallEncryption(sessionKey.hash, emojis);
} catch (error) {
console.error("Failed to generate call encryption:", error);
endCall();
return;
}
// Initiate WebRTC call
const success = await WebRTC.initiateCall(userId, username);
if (success && sessionKey) {
// Send session key hash to the receiver for visual verification
await WebRTC.sendCallSessionKey(userId, sessionKey.hash);
// Also wrap and send the actual session key for E2EE media
await WebRTC.sendWrappedCallSessionKey(userId, sessionKey.key, sessionKey.hash);
} else {
endCall();
}
}
async function acceptCall() {
if (!chat.call.remoteUserId) {
return;
}
setCallStatus("connecting");
const success = await WebRTC.acceptCall(chat.call.remoteUserId);
if (!success) {
endCall();
}
}
async function rejectCall() {
if (!chat.call.remoteUserId) {
return;
}
await WebRTC.rejectCall(chat.call.remoteUserId);
endCall();
}
async function handleEndCall() {
if (chat.call.remoteUserId) {
await WebRTC.endCall(chat.call.remoteUserId);
}
endCall();
}
function handleToggleMute() {
if (chat.call.remoteUserId) {
const isMuted = WebRTC.toggleMute(chat.call.remoteUserId);
// Update mute state in store
if (isMuted !== chat.call.isMuted) {
toggleMute();
}
}
}
async function handleToggleVideo() {
if (chat.call.remoteUserId) {
const isEnabled = await WebRTC.toggleVideo(chat.call.remoteUserId);
// Update video state in store
if (isEnabled !== chat.call.isVideoEnabled) {
toggleVideo();
}
}
}
async function handleToggleScreenShare() {
if (chat.call.remoteUserId) {
const isEnabled = await WebRTC.toggleScreenShare(chat.call.remoteUserId);
// Update screen share state in store
if (isEnabled !== chat.call.isSharingScreen) {
toggleScreenShare();
}
}
}
async function handleIncomingCall(userId: number, username: string) {
// Don't generate session key here - wait for it from the caller
await WebRTC.handleIncomingCall(userId, username);
}
async function handleCallOffer(userId: number, offer: RTCSessionDescriptionInit) {
await WebRTC.handleCallOffer(userId, offer);
}
async function handleCallAnswer(userId: number, answer: RTCSessionDescriptionInit) {
await WebRTC.handleCallAnswer(userId, answer);
}
async function handleIceCandidate(userId: number, candidate: RTCIceCandidateInit) {
await WebRTC.handleIceCandidate(userId, candidate);
}
async function handleCallSessionKey(sessionKeyHash: string) {
try {
// Just generate and display the emojis from the hash
// The actual session key will arrive via the wrapped key mechanism
const emojis = generateCallEmojis(sessionKeyHash);
setCallEncryption(sessionKeyHash, emojis);
} catch (error) {
console.error("Failed to generate call emojis from hash:", error);
}
}
return {
call: chat.call,
initiateCall,
acceptCall,
rejectCall,
endCall: handleEndCall,
toggleMute: handleToggleMute,
toggleVideo: handleToggleVideo,
toggleScreenShare: handleToggleScreenShare,
handleIncomingCall,
handleCallOffer,
handleCallAnswer,
handleIceCandidate,
handleCallSessionKey,
remoteAudioRef,
localVideoRef,
remoteVideoRef,
localScreenShareRef,
remoteScreenShareRef
};
}
frontend/src/pages/chat/state.ts
+68 -4
View File
@@ -31,6 +31,10 @@ interface CallState {
isMinimized: boolean;
sessionKeyHash: string | null;
encryptionEmojis: string[];
isVideoEnabled: boolean;
isRemoteVideoEnabled: boolean;
isSharingScreen: boolean;
isRemoteScreenSharing: boolean;
}
interface ChatState {
@@ -79,6 +83,10 @@ interface AppState {
receiveCall: (userId: number, username: string) => void;
setCallEncryption: (sessionKeyHash: string, encryptionEmojis: string[]) => void;
setCallSessionKeyHash: (sessionKeyHash: string) => void;
toggleVideo: () => void;
toggleScreenShare: () => void;
setRemoteVideoEnabled: (enabled: boolean) => void;
setRemoteScreenSharing: (enabled: boolean) => void;
// User state
user: UserState;
@@ -116,7 +124,11 @@ export const useAppState = create<AppState>((set, get) => ({
isInitiator: false,
isMinimized: false,
sessionKeyHash: null,
encryptionEmojis: []
encryptionEmojis: [],
isVideoEnabled: false,
isRemoteVideoEnabled: false,
isSharingScreen: false,
isRemoteScreenSharing: false
}
},
addMessage: (message: Message) => set((state) => {
@@ -412,7 +424,11 @@ export const useAppState = create<AppState>((set, get) => ({
isInitiator: true,
isMinimized: false,
sessionKeyHash: null,
encryptionEmojis: []
encryptionEmojis: [],
isVideoEnabled: false,
isRemoteVideoEnabled: false,
isSharingScreen: false,
isRemoteScreenSharing: false
}
}
})),
@@ -430,7 +446,11 @@ export const useAppState = create<AppState>((set, get) => ({
isInitiator: false,
isMinimized: false,
sessionKeyHash: null,
encryptionEmojis: []
encryptionEmojis: [],
isVideoEnabled: false,
isRemoteVideoEnabled: false,
isSharingScreen: false,
isRemoteScreenSharing: false
}
}
})),
@@ -479,7 +499,11 @@ export const useAppState = create<AppState>((set, get) => ({
isInitiator: false,
isMinimized: false,
sessionKeyHash: null,
encryptionEmojis: []
encryptionEmojis: [],
isVideoEnabled: false,
isRemoteVideoEnabled: false,
isSharingScreen: false,
isRemoteScreenSharing: false
}
}
})),
@@ -503,5 +527,45 @@ export const useAppState = create<AppState>((set, get) => ({
sessionKeyHash
}
}
})),
toggleVideo: () => set((state) => ({
chat: {
...state.chat,
call: {
...state.chat.call,
isVideoEnabled: !state.chat.call.isVideoEnabled
}
}
})),
toggleScreenShare: () => set((state) => ({
chat: {
...state.chat,
call: {
...state.chat.call,
isSharingScreen: !state.chat.call.isSharingScreen
}
}
})),
setRemoteVideoEnabled: (enabled: boolean) => set((state) => ({
chat: {
...state.chat,
call: {
...state.chat.call,
isRemoteVideoEnabled: enabled
}
}
})),
setRemoteScreenSharing: (enabled: boolean) => set((state) => ({
chat: {
...state.chat,
call: {
...state.chat.call,
isRemoteScreenSharing: enabled
}
}
}))
}));
frontend/src/pages/chat/ui/right/calls/MinimizedCallBar.tsx
+2 -2
View File
@@ -1,11 +1,11 @@
import { useAppState } from "@/pages/chat/state";
import useAudioCall from "@/pages/chat/hooks/useAudioCall";
import useCall from "@/pages/chat/hooks/useCall";
import defaultAvatar from "@/images/default-avatar.png";
export function MinimizedCallBar() {
const { chat, toggleCallMinimize } = useAppState();
const { call } = chat;
const { endCall, toggleMute } = useAudioCall();
const { endCall, toggleMute } = useCall();
function getGradientClass() {
switch (call.status) {