+ } + @case ('voice') { + + Voice message + @if (entry.downloadUrl) { + + } + + } @default { @if (entry.showSpinner) { @@ -205,39 +252,6 @@ - @if (peer(); as selectedPeer) { - - - {{ isStreamingCameraToSelectedPeer() ? 'đ' : 'đš' }} - - - - - + - - - } - - + + @if (peer(); as selectedPeer) { + + đ + + + @if (canEndSelectedVoiceCall()) { + + đ + + } + + + {{ isStreamingCameraToSelectedPeer() ? 'đ' : 'đš' }} + + + + {{ isRecordingVoice() ? 'âšī¸' : 'đī¸' }} + + + + + + + + } + | undefined) { + this.callAudioElement = value; + this.syncCallAudioSource(); + } + private callAudioElement?: ElementRef; messageText = ''; readonly forwardingEntryId = signal(null); readonly emojiPickerOpen = signal(false); + readonly isRecordingVoice = signal(false); readonly emojiOptions = [ 'đ', 'đ', 'đ', 'đ¤Ŗ', 'đ', 'đ', 'đ', 'đ', 'đ', 'đ¤', @@ -40,15 +52,65 @@ export class ChatPageComponent { readonly peerId = computed(() => this.routeParamMap().get('peerId') ?? ''); readonly peer = computed(() => this.session.peers().find((item) => item.id === this.peerId()) ?? null); readonly currentUser = computed(() => this.session.currentUser()); + readonly incomingVoiceCallPeer = computed(() => { + const peerId = this.session.incomingVoiceCallPeerId(); + + return peerId ? this.session.peers().find((peer) => peer.id === peerId) ?? null : null; + }); readonly conversation = computed(() => this.session .messages() .filter((entry) => entry.peerId === this.peerId()), ); readonly remoteVideoStream = computed(() => this.session.remoteVideoStreamForPeer(this.peerId())); + readonly remoteCallAudioStream = computed(() => + this.session.remoteAudioStreamForPeer(this.session.activeVoiceCallPeerId() ?? ''), + ); readonly remoteVideoModalVisible = computed( () => this.session.remoteVideoModalPeerId() === this.peerId() && !!this.remoteVideoStream(), ); + readonly selectedPeerVoiceCallState = computed<'idle' | 'incoming' | 'outgoing' | 'active'>(() => { + const peerId = this.peerId(); + + if (!peerId) { + return 'idle'; + } + + if (this.session.activeVoiceCallPeerId() === peerId) { + return 'active'; + } + + if (this.session.outgoingVoiceCallPeerId() === peerId) { + return 'outgoing'; + } + + if (this.session.incomingVoiceCallPeerId() === peerId) { + return 'incoming'; + } + + return 'idle'; + }); + readonly canStartSelectedVoiceCall = computed(() => { + const selectedPeer = this.peer(); + + if (!selectedPeer || selectedPeer.channelState !== 'open') { + return false; + } + + const activePeerId = this.session.activeVoiceCallPeerId(); + const outgoingPeerId = this.session.outgoingVoiceCallPeerId(); + const incomingPeerId = this.session.incomingVoiceCallPeerId(); + + return !activePeerId && !outgoingPeerId && !incomingPeerId; + }); + readonly canEndSelectedVoiceCall = computed(() => { + const peerId = this.peerId(); + + return !!peerId && ( + this.session.activeVoiceCallPeerId() === peerId || + this.session.outgoingVoiceCallPeerId() === peerId + ); + }); readonly webRtcState = computed(() => { const selectedPeer = this.peer(); @@ -82,6 +144,16 @@ export class ChatPageComponent { this.session.selectPeer(peerId); void this.session.connectToPeer(peerId); }); + + effect(() => { + this.remoteCallAudioStream(); + this.syncCallAudioSource(); + }); + } + + ngOnDestroy(): void { + this.stopVoiceRecording(true); + this.detachCallAudioSource(); } async ensureConnection(): Promise { @@ -190,6 +262,76 @@ export class ChatPageComponent { input.value = ''; } + async toggleVoiceRecording(): Promise { + if (this.isRecordingVoice()) { + this.stopVoiceRecording(false); + return; + } + + const peerId = this.peerId(); + + if (!peerId) { + return; + } + + if (typeof MediaRecorder === 'undefined' || typeof navigator === 'undefined') { + this.session.error.set('This browser does not support voice recording.'); + return; + } + + if (typeof navigator.mediaDevices?.getUserMedia !== 'function') { + this.session.error.set('This browser cannot access the microphone.'); + return; + } + + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); + const preferredMimeType = this.preferredVoiceMimeType(); + const recorder = preferredMimeType + ? new MediaRecorder(stream, { mimeType: preferredMimeType }) + : new MediaRecorder(stream); + + this.voiceChunks = []; + this.discardRecordedVoice = false; + this.recordingPeerId = peerId; + this.voiceStream = stream; + this.voiceRecorder = recorder; + + recorder.ondataavailable = (event) => { + if (event.data.size > 0) { + this.voiceChunks.push(event.data); + } + }; + + recorder.onerror = () => { + this.session.error.set('Could not record voice message.'); + this.cleanupVoiceRecording(); + }; + + recorder.onstop = () => { + const shouldDiscard = this.discardRecordedVoice; + const targetPeerId = this.recordingPeerId; + const mimeType = recorder.mimeType || preferredMimeType || 'audio/webm'; + const blob = new Blob(this.voiceChunks, { type: mimeType }); + + this.cleanupVoiceRecording(); + + if (shouldDiscard || !targetPeerId || blob.size === 0) { + return; + } + + void this.session.sendVoiceMessage(targetPeerId, blob, mimeType); + }; + + recorder.start(); + this.isRecordingVoice.set(true); + this.session.error.set(null); + } catch { + this.session.error.set('Could not start microphone recording.'); + this.cleanupVoiceRecording(); + } + } + async deleteMessage(entry: ChatEntry): Promise { await this.session.deleteMessage(entry); } @@ -241,6 +383,34 @@ export class ChatPageComponent { await this.session.startCameraStream(peerId); } + async startVoiceCall(peerId: string): Promise { + await this.session.startVoiceCall(peerId); + } + + async endVoiceCall(peerId: string): Promise { + await this.session.endVoiceCall(peerId); + } + + async acceptIncomingVoiceCall(peerId: string): Promise { + if (!peerId) { + return; + } + + if (peerId !== this.peerId()) { + await this.router.navigate(['/chat', peerId]); + } + + await this.session.acceptVoiceCall(peerId); + } + + rejectIncomingVoiceCall(peerId: string): void { + if (!peerId) { + return; + } + + this.session.rejectVoiceCall(peerId); + } + isImageEntry(entry: ChatEntry): boolean { return entry.kind === 'file' && !!entry.downloadUrl && (entry.fileMimeType?.startsWith('image/') ?? false); } @@ -271,6 +441,10 @@ export class ChatPageComponent { return this.session.typingPeerIds().includes(peerId); } + isPeerUnread(peerId: string): boolean { + return this.session.unreadPeerIds().includes(peerId); + } + indicatorTone(state: ConnectionState): 'ok' | 'connecting' | 'offline' { if (state === 'connected') { return 'ok'; @@ -308,9 +482,85 @@ export class ChatPageComponent { return; } + this.stopVoiceRecording(true); this.forwardingEntryId.set(null); this.emojiPickerOpen.set(false); this.session.selectPeer(peerId); await this.router.navigate(['/chat', peerId]); } + + private stopVoiceRecording(discard: boolean): void { + const recorder = this.voiceRecorder; + + if (!recorder) { + this.discardRecordedVoice = discard; + this.cleanupVoiceRecording(); + return; + } + + this.discardRecordedVoice = discard; + + if (recorder.state !== 'inactive') { + recorder.stop(); + return; + } + + this.cleanupVoiceRecording(); + } + + private cleanupVoiceRecording(): void { + if (this.voiceStream) { + for (const track of this.voiceStream.getTracks()) { + track.stop(); + } + } + + this.voiceRecorder = null; + this.voiceStream = null; + this.voiceChunks = []; + this.recordingPeerId = null; + this.isRecordingVoice.set(false); + } + + private preferredVoiceMimeType(): string { + if (typeof MediaRecorder === 'undefined' || typeof MediaRecorder.isTypeSupported !== 'function') { + return ''; + } + + const candidates = ['audio/webm;codecs=opus', 'audio/webm', 'audio/ogg;codecs=opus', 'audio/ogg']; + + return candidates.find((candidate) => MediaRecorder.isTypeSupported(candidate)) ?? ''; + } + + private syncCallAudioSource(): void { + const audio = this.callAudioElement?.nativeElement; + + if (!audio) { + return; + } + + const stream = this.remoteCallAudioStream(); + + audio.srcObject = stream; + + if (stream) { + void audio.play().catch(() => { + // Autoplay may wait for a browser gesture. + }); + return; + } + + audio.pause(); + } + + private detachCallAudioSource(): void { + const audio = this.callAudioElement?.nativeElement; + + if (!audio) { + return; + } + + audio.pause(); + audio.srcObject = null; + } } diff --git a/client/src/app/chat-session.service.ts b/client/src/app/chat-session.service.ts index 72acdca..a354a67 100644 --- a/client/src/app/chat-session.service.ts +++ b/client/src/app/chat-session.service.ts @@ -25,13 +25,18 @@ type PeerBundle = { channel?: RTCDataChannel; pendingCandidates: RTCIceCandidateInit[]; pendingNegotiation: boolean; + announceConnectionEvents: boolean; localCameraStream?: MediaStream; cameraSenders: RTCRtpSender[]; remoteCameraStream?: MediaStream; + localAudioStream?: MediaStream; + audioSenders: RTCRtpSender[]; + remoteAudioStream?: MediaStream; }; type IncomingFileTransfer = { id: string; + kind: 'file' | 'voice'; name: string; mimeType: string; size: number; @@ -113,6 +118,7 @@ export class ChatSessionService { private static readonly typingIndicatorLifetimeMs = 1800; private static readonly typingIdleMs = 1200; private static readonly typingHeartbeatMs = 900; + private static readonly incomingCallRingtoneFileName = 'SymphonyDing.mp3'; readonly serverUrl = signal(this.readStorage('privatechat.serverUrl') ?? readDefaultServerUrl()); readonly currentUser = signal(this.readUserStorage()); @@ -123,6 +129,9 @@ export class ChatSessionService { readonly unreadPeerIds = signal([]); readonly typingPeerIds = signal([]); readonly remoteVideoModalPeerId = signal(null); + readonly incomingVoiceCallPeerId = signal(null); + readonly outgoingVoiceCallPeerId = signal(null); + readonly activeVoiceCallPeerId = signal(null); readonly signalingState = signal('disconnected'); readonly status = signal('Disconnected from signaling server.'); readonly error = signal(null); @@ -162,12 +171,17 @@ export class ChatSessionService { { peerId: string; prompt: string; waitMessageId: string } >(); private readonly remoteVideoStreams = signal>([]); + private readonly remoteAudioStreams = signal>([]); private readonly activeCameraPeerId = signal(null); + private readonly activeAudioPeerId = signal(null); private sessionKeepaliveIntervalId: number | null = null; private websocketHeartbeatIntervalId: number | null = null; private websocketReconnectTimeoutId: number | null = null; private websocketReconnectAttempt = 0; private suppressSocketReconnect = false; + private ringtoneAudio: HTMLAudioElement | null = null; + private ringtoneAudioUrl: string = this.resolveIncomingCallRingtoneUrl(); + private ringtonePreloadPromise: Promise | null = null; private messageEncryptionKey: CryptoKey | null = null; private messageDatabasePromise: Promise | null = null; private websocket: WebSocket | null = null; @@ -327,13 +341,14 @@ export class ChatSessionService { this.outgoingTypingIdleTimeouts.set(peerId, timeoutId); } - async connectToPeer(peerId: string): Promise { + async connectToPeer(peerId: string, options?: { announce?: boolean }): Promise { if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) { this.error.set('You must be connected to signaling before opening a peer session.'); return; } - const bundle = this.ensurePeerBundle(peerId, true); + const announce = options?.announce ?? true; + const bundle = this.ensurePeerBundle(peerId, true, announce); if (bundle.channel?.readyState === 'open') { return; @@ -344,7 +359,9 @@ export class ChatSessionService { } this.patchPeer(peerId, { connectionState: 'connecting', channelState: 'connecting' }); - this.addSystemMessage(peerId, 'Opening WebRTC data channel.'); + if (announce) { + this.addSystemMessage(peerId, 'Opening WebRTC data channel.'); + } await this.negotiatePeer(peerId, bundle); } @@ -442,12 +459,87 @@ export class ChatSessionService { return this.remoteVideoStreams().find((entry) => entry.peerId === peerId)?.stream ?? null; } + remoteAudioStreamForPeer(peerId: string): MediaStream | null { + return this.remoteAudioStreams().find((entry) => entry.peerId === peerId)?.stream ?? null; + } + dismissRemoteVideoModal(peerId: string): void { if (this.remoteVideoModalPeerId() === peerId) { this.remoteVideoModalPeerId.set(null); } } + async startVoiceCall(peerId: string): Promise { + const channel = this.requireOpenChannel(peerId); + + if (!channel) { + return; + } + + if (this.hasVoiceCallConflict(peerId) || this.outgoingVoiceCallPeerId() === peerId || this.activeVoiceCallPeerId() === peerId) { + this.error.set('Finish the current voice call before starting another one.'); + return; + } + + this.error.set(null); + this.incomingVoiceCallPeerId.set(null); + this.outgoingVoiceCallPeerId.set(peerId); + channel.send(JSON.stringify({ type: 'voice-call-offer' } satisfies DataEnvelope)); + this.addSystemMessage(peerId, 'Calling peer.'); + } + + async acceptVoiceCall(peerId: string): Promise { + if (this.incomingVoiceCallPeerId() !== peerId) { + return; + } + + const bundle = await this.ensureLocalAudioStream(peerId); + + if (!bundle) { + this.sendVoiceCallResponse(peerId, false); + this.clearVoiceCallSignals(peerId); + return; + } + + this.stopRingtone(); + this.incomingVoiceCallPeerId.set(null); + this.outgoingVoiceCallPeerId.set(null); + this.activeVoiceCallPeerId.set(peerId); + this.sendVoiceCallResponse(peerId, true); + this.addSystemMessage(peerId, 'Voice call connected.'); + await this.negotiatePeer(peerId, bundle); + } + + rejectVoiceCall(peerId: string): void { + if (this.incomingVoiceCallPeerId() !== peerId) { + return; + } + + this.sendVoiceCallResponse(peerId, false); + this.clearVoiceCallSignals(peerId); + this.addSystemMessage(peerId, 'Voice call rejected.'); + } + + async endVoiceCall(peerId: string, notifyPeer = true): Promise { + const hadVoiceCall = this.incomingVoiceCallPeerId() === peerId + || this.outgoingVoiceCallPeerId() === peerId + || this.activeVoiceCallPeerId() === peerId + || this.activeAudioPeerId() === peerId; + + if (!hadVoiceCall) { + return; + } + + if (notifyPeer) { + this.sendVoiceCallEnded(peerId); + } + + await this.stopLocalAudioStream(peerId, true); + this.clearRemoteAudioState(peerId); + this.clearVoiceCallSignals(peerId); + this.addSystemMessage(peerId, 'Voice call ended.'); + } + async registerAccessKey(label: string): Promise { if (!this.webAuthnSupported()) { this.error.set('This browser does not support WebAuthn access keys.'); @@ -536,7 +628,7 @@ export class ChatSessionService { this.sendJsonEnvelope(peerId, channel, parsedPayload); } - async sendFile(peerId: string, file: File): Promise { + async sendFile(peerId: string, file: File, attachmentKind: 'file' | 'voice' = 'file'): Promise { const channel = this.requireOpenChannel(peerId); if (!channel) { @@ -556,6 +648,7 @@ export class ChatSessionService { name: file.name, mimeType: file.type || 'application/octet-stream', size: file.size, + attachmentKind, authorId: this.currentUser()!.id, authorName: this.currentUser()!.displayName, sentAt, @@ -572,7 +665,7 @@ export class ChatSessionService { id: transferId, peerId, direction: 'outgoing', - kind: 'file', + kind: attachmentKind, createdAt: sentAt, authorLabel: 'You', fileName: file.name, @@ -582,6 +675,18 @@ export class ChatSessionService { }, file); } + async sendVoiceMessage(peerId: string, blob: Blob, mimeType?: string): Promise { + const resolvedMimeType = mimeType || blob.type || 'audio/webm'; + const extension = this.fileExtensionForMimeType(resolvedMimeType); + const file = new File( + [blob], + `voice-message-${new Date().toISOString().replace(/[:.]/g, '-')}.${extension}`, + { type: resolvedMimeType }, + ); + + await this.sendFile(peerId, file, 'voice'); + } + async forwardMessage(targetPeerId: string, entry: ChatEntry): Promise { if (entry.kind === 'system' || entry.direction === 'system') { return; @@ -605,6 +710,7 @@ export class ChatSessionService { this.sendJsonEnvelope(targetPeerId, channel, entry.payload); return; case 'file': + case 'voice': if (!entry.downloadUrl) { this.error.set('This file cannot be forwarded because its data is unavailable.'); return; @@ -617,7 +723,7 @@ export class ChatSessionService { type: entry.fileMimeType || blob.type || 'application/octet-stream', }); - await this.sendFile(targetPeerId, file); + await this.sendFile(targetPeerId, file, entry.kind === 'voice' ? 'voice' : 'file'); } catch { this.error.set('Could not forward this file.'); } @@ -838,6 +944,8 @@ export class ChatSessionService { return; } + void this.preloadRingtone(); + this.clearWebSocketReconnect(); this.disconnectWebSocket(); this.resetPeerConnections(); @@ -928,9 +1036,11 @@ export class ChatSessionService { case 'peer-left': this.releasePeerBundle(event.peerId, false); this.peers.update((peers) => peers.filter((peer) => peer.id !== event.peerId)); - this.clearUnreadPeer(event.peerId); - this.clearPeerTyping(event.peerId); - this.clearRemoteVideoState(event.peerId); + this.clearUnreadPeer(event.peerId); + this.clearPeerTyping(event.peerId); + this.clearRemoteVideoState(event.peerId); + this.clearRemoteAudioState(event.peerId); + this.clearVoiceCallSignals(event.peerId); if (this.activePeerId() === event.peerId) { this.activePeerId.set(this.peers()[0]?.id ?? null); } @@ -1149,6 +1259,10 @@ export class ChatSessionService { if (!this.activePeerId() && nextPeers.length > 0) { this.activePeerId.set(nextPeers[0].id); } + + queueMicrotask(() => { + void this.connectToAvailablePeers(); + }); } private async handleSignal(peerId: string, signal: SignalPayload): Promise { @@ -1197,10 +1311,12 @@ export class ChatSessionService { await this.flushPendingCandidates(bundle); } - private ensurePeerBundle(peerId: string, initiator: boolean): PeerBundle { + private ensurePeerBundle(peerId: string, initiator: boolean, announce = false): PeerBundle { const existing = this.peerBundles.get(peerId); if (existing && existing.pc.connectionState !== 'closed' && existing.pc.connectionState !== 'failed') { + existing.announceConnectionEvents = existing.announceConnectionEvents || announce; + if (initiator && !existing.channel) { const channel = existing.pc.createDataChannel('privatechat'); this.attachDataChannel(peerId, channel, existing); @@ -1217,7 +1333,9 @@ export class ChatSessionService { }), pendingCandidates: [], pendingNegotiation: false, + announceConnectionEvents: announce, cameraSenders: [], + audioSenders: [], }; bundle.pc.onicecandidate = (event) => { @@ -1233,7 +1351,7 @@ export class ChatSessionService { const state = this.mapConnectionState(bundle.pc.connectionState); this.patchPeer(peerId, { connectionState: state }); - if (state === 'connected') { + if (state === 'connected' && bundle.announceConnectionEvents) { this.addSystemMessage(peerId, 'Peer connection established.'); } @@ -1255,27 +1373,60 @@ export class ChatSessionService { bundle.pc.ontrack = (event) => { const [stream] = event.streams; - const remoteStream = stream ?? bundle.remoteCameraStream ?? new MediaStream(); + + if (event.track.kind === 'video') { + const remoteStream = stream ?? bundle.remoteCameraStream ?? new MediaStream(); + + if (!stream) { + remoteStream.addTrack(event.track); + } + + bundle.remoteCameraStream = remoteStream; + this.upsertRemoteVideoStream(peerId, remoteStream); + this.remoteVideoModalPeerId.set(peerId); + + event.track.onended = () => { + if (!bundle.remoteCameraStream) { + return; + } + + const remainingLiveTracks = bundle.remoteCameraStream + .getVideoTracks() + .filter((track) => track.readyState === 'live' && track !== event.track); + + if (remainingLiveTracks.length === 0) { + this.clearRemoteVideoState(peerId); + } + }; + + return; + } + + if (event.track.kind !== 'audio') { + return; + } + + const remoteStream = stream ?? bundle.remoteAudioStream ?? new MediaStream(); if (!stream) { remoteStream.addTrack(event.track); } - bundle.remoteCameraStream = remoteStream; - this.upsertRemoteVideoStream(peerId, remoteStream); - this.remoteVideoModalPeerId.set(peerId); + bundle.remoteAudioStream = remoteStream; + this.upsertRemoteAudioStream(peerId, remoteStream); + this.activeVoiceCallPeerId.set(peerId); event.track.onended = () => { - if (!bundle.remoteCameraStream) { + if (!bundle.remoteAudioStream) { return; } - const remainingLiveTracks = bundle.remoteCameraStream - .getVideoTracks() + const remainingLiveTracks = bundle.remoteAudioStream + .getAudioTracks() .filter((track) => track.readyState === 'live' && track !== event.track); if (remainingLiveTracks.length === 0) { - this.clearRemoteVideoState(peerId); + this.clearRemoteAudioState(peerId); } }; }; @@ -1299,7 +1450,9 @@ export class ChatSessionService { channel.onopen = () => { this.patchPeer(peerId, { connectionState: 'connected', channelState: 'open' }); - this.addSystemMessage(peerId, 'Secure data channel is open.'); + if (bundle.announceConnectionEvents) { + this.addSystemMessage(peerId, 'Secure data channel is open.'); + } }; channel.onclose = () => { @@ -1348,6 +1501,7 @@ export class ChatSessionService { case 'file-meta': this.incomingFiles.set(peerId, { id: envelope.id, + kind: envelope.attachmentKind ?? 'file', name: envelope.name, mimeType: envelope.mimeType, size: envelope.size, @@ -1371,6 +1525,15 @@ export class ChatSessionService { this.clearRemoteVideoState(peerId); } break; + case 'voice-call-offer': + this.handleIncomingVoiceCallOffer(peerId); + break; + case 'voice-call-response': + void this.handleVoiceCallResponse(peerId, envelope.accepted); + break; + case 'voice-call-ended': + void this.handleRemoteVoiceCallEnded(peerId); + break; } } @@ -1401,7 +1564,7 @@ export class ChatSessionService { id: transfer.id, peerId, direction: 'incoming', - kind: 'file', + kind: transfer.kind, createdAt: transfer.sentAt, authorLabel: transfer.authorName, fileName: transfer.name, @@ -1452,6 +1615,26 @@ export class ChatSessionService { channel.send(JSON.stringify({ type: 'camera-state', active } satisfies DataEnvelope)); } + private sendVoiceCallResponse(peerId: string, accepted: boolean): void { + const channel = this.peerBundles.get(peerId)?.channel; + + if (!channel || channel.readyState !== 'open') { + return; + } + + channel.send(JSON.stringify({ type: 'voice-call-response', accepted } satisfies DataEnvelope)); + } + + private sendVoiceCallEnded(peerId: string): void { + const channel = this.peerBundles.get(peerId)?.channel; + + if (!channel || channel.readyState !== 'open') { + return; + } + + channel.send(JSON.stringify({ type: 'voice-call-ended' } satisfies DataEnvelope)); + } + private sendSignal(peerId: string, signal: SignalPayload): void { if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) { return; @@ -1506,12 +1689,154 @@ export class ChatSessionService { return null; } + private async connectToAvailablePeers(): Promise { + if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) { + return; + } + + await Promise.allSettled( + this.peers().map((peer) => this.connectToPeer(peer.id, { announce: false })), + ); + } + + private hasVoiceCallConflict(peerId: string): boolean { + return [this.incomingVoiceCallPeerId(), this.outgoingVoiceCallPeerId(), this.activeVoiceCallPeerId()] + .some((candidatePeerId) => !!candidatePeerId && candidatePeerId !== peerId); + } + + private async ensureLocalAudioStream(peerId: string): Promise { + if (typeof navigator === 'undefined' || typeof navigator.mediaDevices?.getUserMedia !== 'function') { + this.error.set('This browser does not support microphone capture.'); + return null; + } + + if (this.activeAudioPeerId() && this.activeAudioPeerId() !== peerId) { + this.error.set('Finish the current voice call before starting another one.'); + return null; + } + + const bundle = this.ensurePeerBundle(peerId, true); + + if (bundle.localAudioStream) { + return bundle; + } + + try { + const stream = await navigator.mediaDevices.getUserMedia({ + audio: true, + video: false, + }); + + bundle.localAudioStream = stream; + bundle.audioSenders = stream.getTracks().map((track) => { + track.onended = () => { + void this.endVoiceCall(peerId); + }; + + return bundle.pc.addTrack(track, stream); + }); + + this.activeAudioPeerId.set(peerId); + return bundle; + } catch { + this.error.set('Could not start microphone capture for the voice call.'); + return null; + } + } + + private async stopLocalAudioStream(peerId: string, renegotiate: boolean): Promise { + const bundle = this.peerBundles.get(peerId); + + if (!bundle?.localAudioStream && this.activeAudioPeerId() !== peerId) { + return; + } + + if (bundle) { + for (const sender of bundle.audioSenders) { + bundle.pc.removeTrack(sender); + } + + bundle.audioSenders = []; + + if (bundle.localAudioStream) { + for (const track of bundle.localAudioStream.getTracks()) { + track.onended = null; + track.stop(); + } + } + + bundle.localAudioStream = undefined; + } + + if (this.activeAudioPeerId() === peerId) { + this.activeAudioPeerId.set(null); + } + + if (renegotiate && bundle) { + await this.negotiatePeer(peerId, bundle); + } + } + + private handleIncomingVoiceCallOffer(peerId: string): void { + if (this.hasVoiceCallConflict(peerId) || this.activeAudioPeerId()) { + this.sendVoiceCallResponse(peerId, false); + return; + } + + this.outgoingVoiceCallPeerId.set(null); + this.activeVoiceCallPeerId.set(null); + this.incomingVoiceCallPeerId.set(peerId); + this.startRingtone(); + this.addSystemMessage(peerId, 'Incoming voice call.'); + } + + private async handleVoiceCallResponse(peerId: string, accepted: boolean): Promise { + if (this.outgoingVoiceCallPeerId() !== peerId) { + return; + } + + this.outgoingVoiceCallPeerId.set(null); + + if (!accepted) { + this.addSystemMessage(peerId, 'Voice call declined.'); + return; + } + + this.activeVoiceCallPeerId.set(peerId); + const bundle = await this.ensureLocalAudioStream(peerId); + + if (!bundle) { + await this.endVoiceCall(peerId); + return; + } + + this.addSystemMessage(peerId, 'Voice call connected.'); + await this.negotiatePeer(peerId, bundle); + } + + private async handleRemoteVoiceCallEnded(peerId: string): Promise { + const hadVoiceCall = this.incomingVoiceCallPeerId() === peerId + || this.outgoingVoiceCallPeerId() === peerId + || this.activeVoiceCallPeerId() === peerId + || this.activeAudioPeerId() === peerId; + + await this.stopLocalAudioStream(peerId, true); + this.clearRemoteAudioState(peerId); + this.clearVoiceCallSignals(peerId); + + if (hadVoiceCall) { + this.addSystemMessage(peerId, 'Voice call ended.'); + } + } + private releasePeerBundle(peerId: string, preservePeerState: boolean): void { const bundle = this.peerBundles.get(peerId); this.clearPeerTyping(peerId); this.clearOutgoingTyping(peerId); this.clearRemoteVideoState(peerId); + this.clearRemoteAudioState(peerId); + this.clearVoiceCallSignals(peerId); if (!bundle) { return; @@ -1524,10 +1849,21 @@ export class ChatSessionService { } } + if (bundle.localAudioStream) { + for (const track of bundle.localAudioStream.getTracks()) { + track.onended = null; + track.stop(); + } + } + if (this.activeCameraPeerId() === peerId) { this.activeCameraPeerId.set(null); } + if (this.activeAudioPeerId() === peerId) { + this.activeAudioPeerId.set(null); + } + bundle.channel?.close(); bundle.pc.close(); this.peerBundles.delete(peerId); @@ -1695,10 +2031,17 @@ export class ChatSessionService { this.stopSessionKeepalive(); this.clearSystemMessageTimeouts(); this.clearTypingTimeouts(); + this.stopRingtone(); + this.releasePreloadedRingtone(); this.pendingImageGenerationRequests.clear(); this.remoteVideoStreams.set([]); + this.remoteAudioStreams.set([]); this.remoteVideoModalPeerId.set(null); this.activeCameraPeerId.set(null); + this.activeAudioPeerId.set(null); + this.incomingVoiceCallPeerId.set(null); + this.outgoingVoiceCallPeerId.set(null); + this.activeVoiceCallPeerId.set(null); this.messageEncryptionKey = null; this.revokeMessageDownloads(this.messages()); this.currentUser.set(null); @@ -2142,6 +2485,20 @@ export class ChatSessionService { }); } + private upsertRemoteAudioStream(peerId: string, stream: MediaStream): void { + this.remoteAudioStreams.update((entries) => { + const existingIndex = entries.findIndex((entry) => entry.peerId === peerId); + + if (existingIndex === -1) { + return [...entries, { peerId, stream }]; + } + + const nextEntries = [...entries]; + nextEntries[existingIndex] = { peerId, stream }; + return nextEntries; + }); + } + private clearRemoteVideoState(peerId: string): void { this.remoteVideoStreams.update((entries) => entries.filter((entry) => entry.peerId !== peerId)); @@ -2150,6 +2507,159 @@ export class ChatSessionService { } } + private clearRemoteAudioState(peerId: string): void { + this.remoteAudioStreams.update((entries) => entries.filter((entry) => entry.peerId !== peerId)); + } + + private clearVoiceCallSignals(peerId: string): void { + if (this.incomingVoiceCallPeerId() === peerId) { + this.incomingVoiceCallPeerId.set(null); + this.stopRingtone(); + } + + if (this.outgoingVoiceCallPeerId() === peerId) { + this.outgoingVoiceCallPeerId.set(null); + } + + if (this.activeVoiceCallPeerId() === peerId) { + this.activeVoiceCallPeerId.set(null); + } + } + + private startRingtone(): void { + if (typeof Audio === 'undefined') { + return; + } + + if (!this.ringtoneAudio) { + const ringtone = new Audio(this.ringtoneAudioUrl); + ringtone.loop = true; + ringtone.preload = 'auto'; + this.ringtoneAudio = ringtone; + } + + this.ringtoneAudio.currentTime = 0; + void this.ringtoneAudio.play().catch(() => { + // Ring playback may wait for a browser gesture. + }); + } + + private stopRingtone(): void { + if (!this.ringtoneAudio) { + return; + } + + this.ringtoneAudio.pause(); + this.ringtoneAudio.currentTime = 0; + } + + private preloadRingtone(): Promise { + if (this.ringtonePreloadPromise) { + return this.ringtonePreloadPromise; + } + + if (typeof fetch !== 'function') { + this.ringtonePreloadPromise = Promise.resolve(); + return this.ringtonePreloadPromise; + } + + this.ringtonePreloadPromise = this.fetchPreloadedRingtoneUrl() + .then((nextUrl) => { + if (!nextUrl) { + return; + } + + if (this.ringtoneAudioUrl.startsWith('blob:')) { + URL.revokeObjectURL(this.ringtoneAudioUrl); + } + + this.ringtoneAudioUrl = nextUrl; + + if (this.ringtoneAudio) { + this.ringtoneAudio.src = nextUrl; + this.ringtoneAudio.load(); + } + }) + .catch((error) => { + console.warn('Could not preload incoming-call ringtone.', error); + }); + + return this.ringtonePreloadPromise; + } + + private releasePreloadedRingtone(): void { + if (this.ringtoneAudio) { + this.ringtoneAudio.pause(); + this.ringtoneAudio.src = ''; + this.ringtoneAudio = null; + } + + if (this.ringtoneAudioUrl.startsWith('blob:')) { + URL.revokeObjectURL(this.ringtoneAudioUrl); + } + + this.ringtoneAudioUrl = this.resolveIncomingCallRingtoneUrl(); + this.ringtonePreloadPromise = null; + } + + private resolveIncomingCallRingtoneUrl(): string { + if (typeof document === 'undefined') { + return `/${ChatSessionService.incomingCallRingtoneFileName}`; + } + + return new URL(ChatSessionService.incomingCallRingtoneFileName, document.baseURI).toString(); + } + + private resolveIncomingCallRingtoneFallbackUrl(): string { + if (typeof window === 'undefined') { + return `/api/web-app/files/${encodeURIComponent(ChatSessionService.incomingCallRingtoneFileName)}`; + } + + return new URL( + `/api/web-app/files/${encodeURIComponent(ChatSessionService.incomingCallRingtoneFileName)}`, + window.location.origin, + ).toString(); + } + + private async fetchPreloadedRingtoneUrl(): Promise { + for (const ringtoneUrl of this.incomingCallRingtoneCandidateUrls()) { + try { + const response = await fetch(ringtoneUrl); + + if (!response.ok) { + continue; + } + + const contentType = response.headers.get('content-type')?.toLowerCase() ?? ''; + + if (!contentType.startsWith('audio/')) { + continue; + } + + const blob = await response.blob(); + + if (!blob.size) { + continue; + } + + return URL.createObjectURL(blob); + } catch { + // Try the next candidate URL. + } + } + + return null; + } + + private incomingCallRingtoneCandidateUrls(): string[] { + const candidates = [ + this.resolveIncomingCallRingtoneUrl(), + this.resolveIncomingCallRingtoneFallbackUrl(), + ]; + + return candidates.filter((value, index) => candidates.indexOf(value) === index); + } + private setPeerTyping(peerId: string, active: boolean): void { const existingTimeoutId = this.typingIndicatorTimeouts.get(peerId); @@ -2280,7 +2790,22 @@ export class ChatSessionService { } private fileExtensionForMimeType(mimeType: string): string { - switch (mimeType) { + const normalizedMimeType = mimeType.split(';', 1)[0]?.trim().toLowerCase() || 'application/octet-stream'; + + switch (normalizedMimeType) { + case 'audio/webm': + return 'webm'; + case 'audio/ogg': + return 'ogg'; + case 'audio/mp4': + case 'audio/x-m4a': + return 'm4a'; + case 'audio/mpeg': + return 'mp3'; + case 'audio/wav': + case 'audio/wave': + case 'audio/x-wav': + return 'wav'; case 'image/png': return 'png'; case 'image/jpeg': diff --git a/client/src/app/home-page.component.scss b/client/src/app/home-page.component.scss index 7d32ada..fac49b2 100644 --- a/client/src/app/home-page.component.scss +++ b/client/src/app/home-page.component.scss @@ -22,7 +22,8 @@ border-radius: 2rem; } -.panel { +.panel, +.session-card { border-radius: 1.5rem; } @@ -77,15 +78,12 @@ .theme-toggle:hover, .theme-toggle:focus-visible { - transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent-color) 35%, var(--surface-border)); background: var(--surface-hover-background); + transform: translateY(-1px); } -.session-card { - min-width: min(100%, 18rem); - border-radius: 1.5rem; -} +.session-card { min-width: min(100%, 18rem); } .status-pill { display: inline-flex; @@ -94,15 +92,19 @@ background: var(--badge-background); } -.btn-accent { +.btn-accent, +.btn-accent:hover, +.btn-accent:focus-visible { color: #06111d; border: 0; +} + +.btn-accent { background: var(--accent-gradient); } .btn-accent:hover, .btn-accent:focus-visible { - color: #06111d; background: var(--accent-gradient-hover); } diff --git a/client/src/app/json-file-viewer.component.scss b/client/src/app/json-file-viewer.component.scss index 1abc33d..abbdffd 100644 --- a/client/src/app/json-file-viewer.component.scss +++ b/client/src/app/json-file-viewer.component.scss @@ -5,8 +5,6 @@ .json-viewer-shell { width: min(95%, 480px); - max-width: min(95%, 480px); - min-width: 0; overflow: hidden; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.06); diff --git a/client/src/app/models.ts b/client/src/app/models.ts index b9be44d..667631c 100644 --- a/client/src/app/models.ts +++ b/client/src/app/models.ts @@ -94,7 +94,7 @@ export interface ChatEntry { id: string; peerId: string; direction: 'incoming' | 'outgoing' | 'system'; - kind: 'text' | 'json' | 'file' | 'system'; + kind: 'text' | 'json' | 'file' | 'voice' | 'system'; createdAt: number; authorLabel: string; showSpinner?: boolean; @@ -156,6 +156,7 @@ export type DataEnvelope = name: string; mimeType: string; size: number; + attachmentKind?: 'file' | 'voice'; authorId: string; authorName: string; sentAt: number; @@ -171,4 +172,14 @@ export type DataEnvelope = | { type: 'camera-state'; active: boolean; + } + | { + type: 'voice-call-offer'; + } + | { + type: 'voice-call-response'; + accepted: boolean; + } + | { + type: 'voice-call-ended'; }; diff --git a/client/src/styles.scss b/client/src/styles.scss index e4a9816..9174570 100644 --- a/client/src/styles.scss +++ b/client/src/styles.scss @@ -101,10 +101,6 @@ color-scheme: dark; } -:root[data-theme='light'] { - color-scheme: light; -} - html, body { min-height: 100dvh; @@ -138,27 +134,30 @@ textarea { background: var(--badge-background) !important; } -.btn-outline-light { +.btn-outline-light, +.btn-outline-light:hover, +.btn-outline-light:focus-visible { color: var(--page-text); border-color: var(--surface-border); } .btn-outline-light:hover, .btn-outline-light:focus-visible { - color: var(--page-text); - border-color: var(--surface-border); background: var(--panel-soft-background); } +.btn-outline-light, +.btn-outline-secondary { + border-color: var(--surface-border); +} + .btn-outline-secondary { color: var(--page-text-muted); - border-color: var(--surface-border); } .btn-outline-secondary:hover, .btn-outline-secondary:focus-visible { color: var(--page-text); - border-color: var(--surface-border); background: var(--panel-soft-background); } diff --git a/server/dist/index.js b/server/dist/index.js index b039f96..19f452f 100644 --- a/server/dist/index.js +++ b/server/dist/index.js @@ -1246,6 +1246,10 @@ function toBundleRelativePath(inputPath) { function detectBundleContentType(assetPath) { const extension = path.extname(assetPath).toLowerCase(); switch (extension) { + case '.mp3': + return 'audio/mpeg'; + case '.m4a': + return 'audio/mp4'; case '.css': return 'text/css; charset=utf-8'; case '.html': diff --git a/server/src/index.ts b/server/src/index.ts index 177b8b6..51e79b3 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -1869,6 +1869,10 @@ function detectBundleContentType(assetPath: string): string { const extension = path.extname(assetPath).toLowerCase(); switch (extension) { + case '.mp3': + return 'audio/mpeg'; + case '.m4a': + return 'audio/mp4'; case '.css': return 'text/css; charset=utf-8'; case '.html':
} + @case ('voice') { + + Voice message + @if (entry.downloadUrl) { + + } + + } @default { @if (entry.showSpinner) { @@ -205,39 +252,6 @@ - @if (peer(); as selectedPeer) { - - - {{ isStreamingCameraToSelectedPeer() ? 'đ' : 'đš' }} - - - - - + - - - } - - + + @if (peer(); as selectedPeer) { + + đ + + + @if (canEndSelectedVoiceCall()) { + + đ + + } + + + {{ isStreamingCameraToSelectedPeer() ? 'đ' : 'đš' }} + + + + {{ isRecordingVoice() ? 'âšī¸' : 'đī¸' }} + + + + + + + + } + | undefined) { + this.callAudioElement = value; + this.syncCallAudioSource(); + } + private callAudioElement?: ElementRef; messageText = ''; readonly forwardingEntryId = signal(null); readonly emojiPickerOpen = signal(false); + readonly isRecordingVoice = signal(false); readonly emojiOptions = [ 'đ', 'đ', 'đ', 'đ¤Ŗ', 'đ', 'đ', 'đ', 'đ', 'đ', 'đ¤', @@ -40,15 +52,65 @@ export class ChatPageComponent { readonly peerId = computed(() => this.routeParamMap().get('peerId') ?? ''); readonly peer = computed(() => this.session.peers().find((item) => item.id === this.peerId()) ?? null); readonly currentUser = computed(() => this.session.currentUser()); + readonly incomingVoiceCallPeer = computed(() => { + const peerId = this.session.incomingVoiceCallPeerId(); + + return peerId ? this.session.peers().find((peer) => peer.id === peerId) ?? null : null; + }); readonly conversation = computed(() => this.session .messages() .filter((entry) => entry.peerId === this.peerId()), ); readonly remoteVideoStream = computed(() => this.session.remoteVideoStreamForPeer(this.peerId())); + readonly remoteCallAudioStream = computed(() => + this.session.remoteAudioStreamForPeer(this.session.activeVoiceCallPeerId() ?? ''), + ); readonly remoteVideoModalVisible = computed( () => this.session.remoteVideoModalPeerId() === this.peerId() && !!this.remoteVideoStream(), ); + readonly selectedPeerVoiceCallState = computed<'idle' | 'incoming' | 'outgoing' | 'active'>(() => { + const peerId = this.peerId(); + + if (!peerId) { + return 'idle'; + } + + if (this.session.activeVoiceCallPeerId() === peerId) { + return 'active'; + } + + if (this.session.outgoingVoiceCallPeerId() === peerId) { + return 'outgoing'; + } + + if (this.session.incomingVoiceCallPeerId() === peerId) { + return 'incoming'; + } + + return 'idle'; + }); + readonly canStartSelectedVoiceCall = computed(() => { + const selectedPeer = this.peer(); + + if (!selectedPeer || selectedPeer.channelState !== 'open') { + return false; + } + + const activePeerId = this.session.activeVoiceCallPeerId(); + const outgoingPeerId = this.session.outgoingVoiceCallPeerId(); + const incomingPeerId = this.session.incomingVoiceCallPeerId(); + + return !activePeerId && !outgoingPeerId && !incomingPeerId; + }); + readonly canEndSelectedVoiceCall = computed(() => { + const peerId = this.peerId(); + + return !!peerId && ( + this.session.activeVoiceCallPeerId() === peerId || + this.session.outgoingVoiceCallPeerId() === peerId + ); + }); readonly webRtcState = computed(() => { const selectedPeer = this.peer(); @@ -82,6 +144,16 @@ export class ChatPageComponent { this.session.selectPeer(peerId); void this.session.connectToPeer(peerId); }); + + effect(() => { + this.remoteCallAudioStream(); + this.syncCallAudioSource(); + }); + } + + ngOnDestroy(): void { + this.stopVoiceRecording(true); + this.detachCallAudioSource(); } async ensureConnection(): Promise { @@ -190,6 +262,76 @@ export class ChatPageComponent { input.value = ''; } + async toggleVoiceRecording(): Promise { + if (this.isRecordingVoice()) { + this.stopVoiceRecording(false); + return; + } + + const peerId = this.peerId(); + + if (!peerId) { + return; + } + + if (typeof MediaRecorder === 'undefined' || typeof navigator === 'undefined') { + this.session.error.set('This browser does not support voice recording.'); + return; + } + + if (typeof navigator.mediaDevices?.getUserMedia !== 'function') { + this.session.error.set('This browser cannot access the microphone.'); + return; + } + + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); + const preferredMimeType = this.preferredVoiceMimeType(); + const recorder = preferredMimeType + ? new MediaRecorder(stream, { mimeType: preferredMimeType }) + : new MediaRecorder(stream); + + this.voiceChunks = []; + this.discardRecordedVoice = false; + this.recordingPeerId = peerId; + this.voiceStream = stream; + this.voiceRecorder = recorder; + + recorder.ondataavailable = (event) => { + if (event.data.size > 0) { + this.voiceChunks.push(event.data); + } + }; + + recorder.onerror = () => { + this.session.error.set('Could not record voice message.'); + this.cleanupVoiceRecording(); + }; + + recorder.onstop = () => { + const shouldDiscard = this.discardRecordedVoice; + const targetPeerId = this.recordingPeerId; + const mimeType = recorder.mimeType || preferredMimeType || 'audio/webm'; + const blob = new Blob(this.voiceChunks, { type: mimeType }); + + this.cleanupVoiceRecording(); + + if (shouldDiscard || !targetPeerId || blob.size === 0) { + return; + } + + void this.session.sendVoiceMessage(targetPeerId, blob, mimeType); + }; + + recorder.start(); + this.isRecordingVoice.set(true); + this.session.error.set(null); + } catch { + this.session.error.set('Could not start microphone recording.'); + this.cleanupVoiceRecording(); + } + } + async deleteMessage(entry: ChatEntry): Promise { await this.session.deleteMessage(entry); } @@ -241,6 +383,34 @@ export class ChatPageComponent { await this.session.startCameraStream(peerId); } + async startVoiceCall(peerId: string): Promise { + await this.session.startVoiceCall(peerId); + } + + async endVoiceCall(peerId: string): Promise { + await this.session.endVoiceCall(peerId); + } + + async acceptIncomingVoiceCall(peerId: string): Promise { + if (!peerId) { + return; + } + + if (peerId !== this.peerId()) { + await this.router.navigate(['/chat', peerId]); + } + + await this.session.acceptVoiceCall(peerId); + } + + rejectIncomingVoiceCall(peerId: string): void { + if (!peerId) { + return; + } + + this.session.rejectVoiceCall(peerId); + } + isImageEntry(entry: ChatEntry): boolean { return entry.kind === 'file' && !!entry.downloadUrl && (entry.fileMimeType?.startsWith('image/') ?? false); } @@ -271,6 +441,10 @@ export class ChatPageComponent { return this.session.typingPeerIds().includes(peerId); } + isPeerUnread(peerId: string): boolean { + return this.session.unreadPeerIds().includes(peerId); + } + indicatorTone(state: ConnectionState): 'ok' | 'connecting' | 'offline' { if (state === 'connected') { return 'ok'; @@ -308,9 +482,85 @@ export class ChatPageComponent { return; } + this.stopVoiceRecording(true); this.forwardingEntryId.set(null); this.emojiPickerOpen.set(false); this.session.selectPeer(peerId); await this.router.navigate(['/chat', peerId]); } + + private stopVoiceRecording(discard: boolean): void { + const recorder = this.voiceRecorder; + + if (!recorder) { + this.discardRecordedVoice = discard; + this.cleanupVoiceRecording(); + return; + } + + this.discardRecordedVoice = discard; + + if (recorder.state !== 'inactive') { + recorder.stop(); + return; + } + + this.cleanupVoiceRecording(); + } + + private cleanupVoiceRecording(): void { + if (this.voiceStream) { + for (const track of this.voiceStream.getTracks()) { + track.stop(); + } + } + + this.voiceRecorder = null; + this.voiceStream = null; + this.voiceChunks = []; + this.recordingPeerId = null; + this.isRecordingVoice.set(false); + } + + private preferredVoiceMimeType(): string { + if (typeof MediaRecorder === 'undefined' || typeof MediaRecorder.isTypeSupported !== 'function') { + return ''; + } + + const candidates = ['audio/webm;codecs=opus', 'audio/webm', 'audio/ogg;codecs=opus', 'audio/ogg']; + + return candidates.find((candidate) => MediaRecorder.isTypeSupported(candidate)) ?? ''; + } + + private syncCallAudioSource(): void { + const audio = this.callAudioElement?.nativeElement; + + if (!audio) { + return; + } + + const stream = this.remoteCallAudioStream(); + + audio.srcObject = stream; + + if (stream) { + void audio.play().catch(() => { + // Autoplay may wait for a browser gesture. + }); + return; + } + + audio.pause(); + } + + private detachCallAudioSource(): void { + const audio = this.callAudioElement?.nativeElement; + + if (!audio) { + return; + } + + audio.pause(); + audio.srcObject = null; + } } diff --git a/client/src/app/chat-session.service.ts b/client/src/app/chat-session.service.ts index 72acdca..a354a67 100644 --- a/client/src/app/chat-session.service.ts +++ b/client/src/app/chat-session.service.ts @@ -25,13 +25,18 @@ type PeerBundle = { channel?: RTCDataChannel; pendingCandidates: RTCIceCandidateInit[]; pendingNegotiation: boolean; + announceConnectionEvents: boolean; localCameraStream?: MediaStream; cameraSenders: RTCRtpSender[]; remoteCameraStream?: MediaStream; + localAudioStream?: MediaStream; + audioSenders: RTCRtpSender[]; + remoteAudioStream?: MediaStream; }; type IncomingFileTransfer = { id: string; + kind: 'file' | 'voice'; name: string; mimeType: string; size: number; @@ -113,6 +118,7 @@ export class ChatSessionService { private static readonly typingIndicatorLifetimeMs = 1800; private static readonly typingIdleMs = 1200; private static readonly typingHeartbeatMs = 900; + private static readonly incomingCallRingtoneFileName = 'SymphonyDing.mp3'; readonly serverUrl = signal(this.readStorage('privatechat.serverUrl') ?? readDefaultServerUrl()); readonly currentUser = signal(this.readUserStorage()); @@ -123,6 +129,9 @@ export class ChatSessionService { readonly unreadPeerIds = signal([]); readonly typingPeerIds = signal([]); readonly remoteVideoModalPeerId = signal(null); + readonly incomingVoiceCallPeerId = signal(null); + readonly outgoingVoiceCallPeerId = signal(null); + readonly activeVoiceCallPeerId = signal(null); readonly signalingState = signal('disconnected'); readonly status = signal('Disconnected from signaling server.'); readonly error = signal(null); @@ -162,12 +171,17 @@ export class ChatSessionService { { peerId: string; prompt: string; waitMessageId: string } >(); private readonly remoteVideoStreams = signal>([]); + private readonly remoteAudioStreams = signal>([]); private readonly activeCameraPeerId = signal(null); + private readonly activeAudioPeerId = signal(null); private sessionKeepaliveIntervalId: number | null = null; private websocketHeartbeatIntervalId: number | null = null; private websocketReconnectTimeoutId: number | null = null; private websocketReconnectAttempt = 0; private suppressSocketReconnect = false; + private ringtoneAudio: HTMLAudioElement | null = null; + private ringtoneAudioUrl: string = this.resolveIncomingCallRingtoneUrl(); + private ringtonePreloadPromise: Promise | null = null; private messageEncryptionKey: CryptoKey | null = null; private messageDatabasePromise: Promise | null = null; private websocket: WebSocket | null = null; @@ -327,13 +341,14 @@ export class ChatSessionService { this.outgoingTypingIdleTimeouts.set(peerId, timeoutId); } - async connectToPeer(peerId: string): Promise { + async connectToPeer(peerId: string, options?: { announce?: boolean }): Promise { if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) { this.error.set('You must be connected to signaling before opening a peer session.'); return; } - const bundle = this.ensurePeerBundle(peerId, true); + const announce = options?.announce ?? true; + const bundle = this.ensurePeerBundle(peerId, true, announce); if (bundle.channel?.readyState === 'open') { return; @@ -344,7 +359,9 @@ export class ChatSessionService { } this.patchPeer(peerId, { connectionState: 'connecting', channelState: 'connecting' }); - this.addSystemMessage(peerId, 'Opening WebRTC data channel.'); + if (announce) { + this.addSystemMessage(peerId, 'Opening WebRTC data channel.'); + } await this.negotiatePeer(peerId, bundle); } @@ -442,12 +459,87 @@ export class ChatSessionService { return this.remoteVideoStreams().find((entry) => entry.peerId === peerId)?.stream ?? null; } + remoteAudioStreamForPeer(peerId: string): MediaStream | null { + return this.remoteAudioStreams().find((entry) => entry.peerId === peerId)?.stream ?? null; + } + dismissRemoteVideoModal(peerId: string): void { if (this.remoteVideoModalPeerId() === peerId) { this.remoteVideoModalPeerId.set(null); } } + async startVoiceCall(peerId: string): Promise { + const channel = this.requireOpenChannel(peerId); + + if (!channel) { + return; + } + + if (this.hasVoiceCallConflict(peerId) || this.outgoingVoiceCallPeerId() === peerId || this.activeVoiceCallPeerId() === peerId) { + this.error.set('Finish the current voice call before starting another one.'); + return; + } + + this.error.set(null); + this.incomingVoiceCallPeerId.set(null); + this.outgoingVoiceCallPeerId.set(peerId); + channel.send(JSON.stringify({ type: 'voice-call-offer' } satisfies DataEnvelope)); + this.addSystemMessage(peerId, 'Calling peer.'); + } + + async acceptVoiceCall(peerId: string): Promise { + if (this.incomingVoiceCallPeerId() !== peerId) { + return; + } + + const bundle = await this.ensureLocalAudioStream(peerId); + + if (!bundle) { + this.sendVoiceCallResponse(peerId, false); + this.clearVoiceCallSignals(peerId); + return; + } + + this.stopRingtone(); + this.incomingVoiceCallPeerId.set(null); + this.outgoingVoiceCallPeerId.set(null); + this.activeVoiceCallPeerId.set(peerId); + this.sendVoiceCallResponse(peerId, true); + this.addSystemMessage(peerId, 'Voice call connected.'); + await this.negotiatePeer(peerId, bundle); + } + + rejectVoiceCall(peerId: string): void { + if (this.incomingVoiceCallPeerId() !== peerId) { + return; + } + + this.sendVoiceCallResponse(peerId, false); + this.clearVoiceCallSignals(peerId); + this.addSystemMessage(peerId, 'Voice call rejected.'); + } + + async endVoiceCall(peerId: string, notifyPeer = true): Promise { + const hadVoiceCall = this.incomingVoiceCallPeerId() === peerId + || this.outgoingVoiceCallPeerId() === peerId + || this.activeVoiceCallPeerId() === peerId + || this.activeAudioPeerId() === peerId; + + if (!hadVoiceCall) { + return; + } + + if (notifyPeer) { + this.sendVoiceCallEnded(peerId); + } + + await this.stopLocalAudioStream(peerId, true); + this.clearRemoteAudioState(peerId); + this.clearVoiceCallSignals(peerId); + this.addSystemMessage(peerId, 'Voice call ended.'); + } + async registerAccessKey(label: string): Promise { if (!this.webAuthnSupported()) { this.error.set('This browser does not support WebAuthn access keys.'); @@ -536,7 +628,7 @@ export class ChatSessionService { this.sendJsonEnvelope(peerId, channel, parsedPayload); } - async sendFile(peerId: string, file: File): Promise { + async sendFile(peerId: string, file: File, attachmentKind: 'file' | 'voice' = 'file'): Promise { const channel = this.requireOpenChannel(peerId); if (!channel) { @@ -556,6 +648,7 @@ export class ChatSessionService { name: file.name, mimeType: file.type || 'application/octet-stream', size: file.size, + attachmentKind, authorId: this.currentUser()!.id, authorName: this.currentUser()!.displayName, sentAt, @@ -572,7 +665,7 @@ export class ChatSessionService { id: transferId, peerId, direction: 'outgoing', - kind: 'file', + kind: attachmentKind, createdAt: sentAt, authorLabel: 'You', fileName: file.name, @@ -582,6 +675,18 @@ export class ChatSessionService { }, file); } + async sendVoiceMessage(peerId: string, blob: Blob, mimeType?: string): Promise { + const resolvedMimeType = mimeType || blob.type || 'audio/webm'; + const extension = this.fileExtensionForMimeType(resolvedMimeType); + const file = new File( + [blob], + `voice-message-${new Date().toISOString().replace(/[:.]/g, '-')}.${extension}`, + { type: resolvedMimeType }, + ); + + await this.sendFile(peerId, file, 'voice'); + } + async forwardMessage(targetPeerId: string, entry: ChatEntry): Promise { if (entry.kind === 'system' || entry.direction === 'system') { return; @@ -605,6 +710,7 @@ export class ChatSessionService { this.sendJsonEnvelope(targetPeerId, channel, entry.payload); return; case 'file': + case 'voice': if (!entry.downloadUrl) { this.error.set('This file cannot be forwarded because its data is unavailable.'); return; @@ -617,7 +723,7 @@ export class ChatSessionService { type: entry.fileMimeType || blob.type || 'application/octet-stream', }); - await this.sendFile(targetPeerId, file); + await this.sendFile(targetPeerId, file, entry.kind === 'voice' ? 'voice' : 'file'); } catch { this.error.set('Could not forward this file.'); } @@ -838,6 +944,8 @@ export class ChatSessionService { return; } + void this.preloadRingtone(); + this.clearWebSocketReconnect(); this.disconnectWebSocket(); this.resetPeerConnections(); @@ -928,9 +1036,11 @@ export class ChatSessionService { case 'peer-left': this.releasePeerBundle(event.peerId, false); this.peers.update((peers) => peers.filter((peer) => peer.id !== event.peerId)); - this.clearUnreadPeer(event.peerId); - this.clearPeerTyping(event.peerId); - this.clearRemoteVideoState(event.peerId); + this.clearUnreadPeer(event.peerId); + this.clearPeerTyping(event.peerId); + this.clearRemoteVideoState(event.peerId); + this.clearRemoteAudioState(event.peerId); + this.clearVoiceCallSignals(event.peerId); if (this.activePeerId() === event.peerId) { this.activePeerId.set(this.peers()[0]?.id ?? null); } @@ -1149,6 +1259,10 @@ export class ChatSessionService { if (!this.activePeerId() && nextPeers.length > 0) { this.activePeerId.set(nextPeers[0].id); } + + queueMicrotask(() => { + void this.connectToAvailablePeers(); + }); } private async handleSignal(peerId: string, signal: SignalPayload): Promise { @@ -1197,10 +1311,12 @@ export class ChatSessionService { await this.flushPendingCandidates(bundle); } - private ensurePeerBundle(peerId: string, initiator: boolean): PeerBundle { + private ensurePeerBundle(peerId: string, initiator: boolean, announce = false): PeerBundle { const existing = this.peerBundles.get(peerId); if (existing && existing.pc.connectionState !== 'closed' && existing.pc.connectionState !== 'failed') { + existing.announceConnectionEvents = existing.announceConnectionEvents || announce; + if (initiator && !existing.channel) { const channel = existing.pc.createDataChannel('privatechat'); this.attachDataChannel(peerId, channel, existing); @@ -1217,7 +1333,9 @@ export class ChatSessionService { }), pendingCandidates: [], pendingNegotiation: false, + announceConnectionEvents: announce, cameraSenders: [], + audioSenders: [], }; bundle.pc.onicecandidate = (event) => { @@ -1233,7 +1351,7 @@ export class ChatSessionService { const state = this.mapConnectionState(bundle.pc.connectionState); this.patchPeer(peerId, { connectionState: state }); - if (state === 'connected') { + if (state === 'connected' && bundle.announceConnectionEvents) { this.addSystemMessage(peerId, 'Peer connection established.'); } @@ -1255,27 +1373,60 @@ export class ChatSessionService { bundle.pc.ontrack = (event) => { const [stream] = event.streams; - const remoteStream = stream ?? bundle.remoteCameraStream ?? new MediaStream(); + + if (event.track.kind === 'video') { + const remoteStream = stream ?? bundle.remoteCameraStream ?? new MediaStream(); + + if (!stream) { + remoteStream.addTrack(event.track); + } + + bundle.remoteCameraStream = remoteStream; + this.upsertRemoteVideoStream(peerId, remoteStream); + this.remoteVideoModalPeerId.set(peerId); + + event.track.onended = () => { + if (!bundle.remoteCameraStream) { + return; + } + + const remainingLiveTracks = bundle.remoteCameraStream + .getVideoTracks() + .filter((track) => track.readyState === 'live' && track !== event.track); + + if (remainingLiveTracks.length === 0) { + this.clearRemoteVideoState(peerId); + } + }; + + return; + } + + if (event.track.kind !== 'audio') { + return; + } + + const remoteStream = stream ?? bundle.remoteAudioStream ?? new MediaStream(); if (!stream) { remoteStream.addTrack(event.track); } - bundle.remoteCameraStream = remoteStream; - this.upsertRemoteVideoStream(peerId, remoteStream); - this.remoteVideoModalPeerId.set(peerId); + bundle.remoteAudioStream = remoteStream; + this.upsertRemoteAudioStream(peerId, remoteStream); + this.activeVoiceCallPeerId.set(peerId); event.track.onended = () => { - if (!bundle.remoteCameraStream) { + if (!bundle.remoteAudioStream) { return; } - const remainingLiveTracks = bundle.remoteCameraStream - .getVideoTracks() + const remainingLiveTracks = bundle.remoteAudioStream + .getAudioTracks() .filter((track) => track.readyState === 'live' && track !== event.track); if (remainingLiveTracks.length === 0) { - this.clearRemoteVideoState(peerId); + this.clearRemoteAudioState(peerId); } }; }; @@ -1299,7 +1450,9 @@ export class ChatSessionService { channel.onopen = () => { this.patchPeer(peerId, { connectionState: 'connected', channelState: 'open' }); - this.addSystemMessage(peerId, 'Secure data channel is open.'); + if (bundle.announceConnectionEvents) { + this.addSystemMessage(peerId, 'Secure data channel is open.'); + } }; channel.onclose = () => { @@ -1348,6 +1501,7 @@ export class ChatSessionService { case 'file-meta': this.incomingFiles.set(peerId, { id: envelope.id, + kind: envelope.attachmentKind ?? 'file', name: envelope.name, mimeType: envelope.mimeType, size: envelope.size, @@ -1371,6 +1525,15 @@ export class ChatSessionService { this.clearRemoteVideoState(peerId); } break; + case 'voice-call-offer': + this.handleIncomingVoiceCallOffer(peerId); + break; + case 'voice-call-response': + void this.handleVoiceCallResponse(peerId, envelope.accepted); + break; + case 'voice-call-ended': + void this.handleRemoteVoiceCallEnded(peerId); + break; } } @@ -1401,7 +1564,7 @@ export class ChatSessionService { id: transfer.id, peerId, direction: 'incoming', - kind: 'file', + kind: transfer.kind, createdAt: transfer.sentAt, authorLabel: transfer.authorName, fileName: transfer.name, @@ -1452,6 +1615,26 @@ export class ChatSessionService { channel.send(JSON.stringify({ type: 'camera-state', active } satisfies DataEnvelope)); } + private sendVoiceCallResponse(peerId: string, accepted: boolean): void { + const channel = this.peerBundles.get(peerId)?.channel; + + if (!channel || channel.readyState !== 'open') { + return; + } + + channel.send(JSON.stringify({ type: 'voice-call-response', accepted } satisfies DataEnvelope)); + } + + private sendVoiceCallEnded(peerId: string): void { + const channel = this.peerBundles.get(peerId)?.channel; + + if (!channel || channel.readyState !== 'open') { + return; + } + + channel.send(JSON.stringify({ type: 'voice-call-ended' } satisfies DataEnvelope)); + } + private sendSignal(peerId: string, signal: SignalPayload): void { if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) { return; @@ -1506,12 +1689,154 @@ export class ChatSessionService { return null; } + private async connectToAvailablePeers(): Promise { + if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) { + return; + } + + await Promise.allSettled( + this.peers().map((peer) => this.connectToPeer(peer.id, { announce: false })), + ); + } + + private hasVoiceCallConflict(peerId: string): boolean { + return [this.incomingVoiceCallPeerId(), this.outgoingVoiceCallPeerId(), this.activeVoiceCallPeerId()] + .some((candidatePeerId) => !!candidatePeerId && candidatePeerId !== peerId); + } + + private async ensureLocalAudioStream(peerId: string): Promise { + if (typeof navigator === 'undefined' || typeof navigator.mediaDevices?.getUserMedia !== 'function') { + this.error.set('This browser does not support microphone capture.'); + return null; + } + + if (this.activeAudioPeerId() && this.activeAudioPeerId() !== peerId) { + this.error.set('Finish the current voice call before starting another one.'); + return null; + } + + const bundle = this.ensurePeerBundle(peerId, true); + + if (bundle.localAudioStream) { + return bundle; + } + + try { + const stream = await navigator.mediaDevices.getUserMedia({ + audio: true, + video: false, + }); + + bundle.localAudioStream = stream; + bundle.audioSenders = stream.getTracks().map((track) => { + track.onended = () => { + void this.endVoiceCall(peerId); + }; + + return bundle.pc.addTrack(track, stream); + }); + + this.activeAudioPeerId.set(peerId); + return bundle; + } catch { + this.error.set('Could not start microphone capture for the voice call.'); + return null; + } + } + + private async stopLocalAudioStream(peerId: string, renegotiate: boolean): Promise { + const bundle = this.peerBundles.get(peerId); + + if (!bundle?.localAudioStream && this.activeAudioPeerId() !== peerId) { + return; + } + + if (bundle) { + for (const sender of bundle.audioSenders) { + bundle.pc.removeTrack(sender); + } + + bundle.audioSenders = []; + + if (bundle.localAudioStream) { + for (const track of bundle.localAudioStream.getTracks()) { + track.onended = null; + track.stop(); + } + } + + bundle.localAudioStream = undefined; + } + + if (this.activeAudioPeerId() === peerId) { + this.activeAudioPeerId.set(null); + } + + if (renegotiate && bundle) { + await this.negotiatePeer(peerId, bundle); + } + } + + private handleIncomingVoiceCallOffer(peerId: string): void { + if (this.hasVoiceCallConflict(peerId) || this.activeAudioPeerId()) { + this.sendVoiceCallResponse(peerId, false); + return; + } + + this.outgoingVoiceCallPeerId.set(null); + this.activeVoiceCallPeerId.set(null); + this.incomingVoiceCallPeerId.set(peerId); + this.startRingtone(); + this.addSystemMessage(peerId, 'Incoming voice call.'); + } + + private async handleVoiceCallResponse(peerId: string, accepted: boolean): Promise { + if (this.outgoingVoiceCallPeerId() !== peerId) { + return; + } + + this.outgoingVoiceCallPeerId.set(null); + + if (!accepted) { + this.addSystemMessage(peerId, 'Voice call declined.'); + return; + } + + this.activeVoiceCallPeerId.set(peerId); + const bundle = await this.ensureLocalAudioStream(peerId); + + if (!bundle) { + await this.endVoiceCall(peerId); + return; + } + + this.addSystemMessage(peerId, 'Voice call connected.'); + await this.negotiatePeer(peerId, bundle); + } + + private async handleRemoteVoiceCallEnded(peerId: string): Promise { + const hadVoiceCall = this.incomingVoiceCallPeerId() === peerId + || this.outgoingVoiceCallPeerId() === peerId + || this.activeVoiceCallPeerId() === peerId + || this.activeAudioPeerId() === peerId; + + await this.stopLocalAudioStream(peerId, true); + this.clearRemoteAudioState(peerId); + this.clearVoiceCallSignals(peerId); + + if (hadVoiceCall) { + this.addSystemMessage(peerId, 'Voice call ended.'); + } + } + private releasePeerBundle(peerId: string, preservePeerState: boolean): void { const bundle = this.peerBundles.get(peerId); this.clearPeerTyping(peerId); this.clearOutgoingTyping(peerId); this.clearRemoteVideoState(peerId); + this.clearRemoteAudioState(peerId); + this.clearVoiceCallSignals(peerId); if (!bundle) { return; @@ -1524,10 +1849,21 @@ export class ChatSessionService { } } + if (bundle.localAudioStream) { + for (const track of bundle.localAudioStream.getTracks()) { + track.onended = null; + track.stop(); + } + } + if (this.activeCameraPeerId() === peerId) { this.activeCameraPeerId.set(null); } + if (this.activeAudioPeerId() === peerId) { + this.activeAudioPeerId.set(null); + } + bundle.channel?.close(); bundle.pc.close(); this.peerBundles.delete(peerId); @@ -1695,10 +2031,17 @@ export class ChatSessionService { this.stopSessionKeepalive(); this.clearSystemMessageTimeouts(); this.clearTypingTimeouts(); + this.stopRingtone(); + this.releasePreloadedRingtone(); this.pendingImageGenerationRequests.clear(); this.remoteVideoStreams.set([]); + this.remoteAudioStreams.set([]); this.remoteVideoModalPeerId.set(null); this.activeCameraPeerId.set(null); + this.activeAudioPeerId.set(null); + this.incomingVoiceCallPeerId.set(null); + this.outgoingVoiceCallPeerId.set(null); + this.activeVoiceCallPeerId.set(null); this.messageEncryptionKey = null; this.revokeMessageDownloads(this.messages()); this.currentUser.set(null); @@ -2142,6 +2485,20 @@ export class ChatSessionService { }); } + private upsertRemoteAudioStream(peerId: string, stream: MediaStream): void { + this.remoteAudioStreams.update((entries) => { + const existingIndex = entries.findIndex((entry) => entry.peerId === peerId); + + if (existingIndex === -1) { + return [...entries, { peerId, stream }]; + } + + const nextEntries = [...entries]; + nextEntries[existingIndex] = { peerId, stream }; + return nextEntries; + }); + } + private clearRemoteVideoState(peerId: string): void { this.remoteVideoStreams.update((entries) => entries.filter((entry) => entry.peerId !== peerId)); @@ -2150,6 +2507,159 @@ export class ChatSessionService { } } + private clearRemoteAudioState(peerId: string): void { + this.remoteAudioStreams.update((entries) => entries.filter((entry) => entry.peerId !== peerId)); + } + + private clearVoiceCallSignals(peerId: string): void { + if (this.incomingVoiceCallPeerId() === peerId) { + this.incomingVoiceCallPeerId.set(null); + this.stopRingtone(); + } + + if (this.outgoingVoiceCallPeerId() === peerId) { + this.outgoingVoiceCallPeerId.set(null); + } + + if (this.activeVoiceCallPeerId() === peerId) { + this.activeVoiceCallPeerId.set(null); + } + } + + private startRingtone(): void { + if (typeof Audio === 'undefined') { + return; + } + + if (!this.ringtoneAudio) { + const ringtone = new Audio(this.ringtoneAudioUrl); + ringtone.loop = true; + ringtone.preload = 'auto'; + this.ringtoneAudio = ringtone; + } + + this.ringtoneAudio.currentTime = 0; + void this.ringtoneAudio.play().catch(() => { + // Ring playback may wait for a browser gesture. + }); + } + + private stopRingtone(): void { + if (!this.ringtoneAudio) { + return; + } + + this.ringtoneAudio.pause(); + this.ringtoneAudio.currentTime = 0; + } + + private preloadRingtone(): Promise { + if (this.ringtonePreloadPromise) { + return this.ringtonePreloadPromise; + } + + if (typeof fetch !== 'function') { + this.ringtonePreloadPromise = Promise.resolve(); + return this.ringtonePreloadPromise; + } + + this.ringtonePreloadPromise = this.fetchPreloadedRingtoneUrl() + .then((nextUrl) => { + if (!nextUrl) { + return; + } + + if (this.ringtoneAudioUrl.startsWith('blob:')) { + URL.revokeObjectURL(this.ringtoneAudioUrl); + } + + this.ringtoneAudioUrl = nextUrl; + + if (this.ringtoneAudio) { + this.ringtoneAudio.src = nextUrl; + this.ringtoneAudio.load(); + } + }) + .catch((error) => { + console.warn('Could not preload incoming-call ringtone.', error); + }); + + return this.ringtonePreloadPromise; + } + + private releasePreloadedRingtone(): void { + if (this.ringtoneAudio) { + this.ringtoneAudio.pause(); + this.ringtoneAudio.src = ''; + this.ringtoneAudio = null; + } + + if (this.ringtoneAudioUrl.startsWith('blob:')) { + URL.revokeObjectURL(this.ringtoneAudioUrl); + } + + this.ringtoneAudioUrl = this.resolveIncomingCallRingtoneUrl(); + this.ringtonePreloadPromise = null; + } + + private resolveIncomingCallRingtoneUrl(): string { + if (typeof document === 'undefined') { + return `/${ChatSessionService.incomingCallRingtoneFileName}`; + } + + return new URL(ChatSessionService.incomingCallRingtoneFileName, document.baseURI).toString(); + } + + private resolveIncomingCallRingtoneFallbackUrl(): string { + if (typeof window === 'undefined') { + return `/api/web-app/files/${encodeURIComponent(ChatSessionService.incomingCallRingtoneFileName)}`; + } + + return new URL( + `/api/web-app/files/${encodeURIComponent(ChatSessionService.incomingCallRingtoneFileName)}`, + window.location.origin, + ).toString(); + } + + private async fetchPreloadedRingtoneUrl(): Promise { + for (const ringtoneUrl of this.incomingCallRingtoneCandidateUrls()) { + try { + const response = await fetch(ringtoneUrl); + + if (!response.ok) { + continue; + } + + const contentType = response.headers.get('content-type')?.toLowerCase() ?? ''; + + if (!contentType.startsWith('audio/')) { + continue; + } + + const blob = await response.blob(); + + if (!blob.size) { + continue; + } + + return URL.createObjectURL(blob); + } catch { + // Try the next candidate URL. + } + } + + return null; + } + + private incomingCallRingtoneCandidateUrls(): string[] { + const candidates = [ + this.resolveIncomingCallRingtoneUrl(), + this.resolveIncomingCallRingtoneFallbackUrl(), + ]; + + return candidates.filter((value, index) => candidates.indexOf(value) === index); + } + private setPeerTyping(peerId: string, active: boolean): void { const existingTimeoutId = this.typingIndicatorTimeouts.get(peerId); @@ -2280,7 +2790,22 @@ export class ChatSessionService { } private fileExtensionForMimeType(mimeType: string): string { - switch (mimeType) { + const normalizedMimeType = mimeType.split(';', 1)[0]?.trim().toLowerCase() || 'application/octet-stream'; + + switch (normalizedMimeType) { + case 'audio/webm': + return 'webm'; + case 'audio/ogg': + return 'ogg'; + case 'audio/mp4': + case 'audio/x-m4a': + return 'm4a'; + case 'audio/mpeg': + return 'mp3'; + case 'audio/wav': + case 'audio/wave': + case 'audio/x-wav': + return 'wav'; case 'image/png': return 'png'; case 'image/jpeg': diff --git a/client/src/app/home-page.component.scss b/client/src/app/home-page.component.scss index 7d32ada..fac49b2 100644 --- a/client/src/app/home-page.component.scss +++ b/client/src/app/home-page.component.scss @@ -22,7 +22,8 @@ border-radius: 2rem; } -.panel { +.panel, +.session-card { border-radius: 1.5rem; } @@ -77,15 +78,12 @@ .theme-toggle:hover, .theme-toggle:focus-visible { - transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent-color) 35%, var(--surface-border)); background: var(--surface-hover-background); + transform: translateY(-1px); } -.session-card { - min-width: min(100%, 18rem); - border-radius: 1.5rem; -} +.session-card { min-width: min(100%, 18rem); } .status-pill { display: inline-flex; @@ -94,15 +92,19 @@ background: var(--badge-background); } -.btn-accent { +.btn-accent, +.btn-accent:hover, +.btn-accent:focus-visible { color: #06111d; border: 0; +} + +.btn-accent { background: var(--accent-gradient); } .btn-accent:hover, .btn-accent:focus-visible { - color: #06111d; background: var(--accent-gradient-hover); } diff --git a/client/src/app/json-file-viewer.component.scss b/client/src/app/json-file-viewer.component.scss index 1abc33d..abbdffd 100644 --- a/client/src/app/json-file-viewer.component.scss +++ b/client/src/app/json-file-viewer.component.scss @@ -5,8 +5,6 @@ .json-viewer-shell { width: min(95%, 480px); - max-width: min(95%, 480px); - min-width: 0; overflow: hidden; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.06); diff --git a/client/src/app/models.ts b/client/src/app/models.ts index b9be44d..667631c 100644 --- a/client/src/app/models.ts +++ b/client/src/app/models.ts @@ -94,7 +94,7 @@ export interface ChatEntry { id: string; peerId: string; direction: 'incoming' | 'outgoing' | 'system'; - kind: 'text' | 'json' | 'file' | 'system'; + kind: 'text' | 'json' | 'file' | 'voice' | 'system'; createdAt: number; authorLabel: string; showSpinner?: boolean; @@ -156,6 +156,7 @@ export type DataEnvelope = name: string; mimeType: string; size: number; + attachmentKind?: 'file' | 'voice'; authorId: string; authorName: string; sentAt: number; @@ -171,4 +172,14 @@ export type DataEnvelope = | { type: 'camera-state'; active: boolean; + } + | { + type: 'voice-call-offer'; + } + | { + type: 'voice-call-response'; + accepted: boolean; + } + | { + type: 'voice-call-ended'; }; diff --git a/client/src/styles.scss b/client/src/styles.scss index e4a9816..9174570 100644 --- a/client/src/styles.scss +++ b/client/src/styles.scss @@ -101,10 +101,6 @@ color-scheme: dark; } -:root[data-theme='light'] { - color-scheme: light; -} - html, body { min-height: 100dvh; @@ -138,27 +134,30 @@ textarea { background: var(--badge-background) !important; } -.btn-outline-light { +.btn-outline-light, +.btn-outline-light:hover, +.btn-outline-light:focus-visible { color: var(--page-text); border-color: var(--surface-border); } .btn-outline-light:hover, .btn-outline-light:focus-visible { - color: var(--page-text); - border-color: var(--surface-border); background: var(--panel-soft-background); } +.btn-outline-light, +.btn-outline-secondary { + border-color: var(--surface-border); +} + .btn-outline-secondary { color: var(--page-text-muted); - border-color: var(--surface-border); } .btn-outline-secondary:hover, .btn-outline-secondary:focus-visible { color: var(--page-text); - border-color: var(--surface-border); background: var(--panel-soft-background); } diff --git a/server/dist/index.js b/server/dist/index.js index b039f96..19f452f 100644 --- a/server/dist/index.js +++ b/server/dist/index.js @@ -1246,6 +1246,10 @@ function toBundleRelativePath(inputPath) { function detectBundleContentType(assetPath) { const extension = path.extname(assetPath).toLowerCase(); switch (extension) { + case '.mp3': + return 'audio/mpeg'; + case '.m4a': + return 'audio/mp4'; case '.css': return 'text/css; charset=utf-8'; case '.html': diff --git a/server/src/index.ts b/server/src/index.ts index 177b8b6..51e79b3 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -1869,6 +1869,10 @@ function detectBundleContentType(assetPath: string): string { const extension = path.extname(assetPath).toLowerCase(); switch (extension) { + case '.mp3': + return 'audio/mpeg'; + case '.m4a': + return 'audio/mp4'; case '.css': return 'text/css; charset=utf-8'; case '.html':