[mirotalksfu] - improvements

public/css/VideoGrid.css

@@ -175,6 +175,7 @@
     right: 0;
     bottom: 0;
     margin: auto;
+    transition: box-shadow 0.3s ease;
 }
 
 .videoDefault {
@@ -182,6 +183,7 @@
     width: 100%;
     height: 100%;
     border-radius: '10px';
+    transition: box-shadow 0.3s ease;
 }
 
 video {

public/js/RoomClient.js

@@ -6249,12 +6249,13 @@ class RoomClient {
         if ([80, 90, 100].includes(audioVolumeTmp)) audioColorTmp = 'red';
 
         if (!isPitchBarEnabled) {
+            const peerVideo = this.getName(peer_id)[0];
             const peerAvatarImg = this.getId(peer_id + '__img');
             if (peerAvatarImg) {
-                peerAvatarImg.style.boxShadow = `0 0 20px ${audioColorTmp}`;
+                this.applyBoxShadowEffect(peerAvatarImg, audioColorTmp, 200);
-                setTimeout(function () {
+            }
-                    peerAvatarImg.style.boxShadow = 'none';
+            if (peerVideo && peerVideo.classList.contains('videoCircle')) {
-                }, 200);
+                this.applyBoxShadowEffect(peerVideo, audioColorTmp, 200);
             }
             return;
         }
@@ -6277,6 +6278,15 @@ class RoomClient {
         }, 200);
     }
 
+    applyBoxShadowEffect(element, color, delay = 200) {
+        if (element) {
+            element.style.boxShadow = `0 0 20px ${color}`;
+            setTimeout(() => {
+                element.style.boxShadow = 'none';
+            }, delay);
+        }
+    }
+
     // ####################################################
     // HANDLE PEER VOLUME
     // ###################################################