remote video in progress 🚧

sinanptm · Sep 30, 2024 · ca0605f · ca0605f · vercel · Sep 30, 2024
1 parent 72a8d1c
commit ca0605f
Show file tree

Hide file tree

Showing 7 changed files with 288 additions and 218 deletions.
diff --git a/client/app/(patient)/video-section/[sectionId]/page.tsx b/client/app/(patient)/video-section/[sectionId]/page.tsx
@@ -1,49 +1,27 @@
 'use client'
 
-import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import JoinPage from './Join-page';
 import VideoChat from '@/components/page-components/video/VideoChat';
-import createPeerConnection from '@/lib/webrtc/createPeerConnection';
 import { useGetSectionByIdPatient } from '@/lib/hooks/video/usePatient';
+import { useVideoCall } from '@/lib/hooks/useVideoCall';
 
 export default function PatientVideoCallPage() {
   const { sectionId } = useParams();
-  const [hasJoined, setHasJoined] = useState(false);
-  const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
   const { data, isLoading } = useGetSectionByIdPatient(sectionId as string);
   const section = data?.section;
 
-  useEffect(() => {
-    if (hasJoined && section && localStream) {
-      createPeerConnection(section.roomId ?? "id", 'patient', localStream).then(connection => {
-        if (connection) {
-          setRemoteStream(connection.remoteStream); 
-          return () => connection.peerConnection.close();
-        }
-      });
-    }
-  }, [hasJoined, section, localStream]);
-
-  const handleJoin = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
-      setLocalStream(stream);
-      setHasJoined(true);
-    } catch (error) {
-      console.error('Error accessing media devices:', error);
-    }
-  };
-
-  const handleEndCall = () => {
-    if (localStream) {
-      localStream.getTracks().forEach(track => track.stop());
-    }
-    setLocalStream(null);
-    setRemoteStream(null);
-    setHasJoined(false);
-  };
+  const {
+    hasJoined,
+    localStream,
+    remoteStream,
+    handleJoin,
+    handleEndCall,
+    isMuted,
+    isVideoOff,
+    toggleMute,
+    toggleVideo
+  } = useVideoCall(section, 'patient');
 
   if (isLoading) return <div className="flex items-center justify-center h-screen">Loading...</div>;
 
@@ -53,6 +31,10 @@ export default function PatientVideoCallPage() {
 
   return (
     <VideoChat
+      isMuted={isMuted}
+      isVideoOff={isVideoOff}
+      toggleMute={toggleMute}
+      toggleVideo={toggleVideo}
       localStream={localStream}
       remoteStream={remoteStream}
       handleEndCall={handleEndCall}

diff --git a/client/app/doctor/video-call/[sectionId]/page.tsx b/client/app/doctor/video-call/[sectionId]/page.tsx
@@ -1,49 +1,27 @@
 'use client'
 
-import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import JoinPage from './Join-page';
 import VideoChat from '@/components/page-components/video/VideoChat';
-import createPeerConnection from '@/lib/webrtc/createPeerConnection';
 import { useGetSectionByIdDoctor } from '@/lib/hooks/video/useDoctor';
+import { useVideoCall } from '@/lib/hooks/useVideoCall';
 
 export default function DoctorVideoCallPage() {
   const { sectionId } = useParams();
-  const [hasJoined, setHasJoined] = useState(false);
-  const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
   const { data, isLoading } = useGetSectionByIdDoctor(sectionId as string);
   const section = data?.section;
 
-  useEffect(() => {
-    if (hasJoined && section && localStream) {
-      createPeerConnection(section.roomId ?? "id", 'doctor', localStream).then(connection => {
-        if (connection) {
-          setRemoteStream(connection.remoteStream); 
-          return () => connection.peerConnection.close();
-        }
-      });
-    }
-  }, [hasJoined, section, localStream]);
-
-  const handleJoin = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
-      setLocalStream(stream);
-      setHasJoined(true);
-    } catch (error) {
-      console.error('Error accessing media devices:', error);
-    }
-  };
-
-  const handleEndCall = () => {
-    if (localStream) {
-      localStream.getTracks().forEach(track => track.stop());
-    }
-    setLocalStream(null);
-    setRemoteStream(null);
-    setHasJoined(false);
-  };
+  const {
+    hasJoined,
+    localStream,
+    remoteStream,
+    handleJoin,
+    handleEndCall,
+    isMuted,
+    isVideoOff,
+    toggleMute,
+    toggleVideo
+  } = useVideoCall(section, 'doctor');
 
   if (isLoading) return <div className="flex items-center justify-center h-screen">Loading...</div>;
 
@@ -53,6 +31,10 @@ export default function DoctorVideoCallPage() {
 
   return (
     <VideoChat
+      isMuted={isMuted}
+      isVideoOff={isVideoOff}
+      toggleMute={toggleMute}
+      toggleVideo={toggleVideo}
       localStream={localStream}
       remoteStream={remoteStream}
       handleEndCall={handleEndCall}

diff --git a/client/components/button/VideoSectionButtonPatient.tsx b/client/components/button/VideoSectionButtonPatient.tsx
@@ -13,8 +13,7 @@ const VideoSectionButtonPatient = () => {
     const handleClick = () => {
         setIsModalOpen(true);
     }
-
-    console.log(upcomingSections);
+
     if (isLoading) return null
 
 
@@ -38,13 +37,15 @@ const VideoSectionButtonPatient = () => {
                 )}
                 <span className="sr-only">View Upcoming Video Calls</span>
             </ButtonV2>
-            <VideoSectionsModel
-                open={isModalOpen}
-                setOpen={setIsModalOpen}
-                sections={upcomingSections!}
-                link="/video-section"
-                user='patient'
-            />
+            {upcomingSections && (
+                <VideoSectionsModel
+                    open={isModalOpen}
+                    setOpen={setIsModalOpen}
+                    sections={upcomingSections!}
+                    link="/video-section"
+                    user='patient'
+                />
+            )}
         </>
     )
 }