Merge pull request bigbluebutton#18754 from gustavotrott/merge-27-int…

…o-develop-11set

Merge 2.7 into Develop

SECURITY.md

@@ -6,14 +6,14 @@ We actively support BigBlueButton through the community forums and through secur
 
 | Version | Supported          |
 | ------- | ------------------ |
-| 2.4.x (or earlier)  | :x:    |
-| 2.5.x   | :white_check_mark: |
+| 2.5.x (or earlier)  | :x:    |
 | 2.6.x   | :white_check_mark: |
-| 2.7.x   | :x: |
+| 2.7.x   | :white_check_mark: |
+| 2.8.x   | :x: |
 
-We have released 2.6 to the community and are going to support both 2.5 and 2.6 together for the coming months (while we're actively developing the next release).  Also, BigBlueButton 2.4 is now end of life.
+We have released 2.7 to the community and are going to support both 2.6 and 2.7 together for the coming months (while we're actively developing the next release).  Also, BigBlueButton 2.5 is now end of life.
 
-As such, we recommend that all administrators deploy 2.6 going forward.  You'll find [many improvements](https://docs.bigbluebutton.org/2.6/new.html) in this newer version.
+As such, we recommend that all administrators deploy 2.7 going forward.  You'll find [many improvements](https://docs.bigbluebutton.org/2.7/new-features) in this newer version.
 
 ## Reporting a Vulnerability
 

bigbluebutton-html5/imports/ui/components/actions-bar/reactions-button/component.jsx

@@ -124,9 +124,18 @@ const ReactionsButton = (props) => {
     customStyles: {...actionCustomStyles, width: 'auto'},
   });
 
-  const icon = currentUserReaction === 'none' ? 'hand' : null;
+  const icon = !raiseHand && currentUserReaction === 'none' ? 'hand' : null;
   const currentUserReactionEmoji = reactions.find(({ native }) => native === currentUserReaction);
-  const customIcon = !icon ? <Emoji key={currentUserReactionEmoji?.id} emoji={{ id: currentUserReactionEmoji?.id }} {...emojiProps} /> : null;
+
+  let customIcon = null;
+
+  if (raiseHand) {
+    customIcon = <Emoji key="hand" emoji={{ id: 'hand' }} {...emojiProps} />;
+  } else {
+    if (!icon) {
+      customIcon = <Emoji key={currentUserReactionEmoji?.id} emoji={{ id: currentUserReactionEmoji?.id }} {...emojiProps} />;
+    }
+  }
 
   return (
     <BBBMenu

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TldrawApp, Tldraw } from '@tldraw/tldraw';
-import SlideCalcUtil, { HUNDRED_PERCENT } from '/imports/utils/slideCalcUtils';
+import SlideCalcUtil, { HUNDRED_PERCENT, MAX_PERCENT } from '/imports/utils/slideCalcUtils';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { Utils } from '@tldraw/core';
 import Cursors from './cursors/container';
@@ -93,11 +93,13 @@ export default function Whiteboard(props) {
   const [history, setHistory] = React.useState(null);
   const [zoom, setZoom] = React.useState(HUNDRED_PERCENT);
   const [tldrawZoom, setTldrawZoom] = React.useState(1);
+  const zoomValueRef = React.useRef(zoomValue);
   const [isMounting, setIsMounting] = React.useState(true);
   const prevShapes = usePrevious(shapes);
   const prevSlidePosition = usePrevious(slidePosition);
   const prevFitToWidth = usePrevious(fitToWidth);
   const prevSvgUri = usePrevious(svgUri);
+  const prevPageId = usePrevious(curPageId);
   const language = mapLanguage(Settings?.application?.locale?.toLowerCase() || 'en');
   const [currentTool, setCurrentTool] = React.useState(null);
   const [currentStyle, setCurrentStyle] = React.useState({});
@@ -115,6 +117,10 @@ export default function Whiteboard(props) {
     };
   }, []);
 
+  React.useEffect(() => {
+    zoomValueRef.current = zoomValue;
+  }, [zoomValue]);
+
   const setSafeTLDrawAPI = (api) => {
     if (isMountedRef.current) {
       setTldrawAPI(api);
@@ -219,8 +225,15 @@ export default function Whiteboard(props) {
       tldrawAPI?.completeSession?.();
     }
   };
-
   const handleWheelEvent = (event) => {
+    if ((zoomValueRef.current >= MAX_PERCENT && event.deltaY < 0)
+      || (zoomValueRef.current <= HUNDRED_PERCENT && event.deltaY > 0))
+    {
+      event.stopPropagation();
+      event.preventDefault();
+      return window.dispatchEvent(new Event('resize'));
+    }
+
     if (!event.ctrlKey) {
       // Prevent the event from reaching the tldraw library
       event.stopPropagation();
@@ -461,6 +474,19 @@ export default function Whiteboard(props) {
       const newZoom = calculateZoom(slidePosition.viewBoxWidth, slidePosition.viewBoxHeight);
       tldrawAPI?.setCamera([slidePosition.x, slidePosition.y], newZoom, 'zoomed');
     }
+
+    const camera = tldrawAPI?.getPageState()?.camera;
+    if (isPresenter && slidePosition && camera) {
+      const zoomFitSlide = calculateZoom(slidePosition.width, slidePosition.height);
+      const zoomCamera = (zoomFitSlide * zoomValue) / HUNDRED_PERCENT;
+      let zoomToolbar = Math.round(
+        ((HUNDRED_PERCENT * camera.zoom) / zoomFitSlide) * 100,
+      ) / 100;
+      if ((zoom !== zoomToolbar) && (curPageId && curPageId !== prevPageId)) {
+        setZoom(zoomToolbar);
+        zoomChanger(zoomToolbar);
+      }
+    }
   }, [curPageId, slidePosition]);
 
   // update zoom according to toolbar
@@ -612,6 +638,11 @@ export default function Whiteboard(props) {
           tldrawAPI?.selectAll();
         }
         break;
+      case KEY_CODES.ARROW_DOWN:
+      case KEY_CODES.ARROW_UP:
+        event.preventDefault();
+        event.stopPropagation();
+        break;
       default:
     }
   };
@@ -761,11 +792,6 @@ export default function Whiteboard(props) {
         camera.point[1] = 0;
       }
 
-      if (camera.point[0] === 0 && camera.point[1] === 0) {
-        const newZoom = calculateZoom(slidePosition.viewBoxWidth, slidePosition.viewBoxHeight);
-        e?.setCamera([camera.point[0], camera.point[1]], newZoom);
-      }
-
       const zoomFitSlide = calculateZoom(slidePosition.width, slidePosition.height);
       if (camera.zoom < zoomFitSlide) {
         camera.zoom = zoomFitSlide;