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>