Few changes at the reload button

Tweaked a bit at the button's style to give it a little distance from
the borders and replaced by a larger circle button for the icon to appear
a few bigger and keep the roundness of the surrinding design. Also moved
the suppress control to the button component so it solves for both external
player, generic component and any other component that decides to use it in
the future.

bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx

@@ -44,9 +44,6 @@ class VideoPlayer extends Component {
 
     this.throttleTimeout = null;
 
-    this.reloadPressed = false;
-    this.reloadTimeout = null;
-
     this.state = {
       muted: false,
       playing: false,
@@ -454,24 +451,11 @@ class VideoPlayer extends Component {
   }
 
   handleReload() {
-
-    if (this.reloadPressed) {
-      return;
-    }
-
     // increment key and force a re-render of the video component
     this.setState({key: this.state.key + 1});
 
     // hack, resize player
     this.resizeListener();
-
-    this.reloadPressed = true;
-
-    this.reloadTimeout = setTimeout(() => {
-      clearTimeout(this.reloadTimeout);
-      this.reloadTimeout = null;
-      this.reloadPressed = false;
-    }, 2000);
   }
 
   render() {

bigbluebutton-html5/imports/ui/components/reload-button/component.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
 import Button from '/imports/ui/components/button/component';
 import cx from 'classnames';
-import { styles } from './styles';
 
 const intlMessages = defineMessages({
   fullscreenButton: {
@@ -11,6 +10,15 @@ const intlMessages = defineMessages({
   },
 });
 
+import _ from 'lodash';
+import { styles } from './styles';
+
+const DEBOUNCE_TIMEOUT = 5000;
+const DEBOUNCE_OPTIONS = {
+  leading: true,
+  trailing: false,
+};
+
 const ReloadButtonComponent = ({
   intl,
   handleReload,
@@ -21,9 +29,10 @@ const ReloadButtonComponent = ({
       <Button
         color="primary"
         icon="refresh"
-        size="sm"
-        onClick={handleReload}
-        label="label"
+        size="md"
+        circle
+        onClick={_.debounce(handleReload, DEBOUNCE_TIMEOUT, DEBOUNCE_OPTIONS)}
+        label={label}
         hideLabel
         className={""}
       />

bigbluebutton-html5/imports/ui/components/reload-button/styles.scss

@@ -1,5 +1,6 @@
 .button {
-  top: 0;
+  top: 5px;
+  left: 5px;
   position: absolute;
   z-index: 2;
 }