feat(web): still turned off video/audio when user change input source

brunocroh · May 24, 2024 · d8e8be5 · d8e8be5
1 parent 79428f1
commit d8e8be5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 23 deletions.
diff --git a/apps/web/app/room/queue/page.tsx b/apps/web/app/room/queue/page.tsx
@@ -20,6 +20,10 @@ export default function Page(): JSX.Element {
     switchInput,
     activeStream: stream,
     stopAllStreaming,
+    videoOff,
+    muted,
+    toggleMute,
+    toggleVideo,
   } = useUserMedia();
 
   const [me, setMe] = useState(null);
@@ -99,6 +103,10 @@ export default function Page(): JSX.Element {
                     activeAudioDevice={selectedAudioDevice}
                     setActiveVideoDevice={(deviceId) => onInputChange(deviceId, 'video')}
                     activeVideoDevice={selectedVideoDevice}
+                    muted={muted}
+                    onMute={toggleMute}
+                    videoOff={videoOff}
+                    onVideoOff={toggleVideo}
                   />
 
                   <div className="mt-6 flex h-12 w-full items-center justify-between gap-6">

diff --git a/apps/web/components/video-player.tsx b/apps/web/components/video-player.tsx
@@ -52,7 +52,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayer>(({
                 {muted ? <MicOff className="size-4"  /> : <Mic className="size-4"  />}
               </Button>
               <Button onClick={onVideoOff} className="size-8 rounded-full p-2 active:scale-95" variant={videoOff ? 'destructive' : 'secondary'}>
-                {videoOff ? <Video className="size-4"  /> : <VideoOff className="size-4"  />}
+                {videoOff ? <VideoOff className="size-4"  /> : <VideoOff className="size-4"  />}
               </Button>
               { onTurnOff && (
                 <Button onClick={onTurnOff} className="size-8 rounded-full p-2 active:scale-95" variant={'destructive'}>

diff --git a/apps/web/hooks/useUserMedia.ts b/apps/web/hooks/useUserMedia.ts
@@ -28,10 +28,6 @@ export const useUserMedia = () => {
       audio: audioPermission.state === 'granted'
     }
 
-    console.log({
-      permission
-
-    })
     if(permission.video && permission.audio){
       setAccessGranted(true)
     }
@@ -66,7 +62,6 @@ export const useUserMedia = () => {
         audio: { deviceId: { exact: constraints.audio } }
       });
 
-      console.log('UPDATE')
       setActiveStream(_stream);
       setReady(true);
       return _stream
@@ -75,7 +70,6 @@ export const useUserMedia = () => {
   );
 
   const getDevices = useCallback(async () => {
-    console.log("GET DEVICES")
     const devices = await navigator.mediaDevices.enumerateDevices();
     setDevices(devices || []);
   }, [setDevices]);
@@ -91,12 +85,12 @@ export const useUserMedia = () => {
 
   const toggleVideo = useCallback(async () => {
     setVideoOff(_videoOff => {
-        stream?.getVideoTracks().forEach(track => {
+        activeStream?.getVideoTracks().forEach(track => {
           track.enabled = _videoOff 
         })
         return !_videoOff
     })
-  }, [stream, setVideoOff])
+  }, [activeStream, setVideoOff])
 
   const switchInput = useCallback(async (deviceId: string, type: 'audio' | 'video') => {
     let newStream: MediaStream;
@@ -122,6 +116,9 @@ export const useUserMedia = () => {
     const newVideoTrack = newStream.getVideoTracks()[0]!;
     const newAudioTrack = newStream.getAudioTracks()[0]!;
 
+    newVideoTrack.enabled = !videoOff
+    newAudioTrack.enabled = !muted
+
     stopStreaming(activeStream!)
     setActiveStream(newStream)
 
@@ -132,7 +129,7 @@ export const useUserMedia = () => {
       newAudioTrack,
       newStream,
     };
-  }, [activeStream, preferences, stopStreaming]);
+  }, [activeStream, preferences, stopStreaming, muted, videoOff]);
 
 
   const stopAllStreaming = useCallback(async () => {
@@ -157,19 +154,6 @@ export const useUserMedia = () => {
     )
   }, [devices]);
 
-  useEffect(() => {
-    if(stream !== null && !streams.find(s => s.id === stream?.id)) {
-      streams.push(stream!)
-      console.log({streams})
-    }
-
-    if(activeStream !== null && !streams.find(s => s.id === activeStream?.id )) {
-      streams.push(activeStream!)
-      console.log({streams})
-    }
-
-  }, [stream, activeStream])
-
   useEffect(() => {
     const init = async () => {
       const permission = await checkPermission()