diff --git a/www/audio/raiseHand.mp3 b/www/audio/raiseHand.mp3 new file mode 100644 index 00000000..f62bb9d3 Binary files /dev/null and b/www/audio/raiseHand.mp3 differ diff --git a/www/css/client.css b/www/css/client.css index d7c8bb9f..b7f6b9cd 100755 --- a/www/css/client.css +++ b/www/css/client.css @@ -630,11 +630,12 @@ emoji-picker { z-index: 5; position: absolute; top: 15px; - right: 50px; + right: 55px; color: rgb(0, 255, 0); transition: all 0.3s ease-in-out; - background: transparent; + background: #000000; border: none; + border-radius: 5px 1px; } .videoStatusIcon { z-index: 6; diff --git a/www/js/client.js b/www/js/client.js index 9b175912..69beb702 100644 --- a/www/js/client.js +++ b/www/js/client.js @@ -21,6 +21,7 @@ const notifyRemovePeer = "../audio/removePeer.mp3"; const notifyNewMessage = "../audio/newMessage.mp3"; const notifyRecStart = "../audio/recStart.mp3"; const notifyRecStop = "../audio/recStop.mp3"; +const notifyRaiseHand = "../audio/raiseHand.mp3"; const notifyError = "../audio/error.mp3"; const isWebRTCSupported = DetectRTC.isWebRTCSupported; const isMobileDevice = DetectRTC.isMobileDevice; @@ -644,7 +645,7 @@ function initPeer() { remoteVideoParagraph.appendChild(peerVideoText); // remote hand status element remoteHandStatusIcon.setAttribute("id", peer_id + "_handStatus"); - remoteHandStatusIcon.className = "fas fa-hand-paper handStatusIcon"; + remoteHandStatusIcon.className = "fas fa-hand-paper handStatusIcon pulsate"; tippy(remoteHandStatusIcon, { content: "Participant hand is RAISED", }); @@ -1027,7 +1028,7 @@ function setupLocalMedia(callback, errorback) { }); // my hand status element myHandStatusIcon.setAttribute("id", "myHandStatusIcon"); - myHandStatusIcon.className = "fas fa-hand-paper handStatusIcon"; + myHandStatusIcon.className = "fas fa-hand-paper handStatusIcon pulsate"; tippy(myHandStatusIcon, { content: "My hand is RAISED", }); @@ -1504,27 +1505,7 @@ function setChatEmojiBtn() { */ function setMyHandBtn() { myHandBtn.addEventListener("click", async (e) => { - if (myHandStatus) { - // Raised hand - myHandStatus = false; - if (!isMobileDevice) { - tippy(myHandBtn, { - content: "RAISE your hand", - placement: "right-start", - }); - } - } else { - // Lower hand - myHandStatus = true; - if (!isMobileDevice) { - tippy(myHandBtn, { - content: "LOWER your hand", - placement: "right-start", - }); - } - } - myHandStatusIcon.style.display = myHandStatus ? "block" : "none"; - emitPeerStatus("hand", myHandStatus); + setMyHandStatus(myHandStatus); }); } @@ -2676,6 +2657,35 @@ function emitPeerStatus(element, status) { }); } +/** + * Set my Hand Status and Icon + * @param {*} status + */ +function setMyHandStatus(status) { + if (myHandStatus) { + // Raise hand + myHandStatus = false; + if (!isMobileDevice) { + tippy(myHandBtn, { + content: "RAISE your hand", + placement: "right-start", + }); + } + } else { + // Lower hand + myHandStatus = true; + if (!isMobileDevice) { + tippy(myHandBtn, { + content: "LOWER your hand", + placement: "right-start", + }); + } + playSound("rHand"); + } + myHandStatusIcon.style.display = myHandStatus ? "block" : "none"; + emitPeerStatus("hand", myHandStatus); +} + /** * Set My Audio Status Icon and Title * @param {*} status @@ -2727,6 +2737,7 @@ function setMyVideoStatus(status) { function setPeerHandStatus(peer_id, status) { let peerHandStatus = getId(peer_id + "_handStatus"); peerHandStatus.style.display = status ? "block" : "none"; + if (status) playSound("rHand"); } /** @@ -3082,6 +3093,9 @@ async function playSound(state) { case "recStop": file_audio = notifyRecStop; break; + case "rHand": + file_audio = notifyRaiseHand; + break; case "error": file_audio = notifyError; break;