BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[issue-16954] - Migrating userOptions and remove user modals

Browse Source
This commit is contained in:
GuiLeme 2023-03-23 11:56:00 -03:00
parent a5b5a754a0
commit d4bd29ea67
10 changed files with 109 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
bigbluebutton-html5/client/stylesheets/modals.css
View File

@ -39,6 +39,12 @@
background-color: transparent;
}
/* Prevents that an element within app shows over a modal */
#app {
position: relative;
z-index: 1000 !important;
}
.modal-low {
z-index: 1001;
}

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

@ -123,9 +123,8 @@ class ActionsDropdown extends PureComponent {
componentDidUpdate(prevProps) {
const { amIPresenter: wasPresenter } = prevProps;
const { amIPresenter: isPresenter } = this.props;
const { setExternalVideoModalIsOpen, } = this.state;
if (wasPresenter && !isPresenter) {
setExternalVideoModalIsOpen(false);
this.setExternalVideoModalIsOpen(false);
}
}

16
bigbluebutton-html5/imports/ui/components/captions/writer-menu/component.jsx
View File

@ -1,6 +1,5 @@
import React, { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { withModalMounter } from '/imports/ui/components/common/modal/service';
import PropTypes from 'prop-types';
import Service from '/imports/ui/components/captions/service';
import LocalesDropdown from '/imports/ui/components/common/locales-dropdown/component';
@ -44,7 +43,6 @@ const intlMessages = defineMessages({
const propTypes = {
availableLocales: PropTypes.arrayOf(PropTypes.object).isRequired,
closeModal: PropTypes.func.isRequired,
intl: PropTypes.shape({
formatMessage: PropTypes.func.isRequired,
}).isRequired,
@ -68,9 +66,9 @@ class WriterMenu extends PureComponent {
}
componentWillUnmount() {
const { closeModal } = this.props;
const { setIsOpen } = this.props;
closeModal();
setIsOpen(false);
}
handleChange(event) {
@ -79,7 +77,7 @@ class WriterMenu extends PureComponent {
handleStart() {
const {
closeModal,
setIsOpen,
layoutContextDispatch,
} = this.props;
@ -95,24 +93,24 @@ class WriterMenu extends PureComponent {
value: PANELS.CAPTIONS,
});
closeModal();
setIsOpen(false);
}
render() {
const {
intl,
availableLocales,
closeModal,
setIsOpen,
} = this.props;
const { locale } = this.state;
return (
<Styled.WriterMenuModal
onRequestClose={closeModal}
hideBorder
contentLabel={intl.formatMessage(intlMessages.title)}
title={intl.formatMessage(intlMessages.title)}
{...this.props}
>
<Styled.Content>
<span>
@ -151,4 +149,4 @@ class WriterMenu extends PureComponent {
WriterMenu.propTypes = propTypes;
export default injectIntl(withModalMounter(WriterMenu));
export default injectIntl(WriterMenu);

6
bigbluebutton-html5/imports/ui/components/captions/writer-menu/container.jsx
View File

@ -1,6 +1,5 @@
import React, { useContext } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { withModalMounter } from '/imports/ui/components/common/modal/service';
import Service from '/imports/ui/components/captions/service';
import WriterMenu from './component';
import { layoutDispatch } from '../../layout/context';
@ -20,7 +19,6 @@ const WriterMenuContainer = (props) => {
return amIModerator && <WriterMenu {...{ layoutContextDispatch, ...props }} />;
};
export default withModalMounter(withTracker(({ mountModal }) => ({
closeModal: () => mountModal(null),
export default withTracker(() => ({
availableLocales: Service.getAvailableLocales(),
}))(WriterMenuContainer));
}))(WriterMenuContainer);

1
bigbluebutton-html5/imports/ui/components/common/modal/confirmation/component.jsx
View File

@ -1,6 +1,5 @@
import React, { Component } from 'react';
import { defineMessages } from 'react-intl';
import { withModalMounter } from '/imports/ui/components/common/modal/service';
import PropTypes from 'prop-types';
import Styled from './styles';

1
bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx
View File

@ -157,6 +157,7 @@ class LockViewersComponent extends Component {
onRequestClose={closeModal}
contentLabel={intl.formatMessage(intlMessages.ariaModalTitle)}
title={intl.formatMessage(intlMessages.lockViewersTitle)}
{...this.props}
>
<Styled.Container>
<Styled.Description>

7
bigbluebutton-html5/imports/ui/components/lock-viewers/container.jsx
View File

@ -1,6 +1,5 @@
import React, { useContext } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { withModalMounter } from '/imports/ui/components/common/modal/service';
import Meetings from '/imports/api/meetings';
import Auth from '/imports/ui/services/auth';
import LockViewersComponent from './component';
@ -18,10 +17,10 @@ const LockViewersContainer = (props) => {
return amIModerator && <LockViewersComponent {...props} />
}
export default withModalMounter(withTracker(({ mountModal }) => ({
closeModal: () => mountModal(null),
export default withTracker(({ setIsOpen }) => ({
closeModal: () => setIsOpen(false),
meeting: Meetings.findOne({ meetingId: Auth.meetingID }),
updateLockSettings,
updateWebcamsOnlyForModerator,
showToggleLabel: false,
}))(LockViewersContainer));
}))(LockViewersContainer);

93
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/component.jsx
View File

@ -8,7 +8,6 @@ import { findDOMNode } from 'react-dom';
import UserAvatar from '/imports/ui/components/user-avatar/component';
import Icon from '/imports/ui/components/common/icon/component';
import lockContextContainer from '/imports/ui/components/lock-viewers/context/container';
import { withModalMounter } from '/imports/ui/components/common/modal/service';
import ConfirmationModal from '/imports/ui/components/common/modal/confirmation/component';
import VideoService from '/imports/ui/components/video-provider/service';
import BBBMenu from '/imports/ui/components/common/menu/component';
@ -195,6 +194,7 @@ class UserListItem extends PureComponent {
dropdownVisible: false,
showNestedOptions: false,
selected: false,
isConfirmationModalOpen: false,
};
this.handleScroll = this.handleScroll.bind(this);
@ -203,6 +203,7 @@ class UserListItem extends PureComponent {
this.getDropdownMenuParent = this.getDropdownMenuParent.bind(this);
this.renderUserAvatar = this.renderUserAvatar.bind(this);
this.resetMenuState = this.resetMenuState.bind(this);
this.setConfirmationModalIsOpen = this.setConfirmationModalIsOpen.bind(this);
this.title = _.uniqueId('dropdown-title-');
this.seperator = _.uniqueId('action-separator-');
@ -292,7 +293,6 @@ class UserListItem extends PureComponent {
userLocks,
isMe,
meetingIsBreakout,
mountModal,
usersProp,
layoutContextDispatch,
} = this.props;
@ -516,17 +516,9 @@ class UserListItem extends PureComponent {
key: 'remove',
label: intl.formatMessage(messages.RemoveUserLabel, { 0: user.name }),
onClick: () => {
this.onActionsHide(mountModal(
<ConfirmationModal
intl={intl}
titleMessageId="app.userList.menu.removeConfirmation.label"
titleMessageExtra={user.name}
checkboxMessageId="app.userlist.menu.removeConfirmation.desc"
confirmParam={user.userId}
onConfirm={removeUser}
confirmButtonDataTest="removeUserConfirmation"
/>,
));
this.onActionsHide(
this.setConfirmationModalIsOpen(true),
);
this.handleClose();
},
@ -650,6 +642,12 @@ class UserListItem extends PureComponent {
);
}
setConfirmationModalIsOpen(value) {
this.setState({
isConfirmationModalOpen: value,
});
}
render() {
const {
compact,
@ -661,11 +659,13 @@ class UserListItem extends PureComponent {
isMe,
isRTL,
selectedUserId,
removeUser,
} = this.props;
const {
isActionsOpen,
selected,
isConfirmationModalOpen
} = this.state;
if (!user) return (
@ -822,34 +822,51 @@ class UserListItem extends PureComponent {
if (!actions.length) return contents;
return (
<BBBMenu
trigger={
(
<Styled.UserItemContents
isActionsOpen={isActionsOpen}
selected={selected === true}
tabIndex={-1}
onClick={() => this.setState({ selected: true }, () => Session.set('dropdownOpenUserId', user.userId))}
onKeyDown={(e) => {
if (e.key === 'Enter') {
this.setState({ selected: true }, () => Session.set('dropdownOpenUserId', user.userId));
}
}}
role="button"
>
{contents}
</Styled.UserItemContents>
)
}
actions={actions}
selectedEmoji={user.emoji}
onCloseCallback={() => this.setState({ selected: false }, () => Session.set('dropdownOpenUserId', null))}
open={selectedUserId === user.userId}
/>
<>
<BBBMenu
trigger={
(
<Styled.UserItemContents
isActionsOpen={isActionsOpen}
selected={selected === true}
tabIndex={-1}
onClick={() => this.setState({ selected: true }, () => Session.set('dropdownOpenUserId', user.userId))}
onKeyDown={(e) => {
if (e.key === 'Enter') {
this.setState({ selected: true }, () => Session.set('dropdownOpenUserId', user.userId));
}
}}
role="button"
>
{contents}
</Styled.UserItemContents>
)
}
actions={actions}
selectedEmoji={user.emoji}
onCloseCallback={() => this.setState({ selected: false }, () => Session.set('dropdownOpenUserId', null))}
open={selectedUserId === user.userId}
/>
{isConfirmationModalOpen ? <ConfirmationModal
intl={intl}
titleMessageId="app.userList.menu.removeConfirmation.label"
titleMessageExtra={user.name}
checkboxMessageId="app.userlist.menu.removeConfirmation.desc"
confirmParam={user.userId}
onConfirm={removeUser}
confirmButtonDataTest="removeUserConfirmation"
{...{
onRequestClose: () => this.setConfirmationModalIsOpen(false),
priority: "medium",
setIsOpen: this.setConfirmationModalIsOpen,
isOpen: isConfirmationModalOpen
}}
/> : null}
</>
);
}
}
UserListItem.propTypes = propTypes;
export default withModalMounter(lockContextContainer(injectIntl(UserListItem)));
export default lockContextContainer(injectIntl(UserListItem));

41
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
View File

@ -6,7 +6,7 @@ import LockViewersContainer from '/imports/ui/components/lock-viewers/container'
import GuestPolicyContainer from '/imports/ui/components/waiting-users/guest-policy/container';
import CreateBreakoutRoomContainer from '/imports/ui/components/actions-bar/create-breakout-room/container';
import CaptionsService from '/imports/ui/components/captions/service';
import CaptionsWriterMenu from '/imports/ui/components/captions/writer-menu/container';
import WriterMenuContainer from '/imports/ui/components/captions/writer-menu/container';
import BBBMenu from '/imports/ui/components/common/menu/component';
import Styled from './styles';
import { getUserNamesLink } from '/imports/ui/components/user-list/service';
@ -21,7 +21,6 @@ const propTypes = {
toggleMuteAllUsers: PropTypes.func.isRequired,
toggleMuteAllUsersExceptPresenter: PropTypes.func.isRequired,
toggleStatus: PropTypes.func.isRequired,
mountModal: PropTypes.func.isRequired,
users: PropTypes.arrayOf(Object).isRequired,
guestPolicy: PropTypes.string.isRequired,
meetingIsBreakout: PropTypes.bool.isRequired,
@ -146,6 +145,8 @@ class UserOptions extends PureComponent {
isCreateBreakoutRoomModalOpen: false,
isGuestPolicyModalOpen: false,
isInvitation: false,
isWriterMenuModalOpen: false,
isLockViewersModalOpen: false,
}
this.handleCreateBreakoutRoomClick = this.handleCreateBreakoutRoomClick.bind(this);
@ -156,6 +157,8 @@ class UserOptions extends PureComponent {
this.onSaveUserNames = this.onSaveUserNames.bind(this);
this.setCreateBreakoutRoomModalIsOpen = this.setCreateBreakoutRoomModalIsOpen.bind(this);
this.setGuestPolicyModalIsOpen = this.setGuestPolicyModalIsOpen.bind(this);
this.setWriterMenuModalIsOpen = this.setWriterMenuModalIsOpen.bind(this);
this.setLockViewersModalIsOpen = this.setLockViewersModalIsOpen.bind(this);
}
onSaveUserNames() {
@ -192,15 +195,13 @@ class UserOptions extends PureComponent {
}
handleCaptionsClick() {
const { mountModal } = this.props;
mountModal(<CaptionsWriterMenu />);
this.setWriterMenuModalIsOpen(true);
}
renderMenuItems() {
const {
intl,
isMeetingMuted,
mountModal,
toggleStatus,
toggleMuteAllUsers,
toggleMuteAllUsersExceptPresenter,
@ -208,7 +209,6 @@ class UserOptions extends PureComponent {
hasBreakoutRoom,
openLearningDashboardUrl,
amIModerator,
users,
isMeteorConnected,
dynamicGuestPolicy,
} = this.props;
@ -248,7 +248,7 @@ class UserOptions extends PureComponent {
key: this.lockId,
label: intl.formatMessage(intlMessages.lockViewersLabel),
description: intl.formatMessage(intlMessages.lockViewersDesc),
onClick: () => mountModal(<LockViewersContainer />),
onClick: () => this.setLockViewersModalIsOpen(true),
icon: 'lock',
dataTest: 'lockViewersButton',
});
@ -337,10 +337,19 @@ class UserOptions extends PureComponent {
})
}
setWriterMenuModalIsOpen(value) {
this.setState({isWriterMenuModalOpen: value});
}
setLockViewersModalIsOpen(value) {
this.setState({isLockViewersModalOpen: value});
}
render() {
const { intl, isRTL, isBreakoutRecordable } = this.props;
const { isCreateBreakoutRoomModalOpen, isInvitation,
isGuestPolicyModalOpen } = this.state;
isGuestPolicyModalOpen, isWriterMenuModalOpen,
isLockViewersModalOpen } = this.state;
return (
<>
@ -387,6 +396,22 @@ class UserOptions extends PureComponent {
isOpen: isGuestPolicyModalOpen,
}}
/> : null}
{isWriterMenuModalOpen ? <WriterMenuContainer
{...{
onRequestClose: () => this.setWriterMenuModalIsOpen(false),
priority: "medium",
setIsOpen: this.setWriterMenuModalIsOpen,
isOpen: isWriterMenuModalOpen
}}
/> : null}
{isLockViewersModalOpen ? <LockViewersContainer
{...{
onRequestClose: () => this.setLockViewersModalIsOpen(false),
priority: "medium",
setIsOpen: this.setLockViewersModalIsOpen,
isOpen: isLockViewersModalOpen
}}
/> : null}
</>
);
}

2
bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/drag-and-drop/component.jsx
View File

@ -110,7 +110,7 @@ const DragAndDrop = (props) => {
return startAndSaveVirtualBackground(file);
}
const onConfirm = (confirmParam, checked) => {
const onConfirm = (checked) => {
startAndSaveVirtualBackground(file);
Session.set('skipBackgroundDropConfirmation', checked);
};