Skip to content

Commit 52af484

Browse files
SameerIssaSameerIssa
authored
Merge pull request #89 from UNLV-CS472-672/video_call_ui
3rd PR: Video call UI
2 parents 9a45a88 + 71f21da commit 52af484

File tree

6 files changed

+173
-4
lines changed

6 files changed

+173
-4
lines changed

‎frontend/src/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Schedule from "./Components/Schedule.jsx";
1717
import Chat from "./Components/Chat.jsx";
1818
import Footer from "./Components/Footer.jsx";
1919
import Booking from "./Components/Booking.jsx";
20+
import VideoCall from "./Components/VideoCall.jsx";
2021
import Calendar from "./Components/Calendar.jsx";
2122

2223
function App() {
@@ -45,6 +46,7 @@ function App() {
4546
<Route path="/pomodoro" element={<Pomodoro />} />
4647
<Route path="/booking" element={<Booking />} />
4748
<Route path="/chat" element={<Chat />} />
49+
<Route path="/videocall" element={<VideoCall />} />
4850
<Route path="/Calendar" element={<Calendar />} />
4951
</Routes>
5052
{(location.pathname !== "/login" && location.pathname !== "/dateofbirth" && location.pathname !== "/SignUp") && <Footer />}

‎frontend/src/Components/Chat.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import botIcon from "/assets/images/UNLV_pic.png"; // Placeholder bot icon
66
const Chat = () => {
77
const [messages, setMessages] = useState([]);
88
const [input, setInput] = useState("");
9-
const [setButtonClicked] = useState("");
109

1110
const sendMessage = () => {
1211
if (input.trim() === "") return; // Prevent sending empty messages
@@ -29,7 +28,6 @@ const Chat = () => {
2928
}
3029
};
3130
const handleButtonClick = (buttonType) => {
32-
setButtonClicked(buttonType);
3331
console.log(`Button clicked: ${buttonType}`);
3432
// You can add more functionality here if needed
3533
};

‎frontend/src/Components/Services.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export default function Services() {
5858
<li><a href="#link">Pomodoro Timer</a></li>
5959
<p>Temporary links Below</p>
6060
<li><a href="/chat">Chat UI</a></li>
61+
<li><a href="/videocall">Video Call UI</a></li>
6162
</ul>
6263
</div>
6364
</div>

‎frontend/src/Components/VideoCall.jsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import "../Styles/VideoCall.css";
2+
import { useRef } from 'react';
3+
4+
const VideoCall = () => {
5+
const localVideoRef = useRef(null);
6+
const remoteVideoRef = useRef(null);
7+
8+
9+
return (
10+
<>
11+
<div className="Videocall-page-container">
12+
13+
<div className="container-fluid video-call-container">
14+
{/* Side Panel */}
15+
<div className="side-panel">
16+
<h2>Menu</h2>
17+
<ul>
18+
<li><a href="/">Home</a></li>
19+
<li><a href="/profile">Profile</a></li>
20+
<li><a href="/settings">Settings</a></li>
21+
<li><a href="/Whiteboard">Whiteboard</a></li>
22+
</ul>
23+
</div>
24+
<div className="video-container">
25+
{/* Remote Video */}
26+
<video ref={remoteVideoRef} className="remote-video" autoPlay></video>
27+
{/* Local Video (floating) */}
28+
<video ref={localVideoRef} className="local-video" autoPlay muted></video>
29+
30+
{/* Call Controls (inside video container) */}
31+
<div className="call-controls">
32+
<button className="btn btn-outline-danger">Switch Cameras</button>
33+
<button className="btn btn-outline-danger">Mute</button>
34+
<button className="btn btn-outline-danger">Share Screen</button>
35+
<button className="btn btn-outline-danger">Settings</button>
36+
<button className="btn btn-danger">End Call</button>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</>
42+
);
43+
}
44+
export default VideoCall;

‎frontend/src/Styles/Chat.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,7 @@
6262
align-items: center;
6363
margin-right: 0;
6464
width: 100%;
65-
padding-bottom: 0px;
66-
padding-top: 20px;
65+
padding-top: 10px;
6766
}
6867
/* Chat box styling */
6968
.chat-page-layout .chat-box {

‎frontend/src/Styles/VideoCall.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/* Side Panel */
2+
.Videocall-page-container .side-panel {
3+
width: 175px;
4+
background-color: #212529;
5+
color: white;
6+
padding: 20px;
7+
position: absolute;
8+
right: 0;
9+
top: 50px;
10+
bottom: 0;
11+
overflow-y: auto;
12+
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
13+
display: flex;
14+
flex-direction: column;
15+
}
16+
@media (max-width: 1560px) {
17+
.Videocall-page-container .side-panel {
18+
display: none;
19+
}
20+
}
21+
.Videocall-page-container .side-panel h2 {
22+
font-size: 18px;
23+
margin-bottom: 15px;
24+
text-align: center;
25+
padding-top: 30px;
26+
}
27+
.Videocall-page-container .side-panel ul {
28+
list-style: none;
29+
padding: 0;
30+
}
31+
.Videocall-page-container .side-panel li {
32+
margin: 10px 0;
33+
text-align: center;
34+
}
35+
.Videocall-page-container .side-panel a {
36+
color: white;
37+
text-decoration: none;
38+
font-size: 16px;
39+
display: block;
40+
padding: 10px;
41+
border-radius: 5px;
42+
transition: background 0.3s;
43+
}
44+
.Videocall-page-container .side-panel a:hover {
45+
background-color: rgba(255, 255, 255, 0.2);
46+
}
47+
/* Main video container layout */
48+
.Videocall-page-container .video-call-container {
49+
flex: 1;
50+
height: 95vh;
51+
width: 100%;
52+
display: flex;
53+
justify-content: center;
54+
align-items: center;
55+
background: #f5f5f5;
56+
padding-top: 50px;
57+
position: relative;
58+
flex-direction: column;
59+
}
60+
.Videocall-page-container .video-container {
61+
position: relative;
62+
width: 90%;
63+
max-width: 1200px;
64+
height: 80vh;
65+
background: #000;
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
border-radius: 10px;
70+
overflow: hidden;
71+
}
72+
.Videocall-page-container .remote-video {
73+
width: 100%;
74+
height: 100%;
75+
object-fit: cover;
76+
}
77+
.Videocall-page-container .local-video {
78+
position: absolute;
79+
top: 15px;
80+
left: 15px;
81+
width: 32%;
82+
max-width: 600px;
83+
border-radius: 8px;
84+
border: 2px solid #fff;
85+
}
86+
/* Button bar styling */
87+
.Videocall-page-container .call-controls {
88+
position: absolute;
89+
bottom: 0;
90+
left: 50%;
91+
transform: translateX(-50%);
92+
display: flex;
93+
flex-wrap: wrap;
94+
justify-content: center;
95+
gap: 10px;
96+
background: rgba(0, 0, 0, 0.7);
97+
padding: 10px 20px;
98+
border-radius: 8px 8px 0 0;
99+
opacity: 0;
100+
transition: opacity 0.3s ease-in-out;
101+
width: 90%;
102+
max-width: 600px;
103+
}
104+
.Videocall-page-container .video-container:hover .call-controls {
105+
opacity: 1;
106+
}
107+
.Videocall-page-container .call-controls .btn {
108+
font-size: 14px;
109+
padding: 8px 12px;
110+
border-radius: 5px;
111+
min-width: 90px;
112+
text-align: center;
113+
}
114+
@media (max-width: 768px) {
115+
.Videocall-page-container .call-controls {
116+
width: 100%;
117+
padding: 8px 10px;
118+
}
119+
120+
.Videocall-page-container .call-controls .btn {
121+
font-size: 12px;
122+
padding: 6px 10px;
123+
min-width: 80px;
124+
}
125+
}

0 commit comments

Comments
 (0)