From b9abd7046e52949dad68e35ff8e059917bd68df9 Mon Sep 17 00:00:00 2001
From: Bruno Rodrigues <brunocroh@gmail.com>
Date: Tue, 21 May 2024 21:29:19 +0100
Subject: [PATCH] fix(web): queue screen switch audio/camera devices

---
 apps/web/app/room/queue/page.tsx |  7 +++++++
 apps/web/hooks/useUserMedia.ts   | 26 ++++++++------------------
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/apps/web/app/room/queue/page.tsx b/apps/web/app/room/queue/page.tsx
index 0468318..54342b3 100644
--- a/apps/web/app/room/queue/page.tsx
+++ b/apps/web/app/room/queue/page.tsx
@@ -20,6 +20,7 @@ export default function Page(): JSX.Element {
     selectedVideoDevice,
     switchMic,
     activeStream: stream,
+    stopAllStreaming,
   } = useUserMedia();
 
   const [me, setMe] = useState(null);
@@ -66,6 +67,12 @@ export default function Page(): JSX.Element {
     }
   }, [stream]);
 
+  useEffect(() => {
+    return () => {
+      stopAllStreaming()
+    }
+  }, [])
+
   return (
     <main className="flex h-full flex-col">
       <section className="align-center flex h-full place-content-center content-center justify-center">
diff --git a/apps/web/hooks/useUserMedia.ts b/apps/web/hooks/useUserMedia.ts
index 828e20a..208455f 100644
--- a/apps/web/hooks/useUserMedia.ts
+++ b/apps/web/hooks/useUserMedia.ts
@@ -80,24 +80,19 @@ export const useUserMedia = () => {
 
   const switchMic = useCallback(
     async (deviceId: string) => {
-      const oldTrack = stream?.getAudioTracks()[0]!;
+      const oldTrack = activeStream?.getAudioTracks()[0]!;
 
-      const tempStream = await navigator.mediaDevices.getUserMedia({
+      const newStream = await navigator.mediaDevices.getUserMedia({
         audio: { deviceId: { exact: deviceId } },
         video: { deviceId: { exact: preferences.video } },
       });
 
-      const newTrack = tempStream.getAudioTracks()[0]!;
-
-      const newStream = new MediaStream([
-        newTrack,
-        ...(stream?.getVideoTracks() || []),
-      ]);
+      const newTrack = newStream.getAudioTracks()[0]!;
 
 
       stopStreaming(activeStream!)
       preferences.set(deviceId, 'audio')
-      // setActiveStream(newStream)
+      setActiveStream(newStream)
 
       return {
         oldTrack,
@@ -105,28 +100,23 @@ export const useUserMedia = () => {
         newStream,
       };
     },
-    [preferences, stream, stopStreaming, activeStream],
+    [preferences, stopStreaming, activeStream],
   );
 
   const switchVideo = useCallback(async (deviceId: string) => {
     console.log("SWITCH")
     const oldTrack = activeStream?.getVideoTracks()[0]!;
 
-    const tempStream = await navigator.mediaDevices.getUserMedia({
+    const newStream = await navigator.mediaDevices.getUserMedia({
       audio: false,
       video: { deviceId: { exact: deviceId } },
     });
 
-    const newTrack = tempStream.getVideoTracks()[0]!;
-
-    const newStream = new MediaStream([
-      newTrack,
-      ...(stream?.getAudioTracks() || []),
-    ]);
+    const newTrack = newStream.getVideoTracks()[0]!;
 
     stopStreaming(activeStream!)
     preferences.set(deviceId, 'video')
-    // setActiveStream(newStream)
+    setActiveStream(newStream)
 
     return {
       oldTrack,