Restore default slide position after disabling infinite wb

akka-bbb-apps/src/main/scala/org/bigbluebutton/core/db/PresPageDAO.scala

@@ -1,9 +1,11 @@
 package org.bigbluebutton.core.db
 
-import org.bigbluebutton.core.models.{ PresentationInPod, PresentationPage }
+import org.bigbluebutton.core.models.{PresentationInPod, PresentationPage}
 import PostgresProfile.api._
 import spray.json.JsValue
 import spray.json._
+import scala.util.{Success, Failure}
+import scala.concurrent.ExecutionContext
 
 case class PresPageDbModel(
     pageId:          String,
@@ -24,7 +26,7 @@ case class PresPageDbModel(
     maxImageWidth:   Int,
     maxImageHeight:  Int,
     uploadCompleted: Boolean,
-    infiniteCanvas: Boolean,
+    infiniteCanvas:  Boolean,
 )
 
 class PresPageDbTableDef(tag: Tag) extends Table[PresPageDbModel](tag, None, "pres_page") {
@@ -47,16 +49,21 @@ class PresPageDbTableDef(tag: Tag) extends Table[PresPageDbModel](tag, None, "pr
   val maxImageHeight = column[Int]("maxImageHeight")
   val uploadCompleted = column[Boolean]("uploadCompleted")
   val infiniteCanvas = column[Boolean]("infiniteCanvas")
-  //  val presentation = foreignKey("presentation_fk", presentationId, Presentations)(_.presentationId, onDelete = ForeignKeyAction.Cascade)
-  def * = (pageId, presentationId, num, urlsJson, content, slideRevealed, current, xOffset, yOffset, widthRatio, heightRatio, width, height, viewBoxWidth, viewBoxHeight, maxImageWidth, maxImageHeight, uploadCompleted, infiniteCanvas) <> (PresPageDbModel.tupled, PresPageDbModel.unapply)
+
+  def * = (
+    pageId, presentationId, num, urlsJson, content, slideRevealed, current, xOffset, yOffset, widthRatio, heightRatio, width, height, viewBoxWidth, viewBoxHeight, maxImageWidth, maxImageHeight, uploadCompleted, infiniteCanvas
+  ) <> (PresPageDbModel.tupled, PresPageDbModel.unapply)
 }
 
 object PresPageDAO {
+  implicit val ec: ExecutionContext = scala.concurrent.ExecutionContext.global
+
   implicit val mapFormat: JsonWriter[Map[String, String]] = new JsonWriter[Map[String, String]] {
     def write(m: Map[String, String]): JsValue = {
       JsObject(m.map { case (k, v) => k -> JsString(v) })
     }
   }
+
   def insert(presentationId: String, page: PresentationPage) = {
     DatabaseConnection.enqueue(
       TableQuery[PresPageDbTableDef].insertOrUpdate(
@@ -79,7 +86,7 @@ object PresPageDAO {
           maxImageWidth = 1440,
           maxImageHeight = 1080,
           uploadCompleted = page.converted,
-          infiniteCanvas = page.infiniteCanvas
+          infiniteCanvas = page.infiniteCanvas,
         )
       )
     )
@@ -88,8 +95,8 @@ object PresPageDAO {
   def setCurrentPage(presentation: PresentationInPod, pageId: String) = {
     DatabaseConnection.enqueue(
       sqlu"""UPDATE pres_page SET
-                "current" = (case when "pageId" = ${pageId} then true else false end),
-                "slideRevealed" = (case when "pageId" = ${pageId} then true else "slideRevealed" end)
+                "current" = (case when "pageId" = $pageId then true else false end),
+                "slideRevealed" = (case when "pageId" = $pageId then true else "slideRevealed" end)
                 WHERE "presentationId" = ${presentation.id}"""
     )
   }
@@ -124,4 +131,4 @@ object PresPageDAO {
       case Failure(e)            => DatabaseConnection.logger.debug(s"Error updating infiniteCanvas on PresPage: $e")
     }
   }
-}
+}

akka-bbb-apps/src/main/scala/org/bigbluebutton/core/db/PresPresentationDAO.scala

@@ -153,54 +153,35 @@ object PresPresentationDAO {
         ))
     )
 
-  def updatePages(presentation: PresentationInPod) = {
-    DatabaseConnection.enqueue(
-      TableQuery[PresPresentationDbTableDef]
-        .filter(_.presentationId === presentation.id)
-        .map(p => (p.downloadFileExtension, p.uploadInProgress, p.uploadCompleted, p.totalPages))
-        .update((
-          presentation.downloadFileExtension match {
-            case "" => None
-            case downloadFileExtension => Some(downloadFileExtension)
-          },
-          !presentation.uploadCompleted,
-          presentation.uploadCompleted,
-          presentation.numPages
-        ))
-    )
-
-    DatabaseConnection.db.run(DBIO.sequence(
-      for {
-        page <- presentation.pages
-      } yield {
-        TableQuery[PresPageDbTableDef].insertOrUpdate(
-          PresPageDbModel(
-            pageId = page._2.id,
-            presentationId = presentation.id,
-            num = page._2.num,
-            urlsJson = page._2.urls.toJson,
-            content = page._2.content,
-            slideRevealed = page._2.current,
-            current = page._2.current,
-            xOffset = page._2.xOffset,
-            yOffset = page._2.yOffset,
-            widthRatio = page._2.widthRatio,
-            heightRatio = page._2.heightRatio,
-            width = page._2.width,
-            height = page._2.height,
-            viewBoxWidth = 1,
-            viewBoxHeight = 1,
-            maxImageWidth = 1440,
-            maxImageHeight = 1080,
-            uploadCompleted = page._2.converted,
-            infiniteCanvas = page._2.infiniteCanvas
+    DatabaseConnection.enqueue(DBIO.sequence(
+        for {
+          page <- presentation.pages
+        } yield {
+          TableQuery[PresPageDbTableDef].insertOrUpdate(
+            PresPageDbModel(
+              pageId = page._2.id,
+              presentationId = presentation.id,
+              num = page._2.num,
+              urlsJson = page._2.urls.toJson,
+              content = page._2.content,
+              slideRevealed = page._2.current,
+              current = page._2.current,
+              xOffset = page._2.xOffset,
+              yOffset = page._2.yOffset,
+              widthRatio = page._2.widthRatio,
+              heightRatio = page._2.heightRatio,
+              width = page._2.width,
+              height = page._2.height,
+              viewBoxWidth = 1,
+              viewBoxHeight = 1,
+              maxImageWidth = 1440,
+              maxImageHeight = 1080,
+              uploadCompleted = page._2.converted,
+              infiniteCanvas = page._2.infiniteCanvas,
+            )
           )
-        )
-      }
-    ).transactionally).onComplete {
-      case Success(rowsAffected) => DatabaseConnection.logger.debug(s"$rowsAffected row(s) updated on PresentationPage table!")
-      case Failure(e) => DatabaseConnection.logger.debug(s"Error updating PresentationPage: $e")
-    }
+        }
+      ).transactionally)
 
     //Set current
     if (presentation.current) {
@@ -270,4 +251,4 @@ object PresPresentationDAO {
     )
   }
 
-}
+}

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

@@ -597,7 +597,7 @@ class Presentation extends PureComponent {
       hasPoll,
       currentPresentationPage,
     } = this.props;
-    const { zoom, isPanning } = this.state;
+    const { zoom, isPanning, tldrawAPI } = this.state;
 
     if (!currentSlide) return null;
 
@@ -621,6 +621,7 @@ class Presentation extends PureComponent {
           presentationIsOpen,
           userIsPresenter,
           currentPresentationPage,
+          tldrawAPI,
         }}
         setIsPanning={this.setIsPanning}
         isPanning={isPanning}

bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx

@@ -356,6 +356,9 @@ class PresentationToolbar extends PureComponent {
       setPresentationPageInfiniteCanvas,
       allowInfiniteCanvas,
       infiniteCanvasIcon,
+      resetSlide,
+      zoomChanger,
+      tldrawAPI,
     } = this.props;
 
     const { isMobile } = deviceInfo;
@@ -462,7 +465,14 @@ class PresentationToolbar extends PureComponent {
             customIcon={infiniteCanvasIcon(isInfiniteCanvas)}
             size="md"
             circle
-            onClick={() => { setPresentationPageInfiniteCanvas(!isInfiniteCanvas); }}
+            onClick={() => {
+              if (isInfiniteCanvas) {
+                tldrawAPI.setCamera({ x: 0, y: 0 });
+                resetSlide();
+                zoomChanger(100);
+              }
+              setPresentationPageInfiniteCanvas(!isInfiniteCanvas);
+            }}
             label={
               isInfiniteCanvas
                 ? intl.formatMessage(intlMessages.infiniteCanvasOff)

bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx

@@ -5,7 +5,7 @@ import FullscreenService from '/imports/ui/components/common/fullscreen-button/s
 import { useIsPollingEnabled } from '/imports/ui/services/features';
 import { PluginsContext } from '/imports/ui/components/components-data/plugin-context/context';
 import { POLL_CANCEL, POLL_CREATE } from '/imports/ui/components/poll/mutations';
-import { PRESENTATION_SET_PAGE, PRESENTATION_SET_PAGE_INFINITE_CANVAS } from '../mutations';
+import { PRESENTATION_SET_ZOOM, PRESENTATION_SET_PAGE, PRESENTATION_SET_PAGE_INFINITE_CANVAS } from '../mutations';
 import PresentationToolbar from './component';
 import Session from '/imports/ui/services/storage/in-memory';
 
@@ -99,9 +99,25 @@ const PresentationToolbarContainer = (props) => {
 
   const [stopPoll] = useMutation(POLL_CANCEL);
   const [createPoll] = useMutation(POLL_CREATE);
+  const [presentationSetZoom] = useMutation(PRESENTATION_SET_ZOOM);
   const [presentationSetPage] = useMutation(PRESENTATION_SET_PAGE);
   const [presentationSetPageInfiniteCanvas] = useMutation(PRESENTATION_SET_PAGE_INFINITE_CANVAS);
 
+  const resetSlide = () => {
+    const { pageId, num } = currentPresentationPage;
+    presentationSetZoom({
+      variables: {
+        presentationId,
+        pageId,
+        pageNum: num,
+        xOffset: 0,
+        yOffset: 0,
+        widthRatio: 100,
+        heightRatio: 100,
+      },
+    });
+  };
+
   const endCurrentPoll = () => {
     if (hasPoll) stopPoll();
   };
@@ -191,6 +207,7 @@ const PresentationToolbarContainer = (props) => {
           currentSlide,
           currentPresentationPage,
           infiniteCanvasIcon,
+          resetSlide,
         }}
       />
     );

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import PropTypes from "prop-types";
-import { useRef, useCallback } from "react";
+import { useEffect, useRef, useCallback } from "react";
 import { debounce, isEqual } from "radash";
 import {
   Tldraw,
@@ -67,6 +67,14 @@ const determineViewerFitToWidth = (currentPresentationPage) => {
   );
 };
 
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
 const defaultUser = {
   userId: '',
 };
@@ -124,7 +132,6 @@ const Whiteboard = React.memo(function Whiteboard(props) {
 
   const [tlEditor, setTlEditor] = React.useState(null);
   const [isMounting, setIsMounting] = React.useState(true);
-  const [initialZoomSet, setInitialZoomSet] = React.useState(false);
   const [initialViewBoxWidth, setInitialViewBoxWidth] = React.useState(null);
   const [initialViewBoxHeight, setInitialViewBoxHeight] = React.useState(null);
 
@@ -165,6 +172,8 @@ const Whiteboard = React.memo(function Whiteboard(props) {
   const customShapeUtils = [PollShapeUtil];
   const customTools = [NoopTool];
 
+  const presenterChanged = usePrevious(isPresenter) !== isPresenter;
+
   let clipboardContent = null;
   let isPasting = false;
   let pasteTimeout = null;
@@ -536,7 +545,7 @@ const Whiteboard = React.memo(function Whiteboard(props) {
         const { updated } = changes;
         const { "pointer:pointer": pointers } = updated;
 
-        if ((isPresenter || hasWBAccessRef.current) && pointers) {
+        if ((isPresenterRef.current || hasWBAccessRef.current) && pointers) {
           const [prevPointer, nextPointer] = pointers;
           updateCursorPosition(nextPointer?.x, nextPointer?.y);
         }
@@ -548,7 +557,7 @@ const Whiteboard = React.memo(function Whiteboard(props) {
           const [prevCam, nextCam] = cameras;
           const panned = prevCam.x !== nextCam.x || prevCam.y !== nextCam.y;
 
-          if (panned && isPresenter) {
+          if (panned && isPresenterRef.current) {
             let viewedRegionW = SlideCalcUtil.calcViewedRegionWidth(
               editor?.getViewportPageBounds()?.w,
               currentPresentationPage?.scaledWidth
@@ -620,7 +629,7 @@ const Whiteboard = React.memo(function Whiteboard(props) {
 
       editor.store.onBeforeChange = (prev, next, source) => {
         if (next?.typeName === "instance_page_state") {
-          if (isPresenter || isModeratorRef.current) return next;
+          if (isPresenterRef.current || isModeratorRef.current) return next;
 
           // Filter selectedShapeIds based on shape owner
           if (next.selectedShapeIds.length > 0 && !isEqual(prev.selectedShapeIds, next.selectedShapeIds)) {
@@ -1038,7 +1047,6 @@ const Whiteboard = React.memo(function Whiteboard(props) {
 
         const tldrawZoom = initialZoom;
         initialZoomRef.current = initialZoom;
-        setInitialZoomSet(true);
         prevZoomValueRef.current = zoomValue;
       }
     }, CAMERA_UPDATE_DELAY);
@@ -1290,6 +1298,10 @@ const Whiteboard = React.memo(function Whiteboard(props) {
   }, [curPageId]);
 
   const adjustCameraOnMount = (includeViewerLogic = true) => {
+    if (presenterChanged) {
+      localStorage.removeItem('initialViewBoxWidth');
+    }
+
     const storedWidth = localStorage.getItem('initialViewBoxWidth');
     if (storedWidth) {
       initialViewBoxWidthRef.current = parseFloat(storedWidth);

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

@@ -83,6 +83,7 @@ const WhiteboardContainer = (props) => {
 
   const curPageNum = currentPresentationPage?.num;
   const curPageId = currentPresentationPage?.pageId;
+  const isInfiniteCanvas = currentPresentationPage?.infiniteCanvas;
   const curPageIdRef = useRef();
 
   React.useEffect(() => {
@@ -351,6 +352,7 @@ const WhiteboardContainer = (props) => {
         locale: SettingsService?.application?.locale,
         darkTheme: SettingsService?.application?.darkTheme,
         selectedLayout: SettingsService?.application?.selectedLayout,
+        isInfiniteCanvas,
       }}
       {...props}
       meetingId={Auth.meetingID}