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

Implement audio calls

Browse Source
This commit is contained in:
denis0001-dev
2025-09-21 19:09:39 +03:00
Unverified
parent 27902cf092
commit a853164b50
20 changed files with 1265 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/chat/css/_callWindow.scss
+69
View File
@@ -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;
}
frontend/src/pages/chat/css/_right-panel.scss
+3
View File
@@ -23,6 +23,9 @@
.chat-header-info {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
.info-chat {
display: flex;
frontend/src/pages/chat/css/chat.scss
+2 -1
View File
@@ -8,4 +8,5 @@
@use "context-menu";
@use "profile-dialog";
@use "settings-dialog";
@use "animations";
@use "animations";
@use "callWindow";
frontend/src/pages/chat/hooks/useAudioCall.ts
+193
View File
@@ -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
};
}
frontend/src/pages/chat/state.ts
+99 -3
View File
@@ -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
}
}
}))
}));
frontend/src/pages/chat/ui/ChatPage.tsx
+2
View File
@@ -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>
);
}
frontend/src/pages/chat/ui/right/CallWindow.tsx
+120
View File
@@ -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>
)}
</>
);
}
frontend/src/pages/chat/ui/right/MessagePanelRenderer.tsx
+18 -4
View File
@@ -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>
frontend/src/pages/chat/ui/right/panels/DMPanel.ts
+10
View File
@@ -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 {