[mirotalk] - set chat avatar image by peer name

miroslavpejic85 · May 22, 2021 · 4dd9243 · 4dd9243
1 parent 3f8d04f
commit 4dd9243
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 17 deletions.
diff --git a/www/client.html b/www/client.html
@@ -115,12 +115,14 @@ <h1 class="pulsate">Loading...</h1>
           <div class="msg left-msg">
             <div
               class="msg-img"
-              style="background-image: url('/images/friend.svg')"
+              style="
+                background-image: url('https://eu.ui-avatars.com/api?name=Your Name&size=24&background=random&rounded=true');
+              "
             ></div>
 
             <div class="msg-bubble">
               <div class="msg-info">
-                <div class="msg-info-name">Friends Name</div>
+                <div class="msg-info-name">Your Name</div>
                 <div class="msg-info-time">00:00:00</div>
               </div>
 
@@ -131,12 +133,14 @@ <h1 class="pulsate">Loading...</h1>
           <div class="msg right-msg">
             <div
               class="msg-img"
-              style="background-image: url('/images/programmer.svg')"
+              style="
+                background-image: url('https://eu.ui-avatars.com/api?name=Friends Name&size=24&background=random&rounded=true');
+              "
             ></div>
 
             <div class="msg-bubble">
               <div class="msg-info">
-                <div class="msg-info-name">Your Name</div>
+                <div class="msg-info-name">Friends Name</div>
                 <div class="msg-info-time">00:00:00</div>
               </div>
 
@@ -148,12 +152,14 @@ <h1 class="pulsate">Loading...</h1>
           <div class="msg left-msg">
             <div
               class="msg-img"
-              style="background-image: url('/images/friend.svg')"
+              style="
+                background-image: url('https://eu.ui-avatars.com/api?name=Your Name&size=24&background=random&rounded=true');
+              "
             ></div>
 
             <div class="private-msg-bubble">
               <div class="msg-info">
-                <div class="msg-info-name">Friends Name</div>
+                <div class="msg-info-name">Your Name</div>
                 <div class="msg-info-time">00:00:00</div>
               </div>
 
@@ -164,12 +170,14 @@ <h1 class="pulsate">Loading...</h1>
           <div class="msg right-msg">
             <div
               class="msg-img"
-              style="background-image: url('/images/programmer.svg')"
+              style="
+                background-image: url('https://eu.ui-avatars.com/api?name=Friends Name&size=24&background=random&rounded=true');
+              "
             ></div>
 
             <div class="private-msg-bubble">
               <div class="msg-info">
-                <div class="msg-info-name">Your Name</div>
+                <div class="msg-info-name">Friends Name</div>
                 <div class="msg-info-time">00:00:00</div>
               </div>
 

diff --git a/www/js/client.js b/www/js/client.js
@@ -12,8 +12,6 @@ const welcomeImg = "../images/illustration-section-01.svg";
 const shareUrlImg = "../images/illustration-section-01.svg";
 const leaveRoomImg = "../images/illustration-section-01.svg";
 const aboutImg = "../images/about.png";
-const myChatAvatar = "../images/programmer.svg";
-const friendChatAvatar = "../images/friend.svg";
 const peerLoockupUrl = "https://extreme-ip-lookup.com/json/";
 const avatarApiUrl = "https://eu.ui-avatars.com/api";
 const notifyBySound = true; // turn on - off sound notifications
@@ -27,6 +25,9 @@ const notifyError = "../audio/error.mp3";
 const isWebRTCSupported = DetectRTC.isWebRTCSupported;
 const isMobileDevice = DetectRTC.isMobileDevice;
 
+var leftChatAvatar = "../images/programmer.svg";
+var rightChatAvatar = "../images/friend.svg";
+
 var callStartTime;
 var callElapsedTime;
 var recStartTime;
@@ -509,6 +510,7 @@ function initPeer() {
         myPeerName = value;
         myVideoParagraph.innerHTML = myPeerName + " (me)";
         setPeerAvatarImgName("myVideoAvatarImage", myPeerName);
+        setPeerChatAvatarImgName("left", myPeerName);
         joinToChannel();
       },
     }).then(function () {
@@ -777,10 +779,11 @@ function initPeer() {
           chatRoomBtn.className = "fas fa-comment-slash";
         }
         playSound("newMessage");
+        setPeerChatAvatarImgName("right", config.name);
         appendMessage(
           config.name,
-          friendChatAvatar,
-          "left",
+          rightChatAvatar,
+          "right",
           config.msg,
           config.privateMsg
         );
@@ -985,10 +988,11 @@ function handleIncomingDataChannelMessages(dataMessages) {
         chatRoomBtn.className = "fas fa-comment-slash";
       }
       playSound("newMessage");
+      setPeerChatAvatarImgName("right", dataMessages.name);
       appendMessage(
         dataMessages.name,
-        friendChatAvatar,
-        "left",
+        rightChatAvatar,
+        "right",
         dataMessages.msg,
         dataMessages.privateMsg
       );
@@ -1321,6 +1325,31 @@ function setPeerAvatarImgName(videoAvatarImageId, peerName) {
   );
 }
 
+/**
+ * Set Chat avatar image icon by peer name
+ * @param {*} avatar left/right
+ * @param {*} peerName my/friends
+ */
+function setPeerChatAvatarImgName(avatar, peerName) {
+  let avatarImg =
+    avatarApiUrl +
+    "?name=" +
+    peerName +
+    "&size=24" +
+    "&background=random&rounded=true";
+
+  switch (avatar) {
+    case "left":
+      // console.log("Set My chat avatar image");
+      leftChatAvatar = avatarImg;
+      break;
+    case "right":
+      // console.log("Set Friend chat avatar image");
+      rightChatAvatar = avatarImg;
+      break;
+  }
+}
+
 /**
  * On video player click, go on full screen mode.
  * Press Esc to exit from full screen mode, or click again.
@@ -1658,7 +1687,7 @@ function setChatRoomBtn() {
     if (!msg) return;
 
     emitMsg(myPeerName, "toAll", msg, false, "");
-    appendMessage(myPeerName, myChatAvatar, "right", msg, false);
+    appendMessage(myPeerName, leftChatAvatar, "left", msg, false);
     msgerInput.value = "";
   });
 }
@@ -2665,8 +2694,8 @@ function addMsgerPrivateBtn(msgerPrivateBtn, msgerPrivateMsgInput, peer_id) {
     emitMsg(myPeerName, toPeerName, pMsg, true, peer_id);
     appendMessage(
       myPeerName,
-      myChatAvatar,
-      "right",
+      leftChatAvatar,
+      "left",
       pMsg + "<br/><hr>Private message to " + toPeerName,
       true
     );
@@ -2884,6 +2913,7 @@ function updateMyPeerName() {
   myPeerNameSet.placeholder = myPeerName;
 
   setPeerAvatarImgName("myVideoAvatarImage", myPeerName);
+  setPeerChatAvatarImgName("left", myPeerName);
 }
 
 /**