[mirotalksfu] - improve whiteboard lock/unlock, update dep

public/js/Room.js

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.90
+ * @version 1.4.91
  *
  */
 
@@ -309,7 +309,8 @@ function initClient() {
         setTippy('whiteboardObjectBtn', 'Object mode', 'bottom');
         setTippy('whiteboardUndoBtn', 'Undo', 'bottom');
         setTippy('whiteboardRedoBtn', 'Redo', 'bottom');
-        setTippy('whiteboardLockButton', 'If enabled, participants cannot interact', 'right');
+        setTippy('whiteboardLockBtn', 'If Locked, participants cannot interact', 'right');
+        setTippy('whiteboardUnlockBtn', 'If Locked, participants cannot interact', 'right');
         setTippy('whiteboardCloseBtn', 'Close', 'right');
         setTippy('chatCleanTextButton', 'Clean', 'top');
         setTippy('chatPasteButton', 'Paste', 'top');
@@ -1795,13 +1796,15 @@ function handleButtons() {
     whiteboardCleanBtn.onclick = () => {
         confirmClearBoard();
     };
-    whiteboardLockButton.onchange = () => {
-        wbIsLock = !wbIsLock;
-        whiteboardAction(getWhiteboardAction(wbIsLock ? 'lock' : 'unlock'));
-    };
     whiteboardCloseBtn.onclick = () => {
         whiteboardAction(getWhiteboardAction('close'));
     };
+    whiteboardLockBtn.onclick = () => {
+        toggleLockUnlockWhiteboard();
+    };
+    whiteboardUnlockBtn.onclick = () => {
+        toggleLockUnlockWhiteboard();
+    };
     participantsSaveBtn.onclick = () => {
         saveRoomPeers();
     };
@@ -3520,6 +3523,21 @@ function confirmClearBoard() {
     });
 }
 
+function toggleLockUnlockWhiteboard() {
+    wbIsLock = !wbIsLock;
+
+    const btnToShow = wbIsLock ? whiteboardLockBtn : whiteboardUnlockBtn;
+    const btnToHide = wbIsLock ? whiteboardUnlockBtn : whiteboardLockBtn;
+    const btnColor = wbIsLock ? 'red' : 'white';
+    const action = wbIsLock ? 'lock' : 'unlock';
+
+    show(btnToShow);
+    hide(btnToHide);
+    setColor(whiteboardLockBtn, btnColor);
+
+    whiteboardAction(getWhiteboardAction(action));
+}
+
 function whiteboardAction(data, emit = true) {
     if (emit) {
         if (rc.thereAreParticipants()) {
@@ -4093,7 +4111,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.4.90',
+        title: 'WebRTC SFU v1.4.91',
         html: `
         <br />
         <div id="about">

public/js/RoomClient.js

@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.90
+ * @version 1.4.91
  *
  */
 

public/js/Rules.js

@@ -205,9 +205,7 @@ function handleRules(isPresenter) {
         hide(roomHostOnlyRecording);
     }
     BUTTONS.participantsList.saveInfoButton ? show(participantsSaveBtn) : hide(participantsSaveBtn);
-    BUTTONS.whiteboard.whiteboardLockButton
-        ? elemDisplay('whiteboardLockButton', true)
-        : elemDisplay('whiteboardLockButton', false, 'flex');
+    BUTTONS.whiteboard.whiteboardLockButton ? show(whiteboardUnlockBtn) : hide(whiteboardUnlockBtn);
     //...
 }
 

public/views/Room.html

@@ -1183,9 +1183,8 @@ access to use this app.
             <header id="whiteboardHeader" class="whiteboard-header">
                 <div id="whiteboardTitle" class="whiteboard-header-title">
                     <button id="whiteboardCloseBtn" class="fas fa-times"></button>
-                    <div class="form-check form-switch form-switch-md">
-                        <input id="whiteboardLockButton" class="form-check-input" type="checkbox" />
-                    </div>
+                    <button id="whiteboardUnlockBtn" class="fa-solid fa-lock-open hidden"></button>
+                    <button id="whiteboardLockBtn" class="fa-solid fa-lock hidden"></button>
                 </div>
                 <div id="whiteboardOptions" class="whiteboard-header-options">
                     <button id="whiteboardGhostButton" class="fas fa-circle-half-stroke"></button>