diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
index 04cc8c5cb3a3023ba140499f8caae69e5f700b82..b92c2a9a2861241f67d8f4d421387cd4375b43b9 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
+++ b/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';
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/presentation-options/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/presentation-options/component.jsx
index bbe37dbc33d92ebcbf2e1ae0a5a1dbdf5bda78b9..f46adc2b4b44114862917f84441e73c51311a932 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/presentation-options/component.jsx
+++ b/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)}
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-button/component.jsx
similarity index 51%
rename from bigbluebutton-html5/imports/ui/components/video-provider/video-menu/component.jsx
rename to bigbluebutton-html5/imports/ui/components/video-provider/video-button/component.jsx
index 4fa900f54b5816d83cb88ac836482593c0bb1999..f56bad50e5c61bf47c03b3a85c223325d2be8a45 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/component.jsx
+++ b/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);
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-button/container.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-button/container.jsx
new file mode 100755
index 0000000000000000000000000000000000000000..b21d680e1f9c8995e529ffae76a5871180d959cc
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-button/container.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { withTracker } from 'meteor/react-meteor-data';
+import { injectIntl } from 'react-intl';
+import { withModalMounter } from '/imports/ui/components/modal/service';
+import VideoPreviewContainer from '/imports/ui/components/video-preview/container';
+import JoinVideoButton from './component';
+import VideoButtonService from './service';
+
+const JoinVideoOptionsContainer = (props) => {
+ const {
+ isSharingVideo,
+ isDisabled,
+ handleJoinVideo,
+ handleCloseVideo,
+ baseName,
+ intl,
+ mountModal,
+ ...restProps
+ } = props;
+
+ const mountPreview = () => { mountModal(<VideoPreviewContainer />); };
+
+ return <JoinVideoButton {...{ handleJoinVideo: mountPreview, handleCloseVideo, isSharingVideo, isDisabled, ...restProps }} />;
+};
+
+export default withModalMounter(injectIntl(withTracker(() => ({
+ baseName: VideoButtonService.baseName,
+ isSharingVideo: VideoButtonService.isSharingVideo(),
+ isDisabled: VideoButtonService.isDisabled(),
+ videoShareAllowed: VideoButtonService.videoShareAllowed(),
+}))(JoinVideoOptionsContainer)));
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/service.js b/bigbluebutton-html5/imports/ui/components/video-provider/video-button/service.js
similarity index 86%
rename from bigbluebutton-html5/imports/ui/components/video-provider/video-menu/service.js
rename to bigbluebutton-html5/imports/ui/components/video-provider/video-button/service.js
index f17126feb08859f34f89af554897e86bc721addb..a25e62ccf4197c2ced022eba5c9212b2b2e0a855 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/service.js
+++ b/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,
};
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/video-button/styles.scss
similarity index 100%
rename from bigbluebutton-html5/imports/ui/components/video-provider/video-menu/styles.scss
rename to bigbluebutton-html5/imports/ui/components/video-provider/video-button/styles.scss
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/container.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/container.jsx
deleted file mode 100755
index a20da734f60c72a2c3ec53fa657cdaeabb1d0e47..0000000000000000000000000000000000000000
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-menu/container.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { withTracker } from 'meteor/react-meteor-data';
-import { defineMessages, 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',
- },
-});
-
-const JoinVideoOptionsContainer = (props) => {
- const {
- isSharingVideo,
- isDisabled,
- handleJoinVideo,
- handleCloseVideo,
- toggleSwapLayout,
- swapLayoutAllowed,
- baseName,
- intl,
- mountModal,
- ...restProps
- } = props;
-
- const mountPreview = () => { mountModal(<VideoPreviewContainer />); };
-
- return <JoinVideoOptions {...{ handleJoinVideo: mountPreview, handleCloseVideo, isSharingVideo, ...restProps }} />;
-};
-
-export default withModalMounter(injectIntl(withTracker(() => ({
- baseName: VideoMenuService.baseName,
- isSharingVideo: VideoMenuService.isSharingVideo(),
- isDisabled: VideoMenuService.isDisabled(),
- videoShareAllowed: VideoMenuService.videoShareAllowed(),
- toggleSwapLayout: VideoMenuService.toggleSwapLayout,
- swapLayoutAllowed: VideoMenuService.swapLayoutAllowed(),
-}))(JoinVideoOptionsContainer)));
diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
index 7d75a68fd11c8ac71e1cedb64c557e07d2d44c81..7e945e261c35485ef7736b4473e93777dd5e338e 100755
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/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",