diff --git a/bigbluebutton-html5/imports/ui/components/media/component.jsx b/bigbluebutton-html5/imports/ui/components/media/component.jsx
index 2e5faf840e1ca19d4ebca0807b8cffd7397c2b07..853c31d73f7a9a5a14393884942fa9a75e1b77c2 100644
--- a/bigbluebutton-html5/imports/ui/components/media/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/media/component.jsx
@@ -24,7 +24,7 @@ export default class Media extends Component {
render() {
const {
- swapLayout, floatingOverlay, hideOverlay, disableVideo,
+ swapLayout, floatingOverlay, hideOverlay, disableVideo, children,
} = this.props;
const contentClassName = cx({
@@ -40,7 +40,7 @@ export default class Media extends Component {
return (
<div className={styles.container}>
<div className={!swapLayout ? contentClassName : overlayClassName}>
- {this.props.children}
+ {children}
</div>
<div className={!swapLayout ? overlayClassName : contentClassName}>
{ !disableVideo ? <VideoProviderContainer /> : null }
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/service.js b/bigbluebutton-html5/imports/ui/components/user-list/service.js
index dbae3223c6cf128e43ac7f5119f273706d1541d9..ad5c6a5de483a3a9b3c9486d70ec35356700700d 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/service.js
+++ b/bigbluebutton-html5/imports/ui/components/user-list/service.js
@@ -41,11 +41,11 @@ const getCustomLogoUrl = () => Storage.getItem(CUSTOM_LOGO_URL_KEY);
const sortUsersByName = (a, b) => {
if (a.name.toLowerCase() < b.name.toLowerCase()) {
return -1;
- } else if (a.name.toLowerCase() > b.name.toLowerCase()) {
+ } if (a.name.toLowerCase() > b.name.toLowerCase()) {
return 1;
- } else if (a.id.toLowerCase() > b.id.toLowerCase()) {
+ } if (a.id.toLowerCase() > b.id.toLowerCase()) {
return -1;
- } else if (a.id.toLowerCase() < b.id.toLowerCase()) {
+ } if (a.id.toLowerCase() < b.id.toLowerCase()) {
return 1;
}
@@ -62,12 +62,12 @@ const sortUsersByEmoji = (a, b) => {
if (emojiA && emojiB && (emojiA !== 'none' && emojiB !== 'none')) {
if (a.emoji.changedAt < b.emoji.changedAt) {
return -1;
- } else if (a.emoji.changedAt > b.emoji.changedAt) {
+ } if (a.emoji.changedAt > b.emoji.changedAt) {
return 1;
}
- } else if (emojiA && emojiA !== 'none') {
+ } if (emojiA && emojiA !== 'none') {
return -1;
- } else if (emojiB && emojiB !== 'none') {
+ } if (emojiB && emojiB !== 'none') {
return 1;
}
return 0;
@@ -76,9 +76,9 @@ const sortUsersByEmoji = (a, b) => {
const sortUsersByModerator = (a, b) => {
if (a.isModerator && b.isModerator) {
return sortUsersByEmoji(a, b);
- } else if (a.isModerator) {
+ } if (a.isModerator) {
return -1;
- } else if (b.isModerator) {
+ } if (b.isModerator) {
return 1;
}
@@ -88,9 +88,9 @@ const sortUsersByModerator = (a, b) => {
const sortUsersByPhoneUser = (a, b) => {
if (!a.isPhoneUser && !b.isPhoneUser) {
return 0;
- } else if (!a.isPhoneUser) {
+ } if (!a.isPhoneUser) {
return -1;
- } else if (!b.isPhoneUser) {
+ } if (!b.isPhoneUser) {
return 1;
}
@@ -101,7 +101,7 @@ const sortUsersByPhoneUser = (a, b) => {
const sortUsersByCurrent = (a, b) => {
if (a.isCurrent) {
return -1;
- } else if (b.isCurrent) {
+ } if (b.isCurrent) {
return 1;
}
@@ -133,11 +133,11 @@ const sortUsers = (a, b) => {
const sortChatsByName = (a, b) => {
if (a.name.toLowerCase() < b.name.toLowerCase()) {
return -1;
- } else if (a.name.toLowerCase() > b.name.toLowerCase()) {
+ } if (a.name.toLowerCase() > b.name.toLowerCase()) {
return 1;
- } else if (a.id.toLowerCase() > b.id.toLowerCase()) {
+ } if (a.id.toLowerCase() > b.id.toLowerCase()) {
return -1;
- } else if (a.id.toLowerCase() < b.id.toLowerCase()) {
+ } if (a.id.toLowerCase() < b.id.toLowerCase()) {
return 1;
}
@@ -147,9 +147,9 @@ const sortChatsByName = (a, b) => {
const sortChatsByIcon = (a, b) => {
if (a.icon && b.icon) {
return sortChatsByName(a, b);
- } else if (a.icon) {
+ } if (a.icon) {
return -1;
- } else if (b.icon) {
+ } if (b.icon) {
return 1;
}
@@ -436,6 +436,11 @@ const getGroupChatPrivate = (sender, receiver) => {
}
};
+const isUserModerator = (userId) => {
+ const u = Users.findOne({ userId });
+ return u ? u.moderator : false;
+};
+
export default {
setEmojiStatus,
assignPresenter,
@@ -457,7 +462,7 @@ export default {
getCustomLogoUrl,
getGroupChatPrivate,
hasBreakoutRoom,
+ isUserModerator,
getEmojiList: () => EMOJI_STATUSES,
getEmoji: () => Users.findOne({ userId: Auth.userID }).emoji,
};
-
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
index a5b0c31f514c8495e368bf6462b4f7d3666325a8..193691654ba29e33082ed3677e8fa633e045f210 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
@@ -72,12 +72,13 @@ class UserParticipants extends Component {
}
componentDidMount() {
- if (!this.props.compact) {
+ const { compact, roving, users } = this.props;
+ if (!compact) {
this.refScrollContainer.addEventListener(
'keydown',
- event => this.props.roving(
+ event => roving(
event,
- this.props.users.length,
+ users.length,
this.changeState,
),
);
@@ -91,12 +92,13 @@ class UserParticipants extends Component {
}
componentDidUpdate(prevProps, prevState) {
- if (this.state.index === -1) {
+ const { index } = this.state;
+ if (index === -1) {
return;
}
- if (this.state.index !== prevState.index) {
- this.focusUserItem(this.state.index);
+ if (index !== prevState.index) {
+ this.focusUserItem(index);
}
}
@@ -129,44 +131,43 @@ class UserParticipants extends Component {
const { meetingId } = meeting;
- return users.map(u =>
- (
- <CSSTransition
- classNames={listTransition}
- appear
- enter
- exit
- timeout={0}
- component="div"
- className={cx(styles.participantsList)}
- key={u}
- >
- <div ref={(node) => { this.userRefs[index += 1] = node; }}>
- <UserListItemContainer
- {...{
- currentUser,
- compact,
- isBreakoutRoom,
- meetingId,
- getAvailableActions,
- normalizeEmojiName,
- isMeetingLocked,
- handleEmojiChange,
- getEmojiList,
- getEmoji,
- setEmojiStatus,
- assignPresenter,
- removeUser,
- toggleVoice,
- changeRole,
- getGroupChatPrivate,
- }}
- userId={u}
- getScrollContainerRef={this.getScrollContainerRef}
- />
- </div>
- </CSSTransition>
- ));
+ return users.map(u => (
+ <CSSTransition
+ classNames={listTransition}
+ appear
+ enter
+ exit
+ timeout={0}
+ component="div"
+ className={cx(styles.participantsList)}
+ key={u}
+ >
+ <div ref={(node) => { this.userRefs[index += 1] = node; }}>
+ <UserListItemContainer
+ {...{
+ currentUser,
+ compact,
+ isBreakoutRoom,
+ meetingId,
+ getAvailableActions,
+ normalizeEmojiName,
+ isMeetingLocked,
+ handleEmojiChange,
+ getEmojiList,
+ getEmoji,
+ setEmojiStatus,
+ assignPresenter,
+ removeUser,
+ toggleVoice,
+ changeRole,
+ getGroupChatPrivate,
+ }}
+ userId={u}
+ getScrollContainerRef={this.getScrollContainerRef}
+ />
+ </div>
+ </CSSTransition>
+ ));
}
focusUserItem(index) {
@@ -181,28 +182,40 @@ class UserParticipants extends Component {
render() {
const {
- intl, users, compact, setEmojiStatus, muteAllUsers, meeting, muteAllExceptPresenter,
+ intl,
+ users,
+ compact,
+ setEmojiStatus,
+ muteAllUsers,
+ meeting,
+ muteAllExceptPresenter,
+ currentUser,
} = this.props;
return (
<div className={styles.userListColumn}>
{
- !compact ?
- <div className={styles.container}>
- <h2 className={styles.smallTitle}>
- {intl.formatMessage(intlMessages.usersTitle)}
- ({users.length})
-
- </h2>
- <UserOptionsContainer {...{
- users,
- muteAllUsers,
- muteAllExceptPresenter,
- setEmojiStatus,
- meeting,
- }}
- />
- </div>
+ !compact
+ ? (
+ <div className={styles.container}>
+ <h2 className={styles.smallTitle}>
+ {intl.formatMessage(intlMessages.usersTitle)}
+ (
+ {users.length}
+)
+
+ </h2>
+ <UserOptionsContainer {...{
+ users,
+ muteAllUsers,
+ muteAllExceptPresenter,
+ setEmojiStatus,
+ meeting,
+ currentUser,
+ }}
+ />
+ </div>
+ )
: <hr className={styles.separator} />
}
<div
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
index 6e26614b16501532a602db95d0fe9cc8b4a738fe..0db0a225fdb68c2733af006b26b875f7e7561395 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
@@ -20,6 +20,7 @@ const propTypes = {
toggleMuteAllUsers: PropTypes.func.isRequired,
toggleMuteAllUsersExceptPresenter: PropTypes.func.isRequired,
toggleStatus: PropTypes.func.isRequired,
+ mountModal: PropTypes.func.isRequired,
};
const intlMessages = defineMessages({
@@ -83,7 +84,14 @@ class UserOptions extends PureComponent {
}
componentWillMount() {
- const { intl, isMeetingMuted, mountModal } = this.props;
+ const {
+ intl,
+ isMeetingMuted,
+ mountModal,
+ toggleStatus,
+ toggleMuteAllUsers,
+ toggleMuteAllUsersExceptPresenter,
+ } = this.props;
this.menuItems = _.compact([
(<DropdownListItem
@@ -91,21 +99,21 @@ class UserOptions extends PureComponent {
icon="clear_status"
label={intl.formatMessage(intlMessages.clearAllLabel)}
description={intl.formatMessage(intlMessages.clearAllDesc)}
- onClick={this.props.toggleStatus}
+ onClick={toggleStatus}
/>),
(<DropdownListItem
key={_.uniqueId('list-item-')}
icon="mute"
label={intl.formatMessage(intlMessages.muteAllLabel)}
description={intl.formatMessage(intlMessages.muteAllDesc)}
- onClick={this.props.toggleMuteAllUsers}
+ onClick={toggleMuteAllUsers}
/>),
(<DropdownListItem
key={_.uniqueId('list-item-')}
icon="mute"
label={intl.formatMessage(intlMessages.muteAllExceptPresenterLabel)}
description={intl.formatMessage(intlMessages.muteAllExceptPresenterDesc)}
- onClick={this.props.toggleMuteAllUsersExceptPresenter}
+ onClick={toggleMuteAllUsersExceptPresenter}
/>),
(<DropdownListItem
key={_.uniqueId('list-item-')}
@@ -122,7 +130,8 @@ class UserOptions extends PureComponent {
}
componentDidUpdate(prevProps) {
- if (prevProps.isMeetingMuted !== this.props.isMeetingMuted) {
+ const { isMeetingMuted } = this.props;
+ if (prevProps.isMeetingMuted !== isMeetingMuted) {
this.alterMenu();
}
}
@@ -140,16 +149,23 @@ class UserOptions extends PureComponent {
}
alterMenu() {
- const { intl, isMeetingMuted } = this.props;
+ const {
+ intl,
+ isMeetingMuted,
+ toggleMuteAllUsers,
+ toggleMuteAllUsersExceptPresenter,
+ } = this.props;
if (isMeetingMuted) {
- const menuButton = (<DropdownListItem
- key={_.uniqueId('list-item-')}
- icon="unmute"
- label={intl.formatMessage(intlMessages.unmuteAllLabel)}
- description={intl.formatMessage(intlMessages.unmuteAllDesc)}
- onClick={this.props.toggleMuteAllUsers}
- />);
+ const menuButton = (
+ <DropdownListItem
+ key={_.uniqueId('list-item-')}
+ icon="unmute"
+ label={intl.formatMessage(intlMessages.unmuteAllLabel)}
+ description={intl.formatMessage(intlMessages.unmuteAllDesc)}
+ onClick={toggleMuteAllUsers}
+ />
+ );
this.menuItems.splice(1, 2, menuButton);
} else {
const muteMeetingButtons = [(<DropdownListItem
@@ -157,13 +173,13 @@ class UserOptions extends PureComponent {
icon="mute"
label={intl.formatMessage(intlMessages.muteAllLabel)}
description={intl.formatMessage(intlMessages.muteAllDesc)}
- onClick={this.props.toggleMuteAllUsers}
+ onClick={toggleMuteAllUsers}
/>), (<DropdownListItem
key={_.uniqueId('list-item-')}
icon="mute"
label={intl.formatMessage(intlMessages.muteAllExceptPresenterLabel)}
description={intl.formatMessage(intlMessages.muteAllExceptPresenterDesc)}
- onClick={this.props.toggleMuteAllUsersExceptPresenter}
+ onClick={toggleMuteAllUsersExceptPresenter}
/>)];
this.menuItems.splice(1, 1, muteMeetingButtons[0], muteMeetingButtons[1]);
@@ -172,12 +188,13 @@ class UserOptions extends PureComponent {
render() {
const { intl } = this.props;
+ const { isUserOptionsOpen } = this.state;
return (
<Dropdown
ref={(ref) => { this.dropdown = ref; }}
autoFocus={false}
- isOpen={this.state.isUserOptionsOpen}
+ isOpen={isUserOptionsOpen}
onShow={this.onActionsShow}
onHide={this.onActionsHide}
className={styles.dropdown}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
index 70cffbac78e99a60a3659300add2dc7af1c1444a..24d71cfeff48042756b4a29637520d2aa5f2f5af 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
@@ -1,8 +1,6 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Auth from '/imports/ui/services/auth';
-import mapUser from '/imports/ui/services/user/mapUser';
-import Users from '/imports/api/users/';
import UserOptions from './component';
@@ -31,43 +29,37 @@ export default class UserOptionsContainer extends PureComponent {
muteMeeting() {
const { muteAllUsers } = this.props;
- const currentUser = Users.findOne({ userId: Auth.userID });
-
- muteAllUsers(currentUser.userId);
+ muteAllUsers(Auth.userID);
}
muteAllUsersExceptPresenter() {
const { muteAllExceptPresenter } = this.props;
- const currentUser = Users.findOne({ userId: Auth.userID });
-
- muteAllExceptPresenter(currentUser.userId);
+ muteAllExceptPresenter(Auth.userID);
}
handleClearStatus() {
const { users, setEmojiStatus } = this.props;
- users.forEach((user) => {
- if (user.emoji.status !== 'none') {
- setEmojiStatus(user.id, 'none');
- }
+ users.forEach((id) => {
+ setEmojiStatus(id, 'none');
});
}
render() {
- const currentUser = Users.findOne({ userId: Auth.userID });
- const currentUserIsModerator = mapUser(currentUser).isModerator;
- const { meeting } = this.props;
+ const { currentUser } = this.props;
+ const currentUserIsModerator = currentUser.isModerator;
- this.state.meetingMuted = meeting.voiceProp.muteOnStart;
+ const { meetingMuted } = this.state;
return (
- currentUserIsModerator ?
- <UserOptions
- toggleMuteAllUsers={this.muteMeeting}
- toggleMuteAllUsersExceptPresenter={this.muteAllUsersExceptPresenter}
- toggleStatus={this.handleClearStatus}
- isMeetingMuted={this.state.meetingMuted}
- /> : null
+ currentUserIsModerator
+ ? (
+ <UserOptions
+ toggleMuteAllUsers={this.muteMeeting}
+ toggleMuteAllUsersExceptPresenter={this.muteAllUsersExceptPresenter}
+ toggleStatus={this.handleClearStatus}
+ isMeetingMuted={meetingMuted}
+ />) : null
);
}
}