From b3880271c76d6c0d7d9a8ef7eedf5b2266d08b04 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Sun, 22 Oct 2023 11:05:47 +0200
Subject: [PATCH] [mirotalk] - fix recording alerts

---
 public/images/recording.png | Bin 0 -> 2023 bytes
 public/js/client.js         |  49 +++++++++++++++++++++++++++---------
 2 files changed, 37 insertions(+), 12 deletions(-)
 create mode 100644 public/images/recording.png

diff --git a/public/images/recording.png b/public/images/recording.png
new file mode 100644
index 0000000000000000000000000000000000000000..a23bc57e23f1bfa675e0876fae4eb6db4b18a7bc
GIT binary patch
literal 2023
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
Wl*9=jS$YY71rWy8)#iz{AMwAxc=}iX

literal 0
HcmV?d00001

diff --git a/public/js/client.js b/public/js/client.js
index 8d832a03..70f28d55 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -47,6 +47,7 @@ const imgFeedback = '../images/feedback.png';
 const forbiddenImg = '../images/forbidden.png';
 const avatarImg = '../images/mirotalk-logo.png';
 const camMicOff = '../images/cam-mic-off.png';
+const recordingImg = '../images/recording.png';
 
 // nice free icon: https://www.iconfinder.com
 
@@ -1683,7 +1684,7 @@ async function joinToChannel() {
         peer_audio_status: myAudioStatus,
         peer_screen_status: myScreenStatus,
         peer_hand_status: myHandStatus,
-        peer_rec_status: isRecScreenStream,
+        peer_rec_status: isStreamRecording,
         peer_privacy_status: isVideoPrivacyActive,
         userAgent: userAgent,
     });
@@ -5693,6 +5694,7 @@ function recordingOptions(options, audioMixerTracks) {
     Swal.fire({
         background: swalBackground,
         position: 'center',
+        imageUrl: recordingImg,
         title: 'Recording options',
         showDenyButton: true,
         showCancelButton: true,
@@ -5827,13 +5829,13 @@ function getAudioStreamFromAudioElements() {
 }
 
 /**
- * Notify me if someone start to recording they screen + audio
+ * Notify me if someone start to recording they camera/screen/window + audio
  * @param {string} fromId peer_id
  * @param {string} from peer_name
  * @param {string} action recording action
  */
 function notifyRecording(fromId, from, action) {
-    const msg = '[ 🔴 REC ] : ' + action + ' to recording his own screen and audio';
+    const msg = '🔴 Recording: ' + action;
     const chatMessage = {
         from: from,
         fromId: fromId,
@@ -5842,7 +5844,9 @@ function notifyRecording(fromId, from, action) {
         privateMsg: false,
     };
     handleDataChannelChat(chatMessage);
-    userLog('toast', from + ' ' + msg);
+    if (!showChatOnMessage) {
+        msgHTML(null, recordingImg, null, `${icons.user} ${from}: <h1>${action} recording</h1>`, 'top');
+    }
 }
 
 /**
@@ -5861,10 +5865,8 @@ function handleMediaRecorder(mediaRecorder) {
  * @param {object} event of media recorder
  */
 function handleMediaRecorderStart(event) {
-    if (isRecScreenStream) {
-        emitPeersAction('recStart');
-        emitPeerStatus('rec', isRecScreenStream);
-    }
+    emitPeersAction('recStart');
+    emitPeerStatus('rec', true);
     console.log('MediaRecorder started: ', event);
     isStreamRecording = true;
     recordStreamBtn.style.setProperty('color', '#ff4500');
@@ -5894,13 +5896,13 @@ function handleMediaRecorderStop(event) {
     console.log('MediaRecorder Blobs: ', recordedBlobs);
     isStreamRecording = false;
     myVideoParagraph.innerText = myPeerName + ' (me)';
+    emitPeersAction('recStop');
+    emitPeerStatus('rec', false);
     if (isRecScreenStream) {
         recScreenStream.getTracks().forEach((track) => {
             if (track.kind === 'video') track.stop();
         });
         isRecScreenStream = false;
-        emitPeersAction('recStop');
-        emitPeerStatus('rec', isRecScreenStream);
     }
     recordStreamBtn.style.setProperty('color', '#000');
     downloadRecordedStream();
@@ -7306,10 +7308,10 @@ function handlePeerAction(config) {
             setMyVideoOff(peer_name);
             break;
         case 'recStart':
-            notifyRecording(peer_id, peer_name, 'Started');
+            notifyRecording(peer_id, peer_name, 'Start');
             break;
         case 'recStop':
-            notifyRecording(peer_id, peer_name, 'Stopped');
+            notifyRecording(peer_id, peer_name, 'Stop');
             break;
         case 'screenStart':
             handleScreenStart(peer_id);
@@ -9263,6 +9265,29 @@ function userLog(type, message, timer = 3000) {
     }
 }
 
+/**
+ * Popup html message
+ * @param {string} icon info, success, alert, warning
+ * @param {string} imageUrl image path
+ * @param {string} title message title
+ * @param {string} html message in html format
+ * @param {string} position message position
+ */
+function msgHTML(icon, imageUrl, title, html, position = 'center') {
+    Swal.fire({
+        allowOutsideClick: false,
+        allowEscapeKey: false,
+        background: swalBackground,
+        position: position,
+        icon: icon,
+        imageUrl: imageUrl,
+        title: title,
+        html: html,
+        showClass: { popup: 'animate__animated animate__fadeInDown' },
+        hideClass: { popup: 'animate__animated animate__fadeOutUp' },
+    });
+}
+
 /**
  * Message popup
  * @param {string} icon info, success, warning, error