converted slug into reusable components

Signed-off-by: heyhiru <hirentimbadiya74@gmail.com>

client/src/components/Lobby.jsx

@@ -1,6 +1,7 @@
 import { useSocket } from '@/context/SocketProvider';
 import { useRouter } from 'next/router';
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react';
+import VideoCallIcon from '@mui/icons-material/VideoCall';
 
 const LobbyScreen = () => {
     const [email, setEmail] = useState("");
@@ -29,7 +30,12 @@ const LobbyScreen = () => {
 
     return (
         <div className='flex flex-col items-center justify-center h-screen bg-gray-100'>
-            <h1 className='text-3xl font-semibold mb-5 mt-5 '>Lobby</h1>
+            <h1 className='text-5xl font-[15px] mb-5 mt-5 text-center font-josefin italic'>Video<VideoCallIcon sx={{ fontSize: 70, color: 'rgb(30,220,30)' }} />Peers</h1>
+            <p className='text-2xl mt-2 mb-4 text-center md:max-w-[400px] max-w-[300px] text-gray-600'>
+                Peer-to-Peer video calls, powered by <b>WebRTC!</b>
+                <br />
+                Bring People Closer Together.
+            </p>
             <div className='bg-white p-6 rounded shadow-md'>
                 <form className='flex flex-col items-center justify-center'
                     onSubmit={handleSubmitForm}
@@ -38,6 +44,7 @@ const LobbyScreen = () => {
                     <input
                         type="email"
                         id='email'
+                        required
                         value={email}
                         autoComplete='off'
                         onChange={(e) => setEmail(e.target.value)}
@@ -45,14 +52,15 @@ const LobbyScreen = () => {
                     <br />
                     <label htmlFor="room">Room Number</label>
                     <input
-                        type="text"
+                        type="number"
                         id='room'
+                        required
                         autoComplete='off'
                         value={room}
                         onChange={(e) => setRoom(e.target.value)}
                     />
                     <br />
-                    <button  className='bg-blue-500 hover:bg-blue-600'>
+                    <button className='bg-blue-500 hover:bg-blue-600'>
                         Join
                     </button>
                 </form>

client/src/components/VideoPlayer.jsx

@@ -0,0 +1,23 @@
+import ReactPlayer from 'react-player';
+
+const VideoPlayer = ({ stream, isAudioMute, name }) => (
+    <div className={`flex flex-col w-full ${name === "My Stream" ? "flex-1" : "items-center justify-center"}`}>
+        <div className={`${name === "My Stream" ? "absolute top-2 right-3 z-10" : "px-2"}`}>
+            <h1 className='text-xl font-poppins font-semibold md:text-2xl mb-1 text-center'>
+                {name === 'My Stream' ? 'My Stream' : 'Remote Stream'}
+            </h1>
+            <div className={`relative rounded-[30px] overflow-hidden
+            ${name === "My Stream" ? "mmd:w-[140px] md:w-[200px] lg:w-[280px]" : "md:w-[600px]"}`}>
+                <ReactPlayer
+                    url={stream}
+                    playing
+                    muted={isAudioMute}
+                    height="auto"
+                    width="auto"
+                />
+            </div>
+        </div>
+    </div>
+);
+
+export default VideoPlayer;

client/src/pages/index.js

@@ -1,5 +1,4 @@
 import LobbyScreen from '@/components/Lobby';
-import SocketProvider from '@/context/SocketProvider';
 
 export default function Home() {
   return (

client/src/pages/room/[slug].jsx

@@ -2,6 +2,10 @@ import { useSocket } from '@/context/SocketProvider';
 import React, { useCallback, useEffect, useState } from 'react'
 import ReactPlayer from 'react-player';
 import peer from '@/service/peer';
+import CallIcon from '@mui/icons-material/Call';
+import VideoCallIcon from '@mui/icons-material/VideoCall';
+import VideoPlayer from '@/components/VideoPlayer';
+import CallHandleButtons from '@/components/CallHandleButtons';
 
 const RoomPage = () => {
     const socket = useSocket();
@@ -194,66 +198,50 @@ const RoomPage = () => {
     }, [myStream, remoteSocketId, socket]);
 
     return (
-        <div className='flex flex-col items-center justify-center h-screen'>
+        <div className='flex flex-col items-center justify-center h-screen overflow-hidden'>
-            <h1 className='font-bold text-7xl md:text-5xl p-3'>RoomPage</h1>
+            <h1 className='absolute top-0 left-0 text-5xl font-semibold
-            <h4 className='font-bold text-4xl md:text-xl p-3 mb-4'>{remoteSocketId ? "Connected" : "No One In Room"}</h4>
+            text-center font-josefin italic mt-5 ml-5 mmd:text-xl mxs:text-sm'>Video
+                <VideoCallIcon sx={{ fontSize: 50, color: 'rgb(30,220,30)' }} />
+                Peers
+            </h1>
+            <h4 className='font-bold text-xl md:text-2xl mb-4 
+                mmd:text-sm mt-5'>
+                    {remoteSocketId ? "Connected With Remote User!" : "No One In Room"}
+                </h4>
             {(remoteStream && remoteSocketId && isSendButtonVisible) &&
                 <button className='bg-green-500 hover:bg-green-600' onClick={sendStreams}>
                     Send Stream
                 </button>
             }
             {(remoteSocketId && callButton) &&
-                <button className='bg-green-500 hover:bg-green-600' onClick={handleCallUser}>
+                (
-                    CALL
+                    <button className='text-xl bg-green-500 hover:bg-green-600 rounded-3xl animate-pulse'
-                </button>
+                        onClick={handleCallUser}
+                        style={{ display: !remoteStream ? 'block' : 'none' }}>
+                        Call <CallIcon fontSize='medium' />
+                    </button>
+                )
             }
-            <div className="flex flex-row items-center justify-center space-x-4 mt-4">
+            <div className="flex flex-col w-full items-center justify-center mt-4">
+
                 {
                     myStream &&
-                    <div className='flex flex-col items-center justify-center'>
+                    <VideoPlayer stream={myStream} name={"My Stream"} isAudioMute={isAudioMute} />
-                        <h1 className='font-bold text-5xl md:text-3xl p-5'>
-                            My Stream
-                        </h1>
-                        <ReactPlayer
-                            url={myStream}
-                            playing
-                            muted={isAudioMute}
-                            height={300}
-                            width={500}
-                        />
-                    </div>
                 }
                 {
                     remoteStream &&
-                    <div className='flex flex-col items-center justify-center'>
+                    <VideoPlayer stream={remoteStream} name={"Remote Stream"} isAudioMute={isAudioMute} />
-                        <h1 className='font-bold text-5xl md:text-3xl p-5'>
-                            Remote Stream
-                        </h1>
-                        <ReactPlayer
-                            url={remoteStream}
-                            playing
-                            height={300}
-                            width={500}
-                        />
-                    </div>
                 }
             </div>
             {myStream &&
                 (
-                    <div className='flex space-x-4 mt-4 h-20 items-center 
+                    <CallHandleButtons
-                justify-center w-96 rounded-md bg-gray-100'>
+                        isAudioMute={isAudioMute}
-                        <div className='flex w-[100%] justify-evenly'>
+                        isVideoOnHold={isVideoOnHold}
-                            <button className="bg-purple-500 hover:bg-purple-700" onClick={handleToggleAudio}>
+                        onToggleAudio={handleToggleAudio}
-                                {isAudioMute ? "Unmute" : "Mute"}
+                        onToggleVideo={handleToggleVideo}
-                            </button>
+                        onEndCall={handleEndCall}
-                            <button className="bg-purple-500 hover:bg-purple-700" onClick={handleToggleVideo}>
+                    />
-                                {isVideoOnHold ? "Resume Video" : "Hold Video"}
-                            </button>
-                            <button className="bg-purple-500 hover:bg-purple-700" onClick={handleEndCall}>
-                                End Call
-                            </button>
-                        </div>
-                    </div>
                 )}
         </div>
     )

client/src/styles/globals.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -37,4 +39,29 @@ button{
         outline: 2px solid transparent;
         outline-offset: 2px;
     }
+}
+
+.callButtons{
+    border-width: 1px;
+    font-weight: 500;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    padding: 0.625rem;
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+
+    &:hover{
+        color: white;
+    }
+
+    &:focus{
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+    }
+}
+
+video{
+    object-fit: cover;
 }