[mirotalk] - fix: animate participants panel slide-in after chat pin and sync videoMediaContainer width transition

Author: miroslavpejic85

.env.template

@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.8.21 - Environment Configuration
+# MiroTalk P2P v.1.8.22 - Environment Configuration
 # ====================================================
 
 # App environment

app/src/config.template.js

@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.8.21 - Configuration File
+ * MiroTalk P2P v.1.8.22 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.

app/src/server.js

@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.21
+ * @version 1.8.22
  *
  */
 

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.8.21",
+    "version": "1.8.22",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
@@ -46,7 +46,7 @@
     "dependencies": {
         "@mattermost/client": "11.6.0",
         "@ngrok/ngrok": "1.7.0",
-        "@sentry/node": "^10.50.0",
+        "@sentry/node": "^10.51.0",
         "axios": "^1.15.2",
         "chokidar": "^5.0.0",
         "colors": "^1.4.0",

package.json

@@ -109,7 +109,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.8.21',
+        title: 'WebRTC P2P v1.8.22',
         html: `
             <button 
                 id="support-button" 

public/js/brand.js

@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.21
+ * @version 1.8.22
  *
  */
 
@@ -6464,24 +6464,36 @@ function setChatRoomBtn() {
 function setParticipantsBtn() {
     participantsBtn.addEventListener('click', async (e) => {
         e.preventDefault();
-        if (!isChatRoomVisible) {
-            showChatRoomDraggable();
-        }
 
         if (!isMobileDevice && canBePinned()) {
             if (isCaptionPinned) {
                 userLog('toast', 'Please unpin the Caption that appears to be currently pinned');
                 return;
             }
 
+            msgerDraggable.classList.add('msger-pinned-sidebar-open');
+
+            if (!isChatRoomVisible) {
+                showChatRoomDraggable();
+            }
+
             if (!isChatPinned) {
                 chatPin();
             }
 
-            openPinnedParticipantsSidebar(true);
+            // Wait for the panel-slide-in animation to play before overlaying the participants sidebar.
+            await sleep(500);
+
+            msgerCPBtn.classList.add('active');
+            searchPeerBarName?.focus();
+            screenReaderAccessibility.announceMessage('Participants list opened');
             return;
         }
 
+        if (!isChatRoomVisible) {
+            showChatRoomDraggable();
+        }
+
         syncParticipantsPanelVisibility(true);
         searchPeerBarName?.focus();
         screenReaderAccessibility.announceMessage('Participants list opened');
@@ -15568,7 +15580,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.21',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.22',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `