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

enhanced styling made responsible

Explorar el Código 
Signed-off-by: heyhiru <hirentimbadiya74@gmail.com>
Este commit está contenido en:
heyhiru
2023-11-15 11:48:55 +05:30
padre 6fac7c6321
commit 1907e6e65e
Se han modificado 6 ficheros con 41 adiciones y 39 borrados
Descargar archivo de parche Descargar archivo de diferencias Expandir todos los archivos Contraer todos los archivos

14
client/src/components/CallHandleButtons.jsx
Ver fichero

@@ -6,20 +6,20 @@ import VideocamOffIcon from '@mui/icons-material/VideocamOff';
import CallEndIcon from '@mui/icons-material/CallEnd';
const CallHandleButtons = ({ isAudioMute, isVideoOnHold, onToggleAudio, onToggleVideo, onEndCall }) => (
<div className='flex space-x-4 mt-4 h-[75px] items-center justify-center w-96 rounded-md'>
<div className='flex w-[100%] justify-evenly'>
<button className="callButtons text-gray-700 border-gray-700 hover:bg-gray-700
<div className='absolute bottom-0 flex w-full space-x-4 h-[80px] items-center justify-center rounded-md'>
<div className=' bg-[#2c3e508b] rounded-md flex px-4 py-2 justify-center gap-10'>
<button className="callButtons text-white border-white bg-[#2C3E50] hover:bg-white hover:text-[#2C3E50]
focust:ring-4 focus:ring-gray-300" onClick={onToggleAudio}>
{isAudioMute ? <MicOffIcon fontSize="large" /> : <KeyboardVoiceIcon fontSize="large" />}
</button>
<button className="callButtons text-blue-700 border-blue-700 hover:bg-blue-700
<button className="callButtons text-white bg-blue-700 hover:bg-white hover:text-blue-700
focus:ring-4 focus:ring-blue-300"
onClick={onToggleVideo}
>
{isVideoOnHold ? <VideocamIcon fontSize="large" /> : <VideocamOffIcon fontSize="large" />}
{isVideoOnHold ? <VideocamOffIcon fontSize="large" /> : <VideocamIcon fontSize="large" />}
</button>
<button className="callButtons text-red-700 border-red-700 hover:bg-red-700
focus:ring-4 focus:ring-red-700" onClick={onEndCall}>
<button className="callButtons text-white bg-red-600 hover:text-red-700 hover:bg-white
focus:ring-4 focus:ring-white" onClick={onEndCall}>
<CallEndIcon fontSize="large" />
</button>
</div>

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

@@ -30,7 +30,7 @@ const LobbyScreen = () => {
return (
<div className='flex flex-col items-center justify-center h-screen bg-gray-100'>
<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>
<h1 className='text-5xl font-[15px] mb-5 mt-5 text-center font-josefin tracking-tighter'>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 />

15
client/src/components/VideoPlayer.jsx
Ver fichero

@@ -1,19 +1,22 @@
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'>
<div className={`flex flex-col overflow-hidden w-full ${name === "My Stream" ? "flex-1" : "items-center justify-center"}`}>
<div className={`${name === "My Stream" ? "flex flex-col items-center justify-center absolute top-2 right-3 z-10" : "px-2"}`}>
<h1 className={`text-sm font-poppins font-semibold md:text-xl mb-1 text-center ${name === "My Stream" ? "mt-1" : "mt-4"}`}>
{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]"}`}>
${name === "My Stream" ? " mxs:w-[80px] mxs:h-[120px] msm:w-[100px] msm:rounded-md msm:h-[140px] mmd:w-[140px] md:w-[200px] lg:w-[280px]"
: "mxs:h-[450px] mss:h-[500px] mmd:h-[600px] md:w-[800px] md:h-[500px]"}`}
>
<ReactPlayer
url={stream}
playing
muted={isAudioMute}
height="auto"
width="auto"
height="100%"
width="100%"
style={{ transform: 'scaleX(-1)'}}
/>
</div>
</div>

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

@@ -1,6 +1,5 @@
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';
@@ -198,16 +197,16 @@ const RoomPage = () => {
}, [myStream, remoteSocketId, socket]);
return (
<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
<div className='flex flex-col items-center justify-center w-screen h-screen overflow-hidden'>
<h1 className='absolute top-0 left-0 text-5xl
text-center font-josefin tracking-tighter 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>
<h4 className='font-bold text-xl md:text-2xl
mmd:text-sm mt-5 mb-4 msm:max-w-[100px] text-center'>
{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
@@ -215,15 +214,14 @@ const RoomPage = () => {
}
{(remoteSocketId && callButton) &&
(
<button className='text-xl bg-green-500 hover:bg-green-600 rounded-3xl animate-pulse'
<button className='text-xl bg-green-500 hover:bg-green-600 rounded-3xl'
onClick={handleCallUser}
style={{ display: !remoteStream ? 'block' : 'none' }}>
Call <CallIcon fontSize='medium' />
Call <CallIcon fontSize='medium' className=' animate-pulse scale-125' />
</button>
)
}
<div className="flex flex-col w-full items-center justify-center mt-4">
<div className="flex flex-col w-full items-center justify-center overflow-hidden">
{
myStream &&
<VideoPlayer stream={myStream} name={"My Stream"} isAudioMute={isAudioMute} />
@@ -233,7 +231,7 @@ const RoomPage = () => {
<VideoPlayer stream={remoteStream} name={"Remote Stream"} isAudioMute={isAudioMute} />
}
</div>
{myStream &&
{myStream && remoteStream &&
(
<CallHandleButtons
isAudioMute={isAudioMute}
@@ -242,8 +240,10 @@ const RoomPage = () => {
onToggleVideo={handleToggleVideo}
onEndCall={handleEndCall}
/>
)}
)
}
</div>
)
}

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

@@ -4,12 +4,18 @@
@tailwind components;
@tailwind utilities;
body{
overflow: hidden;
}
label{
color: #333;
margin-bottom: 0.5rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500;
font-family: 'Poppins', sans-serif;
}
input{
@@ -34,6 +40,7 @@ button{
padding: 0.5rem 1rem 0.5rem 1rem;
border-radius: 0.25rem;
transition: background-color 250ms ease-in-out;
font-family: "Poppins", sans-serif;
&:focus{
outline: 2px solid transparent;
@@ -42,7 +49,6 @@ button{
}
.callButtons{
border-width: 1px;
font-weight: 500;
border-radius: 9999px;
font-size: 0.875rem;
@@ -51,17 +57,10 @@ button{
text-align: center;
display: inline-flex;
align-items: center;
&:hover{
color: white;
}
&:focus{
outline: 2px solid transparent;
outline-offset: 2px;
}
}
video{
width: 100%;
height: 100%;
object-fit: cover;
}

2
client/tailwind.config.js
Ver fichero

@@ -23,7 +23,7 @@ module.exports = {
}
},
animation: {
'pulse': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'pulse': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
screens: {
mxxl: { 'max': '1535px' },