From 20709e2e67217797115f553100f3a4821c3d35a6 Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Mon, 12 Dec 2022 16:52:41 +0000 Subject: [PATCH 001/144] handle detecting external video links spanning multiple lines --- .../smart-video-share/component.jsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/smart-video-share/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/smart-video-share/component.jsx index b39cd203e1..164d228793 100644 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/smart-video-share/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/smart-video-share/component.jsx @@ -16,18 +16,21 @@ export const SmartMediaShare = (props) => { currentSlide, intl, isMobile, isRTL, } = props; const linkPatt = /(https?:\/\/[^\s]+)/gm; - const externalLinks = safeMatch(linkPatt, currentSlide?.content, false); + const externalLinks = safeMatch(linkPatt, currentSlide?.content?.replace(/[\n]/g, ''), false); if (!externalLinks) return null; const actions = []; externalLinks.forEach((lnk) => { - if (isUrlValid(lnk)) { - actions.push({ - label: lnk, - onClick: () => startWatching(lnk), - }); - } + const splitLink = lnk.split('https://'); + splitLink.forEach((l) => { + if (isUrlValid(`https://${l}`)) { + actions.push({ + label: l, + onClick: () => startWatching(`https://${l}`), + }); + } + }); }); if (actions?.length === 0) return null; From be1959e451468b7b4ea7762a5564797373b0a1c4 Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Mon, 16 Jan 2023 17:13:22 +0000 Subject: [PATCH 002/144] exclude non-url related text from link dropdown --- .../smart-video-share/component.jsx | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/smart-video-share/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/smart-video-share/component.jsx index 164d228793..cb95f81df5 100644 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/smart-video-share/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/smart-video-share/component.jsx @@ -15,22 +15,21 @@ export const SmartMediaShare = (props) => { const { currentSlide, intl, isMobile, isRTL, } = props; - const linkPatt = /(https?:\/\/[^\s]+)/gm; - const externalLinks = safeMatch(linkPatt, currentSlide?.content?.replace(/[\n]/g, ''), false); + const linkPatt = /(https?:\/\/.*[ ]$)/g; + const externalLinks = safeMatch(linkPatt, currentSlide?.content?.replace(/[\r\n]/g, ' '), false); if (!externalLinks) return null; + const lnkParts = externalLinks[0]?.split(' ')?.filter(s => !s?.includes(' ')).join(''); const actions = []; - - externalLinks.forEach((lnk) => { - const splitLink = lnk.split('https://'); - splitLink.forEach((l) => { - if (isUrlValid(`https://${l}`)) { - actions.push({ - label: l, - onClick: () => startWatching(`https://${l}`), - }); - } - }); + + const splitLink = lnkParts?.split('https://'); + splitLink.forEach((l) => { + if (isUrlValid(`https://${l}`)) { + actions.push({ + label: l, + onClick: () => startWatching(`https://${l}`), + }); + } }); if (actions?.length === 0) return null; From c98b4754f6efb09d93c35a399ea73db6506e860d Mon Sep 17 00:00:00 2001 From: hiroshisuga <45039819+hiroshisuga@users.noreply.github.com> Date: Wed, 15 Mar 2023 13:39:52 +0900 Subject: [PATCH 003/144] add locale --- bigbluebutton-html5/public/locales/en.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/bigbluebutton-html5/public/locales/en.json b/bigbluebutton-html5/public/locales/en.json index 80be1adebd..806b3c767b 100755 --- a/bigbluebutton-html5/public/locales/en.json +++ b/bigbluebutton-html5/public/locales/en.json @@ -235,6 +235,8 @@ "app.presentation.presentationToolbar.fitToWidth": "Fit to width", "app.presentation.presentationToolbar.fitToPage": "Fit to page", "app.presentation.presentationToolbar.goToSlide": "Slide {0}", + "app.presentation.presentationToolbar.hideToolsDesc": "Hide Toolbars", + "app.presentation.presentationToolbar.showToolsDesc": "Show Toolbars", "app.presentation.placeholder": "There is no currently active presentation", "app.presentationUploder.title": "Presentation", "app.presentationUploder.message": "As a presenter you have the ability to upload any office document or PDF file. We recommend PDF file for best results. Please ensure that a presentation is selected using the circle checkbox on the left hand side.", From 1fe0edf2a44e3af32d055246e0e23e71cb02609a Mon Sep 17 00:00:00 2001 From: hiroshisuga <45039819+hiroshisuga@users.noreply.github.com> Date: Wed, 15 Mar 2023 13:43:21 +0900 Subject: [PATCH 004/144] add props hsWBAccess and amIPresenter --- .../components/presentation/presentation-menu/container.jsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/container.jsx index 7beb5e4ad5..24bc903ae7 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/container.jsx @@ -6,6 +6,8 @@ import FullscreenService from '/imports/ui/components/common/fullscreen-button/s import Auth from '/imports/ui/services/auth'; import Meetings from '/imports/api/meetings'; import { layoutSelect, layoutDispatch } from '/imports/ui/components/layout/context'; +import WhiteboardService from '/imports/ui/components/whiteboard/service'; +import UserService from '/imports/ui/components/user-list/service'; const PresentationMenuContainer = (props) => { const fullscreen = layoutSelect((i) => i.fullscreen); @@ -34,6 +36,8 @@ export default withTracker((props) => { const isIphone = !!(navigator.userAgent.match(/iPhone/i)); const meetingId = Auth.meetingID; const meetingObject = Meetings.findOne({ meetingId }, { fields: { 'meetingProp.name': 1 } }); + const hasWBAccess = WhiteboardService.hasMultiUserAccess(WhiteboardService.getCurrentWhiteboardId(), Auth.userID); + const amIPresenter = UserService.isUserPresenter(Auth.userID); return { ...props, @@ -41,6 +45,8 @@ export default withTracker((props) => { isIphone, isDropdownOpen: Session.get('dropdownOpen'), meetingName: meetingObject.meetingProp.name, + hasWBAccess, + amIPresenter, }; })(PresentationMenuContainer); From 0e188d5c30b0d275da0185edb87c1530cfe207da Mon Sep 17 00:00:00 2001 From: hiroshisuga <45039819+hiroshisuga@users.noreply.github.com> Date: Wed, 15 Mar 2023 13:49:17 +0900 Subject: [PATCH 005/144] menu item for tool visibility --- .../presentation-menu/component.jsx | 39 ++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx index 41d97a5ed3..c2e10a7829 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx @@ -56,6 +56,14 @@ const intlMessages = defineMessages({ description: 'used for aria whiteboard options button label', defaultMessage: 'Whiteboard', }, + hideToolsDesc: { + id: 'app.presentation.presentationToolbar.hideToolsDesc', + description: 'Hide toolbar label', + }, + showToolsDesc: { + id: 'app.presentation.presentationToolbar.showToolsDesc', + description: 'Show toolbar label', + }, }); const propTypes = { @@ -126,6 +134,11 @@ const PresentationMenu = (props) => { ? intl.formatMessage(intlMessages.exitFullscreenLabel) : intl.formatMessage(intlMessages.fullscreenLabel) ); + + const formattedVisibilityLabel = (visible) => (visible + ? intl.formatMessage(intlMessages.hideToolsDesc) + : intl.formatMessage(intlMessages.showToolsDesc) + ); function renderToastContent() { const { loading, hasError } = state; @@ -244,6 +257,30 @@ const PresentationMenu = (props) => { }, ); } + + const tools = document.querySelector('#TD-Tools'); + if (tools && (props.hasWBAccess || props.amIPresenter)){ + const isVisible = tools.style.visibility == 'hidden' ? false : true; + const styles = document.querySelector('#TD-Styles').parentElement; + const option = document.querySelector('#WhiteboardOptionButton'); + menuItems.push( + { + key: 'list-item-toolvisibility', + dataTest: 'toolVisibility', + label: formattedVisibilityLabel(isVisible), + icon: isVisible ? 'close' : 'minus', + onClick: () => { + tools.style.visibility = isVisible ? 'hidden' : 'visible'; + if (styles) { + styles.style.visibility = isVisible ? 'hidden' : 'visible'; + } + if (option) { + option.style.opacity = isVisible ? '0.2' : 'unset'; + } + }, + }, + ); + } return menuItems; } @@ -283,7 +320,7 @@ const PresentationMenu = (props) => { } return ( - + From 02fe1a895553b3f30d06a68ec139fa3d7a910e9c Mon Sep 17 00:00:00 2001 From: hiroshisuga <45039819+hiroshisuga@users.noreply.github.com> Date: Wed, 15 Mar 2023 13:53:37 +0900 Subject: [PATCH 006/144] comment for using the API setSetting --- .../components/presentation/presentation-menu/component.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx index c2e10a7829..79b2792b28 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx @@ -259,6 +259,8 @@ const PresentationMenu = (props) => { } const tools = document.querySelector('#TD-Tools'); + //if (props.hasWBAccess || props.amIPresenter){ + // const isFocusMode = tldrawAPI?.settings.isFocusMode; if (tools && (props.hasWBAccess || props.amIPresenter)){ const isVisible = tools.style.visibility == 'hidden' ? false : true; const styles = document.querySelector('#TD-Styles').parentElement; @@ -270,11 +272,14 @@ const PresentationMenu = (props) => { label: formattedVisibilityLabel(isVisible), icon: isVisible ? 'close' : 'minus', onClick: () => { + //with this API, the CSS setting (e.g. toolbar height) is reverted to the original tldraw setting. + //tldrawAPI?.setSetting('isFocusMode', !isFocusMode); tools.style.visibility = isVisible ? 'hidden' : 'visible'; if (styles) { styles.style.visibility = isVisible ? 'hidden' : 'visible'; } if (option) { + //option.style.opacity = isFocusMode ? 'unset' : '0.2'; option.style.opacity = isVisible ? '0.2' : 'unset'; } }, From 12a53e3a594861e24f18e9b8e3f01b8ce66bbfce Mon Sep 17 00:00:00 2001 From: hiroshisuga <45039819+hiroshisuga@users.noreply.github.com> Date: Thu, 16 Mar 2023 19:37:21 +0900 Subject: [PATCH 007/144] reset opacity RTL <-> LTR Some comments have been removed as well. --- .../presentation/presentation-menu/component.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx index 79b2792b28..e845940a03 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx @@ -259,12 +259,16 @@ const PresentationMenu = (props) => { } const tools = document.querySelector('#TD-Tools'); - //if (props.hasWBAccess || props.amIPresenter){ - // const isFocusMode = tldrawAPI?.settings.isFocusMode; if (tools && (props.hasWBAccess || props.amIPresenter)){ const isVisible = tools.style.visibility == 'hidden' ? false : true; const styles = document.querySelector('#TD-Styles').parentElement; const option = document.querySelector('#WhiteboardOptionButton'); + if (option) { + //When the RTL-LTR changed, the toolbar appears again, + // while the opacity of this button remains the same. + //So we need to reset the opacity here. + option.style.opacity = isVisible ? 'unset' : '0.2'; + } menuItems.push( { key: 'list-item-toolvisibility', @@ -272,14 +276,11 @@ const PresentationMenu = (props) => { label: formattedVisibilityLabel(isVisible), icon: isVisible ? 'close' : 'minus', onClick: () => { - //with this API, the CSS setting (e.g. toolbar height) is reverted to the original tldraw setting. - //tldrawAPI?.setSetting('isFocusMode', !isFocusMode); tools.style.visibility = isVisible ? 'hidden' : 'visible'; if (styles) { styles.style.visibility = isVisible ? 'hidden' : 'visible'; } if (option) { - //option.style.opacity = isFocusMode ? 'unset' : '0.2'; option.style.opacity = isVisible ? '0.2' : 'unset'; } }, From 7e7c46b9e9eb0bcf6c59e77f7ce1448a3912c969 Mon Sep 17 00:00:00 2001 From: hiroshisuga <45039819+hiroshisuga@users.noreply.github.com> Date: Thu, 16 Mar 2023 21:34:13 +0900 Subject: [PATCH 008/144] change icon --- .../ui/components/presentation/presentation-menu/component.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx index e845940a03..64f464bf76 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx @@ -274,7 +274,7 @@ const PresentationMenu = (props) => { key: 'list-item-toolvisibility', dataTest: 'toolVisibility', label: formattedVisibilityLabel(isVisible), - icon: isVisible ? 'close' : 'minus', + icon: isVisible ? 'close' : 'pen_tool', onClick: () => { tools.style.visibility = isVisible ? 'hidden' : 'visible'; if (styles) { From f943cbf73269d9060af08eca53b16ee57f6415af Mon Sep 17 00:00:00 2001 From: GuiLeme Date: Mon, 20 Mar 2023 10:08:35 -0300 Subject: [PATCH 009/144] [issue-16954] - renaming referencing of Modals --- .../imports/ui/components/about/component.jsx | 6 +++--- .../actions-bar/create-breakout-room/component.jsx | 6 +++--- .../imports/ui/components/actions-bar/screenshare/styles.js | 4 ++-- .../imports/ui/components/activity-check/component.jsx | 6 +++--- bigbluebutton-html5/imports/ui/components/app/component.jsx | 4 ++-- .../imports/ui/components/audio/audio-modal/styles.js | 4 ++-- .../ui/components/audio/permissions-overlay/styles.js | 4 ++-- .../ui/components/breakout-join-confirmation/component.jsx | 6 +++--- .../imports/ui/components/captions/reader-menu/styles.js | 4 ++-- .../imports/ui/components/captions/writer-menu/styles.js | 4 ++-- .../ui/components/common/modal/confirmation/styles.js | 4 ++-- .../ui/components/common/modal/random-user/component.jsx | 6 +++--- .../imports/ui/components/connection-status/modal/styles.js | 4 ++-- .../ui/components/external-video-player/modal/styles.js | 4 ++-- .../imports/ui/components/lock-viewers/styles.js | 4 ++-- .../imports/ui/components/mobile-app-modal/component.jsx | 6 +++--- .../components/nav-bar/recording-indicator/notify/styles.js | 4 ++-- .../imports/ui/components/settings/component.jsx | 6 +++--- .../imports/ui/components/shortcut-help/component.jsx | 6 +++--- .../imports/ui/components/user-info/component.jsx | 6 +++--- .../imports/ui/components/video-preview/styles.js | 4 ++-- .../ui/components/waiting-users/guest-policy/styles.js | 4 ++-- 22 files changed, 53 insertions(+), 53 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/about/component.jsx b/bigbluebutton-html5/imports/ui/components/about/component.jsx index 935344eeac..33ff7b5dee 100644 --- a/bigbluebutton-html5/imports/ui/components/about/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/about/component.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { defineMessages, injectIntl } from 'react-intl'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; const intlMessages = defineMessages({ title: { @@ -54,7 +54,7 @@ const AboutComponent = ({ intl, settings }) => { ); return ( - { {`${intl.formatMessage(intlMessages.version)} ${html5ClientBuild}`} {displayBbbServerVersion ? showLabelVersion() : 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 92ffa90db5..de2cd05d99 100644 --- 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 @@ -5,7 +5,7 @@ import _ from 'lodash'; import deviceInfo from '/imports/utils/deviceInfo'; import Button from '/imports/ui/components/common/button/component'; import { Session } from 'meteor/session'; -import Modal from '/imports/ui/components/common/modal/fullscreen/component'; +import ModalFullscreen from '/imports/ui/components/common/modal/fullscreen/component'; import { withModalMounter } from '/imports/ui/components/common/modal/service'; import SortList from './sort-user-list/component'; import Styled from './styles'; @@ -1319,7 +1319,7 @@ class BreakoutRoom extends PureComponent { const { isMobile } = deviceInfo; return ( - - + ); } } diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/styles.js b/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/styles.js index 14bb9d3db6..2f41d90797 100644 --- a/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/styles.js +++ b/bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/styles.js @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import { colorGrayDark } from '/imports/ui/stylesheets/styled-components/palette'; import { jumboPaddingY, @@ -9,7 +9,7 @@ import { } from '/imports/ui/stylesheets/styled-components/general'; import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography'; -const ScreenShareModal = styled(Modal)` +const ScreenShareModal = styled(ModalSimple)` padding: ${jumboPaddingY}; min-height: ${minModalHeight}; text-align: center; diff --git a/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx b/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx index 732b402943..96ebe75c7a 100644 --- a/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { defineMessages } from 'react-intl'; import Button from '/imports/ui/components/common/button/component'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import { makeCall } from '/imports/ui/services/api'; import { Meteor } from 'meteor/meteor'; @@ -92,7 +92,7 @@ class ActivityCheck extends Component { const { responseDelay } = this.state; return ( - - + ); } } diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx index 839b45e969..05f5489345 100644 --- a/bigbluebutton-html5/imports/ui/components/app/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { throttle } from 'lodash'; import { defineMessages, injectIntl } from 'react-intl'; -import Modal from 'react-modal'; +import ReactModal from 'react-modal'; import browserInfo from '/imports/utils/browserInfo'; import deviceInfo from '/imports/utils/deviceInfo'; import PollingContainer from '/imports/ui/components/polling/container'; @@ -162,7 +162,7 @@ class App extends Component { value: isRTL, }); - Modal.setAppElement('#app'); + ReactModal.setAppElement('#app'); const fontSize = isMobile() ? MOBILE_FONT_SIZE : DESKTOP_FONT_SIZE; document.getElementsByTagName('html')[0].style.fontSize = fontSize; diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.js b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.js index 00e7c09310..382b474fa2 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.js +++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.js @@ -1,6 +1,6 @@ import styled, { css, keyframes } from 'styled-components'; import Button from '/imports/ui/components/common/button/component'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints'; import { colorPrimary } from '/imports/ui/stylesheets/styled-components/palette'; import { @@ -90,7 +90,7 @@ const ConnectingAnimation = styled.span` } `; -const AudioModal = styled(Modal)` +const AudioModal = styled(ModalSimple)` padding: 1rem; min-height: 20rem; `; diff --git a/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.js b/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.js index 0c58a77b36..9b54599b9d 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.js +++ b/bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.js @@ -1,5 +1,5 @@ import styled, { css, keyframes } from 'styled-components'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import { colorBlack } from '/imports/ui/stylesheets/styled-components/palette'; import { jumboPaddingX } from '/imports/ui/stylesheets/styled-components/general'; @@ -22,7 +22,7 @@ const bounce = keyframes` } `; -const PermissionsOverlayModal = styled(Modal)` +const PermissionsOverlayModal = styled(ModalSimple)` ${({ isFirefox }) => isFirefox && ` top: 8em; left: 22em; diff --git a/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/component.jsx b/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/component.jsx index bc9f2ddc37..d8052c98e8 100755 --- a/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/component.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { defineMessages, injectIntl } from 'react-intl'; import { withModalMounter } from '/imports/ui/components/common/modal/service'; -import Modal from '/imports/ui/components/common/modal/fullscreen/component'; +import ModalFullscreen from '/imports/ui/components/common/modal/fullscreen/component'; import logger from '/imports/startup/client/logger'; import PropTypes from 'prop-types'; import AudioService from '../audio/service'; @@ -205,7 +205,7 @@ class BreakoutJoinConfirmation extends Component { const { waiting } = this.state; return ( - { isFreeJoin ? this.renderSelectMeeting() : `${intl.formatMessage(intlMessages.message)} ${breakoutName}?`} - + ); } } diff --git a/bigbluebutton-html5/imports/ui/components/captions/reader-menu/styles.js b/bigbluebutton-html5/imports/ui/components/captions/reader-menu/styles.js index 0030461c5c..09bb788603 100644 --- a/bigbluebutton-html5/imports/ui/components/captions/reader-menu/styles.js +++ b/bigbluebutton-html5/imports/ui/components/captions/reader-menu/styles.js @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import { colorGrayDark, colorWhite, @@ -10,7 +10,7 @@ import { } from '/imports/ui/stylesheets/styled-components/palette'; import { borderSize, borderSizeLarge } from '/imports/ui/stylesheets/styled-components/general'; -const ReaderMenuModal = styled(Modal)` +const ReaderMenuModal = styled(ModalSimple)` padding: 1rem; `; diff --git a/bigbluebutton-html5/imports/ui/components/captions/writer-menu/styles.js b/bigbluebutton-html5/imports/ui/components/captions/writer-menu/styles.js index e7f1cce433..9ca2c9edb9 100644 --- a/bigbluebutton-html5/imports/ui/components/captions/writer-menu/styles.js +++ b/bigbluebutton-html5/imports/ui/components/captions/writer-menu/styles.js @@ -12,9 +12,9 @@ import { colorPrimary, } from '/imports/ui/stylesheets/styled-components/palette'; import Button from '/imports/ui/components/common/button/component'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; -const WriterMenuModal = styled(Modal)` +const WriterMenuModal = styled(ModalSimple)` min-height: 20rem; `; diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/confirmation/styles.js b/bigbluebutton-html5/imports/ui/components/common/modal/confirmation/styles.js index 2085d74e27..58c8fdcdc6 100644 --- a/bigbluebutton-html5/imports/ui/components/common/modal/confirmation/styles.js +++ b/bigbluebutton-html5/imports/ui/components/common/modal/confirmation/styles.js @@ -1,6 +1,6 @@ import styled from 'styled-components'; import Button from '/imports/ui/components/common/button/component'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import { smPaddingX, mdPaddingX, @@ -10,7 +10,7 @@ import { import { colorGray } from '/imports/ui/stylesheets/styled-components/palette'; import { lineHeightBase } from '/imports/ui/stylesheets/styled-components/typography'; -const ConfirmationModal = styled(Modal)` +const ConfirmationModal = styled(ModalSimple)` padding: ${mdPaddingX}; `; diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/random-user/component.jsx b/bigbluebutton-html5/imports/ui/components/common/modal/random-user/component.jsx index 9e126ec4ae..6ee3d6c969 100644 --- a/bigbluebutton-html5/imports/ui/components/common/modal/random-user/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/common/modal/random-user/component.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { defineMessages, injectIntl } from 'react-intl'; import PropTypes from 'prop-types'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import AudioService from '/imports/ui/components/audio/service'; import Styled from './styles'; @@ -189,7 +189,7 @@ class RandomUserSelect extends Component { } if (keepModalOpen) { return ( - { if (currentUser.presenter) clearRandomlySelectedUser(); toggleKeepModalOpen(); @@ -199,7 +199,7 @@ class RandomUserSelect extends Component { title={title} > {viewElement} - + ); } else { return null; diff --git a/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js b/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js index 47231e28e7..af6a012492 100644 --- a/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js +++ b/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import { colorOffWhite, colorGrayDark, @@ -168,7 +168,7 @@ const CopyContainer = styled.div` padding: ${jumboPaddingY} 0 0; `; -const ConnectionStatusModal = styled(Modal)` +const ConnectionStatusModal = styled(ModalSimple)` padding: 1rem; height: 28rem; diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.js b/bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.js index 3bc986cd64..872ecf356e 100644 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.js +++ b/bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.js @@ -13,7 +13,7 @@ import { colorPrimary, } from '/imports/ui/stylesheets/styled-components/palette'; import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import Button from '/imports/ui/components/common/button/component'; const UrlError = styled.div` @@ -25,7 +25,7 @@ const UrlError = styled.div` `} `; -const ExternalVideoModal = styled(Modal)` +const ExternalVideoModal = styled(ModalSimple)` padding: 1rem; min-height: 23rem; `; diff --git a/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.js b/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.js index 786d6939c0..90efe200f1 100644 --- a/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.js +++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.js @@ -10,7 +10,7 @@ import { } from '../../stylesheets/styled-components/general'; import { fontSizeBase, fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography'; import { colorGray, colorGrayLabel, colorGrayLighter } from '../../stylesheets/styled-components/palette'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import Button from '/imports/ui/components/common/button/component'; const ToggleLabel = styled.span` @@ -21,7 +21,7 @@ const ToggleLabel = styled.span` } `; -const LockViewersModal = styled(Modal)``; +const LockViewersModal = styled(ModalSimple)``; const Container = styled.div` margin: 0 ${modalMargin} ${lgPaddingX}; diff --git a/bigbluebutton-html5/imports/ui/components/mobile-app-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/mobile-app-modal/component.jsx index d0e255bfa6..f816be7d8d 100644 --- a/bigbluebutton-html5/imports/ui/components/mobile-app-modal/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/mobile-app-modal/component.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { defineMessages, injectIntl } from 'react-intl'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import Auth from '/imports/ui/services/auth'; import Button from '/imports/ui/components/common/button/component'; import PropTypes from 'prop-types'; @@ -101,7 +101,7 @@ class MobileAppModal extends Component { const { url, urlMessage, meetingName } = this.state; return ( - - + ); } } diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/notify/styles.js b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/notify/styles.js index d91dc098c9..90e01ab005 100644 --- a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/notify/styles.js +++ b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/notify/styles.js @@ -1,8 +1,8 @@ import styled from 'styled-components'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import ConfirmationModalStyles from '/imports/ui/components/common/modal/confirmation/styles'; -const RecordingNotifyModal = styled(Modal)``; +const RecordingNotifyModal = styled(ModalSimple)``; const Container = styled(ConfirmationModalStyles.Container)` padding: 3.625em 0 3.625em 0; diff --git a/bigbluebutton-html5/imports/ui/components/settings/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/component.jsx index 0f38c11301..115df57cf5 100644 --- a/bigbluebutton-html5/imports/ui/components/settings/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/settings/component.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import Modal from '/imports/ui/components/common/modal/fullscreen/component'; +import ModalFullscreen from '/imports/ui/components/common/modal/fullscreen/component'; import { defineMessages, injectIntl } from 'react-intl'; import DataSaving from '/imports/ui/components/settings/submenus/data-saving/component'; import Application from '/imports/ui/components/settings/submenus/application/component'; @@ -267,7 +267,7 @@ class Settings extends Component { saved, } = this.state; return ( - { @@ -297,7 +297,7 @@ class Settings extends Component { }} > {this.renderModalContent()} - + ); } } diff --git a/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx b/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx index 69513fa4e1..0bef8d781a 100644 --- a/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; import browserInfo from '/imports/utils/browserInfo'; import deviceInfo from '/imports/utils/deviceInfo'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import _ from 'lodash'; import Styled from './styles'; import StyledSettings from '../settings/styles'; @@ -355,7 +355,7 @@ const ShortcutHelpComponent = (props) => { whiteboardShortcutItems.push(renderItemWhiteBoard(intl.formatMessage(intlMessages.duplicate), 'Ctrl D', 'N/A')); return ( - { - + ); }; diff --git a/bigbluebutton-html5/imports/ui/components/user-info/component.jsx b/bigbluebutton-html5/imports/ui/components/user-info/component.jsx index d8bb1ae7a0..d4f9c1ed90 100644 --- a/bigbluebutton-html5/imports/ui/components/user-info/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-info/component.jsx @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { defineMessages } from 'react-intl'; import PropTypes from 'prop-types'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import Service from './service'; @@ -55,12 +55,12 @@ class UserInfoComponent extends Component { render() { const { intl } = this.props; return ( - Service.handleCloseUserInfo()} > {this.renderUserInfo()} - + ); } } diff --git a/bigbluebutton-html5/imports/ui/components/video-preview/styles.js b/bigbluebutton-html5/imports/ui/components/video-preview/styles.js index ecf7294ef6..22e94bd0c2 100644 --- a/bigbluebutton-html5/imports/ui/components/video-preview/styles.js +++ b/bigbluebutton-html5/imports/ui/components/video-preview/styles.js @@ -16,7 +16,7 @@ import { headingsFontWeight, } from '/imports/ui/stylesheets/styled-components/typography'; import { smallOnly, landscape } from '/imports/ui/stylesheets/styled-components/breakpoints'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import ModalStyles from '/imports/ui/components/common/modal/simple/styles'; const Warning = styled.div` @@ -159,7 +159,7 @@ const ExtraActions = styled.div` } `; -const VideoPreviewModal = styled(Modal)` +const VideoPreviewModal = styled(ModalSimple)` padding: 1rem; min-height: 25rem; max-height: 100vh; diff --git a/bigbluebutton-html5/imports/ui/components/waiting-users/guest-policy/styles.js b/bigbluebutton-html5/imports/ui/components/waiting-users/guest-policy/styles.js index 4d519e8088..4b6e2a344c 100644 --- a/bigbluebutton-html5/imports/ui/components/waiting-users/guest-policy/styles.js +++ b/bigbluebutton-html5/imports/ui/components/waiting-users/guest-policy/styles.js @@ -8,10 +8,10 @@ import { modalMargin, } from '/imports/ui/stylesheets/styled-components/general'; import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import Button from '/imports/ui/components/common/button/component'; -const GuestPolicyModal = styled(Modal)``; +const GuestPolicyModal = styled(ModalSimple)``; const Container = styled.div` margin: 0 ${modalMargin} ${lgPaddingX}; From e77af8874b1a8ffb3f4c8528200b2ea05bc42fbf Mon Sep 17 00:00:00 2001 From: GuiLeme Date: Mon, 20 Mar 2023 10:13:35 -0300 Subject: [PATCH 010/144] [issue-16954] - patch for renaming --- .../imports/ui/components/layout/modal/styles.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js b/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js index de57108830..5a3d9e7d09 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js +++ b/bigbluebutton-html5/imports/ui/components/layout/modal/styles.js @@ -5,7 +5,7 @@ import { } from '/imports/ui/stylesheets/styled-components/palette'; import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints'; import Button from '/imports/ui/components/common/button/component'; -import Modal from '/imports/ui/components/common/modal/simple/component'; +import ModalSimple from '/imports/ui/components/common/modal/simple/component'; import ModalStyles from '/imports/ui/components/common/modal/simple/styles'; const Content = styled.div` @@ -17,7 +17,7 @@ const Content = styled.div` min-height: 30rem; `; -const LayoutModal = styled(Modal)` +const LayoutModal = styled(ModalSimple)` padding: 1rem; min-height: 44rem; From ec17b5dca9f1f43e394e0f4677111f7127ec0b9a Mon Sep 17 00:00:00 2001 From: GuiLeme Date: Mon, 20 Mar 2023 14:57:36 -0300 Subject: [PATCH 011/144] [issue-16954] - new structure and connection status modal transition --- bigbluebutton-html5/client/main.html | 1 + .../client/stylesheets/modals.css | 30 +++++++++++++++++ .../ui/components/common/modal/base/styles.js | 32 ++++++++++++++++++- .../connection-status/button/component.jsx | 30 +++++++++++++++-- .../connection-status/modal/component.jsx | 14 +++++--- .../connection-status/modal/container.jsx | 8 ++--- 6 files changed, 100 insertions(+), 15 deletions(-) diff --git a/bigbluebutton-html5/client/main.html b/bigbluebutton-html5/client/main.html index 40c4867c99..1752d6c990 100755 --- a/bigbluebutton-html5/client/main.html +++ b/bigbluebutton-html5/client/main.html @@ -149,4 +149,5 @@ with BigBlueButton; if not, see . +
diff --git a/bigbluebutton-html5/client/stylesheets/modals.css b/bigbluebutton-html5/client/stylesheets/modals.css index dbd6263f8d..f2cc385832 100755 --- a/bigbluebutton-html5/client/stylesheets/modals.css +++ b/bigbluebutton-html5/client/stylesheets/modals.css @@ -38,3 +38,33 @@ border: none; background-color: transparent; } + +.modal-low { + z-index: 1001; +} + +.modal-medium { + z-index: 1002; +} + +.modal-high { + z-index: 1003; +} + +/* Within a same priority, hide all but first (FIFO) */ +.modal-low ~ .modal-low, +.modal-medium ~ .modal-medium, +.modal-high ~ .modal-high { + display: none; +} + +/* Hide all low priority modals when a medium or high priority modals are displayed */ +#modals-container:has(.modal-medium) .modal-low, +#modals-container:has(.modal-high) .modal-low { + display: none; +} + +/* Hide all medium priority modals when a high priority modal is displayed */ +#modals-container:has(.modal-high) .modal-medium { + display: none; +} diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/base/styles.js b/bigbluebutton-html5/imports/ui/components/common/modal/base/styles.js index 9cd1c83719..0955dae1e9 100644 --- a/bigbluebutton-html5/imports/ui/components/common/modal/base/styles.js +++ b/bigbluebutton-html5/imports/ui/components/common/modal/base/styles.js @@ -1,3 +1,4 @@ +import React, { useCallback, useEffect } from 'react'; import styled from 'styled-components'; import { ModalScrollboxVertical } from '/imports/ui/stylesheets/styled-components/scrollable'; import { borderRadius } from '/imports/ui/stylesheets/styled-components/general'; @@ -21,5 +22,34 @@ const BaseModal = styled(ModalScrollboxVertical)` `; export default { - BaseModal, + BaseModal: (props) => + { + const { setIsOpen, modalName, children } = props; + + const closeEventHandler = useCallback (() => { + setIsOpen(false); + } , []); + useEffect( () => { + // Only add event listener if name is specified + if(!modalName) return; + + const closeEventName = `CLOSE_MODAL_${modalName.toUpperCase()}`; + + // Listen to close event on mount + document.addEventListener(closeEventName, closeEventHandler); + + // Remove listener on unmount + return () => { + document.removeEventListener(closeEventName, closeEventHandler); + }; + }, []); + console.log(props.priority) + return (document.querySelector('#modals-container')} + {...props} + > + {children} + + )}, }; diff --git a/bigbluebutton-html5/imports/ui/components/connection-status/button/component.jsx b/bigbluebutton-html5/imports/ui/components/connection-status/button/component.jsx index ccef5232f9..ebbb1b0f68 100644 --- a/bigbluebutton-html5/imports/ui/components/connection-status/button/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/connection-status/button/component.jsx @@ -19,6 +19,13 @@ const intlMessages = defineMessages({ }); class ConnectionStatusButton extends PureComponent { + constructor(props) { + super(props); + this.state = { + isModalOpen: false, + } + } + renderIcon(level = 'normal') { return( @@ -30,11 +37,27 @@ class ConnectionStatusButton extends PureComponent { ); } + setModalIsOpen = (isOpen) => this.setState({ isModalOpen: isOpen }); + + renderModal(isModalOpen) { + return ( + isModalOpen ? + : null + ) + } + render() { const { intl, connected, } = this.props; + const { isModalOpen } = this.state; + if (!connected) { return ( @@ -51,13 +74,13 @@ class ConnectionStatusButton extends PureComponent { onClick={() => {}} data-test="connectionStatusButton" /> + {this.renderModal(isModalOpen)} ); } const { stats, - mountModal, } = this.props; let color; @@ -89,12 +112,13 @@ class ConnectionStatusButton extends PureComponent { size="sm" color={color} circle - onClick={() => mountModal()} + onClick={() => this.setState({isModalOpen: true})} data-test="connectionStatusButton" /> + {this.renderModal(isModalOpen)} ); } } -export default injectIntl(withModalMounter(ConnectionStatusButton)); +export default injectIntl(ConnectionStatusButton); diff --git a/bigbluebutton-html5/imports/ui/components/connection-status/modal/component.jsx b/bigbluebutton-html5/imports/ui/components/connection-status/modal/component.jsx index af900c18cd..f4c1c0e240 100644 --- a/bigbluebutton-html5/imports/ui/components/connection-status/modal/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/connection-status/modal/component.jsx @@ -134,7 +134,7 @@ const intlMessages = defineMessages({ }); const propTypes = { - closeModal: PropTypes.func.isRequired, + setModalIsOpen: PropTypes.func.isRequired, intl: PropTypes.shape({ formatMessage: PropTypes.func.isRequired, }).isRequired, @@ -402,7 +402,7 @@ class ConnectionStatusComponent extends PureComponent { videoDownloadLabel, } = this; - const { intl, closeModal } = this.props; + const { intl, setModalIsOpen } = this.props; const { networkData } = this.state; @@ -441,7 +441,7 @@ class ConnectionStatusComponent extends PureComponent { > - closeModal()} /> + setModalIsOpen(false)} /> @@ -517,16 +517,20 @@ class ConnectionStatusComponent extends PureComponent { render() { const { - closeModal, + setModalIsOpen, intl, + isModalOpen, } = this.props; const { selectedTab } = this.state; return ( closeModal()} + priority="low" + onRequestClose={() => setModalIsOpen(false)} + setIsOpen={setModalIsOpen} hideBorder + isOpen={isModalOpen} contentLabel={intl.formatMessage(intlMessages.ariaTitle)} data-test="connectionStatusModal" > diff --git a/bigbluebutton-html5/imports/ui/components/connection-status/modal/container.jsx b/bigbluebutton-html5/imports/ui/components/connection-status/modal/container.jsx index 0c81487e42..b4559ac789 100644 --- a/bigbluebutton-html5/imports/ui/components/connection-status/modal/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/connection-status/modal/container.jsx @@ -1,14 +1,10 @@ import React from 'react'; import { withTracker } from 'meteor/react-meteor-data'; -import { withModalMounter } from '/imports/ui/components/common/modal/service'; import ConnectionStatusService from '../service'; import ConnectionStatusComponent from './component'; const connectionStatusContainer = props => ; -export default withModalMounter(withTracker(({ mountModal }) => ({ - closeModal: () => { - mountModal(null); - }, +export default withTracker(() => ({ connectionStatus: ConnectionStatusService.getConnectionStatus(), -}))(connectionStatusContainer)); +}))(connectionStatusContainer); From 031ead21760e2b2037e2928418966980765e9f6d Mon Sep 17 00:00:00 2001 From: GuiLeme Date: Tue, 21 Mar 2023 10:00:46 -0300 Subject: [PATCH 012/144] [issue-16954] - Changes to settings dropdown --- .../imports/ui/components/about/component.jsx | 4 +- .../common/modal/base/component.jsx | 33 ---- .../ui/components/common/modal/base/styles.js | 4 +- .../common/modal/confirmation/component.jsx | 11 +- .../common/modal/fullscreen/component.jsx | 9 +- .../common/modal/simple/component.jsx | 3 +- .../end-meeting-confirmation/component.jsx | 1 + .../end-meeting-confirmation/container.jsx | 6 +- .../components/mobile-app-modal/component.jsx | 1 + .../components/mobile-app-modal/container.jsx | 7 +- .../ui/components/nav-bar/component.jsx | 4 +- .../nav-bar/settings-dropdown/component.jsx | 145 +++++++++++++----- .../ui/components/settings/component.jsx | 12 +- .../ui/components/shortcut-help/component.jsx | 1 + 14 files changed, 139 insertions(+), 102 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/about/component.jsx b/bigbluebutton-html5/imports/ui/components/about/component.jsx index 33ff7b5dee..28e7beb6e2 100644 --- a/bigbluebutton-html5/imports/ui/components/about/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/about/component.jsx @@ -38,7 +38,8 @@ const intlMessages = defineMessages({ }, }); -const AboutComponent = ({ intl, settings }) => { +const AboutComponent = (props) => { + const { intl, settings } = props; const { html5ClientBuild, copyright, @@ -61,6 +62,7 @@ const AboutComponent = ({ intl, settings }) => { label: intl.formatMessage(intlMessages.dismissLabel), description: intl.formatMessage(intlMessages.dismissDesc), }} + {...props} > {`${intl.formatMessage(intlMessages.copyright)} ${copyright}`}
diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/base/component.jsx b/bigbluebutton-html5/imports/ui/components/common/modal/base/component.jsx index 4376bf5705..a544b8195f 100644 --- a/bigbluebutton-html5/imports/ui/components/common/modal/base/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/common/modal/base/component.jsx @@ -56,36 +56,3 @@ export default class ModalBase extends Component { ModalBase.propTypes = propTypes; ModalBase.defaultProps = defaultProps; - -export const withModalState = ComponentToWrap => - class ModalStateWrapper extends Component { - constructor(props) { - super(props); - - this.state = { - isOpen: true, - }; - - this.hide = this.hide.bind(this); - this.show = this.show.bind(this); - } - - hide(cb = () => { }) { - Promise.resolve(cb()) - .then(() => this.setState({ isOpen: false })); - } - - show(cb = () => { }) { - Promise.resolve(cb()) - .then(() => this.setState({ isOpen: true })); - } - - render() { - return (); - } - }; diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/base/styles.js b/bigbluebutton-html5/imports/ui/components/common/modal/base/styles.js index 0955dae1e9..a16aae99b2 100644 --- a/bigbluebutton-html5/imports/ui/components/common/modal/base/styles.js +++ b/bigbluebutton-html5/imports/ui/components/common/modal/base/styles.js @@ -43,9 +43,9 @@ export default { document.removeEventListener(closeEventName, closeEventHandler); }; }, []); - console.log(props.priority) + const priority = props.priority ? props.priority : "low" return (document.querySelector('#modals-container')} {...props} > diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/confirmation/component.jsx b/bigbluebutton-html5/imports/ui/components/common/modal/confirmation/component.jsx index 3c6043707a..f258b95263 100644 --- a/bigbluebutton-html5/imports/ui/components/common/modal/confirmation/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/common/modal/confirmation/component.jsx @@ -39,7 +39,7 @@ class ConfirmationModal extends Component { render() { const { intl, - mountModal, + setIsOpen, onConfirm, title, titleMessageId, @@ -61,9 +61,10 @@ class ConfirmationModal extends Component { return ( mountModal(null)} + onRequestClose={() => setIsOpen(false)} contentLabel={title} title={title || intl.formatMessage({ id: titleMessageId }, { 0: titleMessageExtra })} + {...this.props} > @@ -92,12 +93,12 @@ class ConfirmationModal extends Component { data-test={confirmButtonDataTest} onClick={() => { onConfirm(confirmParam, checked); - mountModal(null); + setIsOpen(false); }} /> mountModal(null)} + onClick={() => setIsOpen(false)} /> @@ -109,4 +110,4 @@ class ConfirmationModal extends Component { ConfirmationModal.propTypes = propTypes; ConfirmationModal.defaultProps = defaultProps; -export default withModalMounter(ConfirmationModal); +export default ConfirmationModal; diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/fullscreen/component.jsx b/bigbluebutton-html5/imports/ui/components/common/modal/fullscreen/component.jsx index 11b65c28c6..ec24d51beb 100644 --- a/bigbluebutton-html5/imports/ui/components/common/modal/fullscreen/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/common/modal/fullscreen/component.jsx @@ -1,7 +1,6 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; -import { withModalState } from '../base/component'; import Styled from './styles'; const intlMessages = defineMessages({ @@ -78,7 +77,7 @@ class ModalFullscreen extends PureComponent { break; } - return modalHide(callback); + return callback(); } render() { @@ -89,7 +88,7 @@ class ModalFullscreen extends PureComponent { dismiss, className, children, - modalisOpen, + isOpen, preventClosing, ...otherProps } = this.props; @@ -103,7 +102,7 @@ class ModalFullscreen extends PureComponent { return ( ); } diff --git a/bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/container.jsx b/bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/container.jsx index 812a38ade2..f1bade5fe1 100644 --- a/bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/container.jsx @@ -8,15 +8,15 @@ import logger from '/imports/startup/client/logger'; const EndMeetingContainer = (props) => ; -export default withModalMounter(withTracker(({ mountModal }) => ({ +export default withTracker((props) => ({ endMeeting: () => { logger.warn({ logCode: 'moderator_forcing_end_meeting', extraInfo: { logType: 'user_action' }, }, 'this user clicked on EndMeeting and confirmed, removing everybody from the meeting'); makeCall('endMeeting'); - mountModal(null); + props.setIsOpen(false); }, meetingTitle: Service.getMeetingTitle(), users: Service.getUsers(), -}))(EndMeetingContainer)); +}))(EndMeetingContainer); diff --git a/bigbluebutton-html5/imports/ui/components/mobile-app-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/mobile-app-modal/component.jsx index f816be7d8d..9e4ec72ad9 100644 --- a/bigbluebutton-html5/imports/ui/components/mobile-app-modal/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/mobile-app-modal/component.jsx @@ -107,6 +107,7 @@ class MobileAppModal extends Component { label: intl.formatMessage(intlMessages.dismissLabel), description: intl.formatMessage(intlMessages.dismissDesc), }} + {...this.props} > {`${intl.formatMessage(intlMessages.description)}`} diff --git a/bigbluebutton-html5/imports/ui/components/mobile-app-modal/container.jsx b/bigbluebutton-html5/imports/ui/components/mobile-app-modal/container.jsx index 56b3709d74..00af74d49f 100644 --- a/bigbluebutton-html5/imports/ui/components/mobile-app-modal/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/mobile-app-modal/container.jsx @@ -2,12 +2,7 @@ import React from 'react'; import { withTracker } from 'meteor/react-meteor-data'; import MobileAppModal from './component'; -import { withModalMounter } from '/imports/ui/components/common/modal/service'; const MobileAppModalContainer = (props) => ; -export default withModalMounter(withTracker(({ mountModal }) => ({ - closeModal: () => { - mountModal(null); - }, -}))(MobileAppModalContainer)); +export default withTracker(() => {})(MobileAppModalContainer); diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx index e3f2f3a62c..ef0612658f 100755 --- a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withModalMounter, getModal } from '/imports/ui/components/common/modal/service'; +import { getModal } from '/imports/ui/components/common/modal/service'; import withShortcutHelper from '/imports/ui/components/shortcut-help/service'; import { defineMessages, injectIntl } from 'react-intl'; import Styled from './styles'; @@ -260,5 +260,5 @@ class NavBar extends Component { NavBar.propTypes = propTypes; NavBar.defaultProps = defaultProps; -export default withShortcutHelper(withModalMounter(injectIntl(NavBar)), 'toggleUserList'); +export default withShortcutHelper(injectIntl(NavBar), 'toggleUserList'); diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx index 9255019f35..afa0863dbd 100644 --- a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx @@ -104,7 +104,6 @@ const propTypes = { formatMessage: PropTypes.func.isRequired, }).isRequired, handleToggleFullscreen: PropTypes.func.isRequired, - mountModal: PropTypes.func.isRequired, noIOSFullscreen: PropTypes.bool, amIModerator: PropTypes.bool, shortcuts: PropTypes.string, @@ -135,6 +134,11 @@ class SettingsDropdown extends PureComponent { super(props); this.state = { + isAboutModalOpen: false, + isShortcutHelpModalOpen: false, + isSettingsMenuModalOpen: false, + isEndMeetingConfirmationModalOpen: false, + isMobileAppModalOpen:false, isFullscreen: false, }; @@ -143,6 +147,9 @@ class SettingsDropdown extends PureComponent { this.leaveSession = this.leaveSession.bind(this); this.onFullscreenChange = this.onFullscreenChange.bind(this); + this.setSettingsMenuModalIsOpen = this.setSettingsMenuModalIsOpen.bind(this); + this.setEndMeetingConfirmationModalIsOpen = this.setEndMeetingConfirmationModalIsOpen.bind(this); + this.setMobileAppModalIsOpen = this.setMobileAppModalIsOpen.bind(this); } componentDidMount() { @@ -201,9 +208,29 @@ class SettingsDropdown extends PureComponent { Session.set('codeError', this.LOGOUT_CODE); } + setAboutModalIsOpen(value) { + this.setState({isAboutModalOpen: value}) + } + + setShortcutHelpModalIsOpen(value) { + this.setState({isShortcutHelpModalOpen: value}) + } + + setSettingsMenuModalIsOpen(value) { + this.setState({isSettingsMenuModalOpen: value}) + } + + setEndMeetingConfirmationModalIsOpen(value) { + this.setState({isEndMeetingConfirmationModalOpen: value}) + } + + setMobileAppModalIsOpen(value) { + this.setState({isMobileAppModalOpen: value}) + } + renderMenuItems() { const { - intl, mountModal, amIModerator, isBreakoutRoom, isMeteorConnected, audioCaptionsEnabled, + intl, amIModerator, isBreakoutRoom, isMeteorConnected, audioCaptionsEnabled, audioCaptionsActive, audioCaptionsSet, isMobile, } = this.props; @@ -228,7 +255,7 @@ class SettingsDropdown extends PureComponent { dataTest: 'settings', label: intl.formatMessage(intlMessages.settingsLabel), description: intl.formatMessage(intlMessages.settingsDesc), - onClick: () => mountModal(), + onClick: () => this.setSettingsMenuModalIsOpen(true), }, { key: 'list-item-about', @@ -236,7 +263,7 @@ class SettingsDropdown extends PureComponent { dataTest: 'aboutModal', label: intl.formatMessage(intlMessages.aboutLabel), description: intl.formatMessage(intlMessages.aboutDesc), - onClick: () => mountModal(), + onClick: () => this.setAboutModalIsOpen(true), }, ); @@ -263,7 +290,7 @@ class SettingsDropdown extends PureComponent { key: 'list-item-help', icon: 'popout_window', label: intl.formatMessage(intlMessages.openAppLabel), - onClick: () => mountModal(), + onClick: () => this.setMobileAppModalIsOpen(true), } ); } @@ -288,7 +315,7 @@ class SettingsDropdown extends PureComponent { icon: 'shortcuts', label: intl.formatMessage(intlMessages.hotkeysLabel), description: intl.formatMessage(intlMessages.hotkeysDesc), - onClick: () => mountModal(), + onClick: () => this.setShortcutHelpModalIsOpen(true), divider: true, }, ); @@ -316,7 +343,7 @@ class SettingsDropdown extends PureComponent { label: intl.formatMessage(intlMessages.endMeetingLabel), description: intl.formatMessage(intlMessages.endMeetingDesc), customStyles, - onClick: () => mountModal(), + onClick: () => this.setEndMeetingConfirmationModalIsOpen(true), }, ); } @@ -333,39 +360,83 @@ class SettingsDropdown extends PureComponent { isRTL, } = this.props; + const { isAboutModalOpen, isShortcutHelpModalOpen, isSettingsMenuModalOpen, + isEndMeetingConfirmationModalOpen, isMobileAppModalOpen, } = this.state; + const customStyles = { top: '1rem' }; return ( - null} - /> - )} - actions={this.renderMenuItems()} - opts={{ - id: 'app-settings-dropdown-menu', - keepMounted: true, - transitionDuration: 0, - elevation: 3, - getContentAnchorEl: null, - fullwidth: 'true', - anchorOrigin: { vertical: 'bottom', horizontal: isRTL ? 'left' : 'right' }, - transformorigin: { vertical: 'top', horizontal: isRTL ? 'left' : 'right' }, - }} - /> + <> + null} + /> + )} + actions={this.renderMenuItems()} + opts={{ + id: 'app-settings-dropdown-menu', + keepMounted: true, + transitionDuration: 0, + elevation: 3, + getContentAnchorEl: null, + fullwidth: 'true', + anchorOrigin: { vertical: 'bottom', horizontal: isRTL ? 'left' : 'right' }, + transformorigin: { vertical: 'top', horizontal: isRTL ? 'left' : 'right' }, + }} + /> + {isAboutModalOpen ? this.setAboutModalIsOpen(false), + priority: "low", + setIsOpen: this.setAboutModalIsOpen, + isOpen: isAboutModalOpen + }} + /> : null} + {isShortcutHelpModalOpen ? this.setShortcutHelpModalIsOpen(false), + priority: "low", + setIsOpen: this.setShortcutHelpModalIsOpen, + isOpen: isShortcutHelpModalOpen + }} + /> : null} + {isSettingsMenuModalOpen ? this.setSettingsMenuModalIsOpen(false), + priority: "medium", + setIsOpen: this.setSettingsMenuModalIsOpen, + isOpen: isSettingsMenuModalOpen + }} + /> : null} + {isEndMeetingConfirmationModalOpen ? : null} + {isMobileAppModalOpen ? this.setMobileAppModalIsOpen(false), + priority: "medium", + setIsOpen: this.setMobileAppModalIsOpen, + isOpen: isMobileAppModalOpen + }} + /> : null} + ); } } diff --git a/bigbluebutton-html5/imports/ui/components/settings/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/component.jsx index 115df57cf5..9e047f5356 100644 --- a/bigbluebutton-html5/imports/ui/components/settings/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/settings/component.jsx @@ -94,7 +94,6 @@ const propTypes = { }).isRequired, updateSettings: PropTypes.func.isRequired, availableLocales: PropTypes.objectOf(PropTypes.array).isRequired, - mountModal: PropTypes.func.isRequired, showToggleLabel: PropTypes.bool.isRequired, }; @@ -260,7 +259,7 @@ class Settings extends Component { render() { const { intl, - mountModal, + setIsOpen, } = this.props; const { current, @@ -278,10 +277,10 @@ class Settings extends Component { document.body.classList.remove(`lang-${language}`); } - /* We need to use mountModal(null) here to prevent submenu state updates, + /* We need to use setIsOpen(false) here to prevent submenu state updates, * from re-opening the modal. */ - mountModal(null); + setIsOpen(false); }, label: intl.formatMessage(intlMessages.SaveLabel), description: intl.formatMessage(intlMessages.SaveLabelDesc), @@ -290,11 +289,12 @@ class Settings extends Component { callback: () => { Settings.setHtmlFontSize(saved.application.fontSize); document.getElementsByTagName('html')[0].lang = saved.application.locale; - mountModal(null); + setIsOpen(false); }, label: intl.formatMessage(intlMessages.CancelLabel), description: intl.formatMessage(intlMessages.CancelLabelDesc), }} + {...this.props} > {this.renderModalContent()} @@ -303,4 +303,4 @@ class Settings extends Component { } Settings.propTypes = propTypes; -export default withModalMounter(injectIntl(Settings)); +export default injectIntl(Settings); diff --git a/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx b/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx index 0bef8d781a..e3e916ba31 100644 --- a/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx @@ -362,6 +362,7 @@ const ShortcutHelpComponent = (props) => { description: intl.formatMessage(intlMessages.closeDesc), }} title={intl.formatMessage(intlMessages.title)} + {...props} > setSelectedTab(tab)} From 4e17e808735cd91332612d9dc8dc72ef63e49469 Mon Sep 17 00:00:00 2001 From: GuiLeme Date: Tue, 21 Mar 2023 14:55:43 -0300 Subject: [PATCH 013/144] [issue-16954] - migrating dropdown menu from presenter --- .../actions-dropdown/component.jsx | 118 ++++++++++++------ .../common/modal/random-user/component.jsx | 6 +- .../common/modal/random-user/container.jsx | 5 +- .../external-video-player/modal/component.jsx | 12 +- .../external-video-player/modal/container.jsx | 8 +- .../ui/components/layout/modal/component.jsx | 13 +- .../ui/components/layout/modal/container.jsx | 9 +- .../nav-bar/settings-dropdown/component.jsx | 3 +- 8 files changed, 107 insertions(+), 67 deletions(-) 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 d87edbf71a..f386e89196 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 @@ -2,7 +2,6 @@ import _ from 'lodash'; import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { defineMessages } from 'react-intl'; -import { withModalMounter } from '/imports/ui/components/common/modal/service'; import withShortcutHelper from '/imports/ui/components/shortcut-help/service'; import ExternalVideoModal from '/imports/ui/components/external-video-player/modal/container'; import RandomUserSelectContainer from '/imports/ui/components/common/modal/random-user/container'; @@ -109,9 +108,17 @@ class ActionsDropdown extends PureComponent { this.pollId = _.uniqueId('action-item-'); this.takePresenterId = _.uniqueId('action-item-'); this.selectUserRandId = _.uniqueId('action-item-'); + this.state = { + isExternalVideoModalOpen: false, + isRandomUserSelectModalOpen: false, + isLayoutModalOpen: false, + } this.handleExternalVideoClick = this.handleExternalVideoClick.bind(this); this.makePresentationItems = this.makePresentationItems.bind(this); + this.setExternalVideoModalIsOpen = this.setExternalVideoModalIsOpen.bind(this); + this.setRandomUserSelectModalIsOpen = this.setRandomUserSelectModalIsOpen.bind(this); + this.setLayoutModalIsOpen = this.setLayoutModalIsOpen.bind(this); } componentDidUpdate(prevProps) { @@ -123,8 +130,7 @@ class ActionsDropdown extends PureComponent { } handleExternalVideoClick() { - const { mountModal } = this.props; - mountModal(); + this.setExternalVideoModalIsOpen(true); } getAvailableActions() { @@ -216,7 +222,7 @@ class ActionsDropdown extends PureComponent { icon: "user", label: intl.formatMessage(intlMessages.selectRandUserLabel), key: this.selectUserRandId, - onClick: () => mountModal(), + onClick: () => this.setRandomUserSelectModalIsOpen(true), dataTest: "selectRandomUser", }) } @@ -236,7 +242,7 @@ class ActionsDropdown extends PureComponent { icon: 'send', label: intl.formatMessage(intlMessages.layoutModal), key: 'layoutModal', - onClick: () => mountModal(), + onClick: () => this.setLayoutModalIsOpen(true), dataTest: 'layoutModal', }); } @@ -281,6 +287,16 @@ class ActionsDropdown extends PureComponent { return presentationItemElements; } + setExternalVideoModalIsOpen(value) { + this.setState({isExternalVideoModalOpen: value}); + } + setRandomUserSelectModalIsOpen(value) { + this.setState({isRandomUserSelectModalOpen: value}); + } + setLayoutModalIsOpen(value) { + this.setState({isLayoutModalOpen: value}); + } + render() { const { intl, @@ -292,6 +308,9 @@ class ActionsDropdown extends PureComponent { isRTL, } = this.props; + const { isExternalVideoModalOpen, + isRandomUserSelectModalOpen, isLayoutModalOpen } = this.state; + const availableActions = this.getAvailableActions(); const availablePresentations = this.makePresentationItems(); const children = availablePresentations.length > 1 && amIPresenter @@ -305,35 +324,64 @@ class ActionsDropdown extends PureComponent { } return ( - null} - /> - } - actions={children} - opts={{ - id: "actions-dropdown-menu", - keepMounted: true, - transitionDuration: 0, - elevation: 3, - getContentAnchorEl: null, - fullwidth: "true", - anchorOrigin: { vertical: 'top', horizontal: isRTL ? 'right' : 'left' }, - transformOrigin: { vertical: 'bottom', horizontal: isRTL ? 'right' : 'left' }, - }} - /> + <> + null} + /> + } + actions={children} + opts={{ + id: "actions-dropdown-menu", + keepMounted: true, + transitionDuration: 0, + elevation: 3, + getContentAnchorEl: null, + fullwidth: "true", + anchorOrigin: { vertical: 'top', horizontal: isRTL ? 'right' : 'left' }, + transformOrigin: { vertical: 'bottom', horizontal: isRTL ? 'right' : 'left' }, + }} + /> + {isExternalVideoModalOpen ? this.setExternalVideoModalIsOpen(false), + priority: "medium", + setIsOpen: this.setExternalVideoModalIsOpen, + isOpen: isExternalVideoModalOpen + }} + /> : null} + {isRandomUserSelectModalOpen ? this.setRandomUserSelectModalIsOpen(false), + priority: "medium", + setIsOpen: this.setRandomUserSelectModalIsOpen, + isOpen: isRandomUserSelectModalOpen + }} + /> : null} + {isLayoutModalOpen ? this.setLayoutModalIsOpen(false), + priority: "medium", + setIsOpen: this.setLayoutModalIsOpen, + isOpen: isLayoutModalOpen + }} + /> : null} + ); } } @@ -341,4 +389,4 @@ class ActionsDropdown extends PureComponent { ActionsDropdown.propTypes = propTypes; ActionsDropdown.defaultProps = defaultProps; -export default withShortcutHelper(withModalMounter(ActionsDropdown), 'openActions'); +export default withShortcutHelper(ActionsDropdown, 'openActions'); diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/random-user/component.jsx b/bigbluebutton-html5/imports/ui/components/common/modal/random-user/component.jsx index 6ee3d6c969..97c612c775 100644 --- a/bigbluebutton-html5/imports/ui/components/common/modal/random-user/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/common/modal/random-user/component.jsx @@ -42,7 +42,6 @@ const propTypes = { intl: PropTypes.shape({ formatMessage: PropTypes.func.isRequired, }).isRequired, - mountModal: PropTypes.func.isRequired, numAvailableViewers: PropTypes.number.isRequired, randomUserReq: PropTypes.func.isRequired, }; @@ -123,7 +122,7 @@ class RandomUserSelect extends Component { keepModalOpen, toggleKeepModalOpen, intl, - mountModal, + setIsOpen, numAvailableViewers, currentUser, clearRandomlySelectedUser, @@ -193,10 +192,11 @@ class RandomUserSelect extends Component { onRequestClose={() => { if (currentUser.presenter) clearRandomlySelectedUser(); toggleKeepModalOpen(); - mountModal(null); + setIsOpen(false); }} contentLabel={intl.formatMessage(messages.ariaModalTitle)} title={title} + {...this.props} > {viewElement} diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/random-user/container.jsx b/bigbluebutton-html5/imports/ui/components/common/modal/random-user/container.jsx index 7d19b63ff5..83330f3395 100644 --- a/bigbluebutton-html5/imports/ui/components/common/modal/random-user/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/common/modal/random-user/container.jsx @@ -74,7 +74,7 @@ const RandomUserSelectContainer = (props) => { /> ); }; -export default withModalMounter(withTracker(({ mountModal }) => { +export default withTracker(() => { const viewerPool = Users.find({ meetingId: Auth.meetingID, presenter: { $ne: true }, @@ -96,11 +96,10 @@ export default withModalMounter(withTracker(({ mountModal }) => { const clearRandomlySelectedUser = () => (SELECT_RANDOM_USER_ENABLED ? makeCall('clearRandomlySelectedUser') : null); return ({ - closeModal: () => mountModal(null), toggleKeepModalOpen, numAvailableViewers: viewerPool.length, randomUserReq, clearRandomlySelectedUser, randomlySelectedUser: meeting.randomlySelectedUser, }); -})(RandomUserSelectContainer)); +})(RandomUserSelectContainer); diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/modal/component.jsx b/bigbluebutton-html5/imports/ui/components/external-video-player/modal/component.jsx index 6681aae7b4..1d90dc953a 100644 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/modal/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/external-video-player/modal/component.jsx @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import { withModalMounter } from '/imports/ui/components/common/modal/service'; import { defineMessages, injectIntl } from 'react-intl'; import { isUrlValid } from '../service'; import Settings from '/imports/ui/services/settings'; @@ -56,13 +55,13 @@ class ExternalVideoModal extends Component { startWatchingHandler() { const { startWatching, - closeModal, + setIsOpen, } = this.props; const { url } = this.state; startWatching(url.trim()); - closeModal(); + setIsOpen(false); } updateVideoUrlHandler(ev) { @@ -88,7 +87,7 @@ class ExternalVideoModal extends Component { } render() { - const { intl, closeModal } = this.props; + const { intl, setIsOpen, isOpen } = this.props; const { url, sharing } = this.state; const { animations } = Settings.application; @@ -96,9 +95,10 @@ class ExternalVideoModal extends Component { return ( setIsOpen(false)} contentLabel={intl.formatMessage(intlMessages.title)} title={intl.formatMessage(intlMessages.title)} + {...this.props} > @@ -139,4 +139,4 @@ class ExternalVideoModal extends Component { } } -export default injectIntl(withModalMounter(ExternalVideoModal)); +export default injectIntl(ExternalVideoModal); diff --git a/bigbluebutton-html5/imports/ui/components/external-video-player/modal/container.jsx b/bigbluebutton-html5/imports/ui/components/external-video-player/modal/container.jsx index defb1a8a4d..9cff24d52b 100644 --- a/bigbluebutton-html5/imports/ui/components/external-video-player/modal/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/external-video-player/modal/container.jsx @@ -1,15 +1,11 @@ import React from 'react'; import { withTracker } from 'meteor/react-meteor-data'; -import { withModalMounter } from '/imports/ui/components/common/modal/service'; import ExternalVideoModal from './component'; import { startWatching, getVideoUrl } from '../service'; const ExternalVideoModalContainer = props => ; -export default withModalMounter(withTracker(({ mountModal }) => ({ - closeModal: () => { - mountModal(null); - }, +export default withTracker(() => ({ startWatching, videoUrl: getVideoUrl(), -}))(ExternalVideoModalContainer)); +}))(ExternalVideoModalContainer); diff --git a/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx b/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx index 636be45778..45ecf64df8 100644 --- a/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx @@ -2,7 +2,6 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; import { LAYOUT_TYPE } from '/imports/ui/components/layout/enums'; -import { withModalMounter } from '/imports/ui/components/common/modal/service'; import SettingsService from '/imports/ui/components/settings/service'; import getFromUserSettings from '/imports/ui/services/users-settings'; import deviceInfo from '/imports/utils/deviceInfo'; @@ -13,7 +12,7 @@ import Styled from './styles'; const LayoutModalComponent = (props) => { const { intl, - closeModal, + setIsOpen, isModerator, isPresenter, showToggleLabel, @@ -98,7 +97,7 @@ const LayoutModalComponent = (props) => { }; updateSettings(obj, intl.formatMessage(intlMessages.layoutToastLabel)); - closeModal(); + setIsOpen(false); }; const renderPushLayoutsOptions = () => { @@ -157,8 +156,9 @@ const LayoutModalComponent = (props) => { shouldCloseOnOverlayClick isPhone={deviceInfo.isPhone} data-test="layoutChangeModal" - onRequestClose={closeModal} + onRequestClose={() => setIsOpen(false)} title={intl.formatMessage(intlMessages.title)} + {...props} > @@ -169,7 +169,7 @@ const LayoutModalComponent = (props) => { setIsOpen(false)} color="secondary" />