Fix private calls
This commit is contained in:
564
toju-app/src/app/features/direct-call/private-call.component.ts
Normal file
564
toju-app/src/app/features/direct-call/private-call.component.ts
Normal file
@@ -0,0 +1,564 @@
|
||||
/* eslint-disable @typescript-eslint/member-ordering */
|
||||
import {
|
||||
Component,
|
||||
DestroyRef,
|
||||
HostListener,
|
||||
computed,
|
||||
effect,
|
||||
inject,
|
||||
signal,
|
||||
untracked
|
||||
} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { NgIcon, provideIcons } from '@ng-icons/core';
|
||||
import {
|
||||
lucidePhone,
|
||||
lucideUsers,
|
||||
lucideUserPlus
|
||||
} from '@ng-icons/lucide';
|
||||
import { map } from 'rxjs';
|
||||
import {
|
||||
DirectCallService,
|
||||
participantToUser,
|
||||
type DirectCallSession
|
||||
} from '../../domains/direct-call';
|
||||
import { DmChatComponent } from '../../domains/direct-message/feature/dm-chat/dm-chat.component';
|
||||
import {
|
||||
VoiceActivityService,
|
||||
VoiceConnectionFacade,
|
||||
VoicePlaybackService
|
||||
} from '../../domains/voice-connection';
|
||||
import {
|
||||
ScreenShareFacade,
|
||||
ScreenShareQuality,
|
||||
ScreenShareStartOptions
|
||||
} from '../../domains/screen-share';
|
||||
import { loadVoiceSettingsFromStorage, saveVoiceSettingsToStorage } from '../../domains/voice-session';
|
||||
import { ScreenShareQualityDialogComponent } from '../../shared';
|
||||
import { selectAllUsers, selectCurrentUser } from '../../store/users/users.selectors';
|
||||
import { UsersActions } from '../../store/users/users.actions';
|
||||
import { User } from '../../shared-kernel';
|
||||
import { VoiceWorkspaceStreamItem } from '../room/voice-workspace/voice-workspace.models';
|
||||
import { VoiceWorkspaceStreamTileComponent } from '../room/voice-workspace/voice-workspace-stream-tile/voice-workspace-stream-tile.component';
|
||||
import { PrivateCallControlsComponent } from './private-call-controls.component';
|
||||
import { PrivateCallParticipantCardComponent } from './private-call-participant-card.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-private-call',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
DmChatComponent,
|
||||
FormsModule,
|
||||
NgIcon,
|
||||
PrivateCallControlsComponent,
|
||||
PrivateCallParticipantCardComponent,
|
||||
ScreenShareQualityDialogComponent,
|
||||
VoiceWorkspaceStreamTileComponent
|
||||
],
|
||||
viewProviders: [
|
||||
provideIcons({
|
||||
lucidePhone,
|
||||
lucideUsers,
|
||||
lucideUserPlus
|
||||
})
|
||||
],
|
||||
templateUrl: './private-call.component.html'
|
||||
})
|
||||
export class PrivateCallComponent {
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
private readonly destroyRef = inject(DestroyRef);
|
||||
private readonly store = inject(Store);
|
||||
private readonly calls = inject(DirectCallService);
|
||||
private readonly voice = inject(VoiceConnectionFacade);
|
||||
private readonly voiceActivity = inject(VoiceActivityService);
|
||||
private readonly playback = inject(VoicePlaybackService);
|
||||
private readonly screenShare = inject(ScreenShareFacade);
|
||||
private chatResizing = false;
|
||||
|
||||
readonly allUsers = this.store.selectSignal(selectAllUsers);
|
||||
readonly currentUser = this.store.selectSignal(selectCurrentUser);
|
||||
readonly callId = toSignal(this.route.paramMap.pipe(map((params) => params.get('callId'))), {
|
||||
initialValue: this.route.snapshot.paramMap.get('callId')
|
||||
});
|
||||
readonly session = computed(() => this.calls.sessionById(this.callId()));
|
||||
readonly participantUsers = computed(() => {
|
||||
const session = this.session();
|
||||
|
||||
if (!session) {
|
||||
return [] as User[];
|
||||
}
|
||||
|
||||
return session.participantIds
|
||||
.map((participantId) => this.userForSessionParticipant(session, participantId))
|
||||
.filter((user): user is User => !!user);
|
||||
});
|
||||
readonly isConnected = computed(() => {
|
||||
const session = this.session();
|
||||
const currentUserId = this.currentUserKey();
|
||||
|
||||
return !!session && !!currentUserId && !!session.participants[currentUserId]?.joined;
|
||||
});
|
||||
readonly isMuted = this.voice.isMuted;
|
||||
readonly isDeafened = this.voice.isDeafened;
|
||||
readonly isCameraEnabled = this.voice.isCameraEnabled;
|
||||
readonly isScreenSharing = this.screenShare.isScreenSharing;
|
||||
readonly remoteStreamRevision = signal(0);
|
||||
readonly includeSystemAudio = signal(false);
|
||||
readonly screenShareQuality = signal<ScreenShareQuality>('balanced');
|
||||
readonly askScreenShareQuality = signal(true);
|
||||
readonly showScreenShareQualityDialog = signal(false);
|
||||
readonly inviteUserId = signal('');
|
||||
readonly focusedStreamId = signal<string | null>(null);
|
||||
readonly showAllStreamsMode = signal(false);
|
||||
readonly chatWidthPx = signal(384);
|
||||
readonly inviteCandidates = computed(() => {
|
||||
const participantIds = new Set(this.session()?.participantIds ?? []);
|
||||
const currentUserId = this.currentUserKey();
|
||||
|
||||
return this.allUsers().filter((user) => {
|
||||
const userId = this.userKey(user);
|
||||
|
||||
return userId !== currentUserId && !participantIds.has(userId);
|
||||
});
|
||||
});
|
||||
readonly activeShares = computed<VoiceWorkspaceStreamItem[]>(() => {
|
||||
this.remoteStreamRevision();
|
||||
|
||||
const shares: VoiceWorkspaceStreamItem[] = [];
|
||||
const localUser = this.currentUser();
|
||||
const localPeerKey = localUser ? this.userKey(localUser) : null;
|
||||
const isJoinedToCurrentCall = this.isConnected();
|
||||
const localScreenStream = isJoinedToCurrentCall ? this.screenShare.screenStream() : null;
|
||||
const localCameraStream = isJoinedToCurrentCall && this.voice.isCameraEnabled() ? this.voice.getLocalCameraStream() : null;
|
||||
|
||||
if (localUser && localPeerKey && localScreenStream) {
|
||||
shares.push(this.buildShare(localPeerKey, localUser, localScreenStream, true, 'screen'));
|
||||
}
|
||||
|
||||
if (localUser && localPeerKey && localCameraStream) {
|
||||
shares.push(this.buildShare(localPeerKey, localUser, localCameraStream, true, 'camera'));
|
||||
}
|
||||
|
||||
for (const user of this.participantUsers()) {
|
||||
const peerKey = this.getPeerKeyCandidates(user).find(
|
||||
(candidate) => candidate !== localPeerKey
|
||||
&& (
|
||||
!!this.screenShare.getRemoteScreenShareStream(candidate)
|
||||
|| !!this.voice.getRemoteCameraStream(candidate)
|
||||
)
|
||||
) ?? this.userKey(user);
|
||||
|
||||
if (peerKey === localPeerKey) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const screenStream = this.screenShare.getRemoteScreenShareStream(peerKey);
|
||||
const cameraStream = this.voice.getRemoteCameraStream(peerKey);
|
||||
|
||||
if (screenStream && this.hasActiveVideo(screenStream)) {
|
||||
shares.push(this.buildShare(peerKey, user, screenStream, false, 'screen'));
|
||||
}
|
||||
|
||||
if (cameraStream && this.hasActiveVideo(cameraStream)) {
|
||||
shares.push(this.buildShare(peerKey, user, cameraStream, false, 'camera'));
|
||||
}
|
||||
}
|
||||
|
||||
return shares;
|
||||
});
|
||||
readonly featuredShare = computed(() => this.activeShares()[0] ?? null);
|
||||
readonly hasMultipleShares = computed(() => this.activeShares().length > 1);
|
||||
readonly focusedShareId = computed(() => {
|
||||
const requested = this.focusedStreamId();
|
||||
const activeShares = this.activeShares();
|
||||
|
||||
if (this.showAllStreamsMode() && activeShares.length > 1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (requested && activeShares.some((share) => share.id === requested)) {
|
||||
return requested;
|
||||
}
|
||||
|
||||
if (activeShares.length === 1) {
|
||||
return activeShares[0].id;
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
readonly focusedShare = computed(
|
||||
() => this.activeShares().find((share) => share.id === this.focusedShareId()) ?? null
|
||||
);
|
||||
readonly thumbnailShares = computed(() => {
|
||||
const focusedShareId = this.focusedShareId();
|
||||
|
||||
if (!focusedShareId) {
|
||||
return [] as VoiceWorkspaceStreamItem[];
|
||||
}
|
||||
|
||||
return this.activeShares().filter((share) => share.id !== focusedShareId);
|
||||
});
|
||||
constructor() {
|
||||
effect(() => {
|
||||
const callId = this.callId();
|
||||
|
||||
if (callId) {
|
||||
untracked(() => void this.calls.openCall(callId));
|
||||
}
|
||||
});
|
||||
|
||||
effect(() => {
|
||||
const session = this.session();
|
||||
|
||||
if (session && !this.calls.hasOngoingActivity(session)) {
|
||||
untracked(() => void this.router.navigate(['/dm', session.conversationId], { replaceUrl: true }));
|
||||
}
|
||||
});
|
||||
|
||||
effect(() => {
|
||||
const session = this.session();
|
||||
const currentUserId = this.currentUserKey();
|
||||
const peerIds = (session ? this.remoteParticipantPeerIds(session, currentUserId) : []);
|
||||
|
||||
this.screenShare.syncRemoteScreenShareRequests(peerIds, this.isConnected() && !!session && session.status === 'connected');
|
||||
});
|
||||
|
||||
effect(() => {
|
||||
this.session();
|
||||
|
||||
if (this.isConnected()) {
|
||||
this.trackLocalMic();
|
||||
return;
|
||||
}
|
||||
|
||||
this.untrackLocalMic();
|
||||
});
|
||||
|
||||
this.screenShare.onRemoteStream
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe(() => this.bumpRemoteStreamRevision());
|
||||
|
||||
this.screenShare.onPeerDisconnected
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe(() => this.bumpRemoteStreamRevision());
|
||||
|
||||
this.destroyRef.onDestroy(() => {
|
||||
this.screenShare.syncRemoteScreenShareRequests([], false);
|
||||
});
|
||||
}
|
||||
|
||||
@HostListener('window:mousemove', ['$event'])
|
||||
onWindowMouseMove(event: MouseEvent): void {
|
||||
if (!this.chatResizing) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
this.chatWidthPx.set(this.clampChatWidth(window.innerWidth - event.clientX));
|
||||
}
|
||||
|
||||
@HostListener('window:mouseup')
|
||||
onWindowMouseUp(): void {
|
||||
this.chatResizing = false;
|
||||
}
|
||||
|
||||
async join(): Promise<void> {
|
||||
const session = this.session();
|
||||
|
||||
if (session) {
|
||||
await this.calls.joinCall(session.callId);
|
||||
}
|
||||
}
|
||||
|
||||
leave(): void {
|
||||
const session = this.session();
|
||||
|
||||
if (!session) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.calls.leaveCall(session.callId);
|
||||
this.untrackLocalMic();
|
||||
void this.router.navigate(['/dm', session.conversationId]);
|
||||
}
|
||||
|
||||
toggleMute(): void {
|
||||
this.voice.toggleMute(!this.isMuted());
|
||||
this.broadcastLocalVoiceState();
|
||||
}
|
||||
|
||||
toggleDeafen(): void {
|
||||
const nextDeafened = !this.isDeafened();
|
||||
|
||||
this.voice.toggleDeafen(nextDeafened);
|
||||
this.playback.updateDeafened(nextDeafened);
|
||||
|
||||
if (nextDeafened && !this.isMuted()) {
|
||||
this.voice.toggleMute(true);
|
||||
}
|
||||
|
||||
this.broadcastLocalVoiceState();
|
||||
}
|
||||
|
||||
async toggleCamera(): Promise<void> {
|
||||
const user = this.currentUser();
|
||||
|
||||
if (!this.isConnected() || !user?.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isCameraEnabled()) {
|
||||
this.voice.disableCamera();
|
||||
this.store.dispatch(UsersActions.updateCameraState({ userId: user.id, cameraState: { isEnabled: false } }));
|
||||
this.bumpRemoteStreamRevision();
|
||||
return;
|
||||
}
|
||||
|
||||
await this.voice.enableCamera();
|
||||
this.store.dispatch(UsersActions.updateCameraState({ userId: user.id, cameraState: { isEnabled: true } }));
|
||||
this.bumpRemoteStreamRevision();
|
||||
}
|
||||
|
||||
async toggleScreenShare(): Promise<void> {
|
||||
if (this.isScreenSharing()) {
|
||||
this.screenShare.stopScreenShare();
|
||||
this.bumpRemoteStreamRevision();
|
||||
return;
|
||||
}
|
||||
|
||||
this.syncScreenShareSettings();
|
||||
|
||||
if (this.askScreenShareQuality()) {
|
||||
this.showScreenShareQualityDialog.set(true);
|
||||
return;
|
||||
}
|
||||
|
||||
await this.startScreenShareWithOptions(this.screenShareQuality());
|
||||
}
|
||||
|
||||
onScreenShareQualityCancelled(): void {
|
||||
this.showScreenShareQualityDialog.set(false);
|
||||
}
|
||||
|
||||
async onScreenShareQualityConfirmed(quality: ScreenShareQuality): Promise<void> {
|
||||
this.showScreenShareQualityDialog.set(false);
|
||||
this.screenShareQuality.set(quality);
|
||||
saveVoiceSettingsToStorage({ screenShareQuality: quality });
|
||||
await this.startScreenShareWithOptions(quality);
|
||||
}
|
||||
|
||||
inviteSelectedUser(): void {
|
||||
const callId = this.callId();
|
||||
const userId = this.inviteUserId();
|
||||
const user = this.allUsers().find((candidate) => this.userKey(candidate) === userId);
|
||||
|
||||
if (!callId || !user) {
|
||||
return;
|
||||
}
|
||||
|
||||
void this.calls.inviteUser(callId, user);
|
||||
this.inviteUserId.set('');
|
||||
}
|
||||
|
||||
isSpeaking(user: User): boolean {
|
||||
return this.voiceActivity.isSpeaking(this.userKey(user))();
|
||||
}
|
||||
|
||||
isParticipantConnected(user: User): boolean {
|
||||
const session = this.session();
|
||||
const userId = this.userKey(user);
|
||||
|
||||
if (!session) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !!session.participants[userId]?.joined
|
||||
|| !!(
|
||||
user.voiceState?.isConnected
|
||||
&& user.voiceState.roomId === session.callId
|
||||
&& user.voiceState.serverId === session.callId
|
||||
);
|
||||
}
|
||||
|
||||
participantIssueLabel(user: User): string | null {
|
||||
return this.isParticipantConnected(user) ? null : 'Waiting';
|
||||
}
|
||||
|
||||
streamLabel(share: VoiceWorkspaceStreamItem): string {
|
||||
if (!share.isLocal) {
|
||||
return share.user.displayName;
|
||||
}
|
||||
|
||||
return share.kind === 'camera' ? 'Your camera' : 'Your screen';
|
||||
}
|
||||
|
||||
focusShare(shareId: string): void {
|
||||
this.showAllStreamsMode.set(false);
|
||||
this.focusedStreamId.set(shareId);
|
||||
}
|
||||
|
||||
showAllStreams(): void {
|
||||
this.showAllStreamsMode.set(true);
|
||||
this.focusedStreamId.set(null);
|
||||
}
|
||||
|
||||
startChatResize(event: MouseEvent): void {
|
||||
if (event.button !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
this.chatResizing = true;
|
||||
}
|
||||
|
||||
userKey(user: User): string {
|
||||
return user.oderId || user.id;
|
||||
}
|
||||
|
||||
readonly trackUserKey = (index: number, user: User): string => this.userKey(user);
|
||||
|
||||
private currentUserKey(): string {
|
||||
const user = this.currentUser();
|
||||
|
||||
return user ? this.userKey(user) : '';
|
||||
}
|
||||
|
||||
private broadcastLocalVoiceState(): void {
|
||||
const session = this.session();
|
||||
const user = this.currentUser();
|
||||
|
||||
if (!session || !user?.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.store.dispatch(UsersActions.updateVoiceState({
|
||||
userId: user.id,
|
||||
voiceState: {
|
||||
isConnected: this.isConnected(),
|
||||
isMuted: this.isMuted(),
|
||||
isDeafened: this.isDeafened(),
|
||||
roomId: session.callId,
|
||||
serverId: session.callId
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
private remoteParticipantPeerIds(session: DirectCallSession, currentUserId: string): string[] {
|
||||
const peerIds = new Set<string>();
|
||||
|
||||
for (const participantId of session.participantIds) {
|
||||
if (participantId === currentUserId) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const user = this.userForSessionParticipant(session, participantId);
|
||||
|
||||
for (const peerId of [participantId, ...this.getPeerKeyCandidates(user)]) {
|
||||
if (peerId && peerId !== currentUserId) {
|
||||
peerIds.add(peerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(peerIds);
|
||||
}
|
||||
|
||||
private clampChatWidth(width: number): number {
|
||||
const maxWidth = Math.min(640, Math.max(360, window.innerWidth - 560));
|
||||
|
||||
return Math.round(Math.max(320, Math.min(maxWidth, width)));
|
||||
}
|
||||
|
||||
private getPeerKeyCandidates(user: User | null | undefined): string[] {
|
||||
if (!user) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return [
|
||||
user.oderId,
|
||||
user.peerId,
|
||||
user.id
|
||||
].filter((peerId, index, peerIds): peerId is string => !!peerId && peerIds.indexOf(peerId) === index);
|
||||
}
|
||||
|
||||
private userForSessionParticipant(session: DirectCallSession, participantId: string): User | null {
|
||||
const knownUser = this.calls.userForParticipant(participantId);
|
||||
|
||||
if (knownUser) {
|
||||
return knownUser;
|
||||
}
|
||||
|
||||
const participant = session.participants[participantId]?.profile;
|
||||
|
||||
return participant ? participantToUser(participant) : null;
|
||||
}
|
||||
|
||||
private trackLocalMic(): void {
|
||||
const userId = this.currentUserKey();
|
||||
const stream = this.voice.getRawMicStream() ?? this.voice.getLocalStream();
|
||||
|
||||
if (userId && stream) {
|
||||
this.voiceActivity.trackLocalMic(userId, stream);
|
||||
}
|
||||
}
|
||||
|
||||
private untrackLocalMic(): void {
|
||||
const userId = this.currentUserKey();
|
||||
|
||||
if (userId) {
|
||||
this.voiceActivity.untrackLocalMic(userId);
|
||||
}
|
||||
}
|
||||
|
||||
private syncScreenShareSettings(): void {
|
||||
const settings = loadVoiceSettingsFromStorage();
|
||||
|
||||
this.includeSystemAudio.set(settings.includeSystemAudio);
|
||||
this.screenShareQuality.set(settings.screenShareQuality);
|
||||
this.askScreenShareQuality.set(settings.askScreenShareQuality);
|
||||
}
|
||||
|
||||
private async startScreenShareWithOptions(quality: ScreenShareQuality): Promise<void> {
|
||||
const options: ScreenShareStartOptions = {
|
||||
includeSystemAudio: this.includeSystemAudio(),
|
||||
quality
|
||||
};
|
||||
|
||||
try {
|
||||
await this.screenShare.startScreenShare(options);
|
||||
this.bumpRemoteStreamRevision();
|
||||
} catch {}
|
||||
}
|
||||
|
||||
private buildShare(
|
||||
peerKey: string,
|
||||
user: User,
|
||||
stream: MediaStream,
|
||||
isLocal: boolean,
|
||||
kind: VoiceWorkspaceStreamItem['kind']
|
||||
): VoiceWorkspaceStreamItem {
|
||||
return {
|
||||
id: `${kind}:${peerKey}`,
|
||||
peerKey,
|
||||
user,
|
||||
stream,
|
||||
isLocal,
|
||||
kind,
|
||||
hasAudio: stream.getAudioTracks().some((track) => track.readyState === 'live')
|
||||
};
|
||||
}
|
||||
|
||||
private hasActiveVideo(stream: MediaStream): boolean {
|
||||
return stream.getVideoTracks().some((track) => track.readyState === 'live');
|
||||
}
|
||||
|
||||
private bumpRemoteStreamRevision(): void {
|
||||
this.remoteStreamRevision.update((value) => value + 1);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user