Improve client reconnection

bigbluebutton-html5/imports/startup/client/base.jsx

@@ -85,7 +85,7 @@ class Base extends Component {
       meetingExist,
       animations,
       ejected,
-      meteorIsConnected,
+      isMeteorConnected,
       subscriptionsReady,
     } = this.props;
 
@@ -103,7 +103,7 @@ class Base extends Component {
     }
 
     // In case the meteor restart avoid error log
-    if (meteorIsConnected && (prevState.meetingExisted !== meetingExisted) && meetingExisted) {
+    if (isMeteorConnected && (prevState.meetingExisted !== meetingExisted) && meetingExisted) {
       this.setMeetingExisted(false);
     }
 
@@ -118,7 +118,7 @@ class Base extends Component {
     }
 
     // In case the meteor restart avoid error log
-    if (meteorIsConnected && (prevState.meetingExisted !== meetingExisted)) {
+    if (isMeteorConnected && (prevState.meetingExisted !== meetingExisted)) {
       this.setMeetingExisted(false);
     }
 
@@ -270,7 +270,7 @@ const BaseContainer = withTracker(() => {
         if (oldDocument.recordProp.recording && !newDocument.recordProp.recording) {
           notify(
             <FormattedMessage
-              id="app.notification.recordingStop"
+              id="app.notification.recordingPaused"
               description="Notification for when the recording stops"
             />,
             'error',
@@ -290,7 +290,7 @@ const BaseContainer = withTracker(() => {
     meetingModeratorSubscriptionHandler,
     animations,
     User,
-    meteorIsConnected: Meteor.status().connected,
+    isMeteorConnected: Meteor.status().connected,
     meetingExist: !!meeting,
     meetingHasEnded: !!meeting && meeting.meetingEnded,
     meetingIsBreakout: AppService.meetingIsBreakout(),

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

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, intlShape } from 'react-intl';
 import Button from '/imports/ui/components/button/component';
@@ -38,14 +38,6 @@ const intlMessages = defineMessages({
     id: 'app.actionsBar.actionsDropdown.presentationDesc',
     description: 'adds context to upload presentation option',
   },
-  desktopShareLabel: {
-    id: 'app.actionsBar.actionsDropdown.desktopShareLabel',
-    description: 'Desktop Share option label',
-  },
-  stopDesktopShareLabel: {
-    id: 'app.actionsBar.actionsDropdown.stopDesktopShareLabel',
-    description: 'Stop Desktop Share option label',
-  },
   desktopShareDesc: {
     id: 'app.actionsBar.actionsDropdown.desktopShareDesc',
     description: 'adds context to desktop share option',
@@ -80,7 +72,7 @@ const intlMessages = defineMessages({
   },
 });
 
-class ActionsDropdown extends Component {
+class ActionsDropdown extends PureComponent {
   constructor(props) {
     super(props);
 
@@ -196,11 +188,12 @@ class ActionsDropdown extends Component {
       isUserPresenter,
       isUserModerator,
       shortcuts: OPEN_ACTIONS_AK,
+      isMeteorConnected,
     } = this.props;
 
     const availableActions = this.getAvailableActions();
 
-    if ((!isUserPresenter && !isUserModerator) || availableActions.length === 0) return null;
+    if ((!isUserPresenter && !isUserModerator) || availableActions.length === 0 || !isMeteorConnected) return null;
 
     return (
       <Dropdown ref={(ref) => { this._dropdown = ref; }}>

bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import cx from 'classnames';
 import { styles } from './styles.scss';
 import DesktopShare from './desktop-share/component';
@@ -9,7 +9,7 @@ import JoinVideoOptionsContainer from '../video-provider/video-button/container'
 import CaptionsButtonContainer from '/imports/ui/components/actions-bar/captions/container';
 import PresentationOptionsContainer from './presentation-options/component';
 
-class ActionsBar extends React.PureComponent {
+class ActionsBar extends PureComponent {
   render() {
     const {
       isUserPresenter,
@@ -34,6 +34,7 @@ class ActionsBar extends React.PureComponent {
       stopExternalVideoShare,
       screenshareDataSavingSetting,
       isCaptionsAvailable,
+      isMeteorConnected,
       isPollingEnabled,
     } = this.props;
 
@@ -65,6 +66,7 @@ class ActionsBar extends React.PureComponent {
             intl,
             isSharingVideo,
             stopExternalVideoShare,
+            isMeteorConnected,
           }}
           />
           {isPollingEnabled
@@ -107,6 +109,7 @@ class ActionsBar extends React.PureComponent {
             isUserPresenter,
             screenSharingCheck,
             screenShareEndAlert,
+            isMeteorConnected,
             screenshareDataSavingSetting,
           }}
           />

bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
 import { injectIntl } from 'react-intl';
 import getFromUserSettings from '/imports/ui/services/users-settings';
@@ -55,6 +56,7 @@ export default withTracker(() => {
     screenShareEndAlert,
     screenshareDataSavingSetting: dataSavingSetting(),
     isCaptionsAvailable: CaptionsService.isCaptionsAvailable(),
+    isMeteorConnected: Meteor.status().connected,
     isPollingEnabled: POLLING_ENABLED,
   };
 })(injectIntl(ActionsBarContainer));

bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
 import _ from 'lodash';
@@ -123,7 +123,7 @@ const propTypes = {
   isBreakoutRecordable: PropTypes.bool.isRequired,
 };
 
-class BreakoutRoom extends Component {
+class BreakoutRoom extends PureComponent {
   constructor(props) {
     super(props);
     this.changeNumberOfRooms = this.changeNumberOfRooms.bind(this);

bigbluebutton-html5/imports/ui/components/actions-bar/desktop-share/component.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
 import browser from 'browser-detect';
@@ -16,6 +16,7 @@ const propTypes = {
   isVideoBroadcasting: PropTypes.bool.isRequired,
   screenSharingCheck: PropTypes.bool.isRequired,
   screenShareEndAlert: PropTypes.func.isRequired,
+  isMeteorConnected: PropTypes.bool.isRequired,
   screenshareDataSavingSetting: PropTypes.bool.isRequired,
 };
 
@@ -62,6 +63,7 @@ const DesktopShare = ({
   isUserPresenter,
   screenSharingCheck,
   screenShareEndAlert,
+  isMeteorConnected,
   screenshareDataSavingSetting,
 }) => {
   const onFail = (error) => {
@@ -95,6 +97,7 @@ const DesktopShare = ({
     ? (
       <Button
         className={cx(styles.button, isVideoBroadcasting || styles.btn)}
+        disabled={!isMeteorConnected && !isVideoBroadcasting || !screenshareDataSavingSetting}
         icon={isVideoBroadcasting ? 'desktop' : 'desktop_off'}
         label={intl.formatMessage(vLabel)}
         description={intl.formatMessage(vDescr)}
@@ -105,11 +108,10 @@ const DesktopShare = ({
         size="lg"
         onClick={isVideoBroadcasting ? handleUnshareScreen : () => handleShareScreen(onFail)}
         id={isVideoBroadcasting ? 'unshare-screen-button' : 'share-screen-button'}
-        disabled={!screenshareDataSavingSetting}
       />
     )
     : null);
 };
 
 DesktopShare.propTypes = propTypes;
-export default injectIntl(DesktopShare);
+export default injectIntl(memo(DesktopShare));

bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { defineMessages, intlShape, injectIntl } from 'react-intl';
@@ -40,7 +40,7 @@ const propTypes = {
   talking: PropTypes.bool.isRequired,
 };
 
-class AudioControls extends Component {
+class AudioControls extends PureComponent {
   componentDidMount() {
     const { processToggleMuteFromOutside } = this.props;
     if (Meteor.settings.public.allowOutsideCommands.toggleSelfVoice

bigbluebutton-html5/imports/ui/components/audio/audio-controls/container.jsx

@@ -38,7 +38,7 @@ export default lockContextContainer(withModalMounter(withTracker(({ mountModal,
   muted: Service.isConnected() && !Service.isListenOnly() && Service.isMuted(),
   inAudio: Service.isConnected() && !Service.isEchoTest(),
   listenOnly: Service.isConnected() && Service.isListenOnly(),
-  disable: Service.isConnecting() || Service.isHangingUp(),
+  disable: Service.isConnecting() || Service.isHangingUp() || !Meteor.status().connected,
   talking: Service.isTalking() && !Service.isMuted(),
   currentUser: Service.currentUser(),
   handleToggleMuteMicrophone: () => Service.toggleMuteMicrophone(),

bigbluebutton-html5/imports/ui/components/breakout-room/component.jsx

@@ -1,5 +1,4 @@
-import React, { Component } from 'react';
-
+import React, { PureComponent } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import _ from 'lodash';
 import Button from '/imports/ui/components/button/component';
@@ -50,7 +49,7 @@ const intlMessages = defineMessages({
   },
 });
 
-class BreakoutRoom extends Component {
+class BreakoutRoom extends PureComponent {
   constructor(props) {
     super(props);
     this.renderBreakoutRooms = this.renderBreakoutRooms.bind(this);
@@ -226,7 +225,7 @@ class BreakoutRoom extends Component {
 
   render() {
     const {
-      intl, endAllBreakouts, isModerator, closeBreakoutPanel,
+      isMeteorConnected, intl, endAllBreakouts, isModerator, closeBreakoutPanel,
     } = this.props;
     return (
       <div className={styles.panel}>
@@ -244,6 +243,7 @@ class BreakoutRoom extends Component {
             ? (
               <Button
                 color="primary"
+                disabled={!isMeteorConnected}
                 size="lg"
                 label={intl.formatMessage(intlMessages.endAllBreakouts)}
                 className={styles.endButton}

bigbluebutton-html5/imports/ui/components/breakout-room/container.jsx

@@ -23,6 +23,7 @@ export default withTracker((props) => {
   } = Service;
   const breakoutRooms = findBreakouts();
   const isMicrophoneUser = AudioService.isConnected() && !AudioService.isListenOnly();
+  const isMeteorConnected = Meteor.status().connected;
 
   return {
     ...props,
@@ -38,5 +39,6 @@ export default withTracker((props) => {
     isModerator: isModerator(),
     closeBreakoutPanel,
     getUsersByBreakoutId,
+    isMeteorConnected,
   };
 })(BreakoutContainer);

bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/component.jsx

@@ -72,7 +72,7 @@ class ChatDropdown extends PureComponent {
   }
 
   getAvailableActions() {
-    const { intl } = this.props;
+    const { intl, isMeteorConnected } = this.props;
 
     const clearIcon = 'delete';
     const saveIcon = 'download';
@@ -106,7 +106,7 @@ class ChatDropdown extends PureComponent {
         label={intl.formatMessage(intlMessages.copy)}
         key={this.actionsKey[1]}
       />,
-      user.isModerator ? (
+      user.isModerator && isMeteorConnected ? (
         <DropdownListItem
           data-test="chatClear"
           icon={clearIcon}
@@ -120,12 +120,13 @@ class ChatDropdown extends PureComponent {
 
   render() {
     const { intl } = this.props;
+    const { isSettingOpen } = this.state;
 
     const availableActions = this.getAvailableActions();
 
     return (
       <Dropdown
-        isOpen={this.state.isSettingOpen}
+        isOpen={isSettingOpen}
         onShow={this.onActionsShow}
         onHide={this.onActionsHide}
       >

bigbluebutton-html5/imports/ui/components/chat/component.jsx

@@ -40,6 +40,7 @@ const Chat = (props) => {
     intl,
     shortcuts,
     UnsentMessagesCollection,
+    isMeteorConnected,
   } = props;
 
   const HIDE_CHAT_AK = shortcuts.hidePrivateChat;
@@ -86,7 +87,7 @@ const Chat = (props) => {
                 accessKey={CLOSE_CHAT_AK}
               />
             )
-            : <ChatDropdown />
+            : <ChatDropdown isMeteorConnected={isMeteorConnected} />
         }
       </header>
       <MessageList
@@ -103,7 +104,7 @@ const Chat = (props) => {
       <MessageForm
         UnsentMessagesCollection={UnsentMessagesCollection}
         chatId={chatID}
-        disabled={isChatLocked}
+        disabled={isChatLocked || !isMeteorConnected}
         chatAreaId={ELEMENT_ID}
         chatTitle={title}
         chatName={chatName}
@@ -133,6 +134,7 @@ const propTypes = {
   lastReadMessageTime: PropTypes.number.isRequired,
   partnerIsLoggedOut: PropTypes.bool.isRequired,
   isChatLocked: PropTypes.bool.isRequired,
+  isMeteorConnected: PropTypes.bool.isRequired,
   minMessageLength: PropTypes.number.isRequired,
   maxMessageLength: PropTypes.number.isRequired,
   actions: PropTypes.shape({
@@ -148,6 +150,7 @@ const propTypes = {
 
 const defaultProps = {
   scrollPosition: 0,
+  shortcuts: [],
 };
 
 Chat.propTypes = propTypes;

bigbluebutton-html5/imports/ui/components/chat/container.jsx

@@ -139,11 +139,12 @@ export default injectIntl(withTracker(({ intl }) => {
     };
   });
 
-
   const scrollPosition = ChatService.getScrollPosition(chatID);
   const hasUnreadMessages = ChatService.hasUnreadMessages(chatID);
   const lastReadMessageTime = ChatService.lastReadMessageTime(chatID);
 
+  const { connected: isMeteorConnected } = Meteor.status();
+
   return {
     chatID,
     chatName,
@@ -154,6 +155,7 @@ export default injectIntl(withTracker(({ intl }) => {
     partnerIsLoggedOut,
     isChatLocked,
     scrollPosition,
+    isMeteorConnected,
     minMessageLength: CHAT_CONFIG.min_message_length,
     maxMessageLength: CHAT_CONFIG.max_message_length,
     UnsentMessagesCollection: ChatService.UnsentMessagesCollection,