video chat componetnnts and pages updated

client/app/doctor/video-call/[sectionId]/Join-page.tsx

@@ -0,0 +1,41 @@
+import { Button } from "@/components/ui/button"
+import { IVideoSection } from "@/types/entities";
+import { Video } from "lucide-react"
+
+interface JoinPageProps {
+  onJoin: () => void;
+  section:IVideoSection
+}
+
+export default function JoinPage({ onJoin , section}: JoinPageProps) {
+   // useEffect(() => {
+    //     if (section) {
+    //         const checkMeetingTime = () => {
+    //             const now = new Date()
+    //             const meetingTime = new Date(section.startTime!)
+    //             const timeDiff = meetingTime.getTime() - now.getTime()
+    //             const minutesDiff = Math.floor(timeDiff / (1000 * 60))
+    //             setCanStartMeeting(minutesDiff <= 10 && minutesDiff >= 0)
+    //         }
+
+    //         checkMeetingTime()
+    //         const timer = setInterval(checkMeetingTime, 60000)
+
+    //         return () => clearInterval(timer)
+    //     }
+    // }, [section])
+
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white">
+      <div className="text-center mb-8">
+        <h1 className="text-4xl font-bold mb-4">Welcome to Your Video Call</h1>
+        <p className="text-xl text-gray-400">Click the button below to join the room</p>
+      </div>
+      <Button onClick={onJoin} size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
+        <Video className="mr-2 h-5 w-5" />
+        Join Video Call
+      </Button>
+    </div>
+  )
+}

client/app/doctor/video-call/[sectionId]/page.tsx

@@ -1,56 +1,62 @@
 'use client'
-import VideoChat from '@/components/page-components/video/VideoChat';
-import { useGetSectionByIdDoctor } from '@/lib/hooks/video/useDoctor';
-import { useParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
-
-const VideoCallPage = () => {
-    const { sectionId } = useParams();
-    const [isCalling, setIsCalling] = 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(() => {
-        const timer = setTimeout(() => {
-            setRemoteStream(new MediaStream());
-        }, 2000);
-
-        return () => clearTimeout(timer);
-    }, [sectionId]);
-
-    const handleStartCall = async () => {
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
-            setLocalStream(stream);
-            setIsCalling(true);
-        } catch (error) {
-            console.error('Error accessing media devices:', error);
-        }
-    };
-
-    const handleEndCall = () => {
-        if (localStream) {
-            localStream.getTracks().forEach(track => track.stop());
-        }
-        setLocalStream(null);
-        setRemoteStream(null);
-        setIsCalling(false);
-    };
-
-    if (isLoading) return <div>Loading...</div>; 
-
-    return (
-        <VideoChat
-          localStream={localStream}
-          remoteStream={remoteStream}
-          handleEndCall={handleEndCall}
-          isCalling={isCalling}
-          isDoctor={true} 
-          selfAvatar={section?.doctorProfile!}
-          remoteAvatar={section?.patientProfile!}
-        />
-    );
-}
-
-export default VideoCallPage;
+
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
+import { useGetSectionByIdDoctor } from '@/lib/hooks/video/useDoctor'
+import JoinPage from './Join-page'
+import VideoChat from '@/components/page-components/video/VideoChat'
+
+export default function VideoCallPage() {
+  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) {
+      const timer = setTimeout(() => {
+        setRemoteStream(new MediaStream())
+      }, 2000)
+
+      return () => clearTimeout(timer)
+    }
+  }, [hasJoined, sectionId])
+
+  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)
+  }
+
+  if (isLoading) return <div className="flex items-center justify-center h-screen">Loading...</div>
+
+  if (!hasJoined) {
+    return <JoinPage onJoin={handleJoin} section={section!} />
+  }
+
+  return (
+    <VideoChat
+      localStream={localStream}
+      remoteStream={remoteStream}
+      handleEndCall={handleEndCall}
+      isDoctor={true}
+      selfAvatar={section?.doctorProfile!}
+      remoteAvatar={section?.patientProfile!}
+    />
+  )
+}

client/components/button/VideoSectionButtonDoctor.tsx

@@ -40,7 +40,7 @@ const VideoSectionButtonDoctor = forwardRef<HTMLButtonElement>((props, ref) => {
                 open={isModalOpen}
                 setOpen={setIsModalOpen}
                 sections={upcomingSections!}
-                link="/doctor/video-section"
+                link="/doctor/video-call"
                 user="doctor"
             />
         </>

client/components/layout/DoctorLayoutWithSideBar.tsx

@@ -41,6 +41,8 @@ const AdminLayoutWithSideBar = ({
   const { setCredentials } = useAuth();
   const router = useRouter();
 
+  const isVideoCall = pathname.includes("/video-call/")
+
   const handleLogout = () => {
     logout(
       {},
@@ -171,7 +173,7 @@ const AdminLayoutWithSideBar = ({
           </div>
         </aside>
       </TooltipProvider>
-      <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+      <div className={`flex flex-col sm:gap-4 sm:py-4 sm:pl-14 ${isVideoCall&&"gap-0 m-0 p-0 "} `}>
         <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
           <Sheet open={open} onOpenChange={setOpen}>
             <SheetTrigger asChild>