From cc53fb58f2940ba5172f8254be643b5be4312c9f Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Fri, 10 May 2024 20:36:55 +0000
Subject: [PATCH] fix inconsistent zoom between live session and recording

---
 .../ui/components/whiteboard/component.jsx    | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
index c92665b6e4..f41e823743 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
@@ -468,15 +468,14 @@ export default function Whiteboard(props) {
 
   // change tldraw camera when slidePosition changes
   React.useEffect(() => {
+    const camera = tldrawAPI?.getPageState()?.camera;
     if (tldrawAPI && !isPresenter && curPageId && slidePosition) {
       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;
@@ -487,6 +486,28 @@ export default function Whiteboard(props) {
     }
   }, [curPageId, slidePosition]);
 
+  React.useEffect(() => {
+    if (isPresenter && slidePosition && !isMounting) {
+      const zoomFitSlide = calculateZoom(slidePosition?.width, slidePosition?.height);
+      const zoomCamera = (zoomFitSlide * zoomValue) / HUNDRED_PERCENT;
+      let viewedRegionW = SlideCalcUtil.calcViewedRegionWidth(
+        tldrawAPI?.viewport?.width, slidePosition?.width,
+      );
+      let viewedRegionH = SlideCalcUtil.calcViewedRegionHeight(
+        tldrawAPI?.viewport?.height, slidePosition?.height,
+      );
+
+      zoomSlide(
+        parseInt(curPageId, 10),
+        podId,
+        viewedRegionW,
+        viewedRegionH,
+        slidePosition?.x,
+        slidePosition?.y,
+      );
+    }
+  }, [curPageId]);
+
   // update zoom according to toolbar
   React.useEffect(() => {
     if (tldrawAPI && isPresenter && curPageId && slidePosition && zoom !== zoomValue) {