Start the implementation

frontend/src/pages/chat/css/_callWindow.scss

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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) {