[mirotalk] - feat(ui): theme-aware active state for chat & participants toolbar buttons

Author: miroslavpejic85

.env.template

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

app/src/config.template.js

@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.8.51 - Configuration File
+ * MiroTalk P2P v.1.8.52 - 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.51
+ * @version 1.8.52
  *
  */
 

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.8.51",
+    "version": "1.8.52",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {

package.json

@@ -508,6 +508,18 @@ body {
     transition: all 0.3s ease-in-out;
 }
 
+/* Active state for chat / participants toolbar buttons (theme-aware) */
+#bottomButtons #chatRoomBtn.is-active,
+#bottomButtons #participantsBtn.is-active {
+    background: color-mix(in srgb, var(--dd-color, #4678f9) 18%, transparent) !important;
+    box-shadow: inset 0 0 0 1px var(--dd-color, #4678f9);
+    color: var(--dd-color, #4678f9) !important;
+}
+#bottomButtons #chatRoomBtn.is-active:hover,
+#bottomButtons #participantsBtn.is-active:hover {
+    background: color-mix(in srgb, var(--dd-color, #4678f9) 28%, transparent) !important;
+}
+
 /* Quick device picker (Start Audio/Video) */
 #bottomButtons .device-dropdown-toggle {
     width: 35px;

public/css/client.css

@@ -109,7 +109,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.8.51',
+        title: 'WebRTC P2P v1.8.52',
         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.51
+ * @version 1.8.52
  *
  */
 
@@ -80,7 +80,7 @@ const className = {
     shareVideoAudio: 'fab fa-youtube',
     kickOut: 'fas fa-sign-out-alt',
     chatOn: 'fas fa-comment',
-    chatOff: 'fas fa-comment-slash',
+    chatOff: 'fas fa-comment',
     ghost: 'fas fa-ghost',
     undo: 'fas fa-undo',
     captionOn: 'fas fa-closed-captioning',
@@ -688,6 +688,7 @@ let isCaptionPinned = false;
 let isChatRoomVisible = false;
 let isParticipantsVisible = false;
 let isChatOpenedByParticipantsBtn = false;
+let isOpeningParticipants = false;
 let isCaptionBoxVisible = false;
 let isChatEmojiVisible = false;
 let isChatMarkdownOn = false;
@@ -6324,13 +6325,15 @@ function setChatRoomBtn() {
         setActiveConversation('public');
         msgerDraggable.classList.remove('msger-pinned-sidebar-open');
         msgerCPBtn.classList.remove('active');
+        syncChatToolbarButtons();
         msgerInput.focus();
         msgerChat.scrollTop = msgerChat.scrollHeight;
     });
 
     msgerSidebarCloseBtn?.addEventListener('click', () => {
         msgerDraggable.classList.remove('msger-pinned-sidebar-open');
         msgerCPBtn.classList.remove('active');
+        syncChatToolbarButtons();
         closeAllMsgerParticipantDropdownMenus();
     });
 
@@ -6361,12 +6364,7 @@ function setChatRoomBtn() {
 
     // open hide chat room
     chatRoomBtn.addEventListener('click', (e) => {
-        if (!isChatRoomVisible) {
-            showChatRoomDraggable();
-        } else {
-            hideChatRoomAndEmojiPicker();
-            e.target.className = className.chatOn;
-        }
+        !isChatRoomVisible ? showChatRoomDraggable() : hideChatRoomAndEmojiPicker();
     });
 
     // pin/unpin
@@ -6404,6 +6402,7 @@ function setChatRoomBtn() {
         if (isChatPinned) {
             const isOpen = msgerDraggable.classList.toggle('msger-pinned-sidebar-open');
             msgerCPBtn.classList.toggle('active', isOpen);
+            syncChatToolbarButtons();
             if (isOpen) {
                 searchPeerBarName?.focus();
             } else {
@@ -6570,16 +6569,18 @@ function setParticipantsBtn() {
 
                 msgerDraggable.classList.remove('msger-pinned-sidebar-open');
                 msgerCPBtn.classList.remove('active');
+                syncChatToolbarButtons();
                 closeAllMsgerParticipantDropdownMenus();
                 screenReaderAccessibility.announceMessage('Participants list closed');
                 return;
             }
 
             msgerDraggable.classList.add('msger-pinned-sidebar-open');
 
-            if (!isChatRoomVisible) {
-                showChatRoomDraggable();
-            }
+            isOpeningParticipants = true;
+            msgerCPBtn.classList.add('active');
+
+            !isChatRoomVisible ? showChatRoomDraggable() : syncChatToolbarButtons();
 
             isChatOpenedByParticipantsBtn = openedChatForParticipants;
 
@@ -6591,6 +6592,8 @@ function setParticipantsBtn() {
             await sleep(500);
 
             msgerCPBtn.classList.add('active');
+            isOpeningParticipants = false;
+            syncChatToolbarButtons();
             searchPeerBarName?.focus();
             screenReaderAccessibility.announceMessage('Participants list opened');
             return;
@@ -9911,20 +9914,37 @@ function showChatRoomDraggable() {
     //chatLeftCenter();
     chatCenter();
 
-    chatRoomBtn.className = className.chatOff;
     isChatRoomVisible = true;
 
     if (!isMobileDevice && canBePinned() && pinChatByDefault && !isChatPinned && !isCaptionPinned) {
         chatPin();
     }
 
     syncParticipantsPanelVisibility();
+    syncChatToolbarButtons();
 
     setTippy(chatRoomBtn, 'Close the chat (C)', bottomButtonsPlacement);
-    if (chatRoomBtn && chatRoomBtn.setAttribute) chatRoomBtn.setAttribute('aria-pressed', 'true');
     screenReaderAccessibility.announceMessage('Chat opened');
 }
 
+/**
+ * Sync the active visual state of the chat / participants toolbar buttons
+ * with the current chat & participants panel visibility.
+ */
+function syncChatToolbarButtons() {
+    const participantsActive = isOpeningParticipants || !!(msgerCPBtn && msgerCPBtn.classList.contains('active'));
+    const chatActive = !!isChatRoomVisible && !participantsActive;
+    if (chatRoomBtn) {
+        chatRoomBtn.classList.toggle('is-active', chatActive);
+        chatRoomBtn.setAttribute('aria-pressed', chatActive ? 'true' : 'false');
+    }
+    if (participantsBtn) {
+        participantsBtn.classList.toggle('is-active', participantsActive);
+        participantsBtn.setAttribute('aria-pressed', participantsActive ? 'true' : 'false');
+        participantsBtn.setAttribute('aria-expanded', participantsActive ? 'true' : 'false');
+    }
+}
+
 function shouldDockParticipantsPanel() {
     return !isMobileDevice && window.innerWidth > 1200;
 }
@@ -9966,6 +9986,7 @@ function syncParticipantsPanelVisibility(forceVisible = null) {
         msgerCPBtn.classList.remove('active');
         closeAllMsgerParticipantDropdownMenus();
         isParticipantsVisible = false;
+        syncChatToolbarButtons();
         return;
     }
 
@@ -9987,6 +10008,7 @@ function syncParticipantsPanelVisibility(forceVisible = null) {
     }
 
     isParticipantsVisible = shouldShow;
+    syncChatToolbarButtons();
     toggleMsgerParticipantsEmptyNotice();
 }
 
@@ -10418,13 +10440,12 @@ function hideChatRoomAndEmojiPicker() {
     elemDisplay(msgerCP, false);
     elemDisplay(msgerEmojiPicker, false);
     setColor(msgerEmojiBtn, '#FFFFFF');
-    chatRoomBtn.className = className.chatOn;
     isChatRoomVisible = false;
     isParticipantsVisible = false;
     isChatOpenedByParticipantsBtn = false;
     isChatEmojiVisible = false;
     setTippy(chatRoomBtn, 'Open the chat (C)', bottomButtonsPlacement);
-    if (chatRoomBtn && chatRoomBtn.setAttribute) chatRoomBtn.setAttribute('aria-pressed', 'false');
+    syncChatToolbarButtons();
     screenReaderAccessibility.announceMessage('Chat closed');
 }
 
@@ -15873,7 +15894,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.51',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.52',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: renderRoomTemplate('tpl-about-modal', {