From 57274e36b6bb3fb64a1f59d92cc3a969c1632817 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Fri, 26 Aug 2022 21:08:01 +0200
Subject: [PATCH] [mirotalk] - add copy msg to clipboard btn

---
 public/css/client.css |  9 +++++++-
 public/js/client.js   | 49 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/public/css/client.css b/public/css/client.css
index 904c774f..dbe45bdd 100755
--- a/public/css/client.css
+++ b/public/css/client.css
@@ -356,7 +356,7 @@ body {
     background: var(--left-msg-bg);
     border-bottom-left-radius: 0;
     color: #fff;
-    /* width: 90%; */
+    width: 90%; /* caption */
 }
 
 .left-msg .msg-img {
@@ -434,6 +434,13 @@ body {
     hyphens: auto;
 }
 
+.msger-copy-txt {
+    border: none;
+    border-radius: 5px;
+    color: #fff;
+    background: transparent;
+}
+
 #chat-msg-a {
     color: #fff;
 }
diff --git a/public/js/client.js b/public/js/client.js
index 51cb9d9e..c441ecf8 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -125,6 +125,7 @@ let videoQualitySelectedIndex = 0; // default
 
 let leftChatAvatar;
 let rightChatAvatar;
+let chatMessagesId = 0;
 
 let callStartTime;
 let callElapsedTime;
@@ -4196,12 +4197,35 @@ function appendMessage(from, img, side, msg, privateMsg, msgId = null) {
                 <div class="msg-info-name">${from}</div>
                 <div class="msg-info-time">${time}</div>
             </div>
-            <div class="msg-text">${msg}</div>
+            <div id="${chatMessagesId}" class="msg-text">${msg}
+                <hr/>
+                <button
+                    class="msger-copy-txt" 
+                    onclick="copyToClipboard('${chatMessagesId}')"
+                ><i class="fas fa-copy"></i></button>
+            </div>
         </div>
 	</div>
     `;
     msgerChat.insertAdjacentHTML('beforeend', msgHTML);
     msgerChat.scrollTop += 500;
+    chatMessagesId++;
+}
+
+/**
+ * Copy the element innerText on clipboard
+ * @param {string} id
+ */
+function copyToClipboard(id) {
+    const text = document.getElementById(id).innerText;
+    navigator.clipboard
+        .writeText(text)
+        .then(() => {
+            msgPopup('success', 'Message copied!', 'top-end', 1000);
+        })
+        .catch((err) => {
+            msgPopup('error', err, 'top-end', 2000);
+        });
 }
 
 /**
@@ -4310,7 +4334,7 @@ function addMsgerPrivateBtn(msgerPrivateBtn, msgerPrivateMsgInput, peerId) {
         }
         let toPeerName = msgerPrivateBtn.value;
         emitMsg(myPeerName, toPeerName, pMsg, true, peerId);
-        appendMessage(myPeerName, rightChatAvatar, 'right', pMsg + '<br/><hr>Private message to ' + toPeerName, true);
+        appendMessage(myPeerName, rightChatAvatar, 'right', pMsg + '<hr>Private message to ' + toPeerName, true);
         msgerPrivateMsgInput.value = '';
         msgerCP.style.display = 'none';
     }
@@ -6495,6 +6519,27 @@ function userLog(type, message) {
     }
 }
 
+/**
+ * Message popup
+ * @param {string} icon info, sucess, warning, error
+ * @param {string} message to show
+ * @param {string} position of the toast
+ * @param {integer} timer ms before to hide
+ */
+function msgPopup(icon, message, position, timer = 1000) {
+    const Toast = Swal.mixin({
+        background: swalBackground,
+        toast: true,
+        position: position,
+        showConfirmButton: false,
+        timer: timer,
+    });
+    Toast.fire({
+        icon: icon,
+        title: message,
+    });
+}
+
 /**
  * https://notificationsounds.com/notification-sounds
  * @param {string} name audio to play