Merge pull request #19583 from KDSBrowne/bbb-19580

fix(whiteboard): Ensure Only Presenter Has Ability to Pan Canvas
bigbluebutton · Mar 12, 2024 · f76731f · f76731f
2 parents 7531623 + e30ff2f
commit f76731f
Showing 1 changed file with 36 additions and 2 deletions.
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
@@ -154,6 +154,7 @@ export default Whiteboard = React.memo(function Whiteboard(props) {
   const isMouseDownRef = useRef(false);
   const isMountedRef = useRef(false);
   const isWheelZoomRef = useRef(false);
+  const isPresenterRef = useRef(isPresenter);
   const whiteboardIdRef = React.useRef(whiteboardId);
   const curPageIdRef = React.useRef(curPageId);
   const hasWBAccessRef = React.useRef(hasWBAccess);
@@ -189,6 +190,29 @@ export default Whiteboard = React.memo(function Whiteboard(props) {
     whiteboardIdRef.current
   );
 
+  const handleKeyDown = (event) => {
+    if (!isPresenterRef.current) {
+      if (!hasWBAccessRef.current || (hasWBAccessRef.current && (!tlEditorRef.current.editingShape))) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    if (!isEqual(isPresenterRef.current, isPresenter)) {
+      isPresenterRef.current = isPresenter;
+    }
+  }, [isPresenter]);
+
+  React.useEffect(() => {
+    if (!isEqual(hasWBAccessRef.current, hasWBAccess)) {
+      hasWBAccessRef.current = hasWBAccess;
+    }
+  }, [hasWBAccess]);
+
+
   React.useEffect(() => {
     if (!isEqual(prevShapesRef.current, shapes)) {
       prevShapesRef.current = shapes;
@@ -202,6 +226,16 @@ export default Whiteboard = React.memo(function Whiteboard(props) {
     }
   }, [otherCursors]);
 
+  React.useEffect(() => {
+    if (whiteboardRef.current) {
+      whiteboardRef.current.addEventListener('keydown', handleKeyDown, { capture: true });
+    }
+
+    return () => {
+      whiteboardRef.current?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [whiteboardRef.current]);
+
   const { shapesToAdd, shapesToUpdate, shapesToRemove } = React.useMemo(() => {
     const selectedShapeIds = tlEditorRef.current?.selectedShapeIds || [];
     const localShapes = tlEditorRef.current?.currentPageShapes;
@@ -859,7 +893,7 @@ export default Whiteboard = React.memo(function Whiteboard(props) {
 
           const panned = prevCam.x !== nextCam.x || prevCam.y !== nextCam.y;
 
-          if (panned) {
+          if (panned && isPresenter) {
             let viewedRegionW = SlideCalcUtil.calcViewedRegionWidth(
               editor?.viewportPageBounds.width,
               currentPresentationPage?.scaledWidth
@@ -960,7 +994,7 @@ export default Whiteboard = React.memo(function Whiteboard(props) {
           next?.id?.includes("camera") &&
           (prev.x !== next.x || prev.y !== next.y);
         const zoomed = next?.id?.includes("camera") && prev.z !== next.z;
-        if (panned && isPresenter) {
+        if (panned) {
           // // limit bounds
           if (
             editor?.viewportPageBounds?.maxX >