ale/videopeersjs
0
Fork 0
Código Incidencias Pull Requests Acciones Paquetes Proyectos Lanzamientos Wiki Actividad

converted slug into reusable components

Explorar el Código 
Signed-off-by: heyhiru <hirentimbadiya74@gmail.com>
Este commit está contenido en:
heyhiru
2023-11-14 18:09:24 +05:30
padre a733da9c1e
commit 6fac7c6321
Se han modificado 5 ficheros con 94 adiciones y 49 borrados
Descargar archivo de parche Descargar archivo de diferencias Expandir todos los archivos Contraer todos los archivos

16
client/src/components/Lobby.jsx
Ver fichero

@@ -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>

23
client/src/components/VideoPlayer.jsx Archivo normal
Ver fichero

@@ -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;

1
client/src/pages/index.js
Ver fichero

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

76
client/src/pages/room/[slug].jsx
Ver fichero

@@ -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'>
<h1 className='font-bold text-7xl md:text-5xl p-3'>RoomPage</h1>
<h4 className='font-bold text-4xl md:text-xl p-3 mb-4'>{remoteSocketId ? "Connected" : "No One In Room"}</h4>
<div className='flex flex-col items-center justify-center h-screen overflow-hidden'>
<h1 className='absolute top-0 left-0 text-5xl font-semibold
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>
(
<button className='text-xl bg-green-500 hover:bg-green-600 rounded-3xl animate-pulse'
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'>
<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>
<VideoPlayer stream={myStream} name={"My Stream"} isAudioMute={isAudioMute} />
}
{
remoteStream &&
<div className='flex flex-col items-center justify-center'>
<h1 className='font-bold text-5xl md:text-3xl p-5'>
Remote Stream
</h1>
<ReactPlayer
url={remoteStream}
playing
height={300}
width={500}
/>
</div>
<VideoPlayer stream={remoteStream} name={"Remote Stream"} isAudioMute={isAudioMute} />
}
</div>
{myStream &&
(
<div className='flex space-x-4 mt-4 h-20 items-center
justify-center w-96 rounded-md bg-gray-100'>
<div className='flex w-[100%] justify-evenly'>
<button className="bg-purple-500 hover:bg-purple-700" onClick={handleToggleAudio}>
{isAudioMute ? "Unmute" : "Mute"}
</button>
<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>
<CallHandleButtons
isAudioMute={isAudioMute}
isVideoOnHold={isVideoOnHold}
onToggleAudio={handleToggleAudio}
onToggleVideo={handleToggleVideo}
onEndCall={handleEndCall}
/>
)}
</div>
)

27
client/src/styles/globals.css
Ver fichero

@@ -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;
}