keep whiteboard toolbar hidden on resize / slide change

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

@@ -76,6 +76,7 @@ class Presentation extends PureComponent {
       tldrawAPI: null,
       isPanning: false,
       tldrawIsMounting: true,
+      isToolbarVisible: true,
     };
 
     this.currentPresentationToastId = null;
@@ -91,6 +92,7 @@ class Presentation extends PureComponent {
     this.handleResize = this.handleResize.bind(this);
     this.setTldrawAPI = this.setTldrawAPI.bind(this);
     this.setIsPanning = this.setIsPanning.bind(this);
+    this.setIsToolbarVisible = this.setIsToolbarVisible.bind(this);
     this.handlePanShortcut = this.handlePanShortcut.bind(this);
     this.renderPresentationMenu = this.renderPresentationMenu.bind(this);
 
@@ -363,6 +365,12 @@ class Presentation extends PureComponent {
     }));
   }
 
+  setIsToolbarVisible(isVisible) {
+    this.setState({
+      isToolbarVisible: isVisible,
+    });
+  }
+
   setPresentationRef(ref) {
     this.refPresentationContainer = ref;
   }
@@ -609,7 +617,7 @@ class Presentation extends PureComponent {
       fullscreenElementId,
       layoutContextDispatch,
     } = this.props;
-    const { tldrawAPI } = this.state;
+    const { tldrawAPI, isToolbarVisible } = this.state;
 
     return (
       <PresentationMenu
@@ -618,6 +626,8 @@ class Presentation extends PureComponent {
         elementName={intl.formatMessage(intlMessages.presentationLabel)}
         elementId={fullscreenElementId}
         layoutContextDispatch={layoutContextDispatch}
+        setIsToolbarVisible={this.setIsToolbarVisible}
+        isToolbarVisible={isToolbarVisible}
       />
     );
   }
@@ -650,6 +660,7 @@ class Presentation extends PureComponent {
       tldrawIsMounting,
       isPanning,
       tldrawAPI,
+      isToolbarVisible,
     } = this.state;
 
     let viewBoxDimensions;
@@ -756,6 +767,7 @@ class Presentation extends PureComponent {
                   fullscreenRef={this.refPresentationContainer}
                   presentationId={currentPresentation?.id}
                   darkTheme={darkTheme}
+                  isToolbarVisible={isToolbarVisible}
                 />
                 {isFullscreen && <PollingContainer />}
               </div>

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

@@ -120,6 +120,8 @@ const PresentationMenu = (props) => {
     meetingName,
     isIphone,
     isRTL,
+    isToolbarVisible,
+    setIsToolbarVisible,
   } = props;
 
   const [state, setState] = useState({
@@ -271,29 +273,14 @@ const PresentationMenu = (props) => {
     
     const tools = document.querySelector('#TD-Tools');
     if (tools && (props.hasWBAccess || props.amIPresenter)){
-      const isVisible = tools.style.visibility == 'hidden' ? false : true;
-      const styles = document.querySelector('#TD-Styles').parentElement;
-      const option = document.querySelector('#WhiteboardOptionButton');
-      if (option) {
-        //When the RTL-LTR changed, the toolbar appears again,
-        // while the opacity of this button remains the same.
-        //So we need to reset the opacity here.
-        option.style.opacity = isVisible ? 'unset' : '0.2';
-      }
       menuItems.push(
         {
           key: 'list-item-toolvisibility',
           dataTest: 'toolVisibility',
-          label: formattedVisibilityLabel(isVisible),
-          icon: isVisible ? 'close' : 'pen_tool',
+          label: formattedVisibilityLabel(isToolbarVisible),
+          icon: isToolbarVisible ? 'close' : 'pen_tool',
           onClick: () => {
-            tools.style.visibility = isVisible ? 'hidden' : 'visible';
-            if (styles) {
-              styles.style.visibility = isVisible ? 'hidden' : 'visible';
-            }
-            if (option) {
-              option.style.opacity = isVisible ? '0.2' : 'unset';
-            }
+            setIsToolbarVisible(!isToolbarVisible);
           },
         },
       );

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

@@ -73,6 +73,7 @@ export default function Whiteboard(props) {
     isIphone,
     sidebarNavigationWidth,
     animations,
+    isToolbarVisible,
   } = props;
   const { pages, pageStates } = initDefaultPages(curPres?.pages.length || 1);
   const rDocument = React.useRef({
@@ -603,6 +604,7 @@ export default function Whiteboard(props) {
       const MENU_OFFSET = '48px';
       menu.style.position = 'relative';
       menu.style.height = presentationMenuHeight;
+      menu.setAttribute('id', 'TD-Styles-Parent');
       if (isRTL) {
         menu.style.left = MENU_OFFSET;
       } else {
@@ -1032,6 +1034,7 @@ export default function Whiteboard(props) {
             darkTheme,
             menuOffset,
             panSelected,
+            isToolbarVisible,
           }}
         />
       </Cursors>

bigbluebutton-html5/imports/ui/components/whiteboard/styles.js

@@ -94,6 +94,18 @@ const TldrawGlobalStyle = createGlobalStyle`
       cursor: default !important;
     }
   `}
+
+  ${({ isToolbarVisible }) => (!isToolbarVisible) && `
+    #TD-Tools {
+      visibility: hidden;
+    }
+    #TD-Styles-Parent {
+      visibility: hidden;
+    }
+    #WhiteboardOptionButton {
+      opacity: 0.2;
+    }
+  `}
 `;
 
 const EditableWBWrapper = styled.div`