Screensharing rework

Split Linux screensharing audio tracks, Rework screensharing functionality and layout
This will need some refactoring soon

src/app/features/room/rooms-side-panel/rooms-side-panel.component.ts

@@ -36,6 +36,7 @@ import { RoomsActions } from '../../../store/rooms/rooms.actions';
 import { MessagesActions } from '../../../store/messages/messages.actions';
 import { WebRTCService } from '../../../core/services/webrtc.service';
 import { VoiceSessionService } from '../../../core/services/voice-session.service';
+import { VoiceWorkspaceService } from '../../../core/services/voice-workspace.service';
 import { VoiceActivityService } from '../../../core/services/voice-activity.service';
 import { VoicePlaybackService } from '../../voice/voice-controls/services/voice-playback.service';
 import { VoiceControlsComponent } from '../../voice/voice-controls/voice-controls.component';
@@ -88,11 +89,13 @@ export class RoomsSidePanelComponent {
   private store = inject(Store);
   private webrtc = inject(WebRTCService);
   private voiceSessionService = inject(VoiceSessionService);
+  private voiceWorkspace = inject(VoiceWorkspaceService);
   private voicePlayback = inject(VoicePlaybackService);
   voiceActivity = inject(VoiceActivityService);
 
   activeTab = signal<TabView>('channels');
   showFloatingControls = this.voiceSessionService.showFloatingControls;
+  isVoiceWorkspaceExpanded = this.voiceWorkspace.isExpanded;
   onlineUsers = this.store.selectSignal(selectOnlineUsers);
   currentUser = this.store.selectSignal(selectCurrentUser);
   currentRoom = this.store.selectSignal(selectCurrentRoom);
@@ -185,6 +188,7 @@ export class RoomsSidePanelComponent {
     if (this.renamingChannelId())
       return;
 
+    this.voiceWorkspace.showChat();
     this.store.dispatch(RoomsActions.selectChannel({ channelId }));
   }
 
@@ -346,6 +350,17 @@ export class RoomsSidePanelComponent {
 
   joinVoice(roomId: string) {
     const room = this.currentRoom();
+    const current = this.currentUser();
+
+    if (
+      room
+      && current?.voiceState?.isConnected
+      && current.voiceState.roomId === roomId
+      && current.voiceState.serverId === room.id
+    ) {
+      this.voiceWorkspace.open(null, { connectRemoteShares: true });
+      return;
+    }
 
     if (room && room.permissions && room.permissions.allowVoice === false) {
       return;
@@ -354,8 +369,6 @@ export class RoomsSidePanelComponent {
     if (!room)
       return;
 
-    const current = this.currentUser();
-
     if (current?.voiceState?.isConnected && current.voiceState.serverId !== room?.id) {
       if (!this.webrtc.isVoiceConnected()) {
         if (current.id) {
@@ -510,15 +523,11 @@ export class RoomsSidePanelComponent {
   }
 
   viewShare(userId: string) {
-    const evt = new CustomEvent('viewer:focus', { detail: { userId } });
-
-    window.dispatchEvent(evt);
+    this.voiceWorkspace.focusStream(userId, { connectRemoteShares: true });
   }
 
   viewStream(userId: string) {
-    const evt = new CustomEvent('viewer:focus', { detail: { userId } });
-
-    window.dispatchEvent(evt);
+    this.voiceWorkspace.focusStream(userId, { connectRemoteShares: true });
   }
 
   isUserLocallyMuted(user: User): boolean {
@@ -540,7 +549,13 @@ export class RoomsSidePanelComponent {
       return false;
     }
 
-    const stream = this.webrtc.getRemoteStream(userId);
+    const peerKeys = [user?.oderId, user?.id, userId].filter(
+      (candidate): candidate is string => !!candidate
+    );
+
+    const stream = peerKeys
+      .map((peerKey) => this.webrtc.getRemoteScreenShareStream(peerKey))
+      .find((candidate) => !!candidate && candidate.getVideoTracks().length > 0) || null;
 
     return !!stream && stream.getVideoTracks().length > 0;
   }