From 1907e6e65ea55b09ddccda15627590ed711fee32 Mon Sep 17 00:00:00 2001
From: heyhiru <hirentimbadiya74@gmail.com>
Date: Wed, 15 Nov 2023 11:48:55 +0530
Subject: [PATCH] enhanced styling made responsible

Signed-off-by: heyhiru <hirentimbadiya74@gmail.com>
---
 client/src/components/CallHandleButtons.jsx | 14 +++++------
 client/src/components/Lobby.jsx             |  2 +-
 client/src/components/VideoPlayer.jsx       | 15 ++++++-----
 client/src/pages/room/[slug].jsx            | 28 ++++++++++-----------
 client/src/styles/globals.css               | 19 +++++++-------
 client/tailwind.config.js                   |  2 +-
 6 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/client/src/components/CallHandleButtons.jsx b/client/src/components/CallHandleButtons.jsx
index 00073d1..844c86f 100644
--- a/client/src/components/CallHandleButtons.jsx
+++ b/client/src/components/CallHandleButtons.jsx
@@ -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>
diff --git a/client/src/components/Lobby.jsx b/client/src/components/Lobby.jsx
index 8e85097..6c43458 100644
--- a/client/src/components/Lobby.jsx
+++ b/client/src/components/Lobby.jsx
@@ -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 />
diff --git a/client/src/components/VideoPlayer.jsx b/client/src/components/VideoPlayer.jsx
index 7433e6f..6cceb68 100644
--- a/client/src/components/VideoPlayer.jsx
+++ b/client/src/components/VideoPlayer.jsx
@@ -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>
diff --git a/client/src/pages/room/[slug].jsx b/client/src/pages/room/[slug].jsx
index 8a015c9..9f5e9d4 100644
--- a/client/src/pages/room/[slug].jsx
+++ b/client/src/pages/room/[slug].jsx
@@ -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>
+
     )
 }
 
diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css
index 7e18f0c..0a9746d 100644
--- a/client/src/styles/globals.css
+++ b/client/src/styles/globals.css
@@ -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;
 }
\ No newline at end of file
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 38cfeb6..eaf5dd2 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -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' },