[mirotalksfu] - improve avatar img logic (thanks phpony)

public/css/VideoGrid.css

@@ -66,6 +66,15 @@
     background: rgba(0, 0, 0, 0.4);
 }
 
+.videoAvatarImage {
+    z-index: 7;
+    position: absolute;
+    display: none;
+    width: var(--vmi-wh);
+    height: var(--vmi-wh);
+    border-radius: 50%;
+}
+
 .audio {
     position: absolute;
     right: 0;
@@ -106,13 +115,6 @@
     background: rgba(0, 0, 0, 0.1);
 }
 
-#videoMediaContainer img {
-    position: absolute;
-    display: none;
-    width: var(--vmi-wh);
-    height: var(--vmi-wh);
-}
-
 .videoMenuBar {
     z-index: 2;
     position: absolute;

public/js/Room.js

@@ -2193,7 +2193,7 @@ async function getParticipantsTable(peers) {
         if (rc.peer_id === peer_id) {
             table += `
             <tr id='${peer_name}'>
-                <td><img src='${avatarImg}'></td>
+                <td><img src="${avatarImg}"></td>
                 <td>${peer_name} (me)</td>
                 <td><button>${peer_audio}</button></td>
                 <td><button>${peer_video}</button></td>
@@ -2208,7 +2208,7 @@ async function getParticipantsTable(peers) {
             if (isRulesActive && isPresenter) {
                 table += `
                 <tr id='${peer_id}'>
-                    <td><img src='${avatarImg}'></td>
+                    <td><img src="${avatarImg}"></td>
                     <td>${peer_name}</td>
                     <td><button id='${peer_id}___pAudio' onclick="rc.peerAction('me',this.id,'mute')">${peer_audio}</button></td>
                     <td><button id='${peer_id}___pVideo' onclick="rc.peerAction('me',this.id,'hide')">${peer_video}</button></td>
@@ -2222,7 +2222,7 @@ async function getParticipantsTable(peers) {
             } else {
                 table += `
                 <tr id='${peer_id}'>
-                    <td><img src='${avatarImg}'></td>
+                    <td><img src="${avatarImg}"></td>
                     <td>${peer_name}</td>
                     <td><button id='${peer_id}___pAudio'>${peer_audio}</button></td>
                     <td><button id='${peer_id}___pVideo'>${peer_video}</button></td>
@@ -2269,7 +2269,7 @@ function refreshParticipantsCount(count, adapt = true) {
 }
 
 function getParticipantAvatar(peerName) {
-    return cfg.msgAvatar + '?name=' + peerName + '&size=32' + '&background=random&rounded=true';
+    return rc.genAvatarSvg(peerName, 32);
 }
 
 // ####################################################

public/js/RoomClient.js

@@ -14,8 +14,7 @@
  */
 
 const cfg = {
-    useAvatarApi: true,
-    msgAvatar: 'https://eu.ui-avatars.com/api',
+    useAvatarSvg: true,
 };
 
 const html = {
@@ -1859,7 +1858,7 @@ class RoomClient {
             ko.className = html.kickOut;
         }
         i = document.createElement('img');
-        i.className = 'center'; // pulsate
+        i.className = 'videoAvatarImage center'; // pulsate
         i.id = peer_id + '__img';
         p = document.createElement('p');
         p.id = peer_id + '__name';
@@ -2065,17 +2064,54 @@ class RoomClient {
 
     setVideoAvatarImgName(elemId, peer_name) {
         let elem = this.getId(elemId);
-        if (cfg.useAvatarApi) {
-            let avatarImgSize = 250;
-            elem.setAttribute(
-                'src',
-                cfg.msgAvatar + '?name=' + peer_name + '&size=' + avatarImgSize + '&background=random&rounded=true',
-            );
+        if (cfg.useAvatarSvg) {
+            elem.setAttribute('src', this.genAvatarSvg(peer_name, 250));
         } else {
             elem.setAttribute('src', image.avatar);
         }
     }
 
+    genAvatarSvg(peerName, avatarImgSize) {
+        const charCodeRed = peerName.charCodeAt(0);
+        const charCodeGreen = peerName.charCodeAt(1) || charCodeRed;
+        const red = Math.pow(charCodeRed, 7) % 200;
+        const green = Math.pow(charCodeGreen, 7) % 200;
+        const blue = (red + green) % 200;
+        const bgColor = `rgb(${red}, ${green}, ${blue})`;
+        const textColor = '#ffffff';
+        const svg = `
+        <svg xmlns="http://www.w3.org/2000/svg" 
+        xmlns:xlink="http://www.w3.org/1999/xlink" 
+        width="${avatarImgSize}px" 
+        height="${avatarImgSize}px" 
+        viewBox="0 0 ${avatarImgSize} ${avatarImgSize}" 
+        version="1.1">
+            <circle 
+                fill="${bgColor}" 
+                width="${avatarImgSize}" 
+                height="${avatarImgSize}" 
+                cx="${avatarImgSize / 2}" 
+                cy="${avatarImgSize / 2}" 
+                r="${avatarImgSize / 2}"
+            />
+            <text 
+                x="50%" 
+                y="50%" 
+                style="color:${textColor}; 
+                line-height:1; 
+                font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif"
+                alignment-baseline="middle" 
+                text-anchor="middle" 
+                font-size="${Math.round(avatarImgSize * 0.4)}" 
+                font-weight="normal" 
+                dy=".1em" 
+                dominant-baseline="middle" 
+                fill="${textColor}">${peerName.substring(0, 2).toUpperCase()}
+            </text>
+        </svg>`;
+        return 'data:image/svg+xml,' + svg.replace(/#/g, '%23').replace(/"/g, "'").replace(/&/g, '&amp;');
+    }
+
     setIsAudio(peer_id, status) {
         this.peer_info.peer_audio = status;
         let b = this.getPeerAudioBtn(peer_id);
@@ -2759,7 +2795,7 @@ class RoomClient {
     }
 
     setMsgAvatar(avatar, peerName) {
-        let avatarImg = cfg.msgAvatar + '?name=' + peerName + '&size=32' + '&background=random&rounded=true';
+        let avatarImg = this.genAvatarSvg(peerName, 32);
         avatar === 'left' ? (this.leftMsgAvatar = avatarImg) : (this.rightMsgAvatar = avatarImg);
     }
 
@@ -2770,7 +2806,7 @@ class RoomClient {
         let message = toId == 'all' ? msg : msg + replyMsg;
         let msgHTML = `
         <div id="msg-${chatMessagesId}" class="msg ${side}-msg">
-            <div class="msg-img" style="background-image: url('${img}')"></div>
+            <img class="msg-img" src="${img}" />
             <div class=${msgBubble}>
                 <div class="msg-info">
                     <div class="msg-info-name">${fromName}</div>