[mirotalksfu] - add pin chat button

public/js/Room.js

@@ -199,6 +199,7 @@ function initClient() {
         setTippy('chatSaveButton', 'Save', 'bottom');
         setTippy('chatGhostButton', 'Toggle transparent background', 'bottom');
         setTippy('chatCloseButton', 'Close', 'bottom');
+        setTippy('chatTogglePin', 'Toggle pin', 'bottom');
         setTippy('chatMaxButton', 'Maximize', 'bottom');
         setTippy('chatMinButton', 'Minimize', 'bottom');
         setTippy('participantsCloseBtn', 'Close', 'right');
@@ -950,6 +951,7 @@ function roomIsReady() {
     if (DetectRTC.isMobileDevice) {
         BUTTONS.main.swapCameraButton && show(swapCameraButton);
         rc.chatMaximize();
+        hide(chatTogglePin);
         hide(chatMaxButton);
         hide(chatMinButton);
     } else {
@@ -966,6 +968,7 @@ function roomIsReady() {
                 show(ScreenFpsDiv);
             }
         }
+        BUTTONS.chat.chatPinButton && show(chatTogglePin);
         BUTTONS.chat.chatMaxButton && show(chatMaxButton);
         BUTTONS.settings.pushToTalk && show(pushToTalkDiv);
     }
@@ -1153,6 +1156,9 @@ function handleButtons() {
     chatCloseButton.onclick = () => {
         rc.toggleChat();
     };
+    chatTogglePin.onclick = () => {
+        rc.toggleChatPin();
+    };
     chatMaxButton.onclick = () => {
         rc.chatMaximize();
     };
@@ -1632,7 +1638,7 @@ function handleSelects() {
         refreshMainButtonsToolTipPlacement();
     };
     pinVideoPosition.onchange = () => {
-        rc.togglePin(pinVideoPosition.value);
+        rc.toggleVideoPin(pinVideoPosition.value);
         lsSettings.pin_grid = pinVideoPosition.selectedIndex;
         lS.setSettings(lsSettings);
     };
@@ -1773,7 +1779,7 @@ function loadSettingsFromLocalStorage() {
     rc.handleVideoObjectFit(BtnVideoObjectFit.value);
     rc.handleVideoControls(BtnVideoControls.value);
     rc.changeBtnsBarPosition(BtnsBarPosition.value);
-    rc.togglePin(pinVideoPosition.value);
+    rc.toggleVideoPin(pinVideoPosition.value);
     refreshMainButtonsToolTipPlacement();
 }
 

public/js/RoomClient.js

@@ -176,6 +176,7 @@ class RoomClient {
         this.showChatOnMessage = true;
         this.isChatBgTransparent = false;
         this.isVideoPinned = false;
+        this.isChatPinned = false;
         this.pinnedVideoPlayerId = null;
         this.camVideo = false;
         this.camera = 'user';
@@ -2599,7 +2600,7 @@ class RoomClient {
                     cam.className = '';
                     cam.style.width = '100%';
                     cam.style.height = '100%';
-                    this.togglePin(pinVideoPosition.value);
+                    this.toggleVideoPin(pinVideoPosition.value);
                     this.videoPinMediaContainer.appendChild(cam);
                     this.videoPinMediaContainer.style.display = 'block';
                     this.pinnedVideoPlayerId = elemId;
@@ -2622,10 +2623,10 @@ class RoomClient {
         }
     }
 
-    togglePin(position) {
+    toggleVideoPin(position) {
         if (!this.isVideoPinned) return;
         switch (position) {
-            case 'top-end':
+            case 'top':
                 this.videoPinMediaContainer.style.top = '25%';
                 this.videoPinMediaContainer.style.width = '100%';
                 this.videoPinMediaContainer.style.height = '75%';
@@ -2690,6 +2691,9 @@ class RoomClient {
         this.videoMediaContainer.style.height = '100%';
         this.pinnedVideoPlayerId = null;
         this.isVideoPinned = false;
+        if (this.isChatPinned) {
+            this.chatPin();
+        }
     }
 
     adaptVideoObjectFit(index) {
@@ -2814,6 +2818,8 @@ class RoomClient {
         let chatRoom = this.getId('chatRoom');
         if (this.isChatOpen == false) {
             chatRoom.style.display = 'block';
+            hide(chatMinButton);
+            show(chatMaxButton);
             this.chatCenter();
             this.sound('open');
             this.isChatOpen = true;
@@ -2821,6 +2827,12 @@ class RoomClient {
             chatRoom.style.display = 'none';
             this.isChatOpen = false;
         }
+        if (this.isChatPinned) this.chatUnpin();
+    }
+
+    toggleChatPin() {
+        this.isChatPinned ? this.chatUnpin() : this.chatPin();
+        this.sound('click');
     }
 
     chatMaximize() {
@@ -2834,16 +2846,61 @@ class RoomClient {
     chatMinimize() {
         hide(chatMinButton);
         show(chatMaxButton);
-        this.chatCenter();
+        if (this.isChatPinned) {
+            this.chatPin();
+        } else {
+            this.chatCenter();
+            document.documentElement.style.setProperty('--msger-width', '420px');
+            document.documentElement.style.setProperty('--msger-height', '680px');
+        }
+    }
+
+    chatPin() {
+        if (!this.isVideoPinned) {
+            this.videoMediaContainer.style.top = 0;
+            this.videoMediaContainer.style.width = '75%';
+            this.videoMediaContainer.style.height = '100%';
+        }
+        this.chatPinned();
+        this.isChatPinned = true;
+        setColor(chatTogglePin, 'lime');
+        resizeVideoMedia();
+    }
+
+    chatUnpin() {
+        if (!this.isVideoPinned) {
+            this.videoMediaContainer.style.top = 0;
+            this.videoMediaContainer.style.right = null;
+            this.videoMediaContainer.style.width = '100%';
+            this.videoMediaContainer.style.height = '100%';
+        }
         document.documentElement.style.setProperty('--msger-width', '420px');
         document.documentElement.style.setProperty('--msger-height', '680px');
+        hide(chatMinButton);
+        show(chatMaxButton);
+        this.chatCenter();
+        this.isChatPinned = false;
+        setColor(chatTogglePin, 'white');
+        resizeVideoMedia();
     }
 
     chatCenter() {
+        chatRoom.style.position = 'fixed';
+        chatRoom.style.transform = 'translate(-50%, -50%)';
         chatRoom.style.top = '50%';
         chatRoom.style.left = '50%';
     }
 
+    chatPinned() {
+        chatRoom.style.position = 'absolute';
+        chatRoom.style.top = 0;
+        chatRoom.style.right = 0;
+        chatRoom.style.left = null;
+        chatRoom.style.transform = null;
+        document.documentElement.style.setProperty('--msger-width', '25%');
+        document.documentElement.style.setProperty('--msger-height', '100%');
+    }
+
     toggleChatEmoji() {
         this.getId('chatEmoji').classList.toggle('show');
         this.isChatEmojiOpen = this.isChatEmojiOpen ? false : true;

public/js/Rules.js

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

public/views/Room.html

@@ -669,11 +669,12 @@ access to use this app.
             </main>
         </section>
 
-        <section id="chatRoom" class="chat-room center fadein">
+        <section id="chatRoom" class="chat-room fadein">
             <section id="msger" class="msger">
                 <header id="chatHeader" class="chat-header">
                     <div class="chat-header-title">
                         <button id="chatCloseButton" class="fas fa-times"></button>
+                        <button id="chatTogglePin" class="hidden"><i class="fas fa-map-pin"></i></button>
                         <button id="chatMaxButton" class="hidden"><i class="fas fa-expand"></i></button>
                         <button id="chatMinButton" class="hidden"><i class="fas fa-compress"></i></button>
                         <div style="margin-left: 10px" class="title">