fix presentation toolbar tooltip positions

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

@@ -5,12 +5,12 @@ import browser from 'browser-detect';
 import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
 import Button from '/imports/ui/components/button/component';
 import { HUNDRED_PERCENT, MAX_PERCENT, STEP } from '/imports/utils/slideCalcUtils';
+import cx from 'classnames';
 import { styles } from './styles.scss';
 import ZoomTool from './zoom-tool/component';
 import FullscreenButton from '../../video-provider/fullscreen-button/component';
 import Tooltip from '/imports/ui/components/tooltip/component';
 
-
 const intlMessages = defineMessages({
   previousSlideLabel: {
     id: 'app.presentation.presentationToolbar.prevSlideLabel',
@@ -227,13 +227,14 @@ class PresentationToolbar extends Component {
               onClick={actions.previousSlideHandler}
               label={intl.formatMessage(intlMessages.previousSlideLabel)}
               hideLabel
-              className={styles.prevSlide}
+              className={cx(styles.prevSlide, styles.presentationBtn)}
               tooltipDistance={tooltipDistance}
             />
 
             <Tooltip
               tooltipDistance={tooltipDistance}
               title={intl.formatMessage(intlMessages.selectLabel)}
+              className={styles.presentationBtn}
             >
               <select
                 role="button"
@@ -264,7 +265,7 @@ class PresentationToolbar extends Component {
               onClick={actions.nextSlideHandler}
               label={intl.formatMessage(intlMessages.nextSlideLabel)}
               hideLabel
-              className={styles.skipSlide}
+              className={cx(styles.skipSlide, styles.presentationBtn)}
               tooltipDistance={tooltipDistance}
             />
           </div>
@@ -299,7 +300,7 @@ class PresentationToolbar extends Component {
                 : intl.formatMessage(intlMessages.fitToWidth)
               }
               hideLabel
-              className={styles.skipSlide}
+              className={cx(styles.skipSlide, styles.presentationBtn)}
               tooltipDistance={tooltipDistance}
             />
             {
@@ -310,6 +311,7 @@ class PresentationToolbar extends Component {
                   elementName={intl.formatMessage(intlMessages.presentationLabel)}
                   tooltipDistance={tooltipDistance}
                   dark
+                  className={styles.presentationBtn}
                 />
               )
             }

bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss

@@ -17,6 +17,10 @@
   padding-right: .5rem;
 }
 
+.presentationBtn {
+  position: relative;
+}
+
 .presentationZoomControls {
   justify-content: flex-end;
   padding-right: .5rem;

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

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import Button from '/imports/ui/components/button/component';
+import cx from 'classnames';
 import { styles } from '../styles.scss';
 import HoldButton from './holdButton/component';
 
@@ -214,7 +215,7 @@ class ZoomTool extends Component {
               icon="substract"
               onClick={() => { }}
               disabled={(zoomValue <= minBound)}
-              className={styles.prevSlide}
+              className={cx(styles.prevSlide, styles.presentationBtn)}
               tooltipDistance={tooltipDistance}
               hideLabel
             />
@@ -230,7 +231,7 @@ class ZoomTool extends Component {
             size="md"
             onClick={() => this.resetZoom()}
             label={intl.formatMessage(intlMessages.resetZoomLabel)}
-            className={styles.zoomPercentageDisplay}
+            className={cx(styles.zoomPercentageDisplay, styles.presentationBtn)}
             tooltipDistance={tooltipDistance}
             hideLabel
           />
@@ -251,7 +252,7 @@ class ZoomTool extends Component {
               icon="add"
               onClick={() => { }}
               disabled={(zoomValue >= maxBound)}
-              className={styles.skipSlide}
+              className={cx(styles.skipSlide, styles.presentationBtn)}
               tooltipDistance={tooltipDistance}
               hideLabel
             />

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

@@ -55,10 +55,6 @@ class Tooltip extends Component {
     this.onShow = this.onShow.bind(this);
     this.onHide = this.onHide.bind(this);
     this.handleEscapeHide = this.handleEscapeHide.bind(this);
-
-    this.state = {
-      enableAnimation: Settings.application.animations,
-    };
   }
 
   componentDidMount() {
@@ -67,11 +63,12 @@ class Tooltip extends Component {
       title,
       tooltipDistance,
     } = this.props;
-    const { enableAnimation } = this.state;
+
+    const { animations } = Settings.application;
 
     let distance = 0;
     if (tooltipDistance < 0) {
-      if (enableAnimation) distance = 10;
+      if (animations) distance = 10;
       else distance = 20;
     } else {
       distance = tooltipDistance;
@@ -81,8 +78,8 @@ class Tooltip extends Component {
       placement: position,
       performance: true,
       content: title,
-      delay: enableAnimation ? ANIMATION_DELAY : [ANIMATION_DELAY[0], 0],
+      delay: animations ? ANIMATION_DELAY : [ANIMATION_DELAY[0], 0],
-      duration: enableAnimation ? ANIMATION_DURATION : 0,
+      duration: animations ? ANIMATION_DURATION : 0,
       onShow: this.onShow,
       onHide: this.onHide,
       wait: Tooltip.wait,
@@ -92,41 +89,43 @@ class Tooltip extends Component {
       arrow: true,
       arrowType: 'sharp',
       aria: null,
-      animation: enableAnimation ? DEFAULT_ANIMATION : ANIMATION_NONE,
+      animation: animations ? DEFAULT_ANIMATION : ANIMATION_NONE,
     };
     this.tooltip = Tippy(`#${this.tippySelectorId}`, options);
   }
 
   componentDidUpdate() {
-    const { enableAnimation } = this.state;
     const { animations } = Settings.application;
     const { title } = this.props;
+    const elements = document.querySelectorAll('[id^="tippy-"]');
 
-    if (animations !== enableAnimation) {
+    Array.from(elements).filter((e) => {
-      const elements = document.querySelectorAll('[id^="tippy-"]');
+      const instance = e._tippy;
-      Array.from(elements).filter((e) => {
-        const instance = e._tippy;
 
-        if (!instance) return false;
+      if (!instance) return false;
 
-        const animation = animations ? DEFAULT_ANIMATION : ANIMATION_NONE;
+      const animation = animations ? DEFAULT_ANIMATION : ANIMATION_NONE;
 
-        if (animation === instance.props.animation) return false;
+      if (animation === instance.props.animation) return false;
 
-        return true;
+      return true;
-      }).forEach((e) => {
+    }).forEach((e) => {
-        const instance = e._tippy;
+      const instance = e._tippy;
-        instance.set({
+      instance.set({
-          animation: animations
+        animation: animations
-            ? DEFAULT_ANIMATION : ANIMATION_NONE,
+          ? DEFAULT_ANIMATION : ANIMATION_NONE,
-          distance: animations ? 10 : 20,
+        distance: animations ? 10 : 20,
-          delay: animations ? ANIMATION_DELAY : [ANIMATION_DELAY[0], 0],
+        delay: animations ? ANIMATION_DELAY : [ANIMATION_DELAY[0], 0],
-          duration: animations ? ANIMATION_DURATION : 0,
+        duration: animations ? ANIMATION_DURATION : 0,
-        });
       });
 
-      this.setEnableAnimation(animations);
+      // adjusts the distance for tooltips on the presentation toolbar
-    }
+      Object.entries(instance.reference.classList).reduce((acc, [key]) => {
+        if (!instance.reference.classList[key].match(/(presentationBtn)/)) return false;
+        instance.set({ distance: animations ? 35 : 45 });
+        return true;
+      });
+    });
 
     const elem = document.getElementById(this.tippySelectorId);
     if (elem._tippy) elem._tippy.set({ content: title });
@@ -140,10 +139,6 @@ class Tooltip extends Component {
     document.removeEventListener('keyup', this.handleEscapeHide);
   }
 
-  setEnableAnimation(enableAnimation) {
-    this.setState({ enableAnimation });
-  }
-
   handleEscapeHide(e) {
     if (e.keyCode !== ESCAPE) return;
     this.tooltip.tooltips[0].hide();

bigbluebutton-html5/imports/ui/components/video-provider/fullscreen-button/component.jsx

@@ -17,11 +17,13 @@ const propTypes = {
   handleFullscreen: PropTypes.func.isRequired,
   dark: PropTypes.bool,
   elementName: PropTypes.string,
+  className: PropTypes.string,
 };
 
 const defaultProps = {
   dark: false,
   elementName: '',
+  className: '',
 };
 
 const FullscreenButtonComponent = ({
@@ -30,6 +32,7 @@ const FullscreenButtonComponent = ({
   dark,
   elementName,
   tooltipDistance,
+  className,
 }) => {
   const formattedLabel = intl.formatMessage(
     intlMessages.fullscreenButton,
@@ -51,7 +54,7 @@ const FullscreenButtonComponent = ({
         onClick={handleFullscreen}
         label={formattedLabel}
         hideLabel
-        className={cx(styles.button, styles.fullScreenButton)}
+        className={cx(styles.button, styles.fullScreenButton, className)}
         tooltipDistance={tooltipDistance}
       />
     </div>