Refactor of the chat notification for unread messages

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

@@ -6,6 +6,7 @@ import KickedScreen from '../kicked-screen/component';
 
 import NotificationsBarContainer from '../notifications-bar/container';
 import AudioNotificationContainer from '../audio-notification/container';
+import ChatNotificationContainer from '../chat/notification/container';
 
 import Button from '../button/component';
 import styles from './styles';
@@ -13,13 +14,16 @@ import cx from 'classnames';
 
 const propTypes = {
   init: PropTypes.func.isRequired,
+  fontSize: PropTypes.string,
   navbar: PropTypes.element,
   sidebar: PropTypes.element,
   media: PropTypes.element,
   actionsbar: PropTypes.element,
   modal: PropTypes.element,
-  unreadMessageCount: PropTypes.array,
-  openChats: PropTypes.array,
+};
+
+const defaultProps = {
+  fontSize: '16px',
 };
 
 export default class App extends Component {
@@ -30,17 +34,11 @@ export default class App extends Component {
       compactUserList: false, //TODO: Change this on userlist resize (?)
     };
 
-    this.notificationAudio = new Audio('/html5client/resources/sounds/notify.mp3');
-
     props.init.call(this);
   }
 
-  setHtmlFontSize(size) {
-    document.getElementsByTagName('html')[0].style.fontSize = size;
-  };
-
   componentDidMount() {
-    this.setHtmlFontSize(this.props.fontSize);
+    document.getElementsByTagName('html')[0].style.fontSize = this.props.fontSize;
   }
 
   renderNavBar() {
@@ -71,21 +69,19 @@ export default class App extends Component {
     let { userList } = this.props;
     const { compactUserList } = this.state;
 
+    if (!userList) return;
+
     let userListStyle = {};
     userListStyle[styles.compact] = compactUserList;
-    if (userList) {
-      userList = React.cloneElement(userList, {
-        compact: compactUserList,
-      });
+    userList = React.cloneElement(userList, {
+      compact: compactUserList,
+    });
 
-      return (
-        <nav className={cx(styles.userList, userListStyle)}>
-          {userList}
-        </nav>
-      );
-    }
-
-    return false;
+    return (
+      <nav className={cx(styles.userList, userListStyle)}>
+        {userList}
+      </nav>
+    );
   }
 
   renderChat() {
@@ -124,32 +120,8 @@ export default class App extends Component {
     );
   }
 
-  playNotificationSound() {
-    const wait = notificationAudio || 1;
-    _.debounce(this.notificationSound.play, wait * 1000);
-  }
-
-  componentDidUpdate(prevProps) {
-  }
-
   render() {
-    const { modal } = this.props;
-
-    if (this.props.wasKicked) {
-      return (
-        <KickedScreen>
-          <FormattedMessage
-            id="app.kickMessage"
-            description="Message when the user is kicked out of the meeting"
-            defaultMessage="You have been kicked out of the meeting"
-          />
-          <br/><br/>
-          <Button
-            label={'OK'}
-            onClick={this.props.redirectToLogoutUrl}/>
-        </KickedScreen>
-      );
-    }
+    const { modal, params } = this.props;
 
     return (
       <main className={styles.main}>
@@ -165,11 +137,13 @@ export default class App extends Component {
           </div>
           {this.renderSidebar()}
         </section>
-        <audio id="remote-media" autoPlay="autoplay"></audio>
         {modal}
+        <audio id="remote-media" autoPlay="autoplay"></audio>
+        <ChatNotificationContainer currentChatID={params.chatID} />
       </main>
     );
   }
 }
 
 App.propTypes = propTypes;
+App.defaultProps = defaultProps;

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

@@ -1,25 +1,19 @@
 import React, { Component, PropTypes, cloneElement } from 'react';
 import { createContainer } from 'meteor/react-meteor-data';
-import App from './component';
 import {
-  subscribeToCollections,
-  wasUserKicked,
-  redirectToLogoutUrl,
   getModal,
-  getCaptionsStatus,
   showModal,
   getFontSize,
+  getCaptionsStatus,
 } from './service';
-import { setDefaultSettings, getSettingsFor } from '/imports/ui/components/settings/service';
 
+import { setDefaultSettings } from '../settings/service';
+
+import App from './component';
 import NavBarContainer from '../nav-bar/container';
 import ActionsBarContainer from '../actions-bar/container';
 import MediaContainer from '../media/container';
-import ClosedCaptionsContainer from '../closed-captions/container';
-import UserListService from '../user-list/service';
-import AudioModalContainer  from '/imports/ui/components/audio-modal/container';
-
-import Auth from '/imports/ui/services/auth';
+import AudioModalContainer  from '../audio-modal/container';
 
 const defaultProps = {
   navbar: <NavBarContainer />,
@@ -40,36 +34,20 @@ class AppContainer extends Component {
   }
 };
 
-const checkUnreadMessages = () => {
-  return UserListService.getOpenChats().map(chat=> chat.unreadCounter)
-                        .filter(userID => userID !== Auth.userID);
-};
-
-const openChats = (chatID) => {
-  // get currently opened chatID
-  return UserListService.getOpenChats(chatID).map(chat => chat.id);
-};
-
 const APP_CONFIG = Meteor.settings.public.app;
 
 const init = () => {
+  setDefaultSettings();
   if (APP_CONFIG.autoJoinAudio) {
     showModal(<AudioModalContainer />);
   }
 };
 
-export default createContainer(({ params }) => ({
+export default createContainer(() => ({
   init,
   sidebar: getCaptionsStatus() ? <ClosedCaptionsContainer /> : null,
-  wasKicked: wasUserKicked(),
   modal: getModal(),
-  unreadMessageCount: checkUnreadMessages(),
-  openChats: openChats(params.chatID),
-  openChat: params.chatID,
-  redirectToLogoutUrl,
-  setDefaultSettings,
   fontSize: getFontSize(),
-  applicationSettings: getSettingsFor('application'),
 }), AppContainer);
 
 AppContainer.defaultProps = defaultProps;

bigbluebutton-html5/imports/ui/components/app/service.js

@@ -1,59 +1,20 @@
-import { Meteor } from 'meteor/meteor';
-import Auth from '/imports/ui/services/auth';
-import Users from '/imports/api/users';
-import Breakouts from '/imports/api/breakouts';
-import Storage from '/imports/ui/services/storage/session';
 import SettingsService from '/imports/ui/components/settings/service';
 
-function redirectToLogoutUrl(reason) {
-  console.error(reason);
-  console.log('Redirecting user to the logoutURL...');
-  document.location.href = Auth.logoutURL;
-}
-
-let wasKicked = false;
-const wasKickedDep = new Tracker.Dependency;
-// TODO: readd this observers
-function observeUserKick() {
-  Users.find().observe({
-    removed(old) {
-      if (old.userId === Auth.userID) {
-        Auth.clearCredentials(() => {
-          wasKicked = true;
-          wasKickedDep.changed();
-        });
-      }
-    },
-  });
-}
-function observeBreakoutEnd() {
-  Breakouts.find().observe({
-    removed(old) {
-      if (old.breakoutMeetingId === Auth.meetingID) {
-        // The breakout room expired. Closing the browser tab to return to the main room
-        window.close();
-      }
-    },
-  });
-}
-
-function wasUserKicked() {
-  wasKickedDep.depend();
-  return wasKicked;
-}
-
-let modal = null;
+let currentModal = {
+  component: null,
+  tracker: new Tracker.Dependency,
+};
 const modalDep = new Tracker.Dependency;
 
 const getModal = () => {
-  modalDep.depend();
-  return modal;
+  currentModal.tracker.depend();
+  return currentModal.component;
 };
 
-const showModal = (val) => {
-  if (val !== modal) {
-    modal = val;
-    modalDep.changed();
+const showModal = (component) => {
+  if (currentModal.component !== component) {
+    currentModal.component = component;
+    currentModal.tracker.changed();
   }
 };
 
@@ -62,22 +23,16 @@ const clearModal = () => {
 };
 
 const getCaptionsStatus = () => {
-  const settings = Storage.getItem('settings_cc');
+  const settings = SettingsService.getSettingsFor('cc');
   return settings ? settings.closedCaptions : false;
 };
 
 const getFontSize = () => {
   const settings = SettingsService.getSettingsFor('application');
-  return settings ? settings.fontSize : '14px';
+  return settings ? settings.fontSize : '16px';
 };
 
 export {
-  subscribeForData,
-  setCredentials,
-  subscribeFor,
-  subscribeToCollections,
-  wasUserKicked,
-  redirectToLogoutUrl,
   getModal,
   showModal,
   clearModal,

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

@@ -0,0 +1,44 @@
+import React, { Component, PropTypes } from 'react';
+import { createContainer } from 'meteor/react-meteor-data';
+import _ from 'lodash';
+
+import Auth from '/imports/ui/services/auth';
+import UserListService from '/imports/ui/components/user-list/service';
+import SettingsService from '/imports/ui/components/settings/service';
+
+class ChatNotificationContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.audio = new Audio('/html5client/resources/sounds/notify.mp3');
+  }
+
+  playAudio() {
+    if (this.props.disableAudio) return;
+    return _.debounce(() => this.audio.play(), this.audio.duration * 1000)();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.unreadMessagesCount > prevProps.unreadMessagesCount) {
+      this.playAudio();
+    }
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default createContainer(({ currentChatID }) => {
+  const AppSettings = SettingsService.getSettingsFor('application');
+
+  const unreadMessagesCount = UserListService.getOpenChats()
+                        .map(chat => chat.unreadCounter)
+                        .filter(userID => userID !== Auth.userID)
+                        .reduce((a, b) => a + b, 0);
+
+  return {
+    disableAudio: !AppSettings.chatAudioNotifications,
+    unreadMessagesCount,
+  };
+}, ChatNotificationContainer);

bigbluebutton-html5/imports/ui/components/user-list/service.js

@@ -170,8 +170,6 @@ const getUsers = () => {
 };
 
 const getOpenChats = chatID => {
-  window.Users = Users;
-
   let openChats = Chat
   .find({ 'message.chat_type': PRIVATE_CHAT_TYPE })
   .fetch()