From f7f1f5bf770af11d23a118f654e89011264dc8ed Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Thu, 19 Sep 2024 20:02:09 +0200
Subject: [PATCH] [call-me] - update dep, fix ui

---
 package.json      |  4 +-
 public/index.html | 93 ++++++++++++++++++++++-------------------------
 public/style.css  | 32 ++++++++++++++--
 3 files changed, 74 insertions(+), 55 deletions(-)

diff --git a/package.json b/package.json
index ae47b57..51e0e43 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.0.8",
+    "version": "1.0.9",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",
@@ -26,7 +26,7 @@
         "swagger-ui-express": "5.0.1"
     },
     "devDependencies": {
-        "nodemon": "^3.1.4",
+        "nodemon": "^3.1.6",
         "prettier": "3.3.3"
     }
 }
diff --git a/public/index.html b/public/index.html
index fd0cc2c..a97fc08 100755
--- a/public/index.html
+++ b/public/index.html
@@ -85,57 +85,50 @@
         </div>
 
         <!-- Room Page -->
-        <div class="container text-center center">
-            <div id="roomPage">
-                <!-- Local video element (user's video) -->
-                <div id="localVideoContainer">
-                    <video id="localVideo"></video>
-                    <span id="localUsername"></span>
-                </div>
-                <!-- Remote video element (video from the other user) -->
-                <video id="remoteVideo"></video>
-                <div class="row text-center">
-                    <div class="col-md-12">
-                        <div class="mb-3">
-                            <!-- Input field for entering the username to call -->
-                            <input
-                                id="callUsernameIn"
-                                type="text"
-                                class="form-control"
-                                placeholder="Username to call"
-                            />
-                        </div>
-                        <!-- Button to hide/show the local video -->
-                        <button
-                            id="hideBtn"
-                            class="btn btn-custom btn-primary btn-m"
-                            data-toggle="tooltip"
-                            data-placement="top"
-                            title="Toggle hide me"
-                        >
-                            <i class="fas fa-eye-slash"></i>
-                        </button>
-                        <!-- Button to initiate a video call -->
-                        <button
-                            id="callBtn"
-                            class="btn btn-custom btn-success btn-m"
-                            data-toggle="tooltip"
-                            data-placement="top"
-                            title="Call"
-                        >
-                            <i class="fas fa-phone"></i>
-                        </button>
-                        <!-- Button to hang up the call -->
-                        <button
-                            id="hangUpBtn"
-                            class="btn btn-custom btn-danger btn-m"
-                            data-toggle="tooltip"
-                            data-placement="top"
-                            title="Hang up"
-                        >
-                            <i class="fas fa-phone-slash"></i>
-                        </button>
+        <div id="roomPage" class="container text-center center">
+            <!-- Local video element (user's video) -->
+            <div id="localVideoContainer">
+                <video id="localVideo"></video>
+                <span id="localUsername"></span>
+            </div>
+            <!-- Remote video element (video from the other user) -->
+            <video id="remoteVideo"></video>
+            <div class="row text-center">
+                <div class="col-md-12">
+                    <div class="mb-3">
+                        <!-- Input field for entering the username to call -->
+                        <input id="callUsernameIn" type="text" class="form-control" placeholder="Username to call" />
                     </div>
+                    <!-- Button to hide/show the local video -->
+                    <button
+                        id="hideBtn"
+                        class="btn btn-custom btn-primary btn-m"
+                        data-toggle="tooltip"
+                        data-placement="top"
+                        title="Toggle hide me"
+                    >
+                        <i class="fas fa-eye-slash"></i>
+                    </button>
+                    <!-- Button to initiate a video call -->
+                    <button
+                        id="callBtn"
+                        class="btn btn-custom btn-success btn-m"
+                        data-toggle="tooltip"
+                        data-placement="top"
+                        title="Call"
+                    >
+                        <i class="fas fa-phone"></i>
+                    </button>
+                    <!-- Button to hang up the call -->
+                    <button
+                        id="hangUpBtn"
+                        class="btn btn-custom btn-danger btn-m"
+                        data-toggle="tooltip"
+                        data-placement="top"
+                        title="Hang up"
+                    >
+                        <i class="fas fa-phone-slash"></i>
+                    </button>
                 </div>
             </div>
         </div>
diff --git a/public/style.css b/public/style.css
index f64eb14..a080ece 100644
--- a/public/style.css
+++ b/public/style.css
@@ -14,14 +14,21 @@
 
 html,
 body {
+    top: 0;
+    bottom: 0;
     width: 100%;
     height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden; /* Prevent scrolling if the image is larger than the viewport */
+    margin: auto;
+    overflow: auto;
     background: url('background.jpg') center/cover no-repeat; /* Consolidate background properties */
 }
 
+/* Room */
+#roomPage {
+    position: absolute;
+    display: none;
+}
+
 /* Home Sign in */
 #signInPage {
     position: absolute;
@@ -150,3 +157,22 @@ input {
     color: #fff !important;
     border: none !important;
 }
+
+/* Webkit-Scrollbar Styles */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: radial-gradient(#333, #000000);
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: radial-gradient(#333, #000000);
+}
+
+::-webkit-scrollbar-track {
+    background: #1a1b1f;
+}