diff --git a/bigbluebutton-html5/imports/startup/client/base.jsx b/bigbluebutton-html5/imports/startup/client/base.jsx index e254ad8967..e48adc0717 100755 --- a/bigbluebutton-html5/imports/startup/client/base.jsx +++ b/bigbluebutton-html5/imports/startup/client/base.jsx @@ -297,7 +297,13 @@ class Base extends Component { } if (((meetingHasEnded && !meetingIsBreakout)) || (codeError && User?.loggedOut)) { - return (); + return ( + + ); } if (codeError && !meetingHasEnded) { diff --git a/bigbluebutton-html5/imports/ui/components/about/component.jsx b/bigbluebutton-html5/imports/ui/components/about/component.jsx index bd4100e783..8d57730afa 100644 --- a/bigbluebutton-html5/imports/ui/components/about/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/about/component.jsx @@ -42,7 +42,8 @@ const AboutComponent = ({ intl, clientBuild, copyright }) => ( description: intl.formatMessage(intlMessages.dismissDesc), }} > - {`${intl.formatMessage(intlMessages.copyright)} ${copyright}`}
+ {`${intl.formatMessage(intlMessages.copyright)} ${copyright}`} +
{`${intl.formatMessage(intlMessages.version)} ${clientBuild}`} ); diff --git a/bigbluebutton-html5/imports/ui/components/about/container.jsx b/bigbluebutton-html5/imports/ui/components/about/container.jsx index 6999424fe6..9c843a450f 100644 --- a/bigbluebutton-html5/imports/ui/components/about/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/about/container.jsx @@ -3,17 +3,20 @@ import { withTracker } from 'meteor/react-meteor-data'; import AboutComponent from './component'; -const AboutContainer = props => ( - - {props.children} - -); - -const getClientBuildInfo = function () { - return { - clientBuild: Meteor.settings.public.app.html5ClientBuild, - copyright: Meteor.settings.public.app.copyright, - }; +const AboutContainer = (props) => { + const { children } = props; + return ( + + {children} + + ); }; +const getClientBuildInfo = () => ( + { + clientBuild: Meteor.settings.public.app.html5ClientBuild, + copyright: Meteor.settings.public.app.copyright, + } +); + export default withTracker(() => getClientBuildInfo())(AboutContainer); diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx index 641e448d57..2861c8fb0d 100755 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx @@ -14,7 +14,9 @@ import { PANELS, ACTIONS } from '../../layout/enums'; const propTypes = { amIPresenter: PropTypes.bool.isRequired, - intl: PropTypes.object.isRequired, + intl: PropTypes.shape({ + formatMessage: PropTypes.func.isRequired, + }).isRequired, mountModal: PropTypes.func.isRequired, amIModerator: PropTypes.bool.isRequired, shortcuts: PropTypes.string, @@ -260,7 +262,7 @@ class ActionsDropdown extends PureComponent { isMeteorConnected, isDropdownOpen, sidebarContent, - sidebarNavigation + sidebarNavigation, } = this.props; const availableActions = this.getAvailableActions(); diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/captions/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/captions/component.jsx index 3439d84102..b2cae14955 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/captions/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/captions/component.jsx @@ -6,7 +6,9 @@ import { styles } from '/imports/ui/components/actions-bar/styles'; import Button from '/imports/ui/components/button/component'; const propTypes = { - intl: PropTypes.object.isRequired, + intl: PropTypes.shape({ + formatMessage: PropTypes.func.isRequired, + }).isRequired, isActive: PropTypes.bool.isRequired, handleOnClick: PropTypes.func.isRequired, }; diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/captions/container.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/captions/container.jsx index 4e423f9492..153a7edc21 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/captions/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/captions/container.jsx @@ -5,7 +5,7 @@ import CaptionsService from '/imports/ui/components/captions/service'; import CaptionsReaderMenuContainer from '/imports/ui/components/actions-bar/captions/reader-menu/container'; import CaptionsButton from './component'; -const CaptionsButtonContainer = props => ; +const CaptionsButtonContainer = (props) => ; export default withModalMounter(withTracker(({ mountModal }) => ({ isActive: CaptionsService.isCaptionsActive(), diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/captions/reader-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/captions/reader-menu/component.jsx index 4bfdcfb6e8..597e5a0127 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/captions/reader-menu/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/captions/reader-menu/component.jsx @@ -133,22 +133,6 @@ class ReaderMenu extends PureComponent { this.getPreviewStyle = this.getPreviewStyle.bind(this); } - getPreviewStyle() { - const { - backgroundColor, - fontColor, - fontFamily, - fontSize, - } = this.state; - - return { - fontFamily, - fontSize, - color: fontColor, - background: backgroundColor, - }; - } - handleColorPickerClick(fieldname) { const obj = {}; // eslint-disable-next-line react/destructuring-assignment @@ -199,6 +183,22 @@ class ReaderMenu extends PureComponent { closeModal(); } + getPreviewStyle() { + const { + backgroundColor, + fontColor, + fontFamily, + fontSize, + } = this.state; + + return { + fontFamily, + fontSize, + color: fontColor, + background: backgroundColor, + }; + } + render() { const { intl, @@ -255,14 +255,15 @@ class ReaderMenu extends PureComponent { > {intl.formatMessage(intlMessages.select)} - {ownedLocales.map(loc => ( + {ownedLocales.map((loc) => ( ))} + + ))} @@ -275,25 +276,34 @@ class ReaderMenu extends PureComponent { tabIndex={DEFAULT_INDEX} className={styles.swatch} onClick={this.handleColorPickerClick.bind(this, 'displayFontColorPicker')} + onKeyPress={() => { }} + role="button" >
- {displayFontColorPicker - ? ( -
-
- -
- ) : null - } + { + displayFontColorPicker + ? ( +
+
{ }} + role="button" + tabIndex={0} + aria-label={ariaTextColor} + /> + +
+ ) + : null + }
@@ -305,25 +315,34 @@ class ReaderMenu extends PureComponent { tabIndex={DEFAULT_INDEX} className={styles.swatch} onClick={this.handleColorPickerClick.bind(this, 'displayBackgroundColorPicker')} + role="button" + onKeyPress={() => { }} >
- {displayBackgroundColorPicker - ? ( -
-
- -
- ) : null - } + { + displayBackgroundColorPicker + ? ( +
+
{ }} + /> + +
+ ) + : null + }
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/captions/reader-menu/container.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/captions/reader-menu/container.jsx index 1fa6b35ea3..ff8e82d702 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/captions/reader-menu/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/captions/reader-menu/container.jsx @@ -4,7 +4,7 @@ import { withModalMounter } from '/imports/ui/components/modal/service'; import ReaderMenu from './component'; import CaptionsService from '/imports/ui/components/captions/service'; -const ReaderMenuContainer = props => ; +const ReaderMenuContainer = (props) => ; export default withModalMounter(withTracker(({ mountModal }) => ({ closeModal: () => mountModal(null), diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx index 9e23eb686c..c08fd1f793 100755 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx @@ -217,14 +217,49 @@ class BreakoutRoom extends PureComponent { } } + componentDidUpdate(prevProps, prevstate) { + if (this.listOfUsers) { + for (let i = 0; i < this.listOfUsers.children.length; i += 1) { + const roomList = this.listOfUsers.children[i].getElementsByTagName('div')[0]; + roomList.addEventListener('keydown', this.handleMoveEvent, true); + } + } + + const { numberOfRooms } = this.state; + const { users } = this.props; + const { users: prevUsers } = prevProps; + if (numberOfRooms < prevstate.numberOfRooms) { + this.resetUserWhenRoomsChange(numberOfRooms); + } + const usersCount = users.length; + const prevUsersCount = prevUsers.length; + if (usersCount > prevUsersCount) { + this.setRoomUsers(); + } + + if (usersCount < prevUsersCount) { + this.removeRoomUsers(); + } + } + + componentWillUnmount() { + if (this.listOfUsers) { + for (let i = 0; i < this.listOfUsers.children.length; i += 1) { + const roomList = this.listOfUsers.children[i].getElementsByTagName('div')[0]; + roomList.removeEventListener('keydown', this.handleMoveEvent, true); + } + } + this.handleDismiss(); + } + handleShiftUser(activeListSibling) { const { users } = this.state; if (activeListSibling) { const text = activeListSibling.getElementsByTagName('p')[0].innerText; const roomNumber = text.match(/\d/g).join(''); - users.forEach((u) => { + users.forEach((u, index) => { if (u.userId === document.activeElement.id) { - u.room = text.substr(text.length - 1).includes(')') ? 0 : parseInt(roomNumber); + users[index].room = text.substr(text.length - 1).includes(')') ? 0 : parseInt(roomNumber, 10); } }); } @@ -278,41 +313,19 @@ class BreakoutRoom extends PureComponent { this.setRoomUsers(); } + return true; } - componentWillUnmount() { - if (this.listOfUsers) { - for (let i = 0; i < this.listOfUsers.children.length; i++) { - const roomList = this.listOfUsers.children[i].getElementsByTagName('div')[0]; - roomList.removeEventListener('keydown', this.handleMoveEvent, true); - } - } - this.handleDismiss(); - } + handleDismiss() { + const { mountModal } = this.props; - componentDidUpdate(prevProps, prevstate) { - if (this.listOfUsers) { - for (let i = 0; i < this.listOfUsers.children.length; i++) { - const roomList = this.listOfUsers.children[i].getElementsByTagName('div')[0]; - roomList.addEventListener('keydown', this.handleMoveEvent, true); - } - } + return new Promise((resolve) => { + mountModal(null); - const { numberOfRooms } = this.state; - const { users } = this.props; - const { users: prevUsers } = prevProps; - if (numberOfRooms < prevstate.numberOfRooms) { - this.resetUserWhenRoomsChange(numberOfRooms); - } - const usersCount = users.length; - const prevUsersCount = prevUsers.length; - if (usersCount > prevUsersCount) { - this.setRoomUsers(); - } - - if (usersCount < prevUsersCount) { - this.removeRoomUsers(); - } + this.setState({ + preventClosing: false, + }, resolve); + }); } onCreateBreakouts() { @@ -349,7 +362,8 @@ class BreakoutRoom extends PureComponent { return; } - const emptyNames = _.range(1, numberOfRooms + 1).filter((n) => this.getRoomName(n).length === 0); + const emptyNames = _.range(1, numberOfRooms + 1) + .filter((n) => this.getRoomName(n).length === 0); if (emptyNames.length > 0) { this.setState({ roomNameEmptyIsValid: false }); return; @@ -456,27 +470,21 @@ class BreakoutRoom extends PureComponent { return breakoutJoinedUsers.filter((room) => room.sequence === sequence)[0].joinedUsers || []; } - removeRoomUsers() { - const { users } = this.props; - const { users: stateUsers } = this.state; - const userIds = users.map((user) => user.userId); - const removeUsers = stateUsers.filter((user) => userIds.includes(user.userId)); + getRoomName(position) { + const { intl } = this.props; + const { roomNamesChanged } = this.state; - this.setState({ - users: removeUsers, - }); + if (this.hasNameChanged(position)) { + return roomNamesChanged[position]; + } + + return intl.formatMessage(intlMessages.breakoutRoom, { 0: position }); } - handleDismiss() { - const { mountModal } = this.props; + getFullName(position) { + const { meetingName } = this.props; - return new Promise((resolve) => { - mountModal(null); - - this.setState({ - preventClosing: false, - }, resolve); - }); + return `${meetingName} (${this.getRoomName(position)})`; } resetUserWhenRoomsChange(rooms) { @@ -537,21 +545,15 @@ class BreakoutRoom extends PureComponent { }); } - getRoomName(position) { - const { intl } = this.props; - const { roomNamesChanged } = this.state; + removeRoomUsers() { + const { users } = this.props; + const { users: stateUsers } = this.state; + const userIds = users.map((user) => user.userId); + const removeUsers = stateUsers.filter((user) => userIds.includes(user.userId)); - if (this.hasNameChanged(position)) { - return roomNamesChanged[position]; - } - - return intl.formatMessage(intlMessages.breakoutRoom, { 0: position }); - } - - getFullName(position) { - const { meetingName } = this.props; - - return `${meetingName} (${this.getRoomName(position)})`; + this.setState({ + users: removeUsers, + }); } hasNameChanged(position) { @@ -559,11 +561,11 @@ class BreakoutRoom extends PureComponent { const { roomNamesChanged } = this.state; if (typeof roomNamesChanged[position] !== 'undefined' - && roomNamesChanged[position] !== intl.formatMessage(intlMessages.breakoutRoom, { 0: position })) { + && roomNamesChanged[position] !== intl + .formatMessage(intlMessages.breakoutRoom, { 0: position })) { return true; - } else { - return false; } + return false; } hasNameDuplicated(position) { @@ -599,7 +601,7 @@ class BreakoutRoom extends PureComponent { }; const changeRoomName = (position) => (ev) => { - let newRoomsNames = [...roomNamesChanged]; + const newRoomsNames = [...roomNamesChanged]; newRoomsNames[position] = ev.target.value; this.setState({ @@ -610,17 +612,19 @@ class BreakoutRoom extends PureComponent { }; return ( -
this.listOfUsers = r}> +
{ this.listOfUsers = r; }}>

-
+
{this.renderUserItemByRoom(0)}
@@ -643,20 +647,20 @@ class BreakoutRoom extends PureComponent { aria-label={intl.formatMessage(intlMessages.duration)} />

-
+
{this.renderUserItemByRoom(value)} {isInvitation && this.renderJoinedUsers(value)}
- { this.hasNameDuplicated(value) ? ( + {this.hasNameDuplicated(value) ? ( {intl.formatMessage(intlMessages.roomNameDuplicatedIsValid)} - ) : null } - { this.getRoomName(value).length === 0 ? ( + ) : null} + {this.getRoomName(value).length === 0 ? ( {intl.formatMessage(intlMessages.roomNameEmptyIsValid)} - ) : null } + ) : null}
)) } @@ -754,7 +758,12 @@ class BreakoutRoom extends PureComponent {
- {intl.formatMessage(intlMessages.minimumDurationWarnBreakout, { 0: MIN_BREAKOUT_TIME })} + { + intl.formatMessage( + intlMessages.minimumDurationWarnBreakout, + { 0: MIN_BREAKOUT_TIME }, + ) + } @@ -862,7 +871,6 @@ class BreakoutRoom extends PureComponent { return this.getUserByRoom(room) .map((user) => (

- {intl.formatMessage(intlMessages.roomNameDuplicatedIsValid)} - + + {intl.formatMessage(intlMessages.roomNameDuplicatedIsValid)} + )} {!roomNameEmptyIsValid && ( - - {intl.formatMessage(intlMessages.roomNameEmptyIsValid)} - + + {intl.formatMessage(intlMessages.roomNameEmptyIsValid)} + )} ); @@ -1048,11 +1056,11 @@ class BreakoutRoom extends PureComponent { : intl.formatMessage(intlMessages.confirmButton), callback: isInvitation ? this.onInviteBreakout : this.onCreateBreakouts, disabled: !leastOneUserIsValid - || !numberOfRoomsIsValid - || !roomNameDuplicatedIsValid - || !roomNameEmptyIsValid - || !durationIsValid - , + || !numberOfRoomsIsValid + || !roomNameDuplicatedIsValid + || !roomNameEmptyIsValid + || !durationIsValid + , } } dismiss={{ diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/container.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/container.jsx index 9c2ae36945..d6e5b4445b 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/container.jsx @@ -4,12 +4,15 @@ import ActionsBarService from '/imports/ui/components/actions-bar/service'; import CreateBreakoutRoomModal from './component'; -const CreateBreakoutRoomContainer = (props) => ( - props.amIModerator - && ( - - ) -); +const CreateBreakoutRoomContainer = (props) => { + const { amIModerator } = props; + return ( + amIModerator + && ( + + ) + ); +}; export default withTracker(() => ({ createBreakoutRoom: ActionsBarService.createBreakoutRoom, diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx index 92c77b4162..39977e4a3f 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/sort-user-list/component.jsx @@ -13,8 +13,8 @@ const propTypes = { }; const defaultProps = { - onCheck: () => {}, - onUncheck: () => {}, + onCheck: () => { }, + onUncheck: () => { }, }; const intlMessages = defineMessages({ @@ -99,7 +99,8 @@ class SortUsers extends Component { {user.userName} {user.room && !(user.room === room) ? `\t[${user.room}]` : ''} -

)); +
+ )); } renderJoinedUserItem() { @@ -107,19 +108,19 @@ class SortUsers extends Component { if (!joinedUsers.length) return null; return joinedUsers - .map(b => b.joinedUsers.map(u => ({ ...u, room: b.sequence }))) + .map((b) => b.joinedUsers.map((u) => ({ ...u, room: b.sequence }))) .flat() - .map(user => ( + .map((user) => (
{user.name} {`\t[${user.room}]`} -
)); +
+ )); } - render() { const { intl, 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 e7f813ce78..4c180e632e 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 @@ -5,7 +5,9 @@ import Button from '/imports/ui/components/button/component'; import MediaService from '/imports/ui/components/media/service'; const propTypes = { - intl: PropTypes.object.isRequired, + intl: PropTypes.shape({ + formatMessage: PropTypes.func.isRequired, + }).isRequired, toggleSwapLayout: PropTypes.func.isRequired, }; @@ -20,13 +22,15 @@ const intlMessages = defineMessages({ }, }); -const shouldUnswapLayout = () => MediaService.shouldShowScreenshare() || MediaService.shouldShowExternalVideo(); +const shouldUnswapLayout = () => ( + MediaService.shouldShowScreenshare() || MediaService.shouldShowExternalVideo() +); const PresentationOptionsContainer = ({ intl, toggleSwapLayout, isThereCurrentPresentation, - layoutContextDispatch + layoutContextDispatch, }) => { if (shouldUnswapLayout()) toggleSwapLayout(); return ( diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/quick-poll-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/quick-poll-dropdown/component.jsx index 9f5978de44..bdef582c93 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/quick-poll-dropdown/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/quick-poll-dropdown/component.jsx @@ -58,21 +58,23 @@ const handleClickQuickPoll = (layoutContextDispatch) => { Session.set('pollInitiated', true); }; -const getAvailableQuickPolls = (slideId, parsedSlides, startPoll, pollTypes, layoutContextDispatch) => { +const getAvailableQuickPolls = ( + slideId, parsedSlides, startPoll, pollTypes, layoutContextDispatch, +) => { const pollItemElements = parsedSlides.map((poll) => { const { poll: label } = poll; - let { type } = poll; + const { type } = poll; let itemLabel = label; - let letterAnswers = []; + const letterAnswers = []; - if (type !== pollTypes.YesNo && - type !== pollTypes.YesNoAbstention && - type !== pollTypes.TrueFalse) { + if (type !== pollTypes.YesNo + && type !== pollTypes.YesNoAbstention + && type !== pollTypes.TrueFalse) { const { options } = itemLabel; itemLabel = options.join('/').replace(/[\n.)]/g, ''); if (type === pollTypes.Custom) { - for (const option of options) { - const letterOption = option.replace(/[\r.)]/g, ''); + for (let i = 0; i < options.length; i += 1) { + const letterOption = options[i].replace(/[\r.)]/g, ''); if (letterAnswers.length < MAX_CUSTOM_FIELDS) { letterAnswers.push(letterOption); } else { @@ -138,7 +140,9 @@ class QuickPollDropdown extends Component { ); const { slideId, quickPollOptions } = parsedSlide; - const quickPolls = getAvailableQuickPolls(slideId, quickPollOptions, startPoll, pollTypes, layoutContextDispatch); + const quickPolls = getAvailableQuickPolls( + slideId, quickPollOptions, startPoll, pollTypes, layoutContextDispatch, + ); if (quickPollOptions.length === 0) return null; @@ -209,7 +213,6 @@ class QuickPollDropdown extends Component { } } - QuickPollDropdown.propTypes = propTypes; export default QuickPollDropdown; diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/component.jsx index 220b1aed10..8189e8a5e5 100755 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/component.jsx @@ -112,7 +112,7 @@ const getErrorLocale = (errorCode) => { default: return intlMessages.retryError; } -} +}; const ScreenshareButton = ({ intl, @@ -128,7 +128,7 @@ const ScreenshareButton = ({ const handleFailure = (error) => { const { errorCode = SCREENSHARING_ERRORS.UNKNOWN_ERROR.errorCode, - errorMessage + errorMessage, } = error; logger.error({ @@ -141,22 +141,20 @@ const ScreenshareButton = ({ screenshareHasEnded(); }; - const renderScreenshareUnavailableModal = () => { - return mountModal( - mountModal(null)} - hideBorder - contentLabel={intl.formatMessage(intlMessages.screenShareUnavailable)} - > -

- {intl.formatMessage(intlMessages.screenShareUnavailable)} -

-

{intl.formatMessage(intlMessages.screenShareNotSupported)}

- - ) - }; + const renderScreenshareUnavailableModal = () => mountModal( + mountModal(null)} + hideBorder + contentLabel={intl.formatMessage(intlMessages.screenShareUnavailable)} + > +

+ {intl.formatMessage(intlMessages.screenShareUnavailable)} +

+

{intl.formatMessage(intlMessages.screenShareNotSupported)}

+ , + ); const screenshareLocked = screenshareDataSavingSetting ? intlMessages.desktopShareLabel : intlMessages.lockedDesktopShareLabel; @@ -192,8 +190,7 @@ const ScreenshareButton = ({ } else { shareScreen(handleFailure); } - } - } + }} id={isVideoBroadcasting ? 'unshare-screen-button' : 'share-screen-button'} /> ) : null; diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/container.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/container.jsx index 5e100fd6f4..f39899f22d 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/container.jsx @@ -8,7 +8,7 @@ import { dataSavingSetting, } from '/imports/ui/components/screenshare/service'; -const ScreenshareButtonContainer = props => ; +const ScreenshareButtonContainer = (props) => ; /* * All props, including the ones that are inherited from actions-bar @@ -18,11 +18,11 @@ const ScreenshareButtonContainer = props => ; * isMeteorConnected, * screenshareDataSavingSetting, */ -export default withModalMounter(withTracker(({ mountModal }) => ({ +export default withModalMounter(withTracker(() => ({ isVideoBroadcasting: isVideoBroadcasting(), screenshareDataSavingSetting: dataSavingSetting(), enabled: getFromUserSettings( 'bbb_enable_screen_sharing', - Meteor.settings.public.kurento.enableScreensharing + Meteor.settings.public.kurento.enableScreensharing, ), }))(ScreenshareButtonContainer)); diff --git a/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx b/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx index 5f027d3801..df6f556725 100644 --- a/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx @@ -6,11 +6,13 @@ import Button from '/imports/ui/components/button/component'; import Modal from '/imports/ui/components/modal/simple/component'; import { makeCall } from '/imports/ui/services/api'; +import { Meteor } from 'meteor/meteor'; import { styles } from './styles'; -import { Meteor } from "meteor/meteor"; const propTypes = { - intl: PropTypes.object.isRequired, + intl: PropTypes.shape({ + formatMessage: PropTypes.func.isRequired, + }).isRequired, responseDelay: PropTypes.number.isRequired, }; @@ -64,7 +66,7 @@ class ActivityCheck extends Component { const { responseDelay } = this.state; return setInterval(() => { - if(responseDelay == 0) return; + if (responseDelay === 0) return; const remainingTime = responseDelay - 1; diff --git a/bigbluebutton-html5/imports/ui/components/activity-check/container.jsx b/bigbluebutton-html5/imports/ui/components/activity-check/container.jsx index 1bc6a83944..740b7b0e6e 100644 --- a/bigbluebutton-html5/imports/ui/components/activity-check/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/activity-check/container.jsx @@ -2,6 +2,6 @@ import React from 'react'; import { injectIntl } from 'react-intl'; import ActivityCheck from './component'; -const ActivityCheckContainer = props => ; +const ActivityCheckContainer = (props) => ; export default injectIntl(ActivityCheckContainer); diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/container.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/container.jsx index aed2c2f383..2e6bda4c36 100755 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/container.jsx @@ -84,33 +84,40 @@ const { joinListenOnly, } = Service; -export default withUsersConsumer(lockContextContainer(withModalMounter(withTracker(({ mountModal, userLocks, users }) => { - const currentUser = users[Auth.meetingID][Auth.userID]; - const isViewer = currentUser.role === ROLE_VIEWER; - const isPresenter = currentUser.presenter; - const { status } = Service.getBreakoutAudioTransferStatus(); +export default withUsersConsumer( + lockContextContainer( + withModalMounter(withTracker(({ mountModal, userLocks, users }) => { + const currentUser = users[Auth.meetingID][Auth.userID]; + const isViewer = currentUser.role === ROLE_VIEWER; + const isPresenter = currentUser.presenter; + const { status } = Service.getBreakoutAudioTransferStatus(); - if (status === AudioManager.BREAKOUT_AUDIO_TRANSFER_STATES.RETURNING) { - Service.setBreakoutAudioTransferStatus({ - status: AudioManager.BREAKOUT_AUDIO_TRANSFER_STATES.DISCONNECTED, - }); - Service.recoverMicState(); - } + if (status === AudioManager.BREAKOUT_AUDIO_TRANSFER_STATES.RETURNING) { + Service.setBreakoutAudioTransferStatus({ + status: AudioManager.BREAKOUT_AUDIO_TRANSFER_STATES.DISCONNECTED, + }); + Service.recoverMicState(); + } - return ({ - processToggleMuteFromOutside: (arg) => processToggleMuteFromOutside(arg), - showMute: isConnected() && !isListenOnly() && !isEchoTest() && !userLocks.userMic, - muted: isConnected() && !isListenOnly() && isMuted(), - inAudio: isConnected() && !isEchoTest(), - listenOnly: isConnected() && isListenOnly(), - disable: isConnecting() || isHangingUp() || !Meteor.status().connected, - talking: isTalking() && !isMuted(), - isVoiceUser: isVoiceUser(), - handleToggleMuteMicrophone: () => toggleMuteMicrophone(), - handleJoinAudio: () => (isConnected() ? joinListenOnly() : mountModal()), - handleLeaveAudio, - inputStream: AudioManager.inputStream, - isViewer, - isPresenter, - }); -})(AudioControlsContainer)))); + return ({ + processToggleMuteFromOutside: (arg) => processToggleMuteFromOutside(arg), + showMute: isConnected() && !isListenOnly() && !isEchoTest() && !userLocks.userMic, + muted: isConnected() && !isListenOnly() && isMuted(), + inAudio: isConnected() && !isEchoTest(), + listenOnly: isConnected() && isListenOnly(), + disable: isConnecting() || isHangingUp() || !Meteor.status().connected, + talking: isTalking() && !isMuted(), + isVoiceUser: isVoiceUser(), + handleToggleMuteMicrophone: () => toggleMuteMicrophone(), + handleJoinAudio: () => (isConnected() + ? joinListenOnly() + : mountModal() + ), + handleLeaveAudio, + inputStream: AudioManager.inputStream, + isViewer, + isPresenter, + }); + })(AudioControlsContainer)), + ), +); diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/input-stream-live-selector/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/input-stream-live-selector/component.jsx index 9fa34bdd4e..bf9591c2d3 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-controls/input-stream-live-selector/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-controls/input-stream-live-selector/component.jsx @@ -315,7 +315,9 @@ class InputStreamLiveSelector extends Component { - + {dropdownListComplete} diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-dial/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-dial/component.jsx index 829a17c386..b9ffa784f9 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-dial/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-dial/component.jsx @@ -23,7 +23,9 @@ const intlMessages = defineMessages({ }); const propTypes = { - intl: PropTypes.object.isRequired, + intl: PropTypes.shape({ + formatMessage: PropTypes.func.isRequired, + }).isRequired, formattedDialNum: PropTypes.string.isRequired, telVoice: PropTypes.string.isRequired, }; diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx index 9a738ef234..bb890014bb 100755 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx @@ -16,7 +16,9 @@ import AudioDial from '../audio-dial/component'; import AudioAutoplayPrompt from '../autoplay/component'; const propTypes = { - intl: PropTypes.object.isRequired, + intl: PropTypes.shape({ + formatMessage: PropTypes.func.isRequired, + }).isRequired, closeModal: PropTypes.func.isRequired, joinMicrophone: PropTypes.func.isRequired, joinListenOnly: PropTypes.func.isRequired, @@ -173,13 +175,18 @@ class AudioModal extends Component { if (joinFullAudioImmediately && !listenOnlyMode) return this.handleJoinMicrophone(); } + return false; } componentDidUpdate(prevProps) { const { autoplayBlocked, closeModal } = this.props; if (autoplayBlocked !== prevProps.autoplayBlocked) { - autoplayBlocked ? this.setState({ content: 'autoplayBlocked' }) : closeModal(); + if (autoplayBlocked) { + this.setContent('autoplayBlocked'); + } else { + closeModal(); + } } } @@ -244,7 +251,7 @@ class AudioModal extends Component { disableActions, } = this.state; - if (disableActions && isConnecting) return; + if (disableActions && isConnecting) return null; this.setState({ hasError: false, @@ -292,7 +299,7 @@ class AudioModal extends Component { disableActions, } = this.state; - if (disableActions && isConnecting) return; + if (disableActions && isConnecting) return null; this.setState({ disableActions: true, @@ -335,6 +342,10 @@ class AudioModal extends Component { }).catch(this.handleGoToAudioOptions); } + setContent(content) { + this.setState(content); + } + skipAudioOptions() { const { isConnecting, @@ -377,7 +388,11 @@ class AudioModal extends Component { circle size="jumbo" disabled={audioLocked} - onClick={joinFullAudioImmediately ? this.handleJoinMicrophone : this.handleGoToEchoTest} + onClick={ + joinFullAudioImmediately + ? this.handleJoinMicrophone + : this.handleGoToEchoTest + } /> ) : null} @@ -430,16 +445,18 @@ class AudioModal extends Component {
{intl.formatMessage(intlMessages.iOSErrorRecommendation)}
-
); +
+ ); } if (this.skipAudioOptions()) { return (
- {!isEchoTest - ? intl.formatMessage(intlMessages.connecting) - : intl.formatMessage(intlMessages.connectingEchoTest) + { + !isEchoTest + ? intl.formatMessage(intlMessages.connecting) + : intl.formatMessage(intlMessages.connectingEchoTest) } @@ -556,25 +573,26 @@ class AudioModal extends Component { />

) : null} - {!this.skipAudioOptions() - ? ( -
- { - isIOSChrome ? null - : ( -

- {content - ? intl.formatMessage(this.contents[content].title) - : intl.formatMessage(intlMessages.audioChoiceLabel)} -

- ) - } -
- ) - : null + { + !this.skipAudioOptions() + ? ( +
+ { + isIOSChrome ? null + : ( +

+ {content + ? intl.formatMessage(this.contents[content].title) + : intl.formatMessage(intlMessages.audioChoiceLabel)} +

+ ) + } +
+ ) + : null }
{this.renderContent()} diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/container.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/container.jsx index 07f25dfb66..4ce4bc901d 100755 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/container.jsx @@ -49,8 +49,16 @@ export default lockContextContainer(withModalMounter(withTracker(({ userLocks }) const meetingIsBreakout = AppService.meetingIsBreakout(); - const joinFullAudioImmediately = (autoJoin && (skipCheck || skipCheckOnJoin && !getEchoTest)) - || (skipCheck || skipCheckOnJoin && !getEchoTest); + const joinFullAudioImmediately = ( + autoJoin + && ( + skipCheck + || (skipCheckOnJoin && !getEchoTest) + )) + || ( + skipCheck + || (skipCheckOnJoin && !getEchoTest) + ); const forceListenOnlyAttendee = forceListenOnly && !Service.isUserModerator(); diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx index 4997b3b4b3..668aa6df9e 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx @@ -9,7 +9,9 @@ import cx from 'classnames'; import { styles } from './styles'; const propTypes = { - intl: PropTypes.object.isRequired, + intl: PropTypes.shape({ + formatMessage: PropTypes.func.isRequired, + }).isRequired, changeInputDevice: PropTypes.func.isRequired, changeOutputDevice: PropTypes.func.isRequired, handleBack: PropTypes.func.isRequired, @@ -94,6 +96,8 @@ class AudioSettings extends React.Component { handleRetry, } = this.props; + const { inputDeviceId, outputDeviceId } = this.state; + return (
@@ -113,7 +117,7 @@ class AudioSettings extends React.Component { {intl.formatMessage(intlMessages.micSourceLabel)}
+ {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-
- ) : null } + ) : null} - { !visibleExtendTimeForm + {!visibleExtendTimeForm ? (
); diff --git a/bigbluebutton-html5/imports/ui/components/breakout-room/container.jsx b/bigbluebutton-html5/imports/ui/components/breakout-room/container.jsx index 55b2eb6378..7b30601bd0 100644 --- a/bigbluebutton-html5/imports/ui/components/breakout-room/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/breakout-room/container.jsx @@ -12,7 +12,6 @@ const BreakoutContainer = (props) => { return ; }; - export default withTracker((props) => { const { endAllBreakouts, diff --git a/bigbluebutton-html5/imports/ui/components/captions/pad/component.jsx b/bigbluebutton-html5/imports/ui/components/captions/pad/component.jsx index 32068bbb50..4fbb41b21d 100644 --- a/bigbluebutton-html5/imports/ui/components/captions/pad/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/captions/pad/component.jsx @@ -50,7 +50,7 @@ const intlMessages = defineMessages({ speechRecognitionStop: { id: 'app.captions.pad.speechRecognitionStop', description: 'Notification for stopped speech recognition', - }, + }, }); const propTypes = { @@ -85,7 +85,7 @@ class Pad extends PureComponent { this.toggleListen = this.toggleListen.bind(this); this.handleListen = this.handleListen.bind(this); - + if (this.recognition) { this.recognition.addEventListener('end', () => { const { listening } = this.state; @@ -104,10 +104,12 @@ class Pad extends PureComponent { currentUserId, } = this.props; + const { listening } = this.state; + if (this.recognition) { if (ownerId !== currentUserId) { this.recognition.stop(); - } else if (this.state.listening && this.recognition.lang !== locale) { + } else if (listening && this.recognition.lang !== locale) { this.recognition.stop(); this.stopListen(); } @@ -187,7 +189,7 @@ class Pad extends PureComponent { listening: !listening, }, this.handleListen); } - + stopListen() { this.setState({ listening: false }); } diff --git a/bigbluebutton-html5/imports/ui/components/captions/pad/container.jsx b/bigbluebutton-html5/imports/ui/components/captions/pad/container.jsx index 9cb71a320e..2ccb088792 100644 --- a/bigbluebutton-html5/imports/ui/components/captions/pad/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/captions/pad/container.jsx @@ -7,7 +7,6 @@ import Auth from '/imports/ui/services/auth'; import LayoutContext from '../../layout/context'; import { ACTIONS, PANELS } from '../../layout/enums'; - const PadContainer = (props) => { const layoutContext = useContext(LayoutContext); const { layoutContextDispatch } = layoutContext; diff --git a/bigbluebutton-html5/imports/ui/components/captions/writer-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/captions/writer-menu/component.jsx index 9518b88aff..e29c15b614 100644 --- a/bigbluebutton-html5/imports/ui/components/captions/writer-menu/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/captions/writer-menu/component.jsx @@ -116,9 +116,10 @@ class WriterMenu extends PureComponent {
- + + {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
), (this.isMobile && playing) && ( diff --git a/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx b/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx index 599476915c..c906a616a6 100644 --- a/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/fullscreen-button/container.jsx @@ -1,6 +1,5 @@ import React, { useContext } from 'react'; import FullscreenButtonComponent from './component'; -import FullscreenService from './service'; import LayoutContext from '../layout/context'; const FullscreenButtonContainer = (props) => ; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx index 3b00b15b9c..4759e24191 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx @@ -54,14 +54,6 @@ class CustomLayout extends Component { } } - mainWidth() { - return window.document.documentElement.clientWidth; - } - - mainHeight() { - return window.document.documentElement.clientHeight; - } - bannerAreaHeight() { const { layoutContextState } = this.props; const { input } = layoutContextState; @@ -77,9 +69,9 @@ class CustomLayout extends Component { const { layoutContextState } = this.props; const { isRTL } = layoutContextState; const { height: actionBarHeight } = this.calculatesActionbarHeight(); - const mediaAreaHeight = this.mainHeight() + const mediaAreaHeight = windowHeight() - (DEFAULT_VALUES.navBarHeight + actionBarHeight); - const mediaAreaWidth = this.mainWidth() - (sidebarNavWidth + sidebarContentWidth); + const mediaAreaWidth = windowWidth() - (sidebarNavWidth + sidebarContentWidth); const DROP_ZONE_DEFAUL_SIZE = 100; const dropZones = {}; const sidebarSize = sidebarNavWidth + sidebarContentWidth; @@ -95,7 +87,7 @@ class CustomLayout extends Component { dropZones[CAMERADOCK_POSITION.CONTENT_RIGHT] = { top: DEFAULT_VALUES.navBarHeight + DROP_ZONE_DEFAUL_SIZE, - left: !isRTL ? this.mainWidth() - DROP_ZONE_DEFAUL_SIZE : 0, + left: !isRTL ? windowWidth() - DROP_ZONE_DEFAUL_SIZE : 0, height: mediaAreaHeight - (2 * DROP_ZONE_DEFAUL_SIZE), width: DROP_ZONE_DEFAUL_SIZE, @@ -124,7 +116,7 @@ class CustomLayout extends Component { }; dropZones[CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM] = { - top: this.mainHeight() - DROP_ZONE_DEFAUL_SIZE, + top: windowHeight() - DROP_ZONE_DEFAUL_SIZE, left: !isRTL ? sidebarNavWidth : null, right: isRTL ? sidebarNavWidth : null, width: sidebarContentWidth, @@ -241,7 +233,7 @@ class CustomLayout extends Component { height: actionBarHeight.height, innerHeight: actionBarHeight.innerHeight, padding: actionBarHeight.padding, - top: this.mainHeight() - actionBarHeight.height, + top: windowHeight() - actionBarHeight.height, left: !isRTL ? mediaAreaBounds.left : 0, zIndex: 1, }; @@ -259,12 +251,12 @@ class CustomLayout extends Component { let maxWidth = 0; if (input.sidebarNavigation.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - minWidth = this.mainWidth(); - width = this.mainWidth(); - maxWidth = this.mainWidth(); + minWidth = windowWidth(); + width = windowWidth(); + maxWidth = windowWidth(); } else { if (input.sidebarNavigation.width === 0) { - width = min(max((this.mainWidth() * 0.2), sidebarNavMinWidth), sidebarNavMaxWidth); + width = min(max((windowWidth() * 0.2), sidebarNavMinWidth), sidebarNavMaxWidth); } else { width = min(max(input.sidebarNavigation.width, sidebarNavMinWidth), sidebarNavMaxWidth); } @@ -289,9 +281,9 @@ class CustomLayout extends Component { let sidebarNavHeight = 0; if (input.sidebarNavigation.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - sidebarNavHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; + sidebarNavHeight = windowHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarNavHeight = this.mainHeight(); + sidebarNavHeight = windowHeight(); } sidebarNavHeight -= this.bannerAreaHeight(); } @@ -329,13 +321,13 @@ class CustomLayout extends Component { let maxWidth = 0; if (input.sidebarContent.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - minWidth = this.mainWidth(); - width = this.mainWidth(); - maxWidth = this.mainWidth(); + minWidth = windowWidth(); + width = windowWidth(); + maxWidth = windowWidth(); } else { if (input.sidebarContent.width === 0) { width = min( - max((this.mainWidth() * 0.2), sidebarContentMinWidth), sidebarContentMaxWidth, + max((windowWidth() * 0.2), sidebarContentMinWidth), sidebarContentMaxWidth, ); } else { width = min(max(input.sidebarContent.width, sidebarContentMinWidth), @@ -365,13 +357,13 @@ class CustomLayout extends Component { let sidebarContentHeight = 0; if (input.sidebarContent.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - sidebarContentHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; + sidebarContentHeight = windowHeight() - DEFAULT_VALUES.navBarHeight; } else if (input.cameraDock.numCameras > 0 && input.cameraDock.position === CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM && isOpen) { - sidebarContentHeight = this.mainHeight() - cameraDockHeight; + sidebarContentHeight = windowHeight() - cameraDockHeight; } else { - sidebarContentHeight = this.mainHeight(); + sidebarContentHeight = windowHeight(); } sidebarContentHeight -= this.bannerAreaHeight(); } @@ -388,10 +380,16 @@ class CustomLayout extends Component { top = DEFAULT_VALUES.navBarHeight + this.bannerAreaHeight(); } + let left = deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth; + left = !isRTL ? left : null; + + let right = deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth; + right = isRTL ? right : null; + return { top, - left: !isRTL ? (deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth) : null, - right: isRTL ? (deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth) : null, + left, + right, zIndex: deviceType === DEVICE_TYPE.MOBILE ? 11 : 1, }; } @@ -405,15 +403,15 @@ class CustomLayout extends Component { let width = 0; if (deviceType === DEVICE_TYPE.MOBILE) { left = 0; - width = this.mainWidth(); + width = windowWidth(); } else { left = !isRTL ? sidebarNavWidth + sidebarContentWidth : 0; - width = this.mainWidth() - sidebarNavWidth - sidebarContentWidth; + width = windowWidth() - sidebarNavWidth - sidebarContentWidth; } return { width, - height: this.mainHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), + height: windowHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), top: DEFAULT_VALUES.navBarHeight + this.bannerAreaHeight(), left, }; @@ -421,7 +419,9 @@ class CustomLayout extends Component { calculatesCameraDockBounds(sidebarNavWidth, sidebarContentWidth, mediaAreaBounds) { const { layoutContextState } = this.props; - const { input, fullscreen, isRTL, deviceType } = layoutContextState; + const { + input, fullscreen, isRTL, deviceType, + } = layoutContextState; const { presentation } = input; const { isOpen } = presentation; const { camerasMargin } = DEFAULT_VALUES; @@ -442,7 +442,7 @@ class CustomLayout extends Component { let cameraDockHeight = 0; let cameraDockWidth = 0; switch (input.cameraDock.position) { - case CAMERADOCK_POSITION.CONTENT_TOP: + case CAMERADOCK_POSITION.CONTENT_TOP: { cameraDockLeft = mediaAreaBounds.left; if (input.cameraDock.height === 0 || deviceType === DEVICE_TYPE.MOBILE) { @@ -471,7 +471,8 @@ class CustomLayout extends Component { cameraDockBounds.height = cameraDockHeight - camerasMargin; cameraDockBounds.maxHeight = mediaAreaBounds.height * 0.8; break; - case CAMERADOCK_POSITION.CONTENT_RIGHT: + } + case CAMERADOCK_POSITION.CONTENT_RIGHT: { if (input.cameraDock.width === 0) { if (input.presentation.isOpen) { cameraDockWidth = min( @@ -497,12 +498,15 @@ class CustomLayout extends Component { cameraDockBounds.minWidth = DEFAULT_VALUES.cameraDockMinWidth; cameraDockBounds.width = cameraDockWidth - (camerasMargin * 2); cameraDockBounds.maxWidth = mediaAreaBounds.width * 0.8; - cameraDockBounds.presenterMaxWidth = mediaAreaBounds.width - DEFAULT_VALUES.presentationToolbarMinWidth - camerasMargin; + cameraDockBounds.presenterMaxWidth = mediaAreaBounds.width + - DEFAULT_VALUES.presentationToolbarMinWidth + - camerasMargin; cameraDockBounds.minHeight = DEFAULT_VALUES.cameraDockMinHeight; cameraDockBounds.height = mediaAreaBounds.height; cameraDockBounds.maxHeight = mediaAreaBounds.height; break; - case CAMERADOCK_POSITION.CONTENT_BOTTOM: + } + case CAMERADOCK_POSITION.CONTENT_BOTTOM: { cameraDockLeft = mediaAreaBounds.left; if (input.cameraDock.height === 0) { @@ -532,7 +536,8 @@ class CustomLayout extends Component { cameraDockBounds.height = cameraDockHeight - camerasMargin; cameraDockBounds.maxHeight = mediaAreaBounds.height * 0.8; break; - case CAMERADOCK_POSITION.CONTENT_LEFT: + } + case CAMERADOCK_POSITION.CONTENT_LEFT: { if (input.cameraDock.width === 0) { if (input.presentation.isOpen) { cameraDockWidth = min( @@ -553,27 +558,30 @@ class CustomLayout extends Component { cameraDockBounds.left = mediaAreaBounds.left + camerasMargin; cameraDockBounds.right = isRTL ? sidebarSize + (camerasMargin * 2) : null; cameraDockBounds.minWidth = DEFAULT_VALUES.cameraDockMinWidth; - cameraDockBounds.width = cameraDockWidth - (camerasMargin *2); + cameraDockBounds.width = cameraDockWidth - (camerasMargin * 2); cameraDockBounds.maxWidth = mediaAreaBounds.width * 0.8; - cameraDockBounds.presenterMaxWidth = mediaAreaBounds.width - DEFAULT_VALUES.presentationToolbarMinWidth - camerasMargin; + cameraDockBounds.presenterMaxWidth = mediaAreaBounds.width + - DEFAULT_VALUES.presentationToolbarMinWidth + - camerasMargin; cameraDockBounds.minHeight = mediaAreaBounds.height; cameraDockBounds.height = mediaAreaBounds.height; cameraDockBounds.maxHeight = mediaAreaBounds.height; break; - case CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM: + } + case CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM: { if (input.cameraDock.height === 0) { cameraDockHeight = min( - max((this.mainHeight() * 0.2), DEFAULT_VALUES.cameraDockMinHeight), - (this.mainHeight() - DEFAULT_VALUES.cameraDockMinHeight), + max((windowHeight() * 0.2), DEFAULT_VALUES.cameraDockMinHeight), + (windowHeight() - DEFAULT_VALUES.cameraDockMinHeight), ); } else { cameraDockHeight = min( max(input.cameraDock.height, DEFAULT_VALUES.cameraDockMinHeight), - (this.mainHeight() - DEFAULT_VALUES.cameraDockMinHeight), + (windowHeight() - DEFAULT_VALUES.cameraDockMinHeight), ); } - cameraDockBounds.top = this.mainHeight() - cameraDockHeight; + cameraDockBounds.top = windowHeight() - cameraDockHeight; cameraDockBounds.left = !isRTL ? sidebarNavWidth : 0; cameraDockBounds.right = isRTL ? sidebarNavWidth : 0; cameraDockBounds.minWidth = sidebarContentWidth; @@ -581,10 +589,12 @@ class CustomLayout extends Component { cameraDockBounds.maxWidth = sidebarContentWidth; cameraDockBounds.minHeight = DEFAULT_VALUES.cameraDockMinHeight; cameraDockBounds.height = cameraDockHeight; - cameraDockBounds.maxHeight = this.mainHeight() * 0.8; + cameraDockBounds.maxHeight = windowHeight() * 0.8; break; - default: + } + default: { console.log('default'); + } } if (fullscreen.group === 'webcams') { @@ -618,9 +628,9 @@ class CustomLayout extends Component { const { presentation } = input; const { isOpen } = presentation; const { height: actionBarHeight } = this.calculatesActionbarHeight(); - const mediaAreaHeight = this.mainHeight() + const mediaAreaHeight = windowHeight() - (DEFAULT_VALUES.navBarHeight + actionBarHeight); - const mediaAreaWidth = this.mainWidth() - (sidebarNavWidth + sidebarContentWidth); + const mediaAreaWidth = windowWidth() - (sidebarNavWidth + sidebarContentWidth); const mediaBounds = {}; const { element: fullscreenElement } = fullscreen; const { navBarHeight, camerasMargin } = DEFAULT_VALUES; @@ -636,8 +646,8 @@ class CustomLayout extends Component { } if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') { - mediaBounds.width = this.mainWidth(); - mediaBounds.height = this.mainHeight(); + mediaBounds.width = windowWidth(); + mediaBounds.height = windowHeight(); mediaBounds.top = 0; mediaBounds.left = !isRTL ? 0 : null; mediaBounds.right = isRTL ? 0 : null; @@ -649,29 +659,32 @@ class CustomLayout extends Component { if (input.cameraDock.numCameras > 0 && !input.cameraDock.isDragging) { switch (input.cameraDock.position) { - case CAMERADOCK_POSITION.CONTENT_TOP: + case CAMERADOCK_POSITION.CONTENT_TOP: { mediaBounds.width = mediaAreaWidth; mediaBounds.height = mediaAreaHeight - cameraDockBounds.height - camerasMargin; mediaBounds.top = navBarHeight + cameraDockBounds.height + camerasMargin; mediaBounds.left = !isRTL ? sidebarSize : null; mediaBounds.right = isRTL ? sidebarSize : null; break; - case CAMERADOCK_POSITION.CONTENT_RIGHT: - mediaBounds.width = mediaAreaWidth - cameraDockBounds.width - (camerasMargin * 2); + } + case CAMERADOCK_POSITION.CONTENT_RIGHT: { + mediaBounds.width = mediaAreaWidth - cameraDockBounds.width - camerasMargin; mediaBounds.height = mediaAreaHeight; mediaBounds.top = navBarHeight; mediaBounds.left = !isRTL ? sidebarSize : null; - mediaBounds.right = isRTL ? sidebarSize - (camerasMargin *2) : null; + mediaBounds.right = isRTL ? sidebarSize - (camerasMargin * 2) : null; break; - case CAMERADOCK_POSITION.CONTENT_BOTTOM: + } + case CAMERADOCK_POSITION.CONTENT_BOTTOM: { mediaBounds.width = mediaAreaWidth; mediaBounds.height = mediaAreaHeight - cameraDockBounds.height - camerasMargin; mediaBounds.top = navBarHeight - camerasMargin; mediaBounds.left = !isRTL ? sidebarSize : null; mediaBounds.right = isRTL ? sidebarSize : null; break; - case CAMERADOCK_POSITION.CONTENT_LEFT: - mediaBounds.width = mediaAreaWidth - cameraDockBounds.width - (camerasMargin * 2); + } + case CAMERADOCK_POSITION.CONTENT_LEFT: { + mediaBounds.width = mediaAreaWidth - cameraDockBounds.width - camerasMargin; mediaBounds.height = mediaAreaHeight; mediaBounds.top = navBarHeight; const sizeValue = sidebarNavWidth @@ -679,15 +692,18 @@ class CustomLayout extends Component { mediaBounds.left = !isRTL ? sizeValue : null; mediaBounds.right = isRTL ? sidebarSize : null; break; - case CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM: + } + case CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM: { mediaBounds.width = mediaAreaWidth; mediaBounds.height = mediaAreaHeight; mediaBounds.top = navBarHeight; mediaBounds.left = !isRTL ? sidebarSize : null; mediaBounds.right = isRTL ? sidebarSize : null; break; - default: + } + default: { console.log('presentation - camera default'); + } } mediaBounds.zIndex = 1; } else { @@ -827,8 +843,8 @@ class CustomLayout extends Component { layoutContextDispatch({ type: ACTIONS.SET_MEDIA_AREA_SIZE, value: { - width: this.mainWidth() - sidebarNavWidth.width - sidebarContentWidth.width, - height: this.mainHeight() - DEFAULT_VALUES.navBarHeight - actionBarHeight, + width: windowWidth() - sidebarNavWidth.width - sidebarContentWidth.width, + height: windowHeight() - DEFAULT_VALUES.navBarHeight - actionBarHeight, }, }); diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx index 5bec158406..e69ac37d45 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx @@ -51,14 +51,6 @@ class PresentationFocusLayout extends Component { } } - mainWidth() { - return window.document.documentElement.clientWidth; - } - - mainHeight() { - return window.document.documentElement.clientHeight; - } - bannerAreaHeight() { const { layoutContextState } = this.props; const { input } = layoutContextState; @@ -176,7 +168,7 @@ class PresentationFocusLayout extends Component { height: actionBarHeight.height, innerHeight: actionBarHeight.innerHeight, padding: actionBarHeight.padding, - top: this.mainHeight() - actionBarHeight.height, + top: windowHeight() - actionBarHeight.height, left: !isRTL ? mediaAreaBounds.left : 0, zIndex: 1, }; @@ -194,12 +186,12 @@ class PresentationFocusLayout extends Component { let maxWidth = 0; if (input.sidebarNavigation.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - minWidth = this.mainWidth(); - width = this.mainWidth(); - maxWidth = this.mainWidth(); + minWidth = windowWidth(); + width = windowWidth(); + maxWidth = windowWidth(); } else { if (input.sidebarNavigation.width === 0) { - width = min(max((this.mainWidth() * 0.2), sidebarNavMinWidth), sidebarNavMaxWidth); + width = min(max((windowWidth() * 0.2), sidebarNavMinWidth), sidebarNavMaxWidth); } else { width = min(max(input.sidebarNavigation.width, sidebarNavMinWidth), sidebarNavMaxWidth); } @@ -221,9 +213,9 @@ class PresentationFocusLayout extends Component { let sidebarNavHeight = 0; if (input.sidebarNavigation.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - sidebarNavHeight = this.mainHeight() - navBarHeight - this.bannerAreaHeight(); + sidebarNavHeight = windowHeight() - navBarHeight - this.bannerAreaHeight(); } else { - sidebarNavHeight = this.mainHeight() - this.bannerAreaHeight(); + sidebarNavHeight = windowHeight() - this.bannerAreaHeight(); } } return sidebarNavHeight; @@ -258,13 +250,13 @@ class PresentationFocusLayout extends Component { let maxWidth = 0; if (input.sidebarContent.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - minWidth = this.mainWidth(); - width = this.mainWidth(); - maxWidth = this.mainWidth(); + minWidth = windowWidth(); + width = windowWidth(); + maxWidth = windowWidth(); } else { if (input.sidebarContent.width === 0) { width = min( - max((this.mainWidth() * 0.2), sidebarContentMinWidth), sidebarContentMaxWidth, + max((windowWidth() * 0.2), sidebarContentMinWidth), sidebarContentMaxWidth, ); } else { width = min(max(input.sidebarContent.width, sidebarContentMinWidth), @@ -293,20 +285,20 @@ class PresentationFocusLayout extends Component { let maxHeight = 0; if (input.sidebarContent.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - height = this.mainHeight() - navBarHeight - this.bannerAreaHeight(); + height = windowHeight() - navBarHeight - this.bannerAreaHeight(); minHeight = height; maxHeight = height; } else if (input.cameraDock.numCameras > 0) { if (input.sidebarContent.height === 0) { - height = (this.mainHeight() * 0.75) - this.bannerAreaHeight(); + height = (windowHeight() * 0.75) - this.bannerAreaHeight(); } else { height = min(max(input.sidebarContent.height, sidebarContentMinHeight), - this.mainHeight()); + windowHeight()); } - minHeight = this.mainHeight() * 0.25 - this.bannerAreaHeight(); - maxHeight = this.mainHeight() * 0.75 - this.bannerAreaHeight(); + minHeight = windowHeight() * 0.25 - this.bannerAreaHeight(); + maxHeight = windowHeight() * 0.75 - this.bannerAreaHeight(); } else { - height = this.mainHeight() - this.bannerAreaHeight(); + height = windowHeight() - this.bannerAreaHeight(); minHeight = height; maxHeight = height; } @@ -351,15 +343,15 @@ class PresentationFocusLayout extends Component { let width = 0; if (deviceType === DEVICE_TYPE.MOBILE) { left = 0; - width = this.mainWidth(); + width = windowWidth(); } else { left = !isRTL ? sidebarNavWidth + sidebarContentWidth : 0; - width = this.mainWidth() - sidebarNavWidth - sidebarContentWidth; + width = windowWidth() - sidebarNavWidth - sidebarContentWidth; } return { width, - height: this.mainHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), + height: windowHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), top: navBarHeight + this.bannerAreaHeight(), left, }; @@ -408,16 +400,16 @@ class PresentationFocusLayout extends Component { } else { if (input.cameraDock.height === 0) { cameraDockHeight = min( - max((this.mainHeight() - sidebarContentHeight), DEFAULT_VALUES.cameraDockMinHeight), - (this.mainHeight() - DEFAULT_VALUES.cameraDockMinHeight), + max((windowHeight() - sidebarContentHeight), DEFAULT_VALUES.cameraDockMinHeight), + (windowHeight() - DEFAULT_VALUES.cameraDockMinHeight), ); } else { cameraDockHeight = min( max(input.cameraDock.height, DEFAULT_VALUES.cameraDockMinHeight), - (this.mainHeight() - DEFAULT_VALUES.cameraDockMinHeight), + (windowHeight() - DEFAULT_VALUES.cameraDockMinHeight), ); } - cameraDockBounds.top = this.mainHeight() - cameraDockHeight; + cameraDockBounds.top = windowHeight() - cameraDockHeight; cameraDockBounds.left = !isRTL ? sidebarNavWidth : 0; cameraDockBounds.right = isRTL ? sidebarNavWidth : 0; cameraDockBounds.minWidth = sidebarContentWidth; @@ -425,7 +417,7 @@ class PresentationFocusLayout extends Component { cameraDockBounds.maxWidth = sidebarContentWidth; cameraDockBounds.minHeight = DEFAULT_VALUES.cameraDockMinHeight; cameraDockBounds.height = cameraDockHeight; - cameraDockBounds.maxHeight = this.mainHeight() - sidebarContentHeight; + cameraDockBounds.maxHeight = windowHeight() - sidebarContentHeight; cameraDockBounds.zIndex = 1; } } else { @@ -444,8 +436,8 @@ class PresentationFocusLayout extends Component { const { element: fullscreenElement } = fullscreen; if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') { - mediaBounds.width = this.mainWidth(); - mediaBounds.height = this.mainHeight(); + mediaBounds.width = windowWidth(); + mediaBounds.height = windowHeight(); mediaBounds.top = 0; mediaBounds.left = !isRTL ? 0 : null; mediaBounds.right = isRTL ? 0 : null; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx index f254a33323..86a7b6e553 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx @@ -51,14 +51,6 @@ class SmartLayout extends Component { } } - mainWidth() { - return window.document.documentElement.clientWidth; - } - - mainHeight() { - return window.document.documentElement.clientHeight; - } - bannerAreaHeight() { const { layoutContextState } = this.props; const { input } = layoutContextState; @@ -176,7 +168,7 @@ class SmartLayout extends Component { height: actionBarHeight.height, innerHeight: actionBarHeight.innerHeight, padding: actionBarHeight.padding, - top: this.mainHeight() - actionBarHeight.height, + top: windowHeight() - actionBarHeight.height, left: !isRTL ? mediaAreaBounds.left : 0, zIndex: 1, }; @@ -194,12 +186,12 @@ class SmartLayout extends Component { let maxWidth = 0; if (input.sidebarNavigation.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - minWidth = this.mainWidth(); - width = this.mainWidth(); - maxWidth = this.mainWidth(); + minWidth = windowWidth(); + width = windowWidth(); + maxWidth = windowWidth(); } else { if (input.sidebarNavigation.width === 0) { - width = min(max((this.mainWidth() * 0.2), sidebarNavMinWidth), sidebarNavMaxWidth); + width = min(max((windowWidth() * 0.2), sidebarNavMinWidth), sidebarNavMaxWidth); } else { width = min(max(input.sidebarNavigation.width, sidebarNavMinWidth), sidebarNavMaxWidth); } @@ -220,9 +212,9 @@ class SmartLayout extends Component { let sidebarNavHeight = 0; if (input.sidebarNavigation.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - sidebarNavHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; + sidebarNavHeight = windowHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarNavHeight = this.mainHeight(); + sidebarNavHeight = windowHeight(); } sidebarNavHeight -= this.bannerAreaHeight(); } @@ -258,13 +250,13 @@ class SmartLayout extends Component { let maxWidth = 0; if (input.sidebarContent.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - minWidth = this.mainWidth(); - width = this.mainWidth(); - maxWidth = this.mainWidth(); + minWidth = windowWidth(); + width = windowWidth(); + maxWidth = windowWidth(); } else { if (input.sidebarContent.width === 0) { width = min( - max((this.mainWidth() * 0.2), sidebarContentMinWidth), sidebarContentMaxWidth, + max((windowWidth() * 0.2), sidebarContentMinWidth), sidebarContentMaxWidth, ); } else { width = min(max(input.sidebarContent.width, sidebarContentMinWidth), @@ -287,9 +279,9 @@ class SmartLayout extends Component { let sidebarContentHeight = 0; if (input.sidebarContent.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - sidebarContentHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; + sidebarContentHeight = windowHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarContentHeight = this.mainHeight(); + sidebarContentHeight = windowHeight(); } sidebarContentHeight -= this.bannerAreaHeight(); } @@ -305,10 +297,16 @@ class SmartLayout extends Component { if (deviceType === DEVICE_TYPE.MOBILE) top = navBarHeight + this.bannerAreaHeight(); + let left = deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth; + left = !isRTL ? left : null; + + let right = deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth; + right = isRTL ? right : null; + return { top, - left: !isRTL ? (deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth) : null, - right: isRTL ? (deviceType === DEVICE_TYPE.MOBILE ? 0 : sidebarNavWidth) : null, + left, + right, zIndex: deviceType === DEVICE_TYPE.MOBILE ? 11 : 1, }; } @@ -322,15 +320,15 @@ class SmartLayout extends Component { let width = 0; if (deviceType === DEVICE_TYPE.MOBILE) { left = 0; - width = this.mainWidth(); + width = windowWidth(); } else { left = !isRTL ? sidebarNavWidth + sidebarContentWidth : 0; - width = this.mainWidth() - sidebarNavWidth - sidebarContentWidth; + width = windowWidth() - sidebarNavWidth - sidebarContentWidth; } return { width, - height: this.mainHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), + height: windowHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), top: navBarHeight + this.bannerAreaHeight(), left, }; @@ -453,8 +451,8 @@ class SmartLayout extends Component { } if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') { - mediaBounds.width = this.mainWidth(); - mediaBounds.height = this.mainHeight(); + mediaBounds.width = windowWidth(); + mediaBounds.height = windowHeight(); mediaBounds.top = 0; mediaBounds.left = !isRTL ? 0 : null; mediaBounds.right = isRTL ? 0 : null; @@ -531,7 +529,8 @@ class SmartLayout extends Component { const slideSize = this.calculatesSlideSize(mediaAreaBounds); const sidebarSize = sidebarContentWidth.width + sidebarNavWidth.width; const mediaBounds = this.calculatesMediaBounds(mediaAreaBounds, slideSize, sidebarSize); - const cameraDockBounds = this.calculatesCameraDockBounds(mediaAreaBounds, mediaBounds, sidebarSize); + const cameraDockBounds = this + .calculatesCameraDockBounds(mediaAreaBounds, mediaBounds, sidebarSize); const horizontalCameraDiff = cameraDockBounds.isCameraHorizontal ? cameraDockBounds.width + (camerasMargin * 2) : 0; diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx index a96b7ca213..2a05dc8c50 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx @@ -51,14 +51,6 @@ class VideoFocusLayout extends Component { } } - mainWidth() { - return window.document.documentElement.clientWidth; - } - - mainHeight() { - return window.document.documentElement.clientHeight; - } - bannerAreaHeight() { const { layoutContextState } = this.props; const { input } = layoutContextState; @@ -183,7 +175,7 @@ class VideoFocusLayout extends Component { height: actionBarHeight.height, innerHeight: actionBarHeight.innerHeight, padding: actionBarHeight.padding, - top: this.mainHeight() - actionBarHeight.height, + top: windowHeight() - actionBarHeight.height, left: !isRTL ? mediaAreaBounds.left : 0, zIndex: 1, }; @@ -201,12 +193,12 @@ class VideoFocusLayout extends Component { let maxWidth = 0; if (input.sidebarNavigation.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - minWidth = this.mainWidth(); - width = this.mainWidth(); - maxWidth = this.mainWidth(); + minWidth = windowWidth(); + width = windowWidth(); + maxWidth = windowWidth(); } else { if (input.sidebarNavigation.width === 0) { - width = min(max((this.mainWidth() * 0.2), sidebarNavMinWidth), sidebarNavMaxWidth); + width = min(max((windowWidth() * 0.2), sidebarNavMinWidth), sidebarNavMaxWidth); } else { width = min(max(input.sidebarNavigation.width, sidebarNavMinWidth), sidebarNavMaxWidth); } @@ -227,9 +219,9 @@ class VideoFocusLayout extends Component { let sidebarNavHeight = 0; if (input.sidebarNavigation.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - sidebarNavHeight = this.mainHeight() - DEFAULT_VALUES.navBarHeight; + sidebarNavHeight = windowHeight() - DEFAULT_VALUES.navBarHeight; } else { - sidebarNavHeight = this.mainHeight(); + sidebarNavHeight = windowHeight(); } sidebarNavHeight -= this.bannerAreaHeight(); } @@ -265,13 +257,13 @@ class VideoFocusLayout extends Component { let maxWidth = 0; if (input.sidebarContent.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - minWidth = this.mainWidth(); - width = this.mainWidth(); - maxWidth = this.mainWidth(); + minWidth = windowWidth(); + width = windowWidth(); + maxWidth = windowWidth(); } else { if (input.sidebarContent.width === 0) { width = min( - max((this.mainWidth() * 0.2), sidebarContentMinWidth), sidebarContentMaxWidth, + max((windowWidth() * 0.2), sidebarContentMinWidth), sidebarContentMaxWidth, ); } else { width = min(max(input.sidebarContent.width, sidebarContentMinWidth), @@ -298,29 +290,25 @@ class VideoFocusLayout extends Component { let maxHeight = 0; if (inputContent.isOpen) { if (deviceType === DEVICE_TYPE.MOBILE) { - height = this.mainHeight() - DEFAULT_VALUES.navBarHeight - this.bannerAreaHeight(); + height = windowHeight() - DEFAULT_VALUES.navBarHeight - this.bannerAreaHeight(); minHeight = height; maxHeight = height; } else if (input.cameraDock.numCameras > 0 && presentation.isOpen) { - if (inputContent.height > 0 && inputContent.height < this.mainHeight()) { + if (inputContent.height > 0 && inputContent.height < windowHeight()) { height = inputContent.height - this.bannerAreaHeight(); } else { const { size: slideSize } = input.presentation.currentSlide; - let calculatedHeight = (this.mainHeight() - this.bannerAreaHeight()) * 0.3; + let calculatedHeight = (windowHeight() - this.bannerAreaHeight()) * 0.3; if (slideSize.height > 0 && slideSize.width > 0) { calculatedHeight = (slideSize.height * outputContent.width) / slideSize.width; } - height = this.mainHeight() - calculatedHeight - this.bannerAreaHeight(); - } - maxHeight = this.mainHeight() * 0.75 - this.bannerAreaHeight(); - minHeight = this.mainHeight() * 0.25 - this.bannerAreaHeight(); - - if (height > maxHeight) { - height = maxHeight; + height = windowHeight() - calculatedHeight - this.bannerAreaHeight(); } + maxHeight = windowHeight() * 0.75 - this.bannerAreaHeight(); + minHeight = windowHeight() * 0.25 - this.bannerAreaHeight(); } else { - height = this.mainHeight() - this.bannerAreaHeight(); + height = windowHeight() - this.bannerAreaHeight(); maxHeight = height; minHeight = height; } @@ -363,15 +351,15 @@ class VideoFocusLayout extends Component { let width = 0; if (deviceType === DEVICE_TYPE.MOBILE) { left = 0; - width = this.mainWidth(); + width = windowWidth(); } else { left = !isRTL ? sidebarNavWidth + sidebarContentWidth : 0; - width = this.mainWidth() - sidebarNavWidth - sidebarContentWidth; + width = windowWidth() - sidebarNavWidth - sidebarContentWidth; } return { width, - height: this.mainHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), + height: windowHeight() - (navBarHeight + actionBarHeight + this.bannerAreaHeight()), top: navBarHeight + this.bannerAreaHeight(), left, }; @@ -447,8 +435,8 @@ class VideoFocusLayout extends Component { const sidebarSize = sidebarNavWidth + sidebarContentWidth; if (fullscreenElement === 'Presentation' || fullscreenElement === 'Screenshare') { - mediaBounds.width = this.mainWidth(); - mediaBounds.height = this.mainHeight(); + mediaBounds.width = windowWidth(); + mediaBounds.height = windowHeight(); mediaBounds.top = 0; mediaBounds.left = 0; mediaBounds.right = 0; @@ -462,7 +450,7 @@ class VideoFocusLayout extends Component { mediaBounds.top = mediaAreaBounds.top + cameraDockBounds.height; mediaBounds.width = mediaAreaBounds.width; } else if (input.cameraDock.numCameras > 0) { - mediaBounds.height = this.mainHeight() - sidebarContentHeight; + mediaBounds.height = windowHeight() - sidebarContentHeight; mediaBounds.left = !isRTL ? sidebarNavWidth : 0; mediaBounds.right = isRTL ? sidebarNavWidth : 0; mediaBounds.top = sidebarContentHeight; diff --git a/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx index 354b4890f4..d25de56832 100644 --- a/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx @@ -85,7 +85,7 @@ const NotificationsBarContainer = (props) => { useEffect(() => { const localHasNotification = !!message; - if(localHasNotification !== hasNotification){ + if (localHasNotification !== hasNotification) { layoutContextDispatch({ type: ACTIONS.SET_HAS_NOTIFICATIONS_BAR, value: localHasNotification, @@ -97,7 +97,6 @@ const NotificationsBarContainer = (props) => { return null; } - return ( {message} @@ -153,12 +152,12 @@ export default injectIntl(withTracker(({ intl }) => { const sec = Math.round((retryTime - (new Date()).getTime()) / 1000); retryInterval = startCounter(sec, setRetrySeconds, getRetrySeconds, retryInterval); data.message = ( - + <> {intl.formatMessage(intlMessages.waitingMessage, { 0: getRetrySeconds() })} - + ); break; } @@ -172,10 +171,10 @@ export default injectIntl(withTracker(({ intl }) => { const meetingId = Auth.meetingID; const breakouts = breakoutService.getBreakouts(); - const msg = { id: `${intlMessages.alertBreakoutEndsUnderMinutes.id}${REMAINING_TIME_ALERT_THRESHOLD == 1 ? 'Singular' : 'Plural'}` }; + let msg = { id: `${intlMessages.alertBreakoutEndsUnderMinutes.id}${REMAINING_TIME_ALERT_THRESHOLD === 1 ? 'Singular' : 'Plural'}` }; if (breakouts.length > 0) { - const currentBreakout = breakouts.find(b => b.breakoutId === meetingId); + const currentBreakout = breakouts.find((b) => b.breakoutId === meetingId); if (currentBreakout) { data.message = ( @@ -184,7 +183,7 @@ export default injectIntl(withTracker(({ intl }) => { messageDuration={intlMessages.breakoutTimeRemaining} timeEndedMessage={intlMessages.breakoutWillClose} alertMessage={ - intl.formatMessage(msg, {0: REMAINING_TIME_ALERT_THRESHOLD}) + intl.formatMessage(msg, { 0: REMAINING_TIME_ALERT_THRESHOLD }) } alertUnderMinutes={REMAINING_TIME_ALERT_THRESHOLD} /> @@ -201,7 +200,7 @@ export default injectIntl(withTracker(({ intl }) => { const { isBreakout } = Meeting.meetingProp; const underThirtyMin = timeRemaining && timeRemaining <= (REMAINING_TIME_THRESHOLD * 60); - const msg = { id: `${intlMessages.alertMeetingEndsUnderMinutes.id}${REMAINING_TIME_ALERT_THRESHOLD == 1 ? 'Singular' : 'Plural'}` }; + msg = { id: `${intlMessages.alertMeetingEndsUnderMinutes.id}${REMAINING_TIME_ALERT_THRESHOLD === 1 ? 'Singular' : 'Plural'}` }; if (underThirtyMin && !isBreakout) { data.message = ( @@ -210,7 +209,7 @@ export default injectIntl(withTracker(({ intl }) => { messageDuration={intlMessages.meetingTimeRemaining} timeEndedMessage={intlMessages.meetingWillClose} alertMessage={ - intl.formatMessage(msg, {0: REMAINING_TIME_ALERT_THRESHOLD}) + intl.formatMessage(msg, { 0: REMAINING_TIME_ALERT_THRESHOLD }) } alertUnderMinutes={REMAINING_TIME_ALERT_THRESHOLD} /> diff --git a/bigbluebutton-html5/imports/ui/components/poll/component.jsx b/bigbluebutton-html5/imports/ui/components/poll/component.jsx index 59933aaceb..8b87263805 100644 --- a/bigbluebutton-html5/imports/ui/components/poll/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/poll/component.jsx @@ -452,7 +452,11 @@ class Poll extends Component { ], }); }} - className={cx(styles.pBtn, styles.btnMR, { [styles.selectedBtnBlue]: type === pollTypes.TrueFalse })} + className={ + cx(styles.pBtn, styles.btnMR, { + [styles.selectedBtnBlue]: type === pollTypes.TrueFalse, + }) + } />
- { type + {type && (

{intl.formatMessage(intlMessages.responseChoices)}

@@ -534,11 +550,13 @@ class Poll extends Component { )}
+ {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
- {intl.formatMessage(secretPoll ? intlMessages.isSecretPollLabel : intlMessages.nonSecretPollLabel)} + { + intl.formatMessage(secretPoll + ? intlMessages.isSecretPollLabel + : intlMessages.nonSecretPollLabel) + }
) diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx index e0509066f7..deaa8d91ba 100755 --- a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx @@ -57,6 +57,14 @@ const intlMessages = defineMessages({ const ALLOW_FULLSCREEN = Meteor.settings.public.app.allowFullscreen; class ScreenshareComponent extends React.Component { + static renderScreenshareContainerInside(mainText) { + return ( +
+

{mainText}

+
+ ); + } + constructor() { super(); this.state = { @@ -118,33 +126,6 @@ class ScreenshareComponent extends React.Component { notify(intl.formatMessage(intlMessages.screenshareEnded), 'info', 'desktop'); } - onStreamStateChange(event) { - const { streamState } = event.detail; - const { isStreamHealthy } = this.state; - - const newHealthState = !isStreamStateUnhealthy(streamState); - event.stopPropagation(); - if (newHealthState !== isStreamHealthy) { - this.setState({ isStreamHealthy: newHealthState }); - } - } - - onLoadedData() { - this.setState({ loaded: true }); - } - - onSwitched() { - this.setState(prevState => ({ switched: !prevState.switched })); - } - - onFullscreenChange() { - const { isFullscreen } = this.state; - const newIsFullscreen = FullscreenService.isFullScreen(this.screenshareContainer); - if (isFullscreen !== newIsFullscreen) { - this.setState({ isFullscreen: newIsFullscreen }); - } - } - handleAllowAutoplay() { const { autoplayBlocked } = this.state; @@ -186,6 +167,33 @@ class ScreenshareComponent extends React.Component { } } + onStreamStateChange(event) { + const { streamState } = event.detail; + const { isStreamHealthy } = this.state; + + const newHealthState = !isStreamStateUnhealthy(streamState); + event.stopPropagation(); + if (newHealthState !== isStreamHealthy) { + this.setState({ isStreamHealthy: newHealthState }); + } + } + + onLoadedData() { + this.setState({ loaded: true }); + } + + onSwitched() { + this.setState((prevState) => ({ switched: !prevState.switched })); + } + + onFullscreenChange() { + const { isFullscreen } = this.state; + const newIsFullscreen = FullscreenService.isFullScreen(this.screenshareContainer); + if (isFullscreen !== newIsFullscreen) { + this.setState({ isFullscreen: newIsFullscreen }); + } + } + renderFullscreenButton() { const { intl, fullscreenElementId } = this.props; const { isFullscreen } = this.state; @@ -250,15 +258,6 @@ class ScreenshareComponent extends React.Component { ); } - renderScreenshareContainerInside(mainText) { - - return ( -
-

{mainText}

-
- ); - } - renderScreensharePresenter() { const { switched } = this.state; const { isGloballyBroadcasting, intl } = this.props; @@ -272,14 +271,19 @@ class ScreenshareComponent extends React.Component { {isGloballyBroadcasting && this.renderSwitchButton()} {this.renderVideo(switched)} - {isGloballyBroadcasting - ? ( -
- {!switched - && this.renderScreenshareContainerInside(intl.formatMessage(intlMessages.presenterSharingLabel))} -
- ) - : this.renderScreenshareContainerInside(intl.formatMessage(intlMessages.presenterLoadingLabel)) + { + isGloballyBroadcasting + ? ( +
+ {!switched + && ScreenshareComponent.renderScreenshareContainerInside( + intl.formatMessage(intlMessages.presenterSharingLabel), + )} +
+ ) + : ScreenshareComponent.renderScreenshareContainerInside( + intl.formatMessage(intlMessages.presenterLoadingLabel), + ) }
); @@ -305,11 +309,12 @@ class ScreenshareComponent extends React.Component { {this.renderVideo(true)}
- {!loaded - ? this.renderScreenshareContainerInside( - intl.formatMessage(intlMessages.viewerLoadingLabel), - ) - : null + { + !loaded + ? ScreenshareComponent.renderScreenshareContainerInside( + intl.formatMessage(intlMessages.viewerLoadingLabel), + ) + : null }
@@ -337,7 +342,7 @@ class ScreenshareComponent extends React.Component { // state transitioned to an unhealthy stream. tl;dr: screen sharing reconnection const shouldRenderConnectingState = !loaded || (isPresenter && !isGloballyBroadcasting) - || !isStreamHealthy && loaded && isGloballyBroadcasting; + || (!isStreamHealthy && loaded && isGloballyBroadcasting); return (
{ +const SettingsContainer = (props) => { const layoutContext = useContext(LayoutContext); const { layoutContextDispatch } = layoutContext; - return + return ; }; export default withTracker(() => ({ diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx index bbe496a36d..c158a08829 100644 --- a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx @@ -130,9 +130,7 @@ class ApplicationMenu extends BaseMenu { componentWillUnmount() { // fix Warning: Can't perform a React state update on an unmounted component - this.setState = (state, callback) => { - - }; + this.setState = () => {}; } setInitialFontSize() { @@ -175,7 +173,7 @@ class ApplicationMenu extends BaseMenu { : _constraints || {}; isAnyFilterEnabled = Object.values(constraints).find( - constraintValue => _isConstraintEnabled(constraintValue), + (constraintValue) => _isConstraintEnabled(constraintValue), ); return isAnyFilterEnabled; @@ -212,7 +210,7 @@ class ApplicationMenu extends BaseMenu { layoutContextDispatch({ type: ACTIONS.SET_FONT_SIZE, - value: parseInt(size.slice(0, -2)), + value: parseInt(size.slice(0, -2), 10), }); } @@ -282,7 +280,7 @@ class ApplicationMenu extends BaseMenu { renderPaginationToggle() { // See VideoService's method for an explanation - if (!VideoService.shouldRenderPaginationToggle()) return; + if (!VideoService.shouldRenderPaginationToggle()) return false; const { intl, showToggleLabel, displaySettingsStatus } = this.props; const { settings } = this.state; @@ -291,6 +289,7 @@ class ApplicationMenu extends BaseMenu {