From 399b9e805d2138a3395bcf979f673a115339d86c Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Sun, 20 Aug 2023 00:21:03 +0000
Subject: [PATCH] handle slide change with fit to width

---
 .../presentation-toolbar/component.jsx        | 36 +++++++++++++++++--
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
index 32a7301453..15a1f68768 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
@@ -93,6 +93,12 @@ class PresentationToolbar extends PureComponent {
   constructor(props) {
     super(props);
 
+    this.state = {
+      wasFTWActive: false,
+    };
+
+    this.setWasActive = this.setWasActive.bind(this);
+    this.handleFTWSlideChange = this.handleFTWSlideChange.bind(this);
     this.handleSkipToSlideChange = this.handleSkipToSlideChange.bind(this);
     this.change = this.change.bind(this);
     this.renderAriaDescs = this.renderAriaDescs.bind(this);
@@ -108,18 +114,40 @@ class PresentationToolbar extends PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    const { zoom, setIsPanning, fitToWidth } = this.props;
+    const { zoom, setIsPanning, fitToWidth, fitToWidthHandler, currentSlideNum } = this.props;
+    const { wasFTWActive } = this.state;
+
     if (zoom <= HUNDRED_PERCENT && zoom !== prevProps.zoom && !fitToWidth) setIsPanning();
+
+    if ((prevProps?.currentSlideNum !== currentSlideNum) && (!fitToWidth && wasFTWActive)) {
+      setTimeout(() => {
+        fitToWidthHandler();
+        this.setWasActive(false);
+      }, 150)
+    }
   }
 
   componentWillUnmount() {
     document.removeEventListener('keydown', this.switchSlide);
   }
 
+  setWasActive(wasFTWActive) {
+    this.setState({ wasFTWActive });
+  }
+
+  handleFTWSlideChange() {
+    const { fitToWidth, fitToWidthHandler } = this.props;
+    if (fitToWidth) {
+      fitToWidthHandler();
+      this.setWasActive(fitToWidth);
+    }
+  }
+
   handleSkipToSlideChange(event) {
     const { skipToSlide, podId } = this.props;
     const requestedSlideNum = Number.parseInt(event.target.value, 10);
 
+    this.handleFTWSlideChange();
     if (event) event.currentTarget.blur();
     skipToSlide(requestedSlideNum, podId);
   }
@@ -161,9 +189,10 @@ class PresentationToolbar extends PureComponent {
 
   nextSlideHandler(event) {
     const {
-      nextSlide, currentSlideNum, numberOfSlides, podId, endCurrentPoll,
+      nextSlide, currentSlideNum, numberOfSlides, podId, endCurrentPoll
     } = this.props;
 
+    this.handleFTWSlideChange();
     if (event) event.currentTarget.blur();
     endCurrentPoll();
     nextSlide(currentSlideNum, numberOfSlides, podId);
@@ -171,9 +200,10 @@ class PresentationToolbar extends PureComponent {
 
   previousSlideHandler(event) {
     const {
-      previousSlide, currentSlideNum, podId, endCurrentPoll,
+      previousSlide, currentSlideNum, podId, endCurrentPoll
     } = this.props;
 
+    this.handleFTWSlideChange();
     if (event) event.currentTarget.blur();
     endCurrentPoll();
     previousSlide(currentSlideNum, podId);