[mirotalksfu] - add chat maximize-minimize

public/js/Room.js

@@ -188,6 +188,8 @@ function initClient() {
         setTippy('chatSaveButton', 'Save', 'bottom');
         setTippy('chatGhostButton', 'Toggle transparent background', 'bottom');
         setTippy('chatCloseButton', 'Close', 'right');
+        setTippy('chatMaxButton', 'Maximize', 'right');
+        setTippy('chatMinButton', 'Minimize', 'right');
         setTippy('participantsCloseBtn', 'Close', 'left');
         setTippy('participantsSaveBtn', 'Save participants info', 'right');
     }
@@ -755,9 +757,10 @@ function roomIsReady() {
     show(chatCleanTextButton);
     show(chatPasteButton);
     show(chatSendButton);
-    if (DetectRTC.isMobileDevice && BUTTONS.main.swapCameraButton) {
-        show(swapCameraButton);
-        setChatSize();
+    if (DetectRTC.isMobileDevice) {
+        BUTTONS.main.swapCameraButton && show(swapCameraButton);
+        rc.chatMaximize();
+        hide(chatMaxButton);
     } else {
         rc.makeDraggable(chatRoom, chatHeader);
         rc.makeDraggable(mySettings, mySettingsHeader);
@@ -769,6 +772,7 @@ function roomIsReady() {
         if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) {
             BUTTONS.main.startScreenButton && show(startScreenButton);
         }
+        BUTTONS.chat.chatMaxButton && show(chatMaxButton);
     }
     if (DetectRTC.browser.name != 'Safari') {
         document.onfullscreenchange = () => {
@@ -815,15 +819,6 @@ function setColor(elem, color) {
     elem.style.color = color;
 }
 
-// ####################################################
-// SET CHAT MOBILE
-// ####################################################
-
-function setChatSize() {
-    document.documentElement.style.setProperty('--msger-width', '99%');
-    document.documentElement.style.setProperty('--msger-height', '99%');
-}
-
 // ####################################################
 // SESSION TIMER
 // ####################################################
@@ -940,6 +935,12 @@ function handleButtons() {
     chatCloseButton.onclick = () => {
         rc.toggleChat();
     };
+    chatMaxButton.onclick = () => {
+        rc.chatMaximize();
+    };
+    chatMinButton.onclick = () => {
+        rc.chatMinimize();
+    };
     chatCleanTextButton.onclick = () => {
         rc.cleanMessage();
     };

public/js/RoomClient.js

@@ -2661,8 +2661,7 @@ class RoomClient {
         let chatRoom = this.getId('chatRoom');
         if (this.isChatOpen == false) {
             chatRoom.style.display = 'block';
-            chatRoom.style.top = '50%';
-            chatRoom.style.left = '50%';
+            this.chatCenter();
             this.sound('open');
             this.isChatOpen = true;
         } else {
@@ -2671,6 +2670,27 @@ class RoomClient {
         }
     }
 
+    chatMaximize() {
+        show(chatMinButton);
+        hide(chatMaxButton);
+        this.chatCenter();
+        document.documentElement.style.setProperty('--msger-width', '99%');
+        document.documentElement.style.setProperty('--msger-height', '99%');
+    }
+
+    chatMinimize() {
+        hide(chatMinButton);
+        show(chatMaxButton);
+        this.chatCenter();
+        document.documentElement.style.setProperty('--msger-width', '420px');
+        document.documentElement.style.setProperty('--msger-height', '680px');
+    }
+
+    chatCenter() {
+        chatRoom.style.top = '50%';
+        chatRoom.style.left = '50%';
+    }
+
     toggleChatEmoji() {
         this.getId('chatEmoji').classList.toggle('show');
         this.isChatEmojiOpen = this.isChatEmojiOpen ? false : true;

public/js/Rules.js

@@ -55,6 +55,7 @@ const BUTTONS = {
         ejectButton: true,
     },
     chat: {
+        chatMaxButton: true,
         chatSaveButton: true,
         chatEmojiButton: true,
         chatMarkdownButton: true,