Merge pull request #19692 from KDSBrowne/bbb-19687

fix(whiteboard): Enable Slide Change By Arrow Keys

bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx

@@ -126,6 +126,7 @@ export default Whiteboard = React.memo(function Whiteboard(props) {
     hideViewersCursor,
     presentationHeight,
     presentationWidth,
+    skipToSlide,
   } = props;
 
   clearTldrawCache();
@@ -328,21 +329,57 @@ export default Whiteboard = React.memo(function Whiteboard(props) {
       tlEditorRef?.current?.history?.redo();
     };
 
+    const handleArrowPress = (event) => {
+      const currPageNum = parseInt(curPageIdRef.current);
+      const shapeSelected = tlEditorRef.current.selectedShapes.length > 0;
+      const changeSlide = (direction) => {
+        let newSlideNum = currPageNum + direction;
+        const outOfBounds = direction > 0
+          ? newSlideNum > currentPresentationPage?.totalPages
+          : newSlideNum < 1;
+
+        if (outOfBounds) return;
+
+        skipToSlide(newSlideNum);
+        setZoom(HUNDRED_PERCENT);
+        zoomChanger(HUNDRED_PERCENT);
+        zoomSlide(HUNDRED_PERCENT, HUNDRED_PERCENT, 0, 0);
+      };
+
+      if (!shapeSelected) {
+        if (event.keyCode === KEY_CODES.ARROW_RIGHT) {
+          changeSlide(1); // Move to the next slide
+        } else if (event.keyCode === KEY_CODES.ARROW_LEFT) {
+          changeSlide(-1); // Move to the previous slide
+        }
+      }
+    }
+
+    const handleUndoRedoOnCondition = (condition, action) => {
+      if (condition) {
+        action();
+      }
+    };
+
     const handleKeyDown = (event) => {
-      if ((event.ctrlKey && event.key === 'z' && !event.shiftKey) || (event.ctrlKey && event.shiftKey && event.key === 'Z')) {
+      const undoCondition = event.ctrlKey && event.key === 'z' && !event.shiftKey;
+      const redoCondition = event.ctrlKey && event.shiftKey && event.key === 'Z';
+
+      if ((undoCondition || redoCondition) && (isPresenter || hasWBAccessRef.current)) {
         event.preventDefault();
         event.stopPropagation();
 
         if (!undoRedoIntervalId) {
           undoRedoIntervalId = setInterval(() => {
-            if (event.ctrlKey && event.key === 'z' && !event.shiftKey) {
-              undo();
-            } else if (event.ctrlKey && event.shiftKey && event.key === 'Z') {
-              redo();
-            }
+            handleUndoRedoOnCondition(undoCondition, undo);
+            handleUndoRedoOnCondition(redoCondition, redo);
           }, 150);
         }
       }
+
+      if ((event.keyCode === KEY_CODES.ARROW_RIGHT || event.keyCode === KEY_CODES.ARROW_LEFT) && isPresenter) {
+        handleArrowPress(event)
+      }
     };
 
     const handleKeyUp = (event) => {
@@ -363,7 +400,6 @@ export default Whiteboard = React.memo(function Whiteboard(props) {
       }
     };
   }, [whiteboardRef.current]);
-  
 
   React.useEffect(() => {
     zoomValueRef.current = zoomValue;

bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx

@@ -35,6 +35,7 @@ import {
   PRESENTATION_SET_ZOOM,
   PRES_ANNOTATION_DELETE,
   PRES_ANNOTATION_SUBMIT,
+  PRESENTATION_SET_PAGE,
 } from '../presentation/mutations';
 
 const WHITEBOARD_CONFIG = Meteor.settings.public.whiteboard;
@@ -68,9 +69,24 @@ const WhiteboardContainer = (props) => {
   const hasWBAccess = whiteboardWriters?.some((writer) => writer.userId === Auth.userID);
 
   const [presentationSetZoom] = useMutation(PRESENTATION_SET_ZOOM);
+  const [presentationSetPage] = useMutation(PRESENTATION_SET_PAGE);
   const [presentationDeleteAnnotations] = useMutation(PRES_ANNOTATION_DELETE);
   const [presentationSubmitAnnotations] = useMutation(PRES_ANNOTATION_SUBMIT);
 
+  const setPresentationPage = (pageId) => {
+    presentationSetPage({
+      variables: {
+        presentationId,
+        pageId,
+      },
+    });
+  };
+
+  const skipToSlide = (slideNum) => {
+    const slideId = `${presentationId}/${slideNum}`;
+    setPresentationPage(slideId);
+  };
+
   const removeShapes = (shapeIds) => {
     presentationDeleteAnnotations({
       variables: {
@@ -259,6 +275,7 @@ const WhiteboardContainer = (props) => {
         hasWBAccess,
         whiteboardWriters,
         zoomChanger,
+        skipToSlide,
       }}
       {...props}
       meetingId={Auth.meetingID}