From 5a0880da874636155f72287c2c4a9639e5cc49e7 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Thu, 23 Jan 2025 17:29:00 +0100
Subject: [PATCH] [call-me] - add pulsate effect

---
 package.json     |  2 +-
 public/client.js | 14 ++++++++++++++
 public/style.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6496414..5d4d778 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.0.63",
+    "version": "1.0.64",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",
diff --git a/public/client.js b/public/client.js
index 35428f3..9e0ecd5 100755
--- a/public/client.js
+++ b/public/client.js
@@ -404,6 +404,7 @@ function handleListeners() {
     remoteVideo.addEventListener('click', toggleFullScreen);
     // Add keyUp listeners
     callUsernameSelect.addEventListener('keyup', (e) => handleKeyUp(e, handleCallClick));
+    callUsernameSelect.addEventListener('change', (e) => handleChangeUserToCall(e));
     usernameIn.addEventListener('keyup', (e) => handleKeyUp(e, handleSignInClick));
 }
 
@@ -437,6 +438,15 @@ function toggleLocalVideo() {
     localVideoContainer.classList.toggle('hide');
 }
 
+// Handle Select user to call on changes
+function handleChangeUserToCall(e) {
+    const selectedValue = e.target.value;
+    if (selectedValue) {
+        console.log(`You selected: ${selectedValue}`);
+        if (!callBtn.classList.contains('pulsate')) callBtn.classList.add('pulsate');
+    }
+}
+
 // Handle call button click
 function handleCallClick() {
     const callToUsername = callUsernameSelect.value.trim();
@@ -452,6 +462,7 @@ function handleCallClick() {
             to: callToUsername,
         });
         popupMsg(`You are calling ${callToUsername}.<br/>Please wait for them to answer.`);
+        if (callBtn.classList.contains('pulsate')) callBtn.classList.remove('pulsate');
     } else {
         handleError('Please enter a username to call.');
     }
@@ -764,6 +775,9 @@ function handleUsers(data) {
     });
     if (callUsernameSelect.options.length === 0) {
         callUsernameSelect.innerHTML = '<option value="" disabled selected>Select a user to call</option>';
+        if (callBtn.classList.contains('pulsate')) callBtn.classList.remove('pulsate');
+    } else {
+        if (!callBtn.classList.contains('pulsate')) callBtn.classList.add('pulsate');
     }
 }
 
diff --git a/public/style.css b/public/style.css
index 8b2bd53..8c31247 100644
--- a/public/style.css
+++ b/public/style.css
@@ -334,3 +334,51 @@ select::-ms-expand {
 .red {
     background: red !important;
 }
+
+/*--------------------------------------------------------------
+# Pulse class effect
+--------------------------------------------------------------*/
+
+.pulsate {
+    animation: pulsate 3s ease-out;
+    animation-iteration-count: infinite;
+    -webkit-animation: pulsate 3s ease-out;
+    -webkit-animation-iteration-count: infinite;
+    opacity: 0.5;
+}
+
+@-webkit-keyframes pulsate {
+    0% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes pulsate {
+    0% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.5;
+    }
+}
+
+@-webkit-keyframes pulsate {
+    0% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.5;
+    }
+}