[mirotalksfu] - fix whiteboard & add lock functionality

public/js/Room.js

@@ -107,6 +107,7 @@ let recTimer = null;
 let recElapsedTime = null;
 
 let wbCanvas = null;
+let wbIsLock = false;
 let wbIsDrawing = false;
 let wbIsOpen = false;
 let wbIsRedoing = false;
@@ -178,6 +179,7 @@ function initClient() {
         setTippy('whiteboardSaveBtn', 'Save', 'bottom');
         setTippy('whiteboardEraserBtn', 'Eraser', 'bottom');
         setTippy('whiteboardCleanBtn', 'Clean', 'bottom');
+        setTippy('whiteboardLockButton', 'If enabled, participants cannot interact', 'right');
         setTippy('whiteboardCloseBtn', 'Close', 'right');
         setTippy('chatCleanTextButton', 'Clean', 'top');
         setTippy('chatPasteButton', 'Paste', 'top');
@@ -851,6 +853,10 @@ function roomIsReady() {
     }
 }
 
+function elemDisplay(element, display, mode = 'block') {
+    element.style.display = display ? mode : 'none';
+}
+
 function hide(elem) {
     elem.className = 'hidden';
 }
@@ -1137,6 +1143,10 @@ function handleButtons() {
     whiteboardCleanBtn.onclick = () => {
         confirmClearBoard();
     };
+    whiteboardLockButton.onchange = () => {
+        wbIsLock = !wbIsLock;
+        whiteboardAction(getWhiteboardAction(wbIsLock ? 'lock' : 'unlock'));
+    };
     whiteboardCloseBtn.onclick = () => {
         whiteboardAction(getWhiteboardAction('close'));
     };
@@ -2097,7 +2107,16 @@ function wbCanvasSaveImg() {
     saveDataToFile(dataURL, fileName);
 }
 
+function wbUpdate() {
+    if (wbIsOpen && (!isRulesActive || isPresenter)) {
+        console.log('IsPresenter: update whiteboard canvas to the participants in the room');
+        wbCanvasToJson();
+        whiteboardAction(getWhiteboardAction(wbIsLock ? 'lock' : 'unlock'));
+    }
+}
+
 function wbCanvasToJson() {
+    if (!isPresenter && wbIsLock) return;
     if (rc.thereIsParticipants()) {
         let wbCanvasJson = JSON.stringify(wbCanvas.toJSON());
         rc.socket.emit('wbCanvasToJson', wbCanvasJson);
@@ -2106,9 +2125,11 @@ function wbCanvasToJson() {
 
 function JsonToWbCanvas(json) {
     if (!wbIsOpen) toggleWhiteboard();
-
     wbCanvas.loadFromJSON(json);
     wbCanvas.renderAll();
+    if (!isPresenter && !wbCanvas.isDrawingMode && wbIsLock) {
+        wbDrawing(false);
+    }
 }
 
 function getWhiteboardAction(action) {
@@ -2164,6 +2185,24 @@ function whiteboardAction(data, emit = true) {
         case 'clear':
             wbCanvas.clear();
             break;
+        case 'lock':
+            if (!isPresenter) {
+                elemDisplay(whiteboardTitle, false);
+                elemDisplay(whiteboardOptions, false);
+                elemDisplay(whiteboardButton, false);
+                wbDrawing(false);
+                wbIsLock = true;
+            }
+            break;
+        case 'unlock':
+            if (!isPresenter) {
+                elemDisplay(whiteboardTitle, true, 'flex');
+                elemDisplay(whiteboardOptions, true, 'inline');
+                elemDisplay(whiteboardButton, true);
+                wbDrawing(true);
+                wbIsLock = false;
+            }
+            break;
         case 'close':
             if (wbIsOpen) toggleWhiteboard();
             break;
@@ -2171,6 +2210,14 @@ function whiteboardAction(data, emit = true) {
     }
 }
 
+function wbDrawing(status) {
+    wbCanvas.isDrawingMode = status; // Disable free drawing
+    wbCanvas.selection = status; // Disable object selection
+    wbCanvas.forEachObject(function (obj) {
+        obj.selectable = status; // Make all objects unselectable
+    });
+}
+
 // ####################################################
 // HANDLE PARTICIPANTS
 // ####################################################

public/js/RoomClient.js

@@ -1624,10 +1624,8 @@ class RoomClient {
 
     async consume(producer_id, peer_name, peer_info, type) {
         //
-        if (wbIsOpen && (!isRulesActive || isPresenter)) {
-            console.log('Update whiteboard canvas to the participants in the room');
-            wbCanvasToJson();
-        }
+        wbUpdate();
+
         this.getConsumeStream(producer_id, peer_info.peer_id, type).then(
             function ({ consumer, stream, kind }) {
                 console.log('CONSUMER MEDIA TYPE ----> ' + type);
@@ -1983,6 +1981,8 @@ class RoomClient {
             this.setTippy(ko.id, 'Eject', 'top-end');
         }
         console.log('[setVideoOff] Video-element-count', this.videoMediaContainer.childElementCount);
+        //
+        wbUpdate();
     }
 
     removeVideoOff(peer_id) {

public/js/Rules.js

@@ -68,6 +68,9 @@ const BUTTONS = {
     participantsList: {
         saveInfoButton: true,
     },
+    whiteboard: {
+        whiteboardLockButton: false,
+    },
     //...
 };
 
@@ -84,6 +87,7 @@ function handleRules(isPresenter) {
         BUTTONS.consumerVideo.ejectButton = false;
         BUTTONS.consumerVideo.muteAudioButton = false;
         BUTTONS.consumerVideo.muteVideoButton = false;
+        BUTTONS.whiteboard.whiteboardLockButton = false;
         //...
     } else {
         BUTTONS.participantsList.saveInfoButton = true;
@@ -95,6 +99,7 @@ function handleRules(isPresenter) {
         BUTTONS.consumerVideo.ejectButton = true;
         BUTTONS.consumerVideo.muteAudioButton = true;
         BUTTONS.consumerVideo.muteVideoButton = true;
+        BUTTONS.whiteboard.whiteboardLockButton = true;
         //...
     }
     // main. settings...
@@ -102,5 +107,8 @@ function handleRules(isPresenter) {
     BUTTONS.settings.unlockRoomButton ? show(unlockRoomButton) : hide(unlockRoomButton);
     BUTTONS.settings.lobbyButton ? show(lobbyButton) : hide(lobbyButton);
     BUTTONS.participantsList.saveInfoButton ? show(participantsSaveBtn) : hide(participantsSaveBtn);
+    BUTTONS.whiteboard.whiteboardLockButton
+        ? elemDisplay(whiteboardLockButton, true)
+        : elemDisplay(whiteboardLockButton, false, 'flex');
     //...
 }