Changes Router in order for the livereloading to work again

bigbluebutton-html5/imports/api/common/server/helpers.js

@@ -22,7 +22,12 @@ export function appendMessageHeader(eventName, messageObj) {
 };
 
 export function clearCollections() {
-  console.log('in function clearCollections');
+
+  //This is to prevent collection clearing in development environment
+  if (process.env.NODE_ENV === "development") {
+    return;
+  }
+
   clearUsersCollection();
   clearChatCollection();
   clearMeetingsCollection();

bigbluebutton-html5/imports/startup/client/routes.js

@@ -2,13 +2,15 @@ import React from 'react';
 import { Router, Route, Redirect, IndexRoute,
   IndexRedirect, useRouterHistory } from 'react-router';
 import { createHistory } from 'history';
+import { isSubscribedForData } from '/imports/ui/components/app/service';
 
 // route components
-import AppContainer from '../../ui/components/app/container';
-import {setCredentials, subscribeForData} from '../../ui/components/app/service';
+import AppContainer from '/imports/ui/components/app/container';
+import { subscribeToCollections, setCredentials, subscribeForData, subscribeFor } from '/imports/ui/components/app/service';
 
-import ChatContainer from '../../ui/components/chat/container';
-import UserListContainer from '../../ui/components/user-list/container';
+import ChatContainer from '/imports/ui/components/chat/container';
+import UserListContainer from '/imports/ui/components/user-list/container';
+import Loader from '/imports/ui/components/loader/component';
 
 const browserHistory = useRouterHistory(createHistory)({
   basename: '/html5client',
@@ -17,17 +19,27 @@ const browserHistory = useRouterHistory(createHistory)({
 export const renderRoutes = () => (
   <Router history={browserHistory}>
     <Route path="/join/:meetingID/:userID/:authToken" onEnter={setCredentials} />
-    <Route path="/" component={AppContainer} onEnter={subscribeForData} >
+    <Route path="/" onEnter={() => {
+        subscribeToCollections()
+      }}
+      getComponent={(nextState, cb) => {
+        subscribeToCollections(() => cb(null, AppContainer));
+      }}>
       <IndexRoute components={{}} />
 
-      <Route name="users" path="users" components={{
-        userList: UserListContainer,
+      <Route name="users" path="users" getComponents={(nextState, cb) => {
+        subscribeToCollections(() => cb(null, {
+          userList: UserListContainer,
+        }));
       }} />
 
-      <Route name="chat" path="users/chat/:chatID" components={{
-        userList: UserListContainer,
-        chat: ChatContainer,
+      <Route name="chat" path="users/chat/:chatID" getComponents={(nextState, cb) => {
+        subscribeToCollections(() => cb(null, {
+          userList: UserListContainer,
+          chat: ChatContainer,
+        }));
       }} />
+
       <Redirect from="users/chat" to="/users/chat/public" />
     </Route>
     <Redirect from="*" to="/" />

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

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import Loader from '../loader/component';
 import styles from './styles';
 
 const propTypes = {
@@ -116,6 +117,10 @@ export default class App extends Component {
   }
 
   render() {
+    if(this.props.isLoading) {
+      return <Loader/>;
+    }
+
     return (
       <main className={styles.main}>
         <section className={styles.wrapper}>

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

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { createContainer } from 'meteor/react-meteor-data';
 
 import App from './component';
-import { pollExists } from './service';
+import { subscribeForData, pollExists } from './service';
 
 import NavBarContainer from '../nav-bar/container';
 import ActionsBarContainer from '../actions-bar/container';
@@ -20,11 +20,6 @@ const defaultProps = {
 class AppContainer extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      meetingID: localStorage.getItem('meetingID'),
-      userID: localStorage.getItem('userID'),
-      authToken: localStorage.getItem('authToken'),
-    };
   }
 
   render() {
@@ -46,7 +41,30 @@ const actionControlsToShow = () => {
   }
 };
 
+var loading = true;
+var loadingDep = new Tracker.Dependency;
+
+var getLoading = () => {
+  loadingDep.depend()
+  return loading;
+};
+
+var setLoading = (val) => {
+  if (val !== loading) {
+    loading = val;
+    loadingDep.changed();
+  }
+};
+
 export default createContainer(() => {
-  const data = { actionsbar: actionControlsToShow() };
-  return data;
+  Promise.all(subscribeForData())
+  .then(() => {
+    setLoading(false);
+  })
+  .catch(reason => console.error(reason));
+
+  return {
+    isLoading: getLoading(),
+    actionsbar: actionControlsToShow()
+  };
 }, AppContainer);

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

@@ -8,6 +8,7 @@ import Cursor from '/imports/api/cursor';
 import Polls from '/imports/api/polls';
 
 function setCredentials(nextState, replace) {
+  console.log('4Head');
   if (nextState && nextState.params.authToken) {
     const { meetingID, userID, authToken } = nextState.params;
     Auth.setCredentials(meetingID, userID, authToken);
@@ -17,46 +18,48 @@ function setCredentials(nextState, replace) {
   }
 };
 
+let dataSubscriptions = null;
 function subscribeForData() {
-  callServer('validateAuthToken', function() {
-    console.log('LUL');
-    subscribeFor('chat');
-    subscribeFor('cursor');
-    subscribeFor('deskshare');
-    subscribeFor('meetings');
-    subscribeFor('polls');
-    subscribeFor('presentations');
-    subscribeFor('shapes');
-    subscribeFor('slides');
-    subscribeFor('users');
+  if(dataSubscriptions) {
+    return dataSubscriptions;
+  }
 
-    window.Users = Users; // for debug purposes TODO remove
-    window.Chat = Chat; // for debug purposes TODO remove
-    window.Meetings = Meetings; // for debug purposes TODO remove
-    window.Cursor = Cursor; // for debug purposes TODO remove
-    window.Polls = Polls; // for debug purposes TODO remove
+  const subNames = ['users', 'chat', 'cursor', 'deskshare', 'meetings',
+    'polls', 'presentations', 'shapes', 'slides'];
 
-    Auth.setLogOut();
-  });
+  let subs = [];
+  subNames.forEach(name => subs.push(subscribeFor(name)));
+
+  dataSubscriptions = subs;
+  return subs;
 };
 
 function subscribeFor(collectionName) {
   const credentials = Auth.getCredentials();
-
-  // console.log("subscribingForData", collectionName, meetingID, userID, authToken);
-
-  Meteor.subscribe(collectionName, credentials, onError, onReady);
+  return new Promise((resolve, reject) => {
+    Meteor.subscribe(collectionName, credentials, {
+      onReady: (...args) => resolve(...args),
+      onStop: (...args) => reject(...args),
+    });
+  });
 };
 
-function onError(error, result) {
+function subscribeToCollections(cb) {
+  subscribeFor('users').then(() => {
+    Promise.all(subscribeForData()).then(() => {
+      if(cb) {
+        cb();
+      }
+    })
+  })
+};
 
-  // console.log("OnError", error, result);
+function onStop(error, result) {
   console.log('OnError', error, result);
-  Auth.completeLogout();
 };
 
 function onReady() {
-  // console.log("OnReady", Users.find().fetch());
+  console.log("OnReady");
 };
 
 function pollExists() {
@@ -67,4 +70,6 @@ export {
   pollExists,
   subscribeForData,
   setCredentials,
+  subscribeFor,
+  subscribeToCollections,
 };

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

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import styles from './styles.scss';
+
+class Loader extends Component {
+  render() {
+    return (
+      <div className={styles.background}>
+        <div className={styles.spinner}>
+          <div className={styles.bounce1}></div>
+          <div className={styles.bounce2}></div>
+          <div className={styles.bounce3}></div>
+        </div>
+      </div>
+    );
+  }
+}
+export default Loader;

bigbluebutton-html5/imports/ui/components/loader/styles.scss

@@ -0,0 +1,60 @@
+@import '../../stylesheets/variables/palette';
+
+/* Variables
+ * ==========
+ */
+$loader-bg: $color-gray-dark;
+$loader-bullet: $color-white;
+
+.background {
+  position: fixed;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: $loader-bg;
+}
+
+.spinner {
+  width: 100%;
+  text-align: center;
+  height: 22px;
+}
+
+.spinner > div {
+  width: 18px;
+  height: 18px;
+  margin: 0 5px;
+  background-color: $loader-bullet;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}

bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx

@@ -37,8 +37,8 @@ export default class ChatListItem extends Component {
           (<FormattedMessage
             id="app.userlist.you"
             description="Text for identifying your user"
-            defaultMessage="You TROLOLOLOLOLO"
-          />) LUL
+            defaultMessage="You"
+          />)
           </p>
       );
     }