[call-me] - add session time

package.json

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

public/client.js

@@ -10,6 +10,7 @@ const socket = io();
 const config = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
 
 // DOM elements
+const sessionTime = document.querySelector('#sessionTime');
 const githubDiv = document.querySelector('#githubDiv');
 const signInPage = document.querySelector('#signInPage');
 const usernameIn = document.querySelector('#usernameIn');
@@ -75,6 +76,29 @@ function handleDirectJoin() {
     }
 }
 
+// Session Time
+function startSessionTime() {
+    console.log('Start session time');
+    sessionTime.style.display = 'inline-flex';
+    let sessionElapsedTime = 0;
+    setInterval(function printTime() {
+        sessionElapsedTime++;
+        sessionTime.innerText = secondsToHms(sessionElapsedTime);
+    }, 1000);
+}
+
+// Session Time in h/m/s
+function secondsToHms(d) {
+    d = Number(d);
+    let h = Math.floor(d / 3600);
+    let m = Math.floor((d % 3600) / 60);
+    let s = Math.floor((d % 3600) % 60);
+    let hDisplay = h > 0 ? h + 'h' : '';
+    let mDisplay = m > 0 ? m + 'm' : '';
+    let sDisplay = s > 0 ? s + 's' : '';
+    return hDisplay + ' ' + mDisplay + ' ' + sDisplay;
+}
+
 // WebSocket event listeners
 socket.on('connect', handleSocketConnect);
 socket.on('message', handleMessage);
@@ -310,6 +334,8 @@ function offerAccept(data) {
             callBtn.style.display = 'none';
             data.type = 'offerCreate';
             socket.recipient = data.from;
+            // Start session time in h/m/s
+            startSessionTime();
         } else {
             data.type = 'offerDecline';
         }

public/index.html

@@ -93,6 +93,8 @@
             </div>
             <!-- Remote video element (video from the other user) -->
             <video id="remoteVideo"></video>
+            <!-- Session time -->
+            <span id="sessionTime">0s</span>
             <div class="row text-center">
                 <div class="col-md-12">
                     <div class="mb-3">

public/style.css

@@ -23,6 +23,21 @@ body {
     background: url('background.jpg') center/cover no-repeat; /* Consolidate background properties */
 }
 
+/* Session Time */
+#sessionTime {
+    display: none;
+    position: absolute;
+    text-align: center;
+    align-items: center;
+    padding: 5px;
+    top: 10px;
+    right: 20px;
+    font-weight: bold;
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: var(--border-radius);
+}
+
 /* Room */
 #roomPage {
     position: absolute;