[call-me] - add toggleFullScreen

package.json

@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.0.15",
+    "version": "1.0.16",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",

public/client.js

@@ -158,6 +158,8 @@ signInBtn.addEventListener('click', handleSignInClick);
 callBtn.addEventListener('click', handleCallClick);
 hideBtn.addEventListener('click', toggleLocalVideo);
 hangUpBtn.addEventListener('click', handleHangUpClick);
+localVideoContainer.addEventListener('click', toggleFullScreen);
+remoteVideo.addEventListener('click', toggleFullScreen);
 
 // Handle sign-in button click
 function handleSignInClick() {
@@ -204,6 +206,12 @@ function handleHangUpClick() {
     handleLeave();
 }
 
+// Toggle video full screen mode
+function toggleFullScreen(e) {
+    if (!e.target.srcObject) return;
+    document.fullscreenElement ? document.exitFullscreen() : e.target.requestFullscreen?.();
+}
+
 // Handle ping message from the server
 function handlePing(data) {
     const { iceServers } = data;

public/style.css

@@ -80,10 +80,18 @@ video {
     border: none;
     border-radius: var(--border-radius);
     object-fit: contain;
+    cursor: pointer;
+}
+video:hover {
+    filter: contrast(105%);
+}
+video::-webkit-media-controls {
+    display: none !important;
 }
 
 /* Local Video Styles */
 #localVideoContainer {
+    z-index: 1;
     position: absolute;
     top: 10px;
     left: 20px;
@@ -105,6 +113,7 @@ video {
 
 /* Remote Video Styles */
 #remoteVideo {
+    z-index: 2;
     width: 100%;
     height: auto;
     background: rgba(0, 0, 0, 0.5);