Merge pull request #153 from hiroshisuga/dev2.6.0rc8_hidetoolbar

Dev2.6.0rc8 hidetoolbar

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

@@ -56,6 +56,14 @@ const intlMessages = defineMessages({
     description: 'used for aria whiteboard options button label',
     defaultMessage: 'Whiteboard',
   },
+  hideToolsDesc: {
+    id: 'app.presentation.presentationToolbar.hideToolsDesc',
+    description: 'Hide toolbar label',
+  },
+  showToolsDesc: {
+    id: 'app.presentation.presentationToolbar.showToolsDesc',
+    description: 'Show toolbar label',
+  },
 });
 
 const propTypes = {
@@ -126,6 +134,11 @@ const PresentationMenu = (props) => {
     ? intl.formatMessage(intlMessages.exitFullscreenLabel)
     : intl.formatMessage(intlMessages.fullscreenLabel)
   );
+  
+  const formattedVisibilityLabel = (visible) => (visible
+    ? intl.formatMessage(intlMessages.hideToolsDesc)
+    : intl.formatMessage(intlMessages.showToolsDesc)
+  );
 
   function renderToastContent() {
     const { loading, hasError } = state;
@@ -244,6 +257,35 @@ const PresentationMenu = (props) => {
         },
       );
     }
+    
+    const tools = document.querySelector('#TD-Tools');
+    //if (props.hasWBAccess || props.amIPresenter){
+    //  const isFocusMode = tldrawAPI?.settings.isFocusMode;
+    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');
+      menuItems.push(
+        {
+          key: 'list-item-toolvisibility',
+          dataTest: 'toolVisibility',
+          label: formattedVisibilityLabel(isVisible),
+          icon: isVisible ? 'close' : 'minus',
+          onClick: () => {
+            //with this API, the CSS setting (e.g. toolbar height) is reverted to the original tldraw setting.
+            //tldrawAPI?.setSetting('isFocusMode', !isFocusMode);
+            tools.style.visibility = isVisible ? 'hidden' : 'visible';
+            if (styles) {
+              styles.style.visibility = isVisible ? 'hidden' : 'visible';
+            }
+            if (option) {
+              //option.style.opacity = isFocusMode ? 'unset' : '0.2';
+              option.style.opacity = isVisible ? '0.2' : 'unset';
+            }
+          },
+        },
+      );
+    }
 
     return menuItems;
   }
@@ -283,7 +325,7 @@ const PresentationMenu = (props) => {
   }
 
   return (
-    <Styled.Right>
+    <Styled.Right id='WhiteboardOptionButton'>
       <BBBMenu
         trigger={(
           <TooltipContainer title={intl.formatMessage(intlMessages.optionsLabel)}>

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

@@ -6,6 +6,8 @@ import FullscreenService from '/imports/ui/components/common/fullscreen-button/s
 import Auth from '/imports/ui/services/auth';
 import Meetings from '/imports/api/meetings';
 import { layoutSelect, layoutDispatch } from '/imports/ui/components/layout/context';
+import WhiteboardService from '/imports/ui/components/whiteboard/service';
+import UserService from '/imports/ui/components/user-list/service';
 
 const PresentationMenuContainer = (props) => {
   const fullscreen = layoutSelect((i) => i.fullscreen);
@@ -34,6 +36,8 @@ export default withTracker((props) => {
   const isIphone = !!(navigator.userAgent.match(/iPhone/i));
   const meetingId = Auth.meetingID;
   const meetingObject = Meetings.findOne({ meetingId }, { fields: { 'meetingProp.name': 1 } });
+  const hasWBAccess = WhiteboardService.hasMultiUserAccess(WhiteboardService.getCurrentWhiteboardId(), Auth.userID);
+  const amIPresenter = UserService.isUserPresenter(Auth.userID);
 
   return {
     ...props,
@@ -41,6 +45,8 @@ export default withTracker((props) => {
     isIphone,
     isDropdownOpen: Session.get('dropdownOpen'),
     meetingName: meetingObject.meetingProp.name,
+    hasWBAccess,
+    amIPresenter,
   };
 })(PresentationMenuContainer);
 

bigbluebutton-html5/public/locales/en.json

@@ -235,6 +235,8 @@
     "app.presentation.presentationToolbar.fitToWidth": "Fit to width",
     "app.presentation.presentationToolbar.fitToPage": "Fit to page",
     "app.presentation.presentationToolbar.goToSlide": "Slide {0}",
+    "app.presentation.presentationToolbar.hideToolsDesc": "Hide Toolbars",
+    "app.presentation.presentationToolbar.showToolsDesc": "Show Toolbars",
     "app.presentation.placeholder": "There is no currently active presentation",
     "app.presentationUploder.title": "Presentation",
     "app.presentationUploder.message": "As a presenter you have the ability to upload any office document or PDF file.  We recommend PDF file for best results. Please ensure that a presentation is selected using the circle checkbox on the left hand side.",