Desktop share button moved to the action bar component

bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
-import browser from 'browser-detect';
 import Button from '/imports/ui/components/button/component';
 import Dropdown from '/imports/ui/components/dropdown/component';
 import DropdownTrigger from '/imports/ui/components/dropdown/trigger/component';
@@ -83,9 +82,6 @@ class ActionsDropdown extends Component {
   getAvailableActions() {
     const {
       intl,
-      handleShareScreen,
-      handleUnshareScreen,
-      isVideoBroadcasting,
       isUserPresenter,
       isUserModerator,
       allowStartStopRecording,
@@ -94,10 +90,6 @@ class ActionsDropdown extends Component {
       toggleRecording,
     } = this.props;
 
-    const BROWSER_RESULTS = browser();
-    const isMobileBrowser = BROWSER_RESULTS.mobile ||
-      BROWSER_RESULTS.os.includes('Android'); // mobile flag doesn't always work
-
     return _.compact([
       (isUserPresenter ?
         <DropdownListItem
@@ -108,18 +100,6 @@ class ActionsDropdown extends Component {
           onClick={this.handlePresentationClick}
         />
         : null),
-      (Meteor.settings.public.kurento.enableScreensharing &&
-        !isMobileBrowser && isUserPresenter ?
-          <DropdownListItem
-            icon="desktop"
-            label={intl.formatMessage(isVideoBroadcasting ?
-            intlMessages.stopDesktopShareLabel : intlMessages.desktopShareLabel)}
-            description={intl.formatMessage(isVideoBroadcasting ?
-            intlMessages.stopDesktopShareDesc : intlMessages.desktopShareDesc)}
-            key={this.videoItemId}
-            onClick={isVideoBroadcasting ? handleUnshareScreen : handleShareScreen}
-          />
-        : null),
       (record && isUserModerator && allowStartStopRecording ?
         <DropdownListItem
           icon="record"

bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { styles } from './styles.scss';
 import EmojiSelect from './emoji-select/component';
+import DesktopShare from './desktop-share/component';
 import ActionsDropdown from './actions-dropdown/component';
 import AudioControlsContainer from '../audio/audio-controls/container';
 import JoinVideoOptionsContainer from '../video-provider/video-menu/container';
@@ -38,15 +39,12 @@ class ActionsBar extends React.PureComponent {
         <div className={styles.left}>
           <ActionsDropdown {...{
             isUserPresenter,
-            handleShareScreen,
-            handleUnshareScreen,
-            isVideoBroadcasting,
             isUserModerator,
             allowStartStopRecording,
             isRecording,
             record,
             toggleRecording,
-            }}
+          }}
           />
         </div>
         <div className={isUserPresenter ? cx(styles.centerWithActions, actionBarClasses) : styles.center}>
@@ -58,6 +56,13 @@ class ActionsBar extends React.PureComponent {
             />
             : null}
           <EmojiSelect options={emojiList} selected={emojiSelected} onChange={handleEmojiChange} />
+          <DesktopShare {...{
+handleShareScreen,
+            handleUnshareScreen,
+            isVideoBroadcasting,
+            isUserPresenter,
+}}
+          />
         </div>
       </div>
     );

bigbluebutton-html5/imports/ui/components/actions-bar/desktop-share/component.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl, intlShape } from 'react-intl';
+import browser from 'browser-detect';
+import Button from '/imports/ui/components/button/component';
+import { styles } from '../styles';
+
+const propTypes = {
+  intl: intlShape.isRequired,
+  isUserPresenter: PropTypes.bool.isRequired,
+};
+
+const intlMessages = defineMessages({
+  desktopShareLabel: {
+    id: 'app.actionsBar.actionsDropdown.desktopShareLabel',
+    description: 'Desktop Share option label',
+  },
+  stopDesktopShareLabel: {
+    id: 'app.actionsBar.actionsDropdown.stopDesktopShareLabel',
+    description: 'Stop Desktop Share option label',
+  },
+  desktopShareDesc: {
+    id: 'app.actionsBar.actionsDropdown.desktopShareDesc',
+    description: 'adds context to desktop share option',
+  },
+  stopDesktopShareDesc: {
+    id: 'app.actionsBar.actionsDropdown.stopDesktopShareDesc',
+    description: 'adds context to stop desktop share option',
+  },
+
+});
+
+const BROWSER_RESULTS = browser();
+const isMobileBrowser = BROWSER_RESULTS.mobile ||
+  BROWSER_RESULTS.os.includes('Android'); // mobile flag doesn't always work
+
+const DesktopShare = ({
+  intl,
+  handleShareScreen,
+  handleUnshareScreen,
+  isVideoBroadcasting,
+  isUserPresenter,
+}) => (
+  (Meteor.settings.public.kurento.enableScreensharing &&
+      !isMobileBrowser && isUserPresenter ?
+        <Button
+          className={styles.button}
+          icon="desktop"
+          label={intl.formatMessage(isVideoBroadcasting ?
+          intlMessages.stopDesktopShareLabel : intlMessages.desktopShareLabel)}
+          description={intl.formatMessage(isVideoBroadcasting ?
+          intlMessages.stopDesktopShareDesc : intlMessages.desktopShareDesc)}
+          color="primary"
+          icon="desktop"
+          ghost={false}
+          hideLabel
+          circle
+          size="lg"
+          onClick={isVideoBroadcasting ? handleUnshareScreen : handleShareScreen}
+        />
+    : null)
+);
+
+DesktopShare.propTypes = propTypes;
+export default injectIntl(DesktopShare);