Fixed share video button for locked users

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

@@ -4,7 +4,7 @@ import { styles } from './styles.scss';
 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';
+import JoinVideoOptionsContainer from '../video-provider/video-button/container';
 
 import PresentationOptionsContainer from './presentation-options/component';
 

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

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
 import Button from '/imports/ui/components/button/component';
-import cx from 'classnames';
 import { styles } from '../styles';
 
 const propTypes = {
@@ -21,12 +20,9 @@ const intlMessages = defineMessages({
   },
 });
 
-const PresentationOptionsContainer = ({
-  intl,
-  toggleSwapLayout,
-}) => (
+const PresentationOptionsContainer = ({ intl, toggleSwapLayout }) => (
   <Button
-    className={cx(styles.button, styles.presentationButton)}
+    className={styles.button}
     icon="presentation"
     label={intl.formatMessage(intlMessages.restorePresentationLabel)}
     description={intl.formatMessage(intlMessages.restorePresentationDesc)}

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

@@ -7,17 +7,21 @@ import { defineMessages, injectIntl, intlShape } from 'react-intl';
 import { styles } from './styles';
 
 const intlMessages = defineMessages({
-  videoMenu: {
-    id: 'app.video.videoMenu',
-    description: 'video menu label',
+  joinVideo: {
+    id: 'app.video.joinVideo',
+    description: 'Join video button label',
   },
-  videoMenuDesc: {
-    id: 'app.video.videoMenuDesc',
-    description: 'video menu description',
+  leaveVideo: {
+    id: 'app.video.leaveVideo',
+    description: 'Leave video button label',
   },
-  videoMenuDisabled: {
-    id: 'app.video.videoMenuDisabled',
-    description: 'video menu label',
+  videoButtonDesc: {
+    id: 'app.video.videoButtonDesc',
+    description: 'video button description',
+  },
+  videoDisabled: {
+    id: 'app.video.videoDisabled',
+    description: 'video disabled label',
   },
 });
 
@@ -27,33 +31,37 @@ const propTypes = {
   isSharingVideo: PropTypes.bool.isRequired,
 };
 
-const JoinVideoOptions = ({
+const JoinVideoButton = ({
   intl,
   isSharingVideo,
-  videoShareAllowed,
+  isDisabled,
   handleJoinVideo,
   handleCloseVideo,
 }) => {
 
   return (
     <Button
-      label={!videoShareAllowed ?
-        intl.formatMessage(intlMessages.videoMenuDisabled)
+      label={isDisabled ?
+        intl.formatMessage(intlMessages.videoDisabled)
         :
-        intl.formatMessage(intlMessages.videoMenu)
+        (isSharingVideo ?
+          intl.formatMessage(intlMessages.leaveVideo)
+          :
+          intl.formatMessage(intlMessages.joinVideo)
+        )
       }
       className={cx(styles.button, isSharingVideo || styles.ghostButton)}
       onClick={isSharingVideo ? handleCloseVideo : handleJoinVideo}
       hideLabel
-      aria-label={intl.formatMessage(intlMessages.videoMenuDesc)}
+      aria-label={intl.formatMessage(intlMessages.videoButtonDesc)}
       color={isSharingVideo ? 'primary' : 'default'}
       icon={isSharingVideo ? 'video' : 'video_off'}
       ghost={!isSharingVideo}
       size="lg"
       circle
-      disabled={!videoShareAllowed}
+      disabled={isDisabled}
     />
   );
 };
-JoinVideoOptions.propTypes = propTypes;
-export default injectIntl(JoinVideoOptions);
+JoinVideoButton.propTypes = propTypes;
+export default injectIntl(JoinVideoButton);

bigbluebutton-html5/imports/ui/components/video-provider/video-menu/container.jsx → bigbluebutton-html5/imports/ui/components/video-provider/video-button/container.jsx

 import React from 'react';
 import { withTracker } from 'meteor/react-meteor-data';
-import { defineMessages, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 import VideoPreviewContainer from '/imports/ui/components/video-preview/container';
-import JoinVideoOptions from './component';
-import VideoMenuService from './service';
-
-const intlMessages = defineMessages({
-  joinVideo: {
-    id: 'app.video.joinVideo',
-    description: 'Join video button label',
-  },
-  leaveVideo: {
-    id: 'app.video.leaveVideo',
-    description: 'Leave video button label',
-  },
-  swapCam: {
-    id: 'app.video.swapCam',
-    description: 'Swap cam button label',
-  },
-  swapCamDesc: {
-    id: 'app.video.swapCamDesc',
-    description: 'Swap cam button description',
-  },
-});
+import JoinVideoButton from './component';
+import VideoButtonService from './service';
 
 const JoinVideoOptionsContainer = (props) => {
   const {
@@ -31,8 +12,6 @@ const JoinVideoOptionsContainer = (props) => {
     isDisabled,
     handleJoinVideo,
     handleCloseVideo,
-    toggleSwapLayout,
-    swapLayoutAllowed,
     baseName,
     intl,
     mountModal,
@@ -41,14 +20,12 @@ const JoinVideoOptionsContainer = (props) => {
 
   const mountPreview = () => { mountModal(<VideoPreviewContainer />); };
 
-  return <JoinVideoOptions {...{ handleJoinVideo: mountPreview, handleCloseVideo, isSharingVideo, ...restProps }} />;
+  return <JoinVideoButton {...{ handleJoinVideo: mountPreview, handleCloseVideo, isSharingVideo, isDisabled, ...restProps }} />;
 };
 
 export default withModalMounter(injectIntl(withTracker(() => ({
-  baseName: VideoMenuService.baseName,
-  isSharingVideo: VideoMenuService.isSharingVideo(),
-  isDisabled: VideoMenuService.isDisabled(),
-  videoShareAllowed: VideoMenuService.videoShareAllowed(),
-  toggleSwapLayout: VideoMenuService.toggleSwapLayout,
-  swapLayoutAllowed: VideoMenuService.swapLayoutAllowed(),
+  baseName: VideoButtonService.baseName,
+  isSharingVideo: VideoButtonService.isSharingVideo(),
+  isDisabled: VideoButtonService.isDisabled(),
+  videoShareAllowed: VideoButtonService.videoShareAllowed(),
 }))(JoinVideoOptionsContainer)));

bigbluebutton-html5/imports/ui/components/video-provider/video-menu/service.js → bigbluebutton-html5/imports/ui/components/video-provider/video-button/service.js

@@ -2,7 +2,6 @@ import Settings from '/imports/ui/services/settings';
 import mapUser from '/imports/ui/services/user/mapUser';
 import Auth from '/imports/ui/services/auth';
 import Users from '/imports/api/users/';
-import MediaService from '/imports/ui/components/media/service';
 import VideoService from '../service';
 
 const baseName = Meteor.settings.public.app.basename;
@@ -37,7 +36,5 @@ export default {
   isSharingVideo,
   isDisabled,
   baseName,
-  toggleSwapLayout: MediaService.toggleSwapLayout,
-  swapLayoutAllowed: MediaService.shouldEnableSwapLayout,
   videoShareAllowed,
 };

bigbluebutton-html5/private/locales/en.json

@@ -407,6 +407,8 @@
     "app.video.mediaFlowTimeout1020": "Error 1020: media could not reach the server",
     "app.video.swapCam": "Swap",
     "app.video.swapCamDesc": "swap the direction of webcams",
+    "app.video.videoDisabled": "Webcam is disabled",
+    "app.video.videoButtonDesc": "Join video button",
     "app.video.videoMenu": "Video menu",
     "app.video.videoMenuDisabled": "Video menu Webcam is disabled in Settings",
     "app.video.videoMenuDesc": "Open video menu dropdown",