mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Implement audio calls
This commit is contained in:
@@ -0,0 +1 @@
|
||||
Run the command "npm run frontend:typecheck" and fix all errors listed in the command if there's any.
|
||||
@@ -5,4 +5,8 @@ When you work with UI:
|
||||
|
||||
1. Use MDUI components as HTML elements with the name "mdui-***". In JSX/TSX use the same elements and props as in HTML.
|
||||
3. The supporting text slot for MDUI lists is "description".
|
||||
4. When working with lists/sets in states, use the "useImmer" hook.
|
||||
4. When working with lists/sets in states, use the "useImmer" hook.
|
||||
5. Do NOT use inline styles in React components if they are static, instead write them in CSS.
|
||||
The CSS is placed in `frontend/src/resources/css/`. Find the appropriate file to put the styles in.
|
||||
6. In SCSS, for Material Design colors use `$color-dark-<color-name>` variables. For all colors, refer
|
||||
to `frontend/src/resources/css/common/_colors.scss`.
|
||||
@@ -44,6 +44,8 @@ jobs:
|
||||
JWT_SECRET=${{ secrets.JWT_SECRET }}
|
||||
VAPID_PUBLIC_KEY=${{ secrets.VAPID_PUBLIC_KEY }}
|
||||
VAPID_PRIVATE_KEY=${{ secrets.VAPID_PRIVATE_KEY }}
|
||||
TURN_USERNAME=${{ vars.TURN_USERNAME }}
|
||||
TURN_PASSWORD=${{ secrets.TURN_PASSWORD }}
|
||||
EOF
|
||||
- name: Build container
|
||||
run: |
|
||||
|
||||
+3
-2
@@ -5,7 +5,7 @@ import subprocess
|
||||
import sys
|
||||
import os
|
||||
|
||||
from routes import account, messaging, profile, push
|
||||
from routes import account, messaging, profile, push, webrtc
|
||||
|
||||
@asynccontextmanager
|
||||
async def lifespan(app: FastAPI):
|
||||
@@ -56,4 +56,5 @@ app.add_middleware(
|
||||
app.include_router(account.router)
|
||||
app.include_router(messaging.router)
|
||||
app.include_router(profile.router)
|
||||
app.include_router(push.router, prefix="/push")
|
||||
app.include_router(push.router, prefix="/push")
|
||||
app.include_router(webrtc.router, prefix="/webrtc")
|
||||
@@ -911,6 +911,29 @@ class MessaggingSocketManager:
|
||||
await websocket.send_json({"type": type, "data": response})
|
||||
except HTTPException as e:
|
||||
await self.send_error(websocket, type, e)
|
||||
elif type == "call_signaling":
|
||||
# Forward WebRTC signaling between peers
|
||||
try:
|
||||
self.user_by_ws[websocket] = current_user.id
|
||||
|
||||
payload = data.get("data") or {}
|
||||
to_user_id = int(payload.get("toUserId") or 0)
|
||||
if not to_user_id:
|
||||
raise HTTPException(status_code=400, detail="Missing toUserId")
|
||||
|
||||
# Ensure sender is set by the server
|
||||
payload["fromUserId"] = current_user.id
|
||||
payload["fromUsername"] = current_user.username
|
||||
|
||||
await self.send_to_user(to_user_id, {
|
||||
"type": "call_signaling",
|
||||
"data": payload
|
||||
})
|
||||
|
||||
# Optional ack
|
||||
await websocket.send_json({"type": "call_signaling", "data": {"status": "ok"}})
|
||||
except HTTPException as e:
|
||||
await self.send_error(websocket, type, e)
|
||||
else:
|
||||
await websocket.send_json({"type": type, "error": {"code": 400, "detail": "Invalid type"}})
|
||||
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
import logging
|
||||
import os
|
||||
import hmac
|
||||
import hashlib
|
||||
import time
|
||||
from fastapi import APIRouter, Depends
|
||||
from dependencies import get_current_user
|
||||
import traceback
|
||||
|
||||
router = APIRouter()
|
||||
logger = logging.getLogger("uvicorn.error")
|
||||
|
||||
|
||||
def generate_turn_credentials(username: str, secret: str, expiration_minutes: int = 60):
|
||||
"""Generate time-limited TURN credentials using TURN REST API format.
|
||||
|
||||
This creates temporary credentials that expire after the specified time.
|
||||
The username format is: timestamp:username
|
||||
The password is an HMAC hash of the username and secret.
|
||||
"""
|
||||
# Current timestamp (seconds since epoch)
|
||||
timestamp = int(time.time()) + (expiration_minutes * 60)
|
||||
|
||||
# Create temporary username: timestamp:original_username
|
||||
temp_username = f"{timestamp}:{username}"
|
||||
|
||||
# Generate password using HMAC-SHA1
|
||||
temp_password = hmac.new(
|
||||
secret.encode('utf-8'),
|
||||
temp_username.encode('utf-8'),
|
||||
hashlib.sha1
|
||||
).hexdigest()
|
||||
|
||||
return temp_username, temp_password
|
||||
|
||||
|
||||
@router.get("/ice")
|
||||
async def get_ice_servers(current_user = Depends(get_current_user)):
|
||||
"""Return ICE server configuration (STUN/TURN) for WebRTC clients.
|
||||
|
||||
Generates time-limited TURN credentials that expire in 1 hour.
|
||||
"""
|
||||
try:
|
||||
# Prefer using your own coturn for both STUN and TURN
|
||||
turn_domain = "fromchat.ru"
|
||||
stun_urls = [
|
||||
f"stun:{turn_domain}:3478",
|
||||
f"stuns:{turn_domain}:5349",
|
||||
]
|
||||
|
||||
turn_urls = [
|
||||
f"turn:{turn_domain}:3478",
|
||||
f"turns:{turn_domain}:5349",
|
||||
]
|
||||
|
||||
# Get TURN configuration from environment
|
||||
turn_username = os.getenv("TURN_USERNAME")
|
||||
turn_secret = os.getenv("TURN_SECRET")
|
||||
|
||||
# Check if required environment variables are set
|
||||
if not turn_username:
|
||||
logger.error("ERROR: TURN_USERNAME environment variable is not set")
|
||||
raise ValueError("TURN_USERNAME environment variable is not set")
|
||||
|
||||
if not turn_secret:
|
||||
logger.error("ERROR: TURN_SECRET environment variable is not set")
|
||||
raise ValueError("TURN_SECRET environment variable is not set")
|
||||
|
||||
ice_servers: list[dict] = [{"urls": url} for url in stun_urls]
|
||||
|
||||
temp_username, temp_password = generate_turn_credentials(
|
||||
turn_username,
|
||||
turn_secret,
|
||||
expiration_minutes=60 # Expires in 1 hour
|
||||
)
|
||||
|
||||
ice_servers.append({
|
||||
"urls": turn_urls,
|
||||
"username": temp_username,
|
||||
"credential": temp_password,
|
||||
})
|
||||
|
||||
return {"iceServers": ice_servers}
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"ERROR in /api/webrtc/ice: {str(e)}")
|
||||
logger.error(f"ERROR type: {type(e).__name__}")
|
||||
traceback.print_exc()
|
||||
raise
|
||||
@@ -0,0 +1,115 @@
|
||||
import type { WebSocketMessage, CallSignalingData, CallInvite } from "@/core/types";
|
||||
import * as WebRTC from "./webrtc";
|
||||
|
||||
export interface CallState {
|
||||
receiveCall: (userId: number, username: string) => void;
|
||||
endCall: () => void;
|
||||
}
|
||||
|
||||
export class CallSignalingHandler {
|
||||
private getState: () => CallState;
|
||||
|
||||
constructor(getState: () => CallState) {
|
||||
this.getState = getState;
|
||||
}
|
||||
|
||||
handleWebSocketMessage(message: WebSocketMessage<CallSignalingData>) {
|
||||
if (message.type !== "call_signaling") {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = message;
|
||||
if (!data) {
|
||||
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) {
|
||||
case "call_invite":
|
||||
this.handleCallInvite(data as CallInvite);
|
||||
break;
|
||||
case "call_accept":
|
||||
this.handleCallAccept(data);
|
||||
break;
|
||||
case "call_reject":
|
||||
this.handleCallReject(data);
|
||||
break;
|
||||
case "call_offer":
|
||||
this.handleCallOffer(data);
|
||||
break;
|
||||
case "call_answer":
|
||||
this.handleCallAnswer(data);
|
||||
break;
|
||||
case "call_ice_candidate":
|
||||
this.handleIceCandidate(data);
|
||||
break;
|
||||
case "call_end":
|
||||
this.handleCallEnd(data);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private async handleCallInvite(data: CallInvite) {
|
||||
const { fromUserId, fromUsername } = data;
|
||||
const state = this.getState();
|
||||
|
||||
// Show incoming call UI
|
||||
state.receiveCall(fromUserId, fromUsername);
|
||||
|
||||
// Handle incoming call in WebRTC service
|
||||
await WebRTC.handleIncomingCall(fromUserId, fromUsername);
|
||||
}
|
||||
|
||||
private async handleCallAccept(data: any) {
|
||||
const { fromUserId } = data;
|
||||
// Initiator should create and send offer now
|
||||
try {
|
||||
await WebRTC.onRemoteAccepted(fromUserId);
|
||||
} catch (error) {
|
||||
console.error("Failed to proceed after accept:", error);
|
||||
}
|
||||
}
|
||||
|
||||
private handleCallReject(data: any) {
|
||||
const state = this.getState();
|
||||
const { fromUserId } = data;
|
||||
|
||||
// Clean up WebRTC connection first
|
||||
if (fromUserId) {
|
||||
WebRTC.cleanupCall(fromUserId);
|
||||
}
|
||||
|
||||
// End the call
|
||||
state.endCall();
|
||||
}
|
||||
|
||||
private async handleCallOffer(data: any) {
|
||||
const { fromUserId, data: offer } = data;
|
||||
await WebRTC.handleCallOffer(fromUserId, offer);
|
||||
}
|
||||
|
||||
private async handleCallAnswer(data: any) {
|
||||
const { fromUserId, data: answer } = data;
|
||||
await WebRTC.handleCallAnswer(fromUserId, answer);
|
||||
}
|
||||
|
||||
private async handleIceCandidate(data: any) {
|
||||
const { fromUserId, data: candidate } = data;
|
||||
await WebRTC.handleIceCandidate(fromUserId, candidate);
|
||||
}
|
||||
|
||||
private handleCallEnd(data: any) {
|
||||
const state = this.getState();
|
||||
const { fromUserId } = data;
|
||||
|
||||
// Clean up WebRTC connection first
|
||||
if (fromUserId) {
|
||||
WebRTC.cleanupCall(fromUserId);
|
||||
}
|
||||
|
||||
// End the call
|
||||
state.endCall();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,472 @@
|
||||
import { getAuthHeaders } from "@/core/api/authApi";
|
||||
import type { IceServersResponse } from "@/core/types";
|
||||
import { request } from "@/core/websocket";
|
||||
|
||||
export interface CallSignalingMessage {
|
||||
type: "call_offer" | "call_answer" | "call_ice_candidate" | "call_end" | "call_invite" | "call_accept" | "call_reject";
|
||||
fromUserId: number;
|
||||
toUserId: number;
|
||||
data?: any;
|
||||
}
|
||||
|
||||
export interface WebRTCCall {
|
||||
peerConnection: RTCPeerConnection;
|
||||
localStream: MediaStream | null;
|
||||
remoteStream: MediaStream | null;
|
||||
isInitiator: boolean;
|
||||
remoteUserId: number;
|
||||
remoteUsername: string;
|
||||
isEnding?: boolean;
|
||||
isMuted?: boolean;
|
||||
}
|
||||
|
||||
// Global state
|
||||
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;
|
||||
const calls: Map<number, WebRTCCall> = new Map();
|
||||
|
||||
export function setAuthToken(token: string) {
|
||||
authToken = token;
|
||||
}
|
||||
|
||||
export function setCallStateChangeHandler(handler: (userId: number, state: string) => void) {
|
||||
onCallStateChange = handler;
|
||||
}
|
||||
|
||||
export function setRemoteStreamHandler(handler: (userId: number, stream: MediaStream) => void) {
|
||||
onRemoteStream = handler;
|
||||
}
|
||||
|
||||
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",
|
||||
credentials: {
|
||||
scheme: "Bearer",
|
||||
credentials: authToken
|
||||
},
|
||||
data: message
|
||||
});
|
||||
}
|
||||
|
||||
async function getIceServers(): Promise<RTCIceServer[]> {
|
||||
const defaultIceServers = [{ urls: "stun:fromchat.ru:3478" }];
|
||||
|
||||
if (!authToken) {
|
||||
console.warn("No auth token available for ICE servers");
|
||||
return defaultIceServers;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/webrtc/ice", {
|
||||
headers: getAuthHeaders(authToken)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json() as IceServersResponse;
|
||||
console.log("Received ICE servers:", data.iceServers);
|
||||
return data.iceServers || [];
|
||||
} else {
|
||||
console.warn("Failed to fetch ICE servers:", response.status, response.statusText);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("Failed to fetch ICE servers:", error);
|
||||
}
|
||||
|
||||
// Fallback to STUN only if backend fails
|
||||
return defaultIceServers;
|
||||
}
|
||||
|
||||
async function createPeerConnection(userId: number): Promise<RTCPeerConnection> {
|
||||
const iceServers = await getIceServers();
|
||||
|
||||
const peerConnection = new RTCPeerConnection({
|
||||
iceServers
|
||||
});
|
||||
|
||||
const call: WebRTCCall = {
|
||||
peerConnection,
|
||||
localStream: null,
|
||||
remoteStream: null,
|
||||
isInitiator: false,
|
||||
remoteUserId: userId,
|
||||
remoteUsername: "",
|
||||
isMuted: false
|
||||
};
|
||||
|
||||
calls.set(userId, call);
|
||||
|
||||
peerConnection.addEventListener("icegatheringstatechange", () => {
|
||||
console.log("ICE gathering state changed:", peerConnection.iceGatheringState);
|
||||
});
|
||||
|
||||
// Add ICE candidate event listener for debugging and sending
|
||||
peerConnection.addEventListener("icecandidate", async (event) => {
|
||||
if (event.candidate) {
|
||||
console.log("Local ICE candidate:", event.candidate.candidate);
|
||||
|
||||
// Send ICE candidate to remote peer
|
||||
try {
|
||||
await sendSignalingMessage({
|
||||
type: "call_ice_candidate",
|
||||
fromUserId: 0, // Will be set by server
|
||||
toUserId: userId,
|
||||
data: {
|
||||
candidate: event.candidate.candidate,
|
||||
sdpMLineIndex: event.candidate.sdpMLineIndex,
|
||||
sdpMid: event.candidate.sdpMid
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to send ICE candidate:", error);
|
||||
}
|
||||
} else {
|
||||
console.log("ICE gathering complete");
|
||||
}
|
||||
});
|
||||
|
||||
peerConnection.addEventListener("iceconnectionstatechange", () => {
|
||||
console.log("ICE connection state changed:", peerConnection.iceConnectionState);
|
||||
});
|
||||
|
||||
peerConnection.addEventListener("signalingstatechange", () => {
|
||||
// Signaling state changed
|
||||
});
|
||||
|
||||
// Handle remote stream
|
||||
peerConnection.addEventListener("track", (event) => {
|
||||
const [remoteStream] = event.streams;
|
||||
const call = calls.get(userId);
|
||||
if (call) {
|
||||
call.remoteStream = remoteStream;
|
||||
if (onRemoteStream) {
|
||||
onRemoteStream(userId, remoteStream);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Handle connection state changes
|
||||
peerConnection.addEventListener("connectionstatechange", () => {
|
||||
console.log("WebRTC connection state changed:", peerConnection.connectionState);
|
||||
const call = calls.get(userId);
|
||||
if (call) {
|
||||
if (onCallStateChange) {
|
||||
onCallStateChange(userId, peerConnection.connectionState);
|
||||
}
|
||||
|
||||
// Clean up if connection failed or closed
|
||||
if (peerConnection.connectionState === "failed" ||
|
||||
peerConnection.connectionState === "closed" ||
|
||||
peerConnection.connectionState === "disconnected") {
|
||||
// Only send end call message if we're not already cleaning up
|
||||
const call = calls.get(userId);
|
||||
if (call && !call.isEnding) {
|
||||
call.isEnding = true;
|
||||
endCall(userId);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return peerConnection;
|
||||
}
|
||||
|
||||
export async function initiateCall(userId: number, username: string): Promise<boolean> {
|
||||
try {
|
||||
// Get user media
|
||||
const localStream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: true,
|
||||
video: false
|
||||
});
|
||||
|
||||
// Create peer connection
|
||||
await createPeerConnection(userId);
|
||||
const call = calls.get(userId);
|
||||
if (!call) return false;
|
||||
|
||||
call.localStream = localStream;
|
||||
call.remoteUsername = username;
|
||||
call.isInitiator = true;
|
||||
|
||||
// Add tracks to peer connection
|
||||
localStream.getTracks().forEach(track => call.peerConnection.addTrack(track, localStream));
|
||||
|
||||
// Send call invite
|
||||
await sendSignalingMessage({
|
||||
type: "call_invite",
|
||||
fromUserId: 0, // Will be set by server
|
||||
toUserId: userId,
|
||||
data: { fromUsername: username }
|
||||
});
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("Failed to initiate call:", error);
|
||||
cleanupCall(userId);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export async function acceptCall(userId: number): Promise<boolean> {
|
||||
try {
|
||||
let call = calls.get(userId);
|
||||
if (!call) {
|
||||
// Create call object if it doesn't exist (for race conditions)
|
||||
await createPeerConnection(userId);
|
||||
call = calls.get(userId);
|
||||
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));
|
||||
|
||||
// Notify initiator that callee accepted; initiator will generate offer
|
||||
await sendSignalingMessage({
|
||||
type: "call_accept",
|
||||
fromUserId: 0, // Will be set by server
|
||||
toUserId: userId,
|
||||
data: {}
|
||||
});
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("Failed to accept call:", error);
|
||||
cleanupCall(userId);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export async function rejectCall(userId: number): Promise<void> {
|
||||
await sendSignalingMessage({
|
||||
type: "call_reject",
|
||||
fromUserId: 0, // Will be set by server
|
||||
toUserId: userId,
|
||||
data: {}
|
||||
});
|
||||
|
||||
cleanupCall(userId);
|
||||
}
|
||||
|
||||
export async function endCall(userId: number): Promise<void> {
|
||||
const call = calls.get(userId);
|
||||
if (call && !call.isEnding) {
|
||||
call.isEnding = true;
|
||||
|
||||
// Send call end message
|
||||
await sendSignalingMessage({
|
||||
type: "call_end",
|
||||
fromUserId: 0, // Will be set by server
|
||||
toUserId: userId,
|
||||
data: {}
|
||||
});
|
||||
|
||||
cleanupCall(userId);
|
||||
}
|
||||
}
|
||||
|
||||
export async function handleIncomingCall(userId: number, username: string): Promise<void> {
|
||||
try {
|
||||
// Create peer connection for incoming call
|
||||
await createPeerConnection(userId);
|
||||
const call = calls.get(userId);
|
||||
if (!call) return;
|
||||
|
||||
call.remoteUsername = username;
|
||||
call.isInitiator = false;
|
||||
} catch (error) {
|
||||
console.error("Failed to handle incoming call:", error);
|
||||
cleanupCall(userId);
|
||||
}
|
||||
}
|
||||
|
||||
export async function onRemoteAccepted(userId: number): Promise<void> {
|
||||
const call = calls.get(userId);
|
||||
if (!call) {
|
||||
throw new Error("No call found to accept");
|
||||
}
|
||||
|
||||
try {
|
||||
// Create offer
|
||||
const offer = await call.peerConnection.createOffer();
|
||||
await call.peerConnection.setLocalDescription(offer);
|
||||
|
||||
// Send offer to remote peer
|
||||
await sendSignalingMessage({
|
||||
type: "call_offer",
|
||||
fromUserId: 0, // Will be set by server
|
||||
toUserId: userId,
|
||||
data: offer
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to create offer:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function handleCallOffer(userId: number, offer: RTCSessionDescriptionInit): Promise<void> {
|
||||
const call = calls.get(userId);
|
||||
if (!call) {
|
||||
throw new Error("No call found for offer");
|
||||
}
|
||||
|
||||
try {
|
||||
// Set remote description
|
||||
await call.peerConnection.setRemoteDescription(offer);
|
||||
|
||||
// Create answer
|
||||
const answer = await call.peerConnection.createAnswer();
|
||||
await call.peerConnection.setLocalDescription(answer);
|
||||
|
||||
// Send answer to remote peer
|
||||
await sendSignalingMessage({
|
||||
type: "call_answer",
|
||||
fromUserId: 0, // Will be set by server
|
||||
toUserId: userId,
|
||||
data: answer
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to handle offer:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function handleCallAnswer(userId: number, answer: RTCSessionDescriptionInit): Promise<void> {
|
||||
const call = calls.get(userId);
|
||||
if (!call) {
|
||||
throw new Error("No call found for answer");
|
||||
}
|
||||
|
||||
try {
|
||||
await call.peerConnection.setRemoteDescription(answer);
|
||||
} catch (error) {
|
||||
console.error("Failed to handle answer:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function handleIceCandidate(userId: number, candidate: RTCIceCandidateInit): Promise<void> {
|
||||
const call = calls.get(userId);
|
||||
if (!call) {
|
||||
console.warn("No call found for ICE candidate from user", userId);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
export function toggleMute(userId: number): boolean {
|
||||
const call = calls.get(userId);
|
||||
if (!call || !call.localStream) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!call.isMuted) {
|
||||
// Mute: Stop the track completely (no green dot)
|
||||
const audioTrack = call.localStream.getAudioTracks()[0];
|
||||
if (audioTrack) {
|
||||
audioTrack.stop();
|
||||
call.localStream.removeTrack(audioTrack);
|
||||
}
|
||||
|
||||
// Create a silent audio track using Web Audio API
|
||||
const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
|
||||
const oscillator = audioContext.createOscillator();
|
||||
const gainNode = audioContext.createGain();
|
||||
|
||||
// Set gain to 0 (silent)
|
||||
gainNode.gain.setValueAtTime(0, audioContext.currentTime);
|
||||
|
||||
// Connect nodes
|
||||
oscillator.connect(gainNode);
|
||||
|
||||
// Create a MediaStreamDestination to get a MediaStream
|
||||
const destination = audioContext.createMediaStreamDestination();
|
||||
gainNode.connect(destination);
|
||||
|
||||
// Start the oscillator (but it's silent due to gain = 0)
|
||||
oscillator.start();
|
||||
|
||||
// Add the silent track to maintain WebRTC connection
|
||||
const silentTrack = destination.stream.getAudioTracks()[0];
|
||||
if (silentTrack) {
|
||||
call.localStream.addTrack(silentTrack);
|
||||
}
|
||||
|
||||
call.isMuted = true;
|
||||
return true; // Muted
|
||||
} else {
|
||||
// Unmute: Re-enable microphone by getting new audio stream
|
||||
navigator.mediaDevices.getUserMedia({ audio: true, video: false })
|
||||
.then(newStream => {
|
||||
// Remove any existing audio tracks from the stream
|
||||
call.localStream!.getAudioTracks().forEach(track => track.stop());
|
||||
|
||||
// Get the new active track
|
||||
const newAudioTrack = newStream.getAudioTracks()[0];
|
||||
|
||||
// Replace the track in the peer connection
|
||||
const sender = call.peerConnection.getSenders().find(s =>
|
||||
s.track && s.track.kind === 'audio'
|
||||
);
|
||||
|
||||
if (sender) {
|
||||
// Replace the track in the existing sender
|
||||
sender.replaceTrack(newAudioTrack);
|
||||
} else {
|
||||
// Add the track to the peer connection if no sender exists
|
||||
call.peerConnection.addTrack(newAudioTrack, call.localStream!);
|
||||
}
|
||||
|
||||
// Add the track to the local stream
|
||||
call.localStream!.addTrack(newAudioTrack);
|
||||
|
||||
call.isMuted = false;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Failed to re-enable microphone:", error);
|
||||
});
|
||||
return false; // Unmuted
|
||||
}
|
||||
}
|
||||
|
||||
export function getCall(userId: number): WebRTCCall | undefined {
|
||||
return calls.get(userId);
|
||||
}
|
||||
|
||||
export function cleanupCall(userId: number): void {
|
||||
const call = calls.get(userId);
|
||||
if (call) {
|
||||
// Close peer connection
|
||||
if (call.peerConnection) {
|
||||
call.peerConnection.close();
|
||||
}
|
||||
|
||||
// Stop local stream
|
||||
if (call.localStream) {
|
||||
call.localStream.getTracks().forEach(track => track.stop());
|
||||
}
|
||||
|
||||
calls.delete(userId);
|
||||
}
|
||||
}
|
||||
|
||||
export function cleanup(): void {
|
||||
// Clean up all calls
|
||||
for (const userId of calls.keys()) {
|
||||
cleanupCall(userId);
|
||||
}
|
||||
calls.clear();
|
||||
}
|
||||
Vendored
+19
@@ -247,6 +247,10 @@ export interface DmEncryptedJSON {
|
||||
}
|
||||
}
|
||||
|
||||
export interface IceServersResponse {
|
||||
iceServers: RTCIceServer[];
|
||||
}
|
||||
|
||||
// ---------------
|
||||
// WebSocket types
|
||||
// ---------------
|
||||
@@ -428,4 +432,19 @@ export interface EncryptedMessageJson {
|
||||
export interface DialogProps {
|
||||
isOpen: boolean;
|
||||
onOpenChange: (value: boolean) => void;
|
||||
}
|
||||
|
||||
// Call types
|
||||
export interface CallInvite extends CallSignalingData {
|
||||
type: "call_invite";
|
||||
fromUserId: number;
|
||||
fromUsername: string;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
export interface CallSignalingData {
|
||||
type: "call_offer" | "call_answer" | "call_ice_candidate" | "call_end" | "call_invite" | "call_accept" | "call_reject";
|
||||
fromUserId: number;
|
||||
toUserId: number;
|
||||
data?: any;
|
||||
}
|
||||
@@ -8,6 +8,7 @@
|
||||
import { API_WS_BASE_URL } from "./config";
|
||||
import type { WebSocketMessage } from "./types";
|
||||
import { delay } from "@/utils/utils";
|
||||
import { CallSignalingHandler } from "@/core/calls/signaling";
|
||||
|
||||
/**
|
||||
* Creates a new WebSocket connection to the chat server
|
||||
@@ -35,6 +36,11 @@ export let websocket: WebSocket = create();
|
||||
*/
|
||||
let globalMessageHandler: ((response: WebSocketMessage<any>) => void) | null = null;
|
||||
|
||||
/**
|
||||
* Call signaling handler
|
||||
*/
|
||||
let callSignalingHandler: CallSignalingHandler | null = null;
|
||||
|
||||
/**
|
||||
* Set the global WebSocket message handler
|
||||
* @param handler - Function to handle WebSocket messages
|
||||
@@ -43,6 +49,14 @@ export function setGlobalMessageHandler(handler: ((response: WebSocketMessage<an
|
||||
globalMessageHandler = handler;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the call signaling handler
|
||||
* @param handler - Call signaling handler instance
|
||||
*/
|
||||
export function setCallSignalingHandler(handler: CallSignalingHandler | null): void {
|
||||
callSignalingHandler = handler;
|
||||
}
|
||||
|
||||
export function request<Request, Response = any>(payload: WebSocketMessage<Request>): Promise<WebSocketMessage<Response>> {
|
||||
console.log("WebSocket request:", payload);
|
||||
return new Promise((resolve, reject) => {
|
||||
@@ -97,6 +111,11 @@ websocket.addEventListener("message", (e) => {
|
||||
try {
|
||||
const response: WebSocketMessage<any> = JSON.parse(e.data);
|
||||
|
||||
// Handle call signaling messages
|
||||
if (callSignalingHandler && response.type === "call_signaling") {
|
||||
callSignalingHandler.handleWebSocketMessage(response);
|
||||
}
|
||||
|
||||
// Route message to global handler if set
|
||||
if (globalMessageHandler) {
|
||||
globalMessageHandler(response);
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
@use "../../../css/material" as *;
|
||||
|
||||
.call-window {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
width: 300px;
|
||||
background-color: $color-dark-surface;
|
||||
border: 1px solid $color-dark-outline;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
cursor: grab;
|
||||
|
||||
&.dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
.call-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid $color-dark-outline-variant;
|
||||
cursor: grab;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
|
||||
.username {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $color-dark-on-surface;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin: 4px 0 0 0;
|
||||
font-size: 14px;
|
||||
color: $color-dark-on-surface-variant;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.call-controls {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.remote-audio {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -23,6 +23,9 @@
|
||||
|
||||
.chat-header-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.info-chat {
|
||||
display: flex;
|
||||
|
||||
@@ -8,4 +8,5 @@
|
||||
@use "context-menu";
|
||||
@use "profile-dialog";
|
||||
@use "settings-dialog";
|
||||
@use "animations";
|
||||
@use "animations";
|
||||
@use "callWindow";
|
||||
@@ -0,0 +1,193 @@
|
||||
import { useAppState } from "../state";
|
||||
import * as WebRTC from "@/core/calls/webrtc";
|
||||
import { CallSignalingHandler } from "@/core/calls/signaling";
|
||||
import { setCallSignalingHandler } from "@/core/websocket";
|
||||
import { createRef, useEffect } from "react";
|
||||
|
||||
// Global audio ref shared across all instances
|
||||
let globalRemoteAudioRef = createRef<HTMLAudioElement>();
|
||||
|
||||
export default function useAudioCall() {
|
||||
const { chat, startCall, endCall, setCallStatus, toggleMute, user } = useAppState();
|
||||
const remoteAudioRef = globalRemoteAudioRef;
|
||||
|
||||
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
|
||||
}));
|
||||
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 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);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
WebRTC.cleanup();
|
||||
setCallSignalingHandler(null);
|
||||
};
|
||||
}, [user.authToken, chat.call.remoteUserId, setCallStatus, endCall, startCall]);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
// Start the call in state
|
||||
startCall(userId, username);
|
||||
setCallStatus("calling");
|
||||
|
||||
// Initiate WebRTC call
|
||||
const success = await WebRTC.initiateCall(userId, username);
|
||||
|
||||
if (!success) {
|
||||
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 handleIncomingCall(userId: number, username: string) {
|
||||
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);
|
||||
};
|
||||
|
||||
return {
|
||||
call: chat.call,
|
||||
initiateCall,
|
||||
acceptCall,
|
||||
rejectCall,
|
||||
endCall: handleEndCall,
|
||||
toggleMute: handleToggleMute,
|
||||
handleIncomingCall,
|
||||
handleCallOffer,
|
||||
handleCallAnswer,
|
||||
handleIceCandidate,
|
||||
remoteAudioRef
|
||||
};
|
||||
}
|
||||
@@ -10,7 +10,9 @@ import { API_BASE_URL } from "@/core/config";
|
||||
import { initialize, subscribe, startElectronReceiver, isSupported } from "@/core/push-notifications/push-notifications";
|
||||
import { isElectron } from "@/core/electron/electron";
|
||||
|
||||
export type ChatTabs = "chats" | "channels" | "contacts" | "dms"
|
||||
export type ChatTabs = "chats" | "channels" | "contacts" | "dms";
|
||||
|
||||
export type CallStatus = "calling" | "connecting" | "active" | "ended";
|
||||
|
||||
interface ActiveDM {
|
||||
userId: number;
|
||||
@@ -18,6 +20,16 @@ interface ActiveDM {
|
||||
publicKey: string | null
|
||||
}
|
||||
|
||||
interface CallState {
|
||||
isActive: boolean;
|
||||
status: CallStatus;
|
||||
startTime: number | null;
|
||||
isMuted: boolean;
|
||||
remoteUserId: number | null;
|
||||
remoteUsername: string | null;
|
||||
isInitiator: boolean;
|
||||
}
|
||||
|
||||
interface ChatState {
|
||||
messages: Message[];
|
||||
currentChat: string;
|
||||
@@ -30,6 +42,7 @@ interface ChatState {
|
||||
publicChatPanel: PublicChatPanel | null;
|
||||
dmPanel: DMPanel | null;
|
||||
pendingPanel?: MessagePanel | null;
|
||||
call: CallState;
|
||||
}
|
||||
|
||||
export interface UserState {
|
||||
@@ -54,6 +67,13 @@ interface AppState {
|
||||
switchToPublicChat: (chatName: string) => Promise<void>;
|
||||
switchToDM: (dmData: DMPanelData) => Promise<void>;
|
||||
|
||||
// Call state
|
||||
startCall: (userId: number, username: string) => void;
|
||||
endCall: () => void;
|
||||
setCallStatus: (status: CallStatus) => void;
|
||||
toggleMute: () => void;
|
||||
receiveCall: (userId: number, username: string) => void;
|
||||
|
||||
// User state
|
||||
user: UserState;
|
||||
setUser: (token: string, user: User) => void;
|
||||
@@ -79,7 +99,16 @@ export const useAppState = create<AppState>((set, get) => ({
|
||||
activePanel: null,
|
||||
publicChatPanel: null,
|
||||
dmPanel: null,
|
||||
pendingPanel: null
|
||||
pendingPanel: null,
|
||||
call: {
|
||||
isActive: false,
|
||||
status: "ended",
|
||||
startTime: null,
|
||||
isMuted: false,
|
||||
remoteUserId: null,
|
||||
remoteUsername: null,
|
||||
isInitiator: false
|
||||
}
|
||||
},
|
||||
addMessage: (message: Message) => set((state) => {
|
||||
// Check if message already exists to prevent duplicates
|
||||
@@ -358,5 +387,72 @@ export const useAppState = create<AppState>((set, get) => ({
|
||||
|
||||
// Let MessagePanelRenderer handle the animation timing completely
|
||||
// It will set isChatSwitching to false when the fadeInDown animation completes
|
||||
}
|
||||
},
|
||||
|
||||
// Call state management
|
||||
startCall: (userId: number, username: string) => set((state) => ({
|
||||
chat: {
|
||||
...state.chat,
|
||||
call: {
|
||||
isActive: true,
|
||||
status: "calling",
|
||||
startTime: null,
|
||||
isMuted: false,
|
||||
remoteUserId: userId,
|
||||
remoteUsername: username,
|
||||
isInitiator: true
|
||||
}
|
||||
}
|
||||
})),
|
||||
|
||||
endCall: () => set((state) => ({
|
||||
chat: {
|
||||
...state.chat,
|
||||
call: {
|
||||
isActive: false,
|
||||
status: "ended",
|
||||
startTime: null,
|
||||
isMuted: false,
|
||||
remoteUserId: null,
|
||||
remoteUsername: null,
|
||||
isInitiator: false
|
||||
}
|
||||
}
|
||||
})),
|
||||
|
||||
setCallStatus: (status: CallStatus) => set((state) => ({
|
||||
chat: {
|
||||
...state.chat,
|
||||
call: {
|
||||
...state.chat.call,
|
||||
status,
|
||||
startTime: status === "active" && !state.chat.call.startTime ? Date.now() : state.chat.call.startTime
|
||||
}
|
||||
}
|
||||
})),
|
||||
|
||||
toggleMute: () => set((state) => ({
|
||||
chat: {
|
||||
...state.chat,
|
||||
call: {
|
||||
...state.chat.call,
|
||||
isMuted: !state.chat.call.isMuted
|
||||
}
|
||||
}
|
||||
})),
|
||||
|
||||
receiveCall: (userId: number, username: string) => set((state) => ({
|
||||
chat: {
|
||||
...state.chat,
|
||||
call: {
|
||||
isActive: true,
|
||||
status: "calling",
|
||||
startTime: null,
|
||||
isMuted: false,
|
||||
remoteUserId: userId,
|
||||
remoteUsername: username,
|
||||
isInitiator: false
|
||||
}
|
||||
}
|
||||
}))
|
||||
}));
|
||||
@@ -2,6 +2,7 @@ import { LeftPanel } from "./left/LeftPanel";
|
||||
import { RightPanel } from "./right/RightPanel";
|
||||
import "@/pages/chat/css/chat.scss";
|
||||
import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen";
|
||||
import { CallWindow } from "./right/CallWindow";
|
||||
|
||||
export default function ChatPage() {
|
||||
const { navigate: navigateDownloadApp } = useDownloadAppScreen();
|
||||
@@ -13,6 +14,7 @@ export default function ChatPage() {
|
||||
<LeftPanel />
|
||||
<RightPanel />
|
||||
</div>
|
||||
<CallWindow />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useAppState } from "@/pages/chat/state";
|
||||
import useAudioCall from "@/pages/chat/hooks/useAudioCall";
|
||||
import defaultAvatar from "@/images/default-avatar.png";
|
||||
|
||||
export function CallWindow() {
|
||||
const { chat, toggleMute } = useAppState();
|
||||
const { call } = chat;
|
||||
const { acceptCall, rejectCall, remoteAudioRef, endCall } = useAudioCall();
|
||||
const [position, setPosition] = useState({ x: 100, y: 100 });
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
|
||||
const [callDuration, setCallDuration] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
let interval: NodeJS.Timeout;
|
||||
|
||||
if (call.status === "active" && call.startTime) {
|
||||
interval = setInterval(() => {
|
||||
setCallDuration(Math.floor((Date.now() - call.startTime!) / 1000));
|
||||
}, 1000);
|
||||
} else {
|
||||
setCallDuration(0);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (interval) clearInterval(interval);
|
||||
};
|
||||
}, [call.status, call.startTime]);
|
||||
|
||||
function formatDuration(seconds: number) {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function getStatusText() {
|
||||
switch (call.status) {
|
||||
case "calling":
|
||||
return "Calling...";
|
||||
case "connecting":
|
||||
return "Connecting...";
|
||||
case "active":
|
||||
return formatDuration(callDuration);
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<audio
|
||||
ref={remoteAudioRef}
|
||||
className="remote-audio"
|
||||
autoPlay
|
||||
playsInline
|
||||
controls />
|
||||
|
||||
{call.isActive && (
|
||||
<div
|
||||
className={`call-window ${isDragging ? 'dragging' : ''}`}
|
||||
style={{
|
||||
left: position.x,
|
||||
top: position.y
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
setIsDragging(true);
|
||||
setDragStart({
|
||||
x: e.clientX - position.x,
|
||||
y: e.clientY - position.y
|
||||
});
|
||||
}}
|
||||
onMouseMove={(e) => {
|
||||
if (isDragging) {
|
||||
setPosition({
|
||||
x: e.clientX - dragStart.x,
|
||||
y: e.clientY - dragStart.y
|
||||
});
|
||||
}
|
||||
}}
|
||||
onMouseUp={() => setIsDragging(false)}
|
||||
onMouseLeave={() => setIsDragging(false)}
|
||||
>
|
||||
<div className="call-header">
|
||||
<div className="user-info">
|
||||
<img
|
||||
src={defaultAvatar}
|
||||
alt="Avatar"
|
||||
className="avatar" />
|
||||
|
||||
<div className="user-details">
|
||||
<h3 className="username">
|
||||
{call.remoteUsername}
|
||||
</h3>
|
||||
<p className="status">
|
||||
{getStatusText()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="call-controls">
|
||||
{call.status === "calling" && !call.isInitiator ? (
|
||||
<>
|
||||
<mdui-button-icon onClick={acceptCall} icon="call" />
|
||||
<mdui-button-icon onClick={rejectCall} icon="call_end" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<mdui-button-icon onClick={toggleMute} icon={call.isMuted ? "mic_off" : "mic"} />
|
||||
<mdui-button-icon onClick={endCall} icon="call_end" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import type { Message, WebSocketMessage } from "@/core/types";
|
||||
import defaultAvatar from "@/images/default-avatar.png";
|
||||
import AnimatedOpacity from "@/core/components/animations/AnimatedOpacity";
|
||||
import type { DMPanel } from "./panels/DMPanel";
|
||||
import useAudioCall from "@/pages/chat/hooks/useAudioCall";
|
||||
|
||||
interface MessagePanelRendererProps {
|
||||
panel: MessagePanel | null;
|
||||
@@ -26,6 +27,7 @@ export function MessagePanelRenderer({ panel }: MessagePanelRendererProps) {
|
||||
const [editMessage, setEditMessage] = useState<Message | null>(null);
|
||||
const [editVisible, setEditVisible] = useState(Boolean(editMessage));
|
||||
const [pendingAction, setPendingAction] = useState<null | { type: "reply" | "edit"; message: Message }>(null);
|
||||
const { initiateCall } = useAudioCall();
|
||||
|
||||
|
||||
// Drag & drop
|
||||
@@ -156,6 +158,18 @@ export function MessagePanelRenderer({ panel }: MessagePanelRendererProps) {
|
||||
previousMessageCountRef.current = currentMessageCount;
|
||||
}, [panelState?.messages, panelState?.isLoading, chat.isSwitching, switchOut, switchIn]);
|
||||
|
||||
function handleCallClick() {
|
||||
if (panel && panelState && panel.isDm()) {
|
||||
const dmPanel = panel as DMPanel;
|
||||
const userId = dmPanel.getDMUserId();
|
||||
const username = dmPanel.getDMUsername();
|
||||
|
||||
if (userId && username) {
|
||||
initiateCall(userId, username);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`chat-container ${switchIn ? "chat-switch-in" : ""} ${switchOut ? "chat-switch-out" : ""}`}>
|
||||
<div
|
||||
@@ -208,15 +222,15 @@ export function MessagePanelRenderer({ panel }: MessagePanelRendererProps) {
|
||||
<p>
|
||||
<span className={`online-status ${panelState?.online ? "online" : ""}`}></span>
|
||||
{panelState ? (
|
||||
<>
|
||||
{panelState.online ? "Online" : "Offline"}
|
||||
{panelState.isTyping && " • Typing..."}
|
||||
</>
|
||||
panelState.online ? "Online" : "Offline"
|
||||
) : (
|
||||
"Выберите чат, чтобы начать переписку"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
{panel?.isDm() && (
|
||||
<mdui-button-icon onClick={handleCallClick} icon="call--filled" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -263,6 +263,16 @@ export class DMPanel extends MessagePanel {
|
||||
this.currentUser.authToken = authToken;
|
||||
}
|
||||
|
||||
// Get DM user ID for call functionality
|
||||
getDMUserId(): number | null {
|
||||
return this.dmData?.userId || null;
|
||||
}
|
||||
|
||||
// Get DM username for call functionality
|
||||
getDMUsername(): string | null {
|
||||
return this.dmData?.username || null;
|
||||
}
|
||||
|
||||
// Helper functions for localStorage
|
||||
private getLastReadId(userId: number): number {
|
||||
try {
|
||||
|
||||
+1
-1
@@ -29,7 +29,7 @@
|
||||
"clean": "npm run backend:clean && npm run frontend:clean && npm run preview:clean",
|
||||
"install": "npm run backend:dependencies && npm run generate:env",
|
||||
"prepare": "husky",
|
||||
"generate:env": "echo \"JWT_SECRET=\\\"$(openssl rand -base64 32)\\\"\" > deployment/.env && ./.venv/bin/python3 backend/generate_vapid_keys.py 1>>deployment/.env"
|
||||
"generate:env": "echo \"JWT_SECRET=\\\"$(openssl rand -base64 32)\\\"\" > deployment/.env && ./.venv/bin/python3 backend/generate_vapid_keys.py 1>>deployment/.env && echo \"TURN_USERNAME=\\\"set-your-username\\\"\\nTURN_SECRET=\\\"set-your-secret\\\"\" >> deployment/.env"
|
||||
},
|
||||
"files": [
|
||||
"frontend/build/electron"
|
||||
|
||||
Reference in New Issue
Block a user