created functionality for user's stream

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

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

@@ -1,11 +1,15 @@
 import { useSocket } from '@/context/SocketProvider';
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import ReactPlayer from 'react-player';
 
 const RoomPage = () => {
     const socket = useSocket();
+    const [remoteSocketId, setRemoteSocketId] = useState(null);
+    const [myStream, setMyStream] = useState(null)
 
     const handleUserJoined = useCallback(({ email, id }) => {
         console.log(`Email ${email} joined the room!`);
+        setRemoteSocketId(id);
     }, [])
 
     useEffect(() => {
@@ -16,8 +20,38 @@ const RoomPage = () => {
         };
     }, [socket, handleUserJoined]);
 
+    const handleCallUser = useCallback(async () => {
+        const stream = await navigator.mediaDevices.getUserMedia({
+            audio: true,
+            video: true
+        });
+
+        setMyStream(stream);
+    }, [])
+
     return (
-        <h1>RoomPage</h1>
+        <div className='flex flex-col items-center justify-center'>
+            <h1 className='font-bold text-7xl md:text-5xl p-5'>RoomPage</h1>
+            <h4 className='font-bold text-4xl md:text-xl p-5'>{remoteSocketId ? "Connected" : "No One In Room"}</h4>
+            {remoteSocketId &&
+                <button className='callButton' onClick={handleCallUser}>
+                    CALL
+                </button>
+            }
+            {
+                myStream &&
+                <>
+                    <h1 className='font-bold text-7xl md:text-5xl p-5'>My Stream</h1>
+                    <ReactPlayer
+                        url={myStream}
+                        playing
+                        muted
+                        height={300}
+                        width={500}
+                    />
+                </>
+            }
+        </div>
     )
 }
 

client/src/styles/globals.css

@@ -14,17 +14,29 @@ input{
     margin-bottom: 0.3rem;
 }
 
-.joinButton{
-    color: #fff;
-    background-color: #7c3aed;
+button{
     font-weight: 500;
     border-radius: 1rem;
     font-size: 0.875rem;
     padding:  0.5rem 1rem;
     text-align: center;
     margin-bottom: 2.5rem;
+}
 
+.joinButton{
+    color: #fff;
+    background-color: #7c3aed;
     &:hover{
         background-color: #6a28b7;
     }
+}
+
+
+.callButton{
+    color: #fff;
+    background-color: limegreen;
+    transition: background-color 250ms ease-in-out;
+    &:hover{
+        background-color: forestgreen;
+    }
 }