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}.
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 = '';
+ 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;
+ }
+}