add Audio container and use for modal

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

 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import _ from 'lodash';
 
 import NotificationsBarContainer from '../notifications-bar/container';
 import AudioNotificationContainer from '../audio/audio-notification/container';
+import AudioContainer from '../audio/container';
 import ChatNotificationContainer from '../chat/notification/container';
 
-import Button from '../button/component';
 import styles from './styles';
 import cx from 'classnames';
 
@@ -119,7 +118,7 @@ export default class App extends Component {
   }
 
   render() {
-    const { modal, params } = this.props;
+    const { params } = this.props;
 
     return (
       <main className={styles.main}>
@@ -135,8 +134,7 @@ export default class App extends Component {
           </div>
           {this.renderSidebar()}
         </section>
-        {modal}
-        <audio id="remote-media" autoPlay="autoplay"></audio>
+        <AudioContainer />
         <ChatNotificationContainer currentChatID={params.chatID} />
       </main>
     );

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

@@ -5,7 +5,6 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import {
   getModal,
-  showModal,
   getFontSize,
   getCaptionsStatus,
 } from './service';
@@ -20,7 +19,6 @@ import App from './component';
 import NavBarContainer from '../nav-bar/container';
 import ActionsBarContainer from '../actions-bar/container';
 import MediaContainer from '../media/container';
-import AudioModalContainer  from '../audio/audio-modal/container';
 import ClosedCaptionsContainer from '/imports/ui/components/closed-captions/container';
 
 const defaultProps = {
@@ -50,13 +48,8 @@ class AppContainer extends Component {
   }
 };
 
-const APP_CONFIG = Meteor.settings.public.app;
-
 const init = () => {
   setDefaultSettings();
-  if (APP_CONFIG.autoJoinAudio) {
-    showModal(<AudioModalContainer />);
-  }
 };
 
 export default withRouter(injectIntl(createContainer(({ router, intl, baseControls }) => {

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

+import React, { Component } from 'react';
+
+export default class Audio extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { modal } = this.props;
+
+    // console.log(this.props);
+    return (
+      <div>
+        {modal}
+      </div>
+    );
+  }
+}

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

+import React, { Component } from 'react';
+import { createContainer } from 'meteor/react-meteor-data';
+import Audio from './component';
+import Service from './service';
+
+import {showModal, getModal} from '../app/service';
+import AudioModalContainer from './audio-modal/container'
+
+class AudioContainer extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <audio id="remote-media" autoPlay="autoplay">
+        <Audio
+          {...this.props}>
+          {this.props.children}
+        </Audio>
+      </audio>
+    );
+  }
+}
+
+const APP_CONFIG = Meteor.settings.public.app;
+
+if (APP_CONFIG.autoJoinAudio) {
+  showModal(<AudioModalContainer />);
+}
+
+export default createContainer(() => {
+
+  return {
+    modal: getModal(),
+  };
+}, AudioContainer);
+
+

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

+import React from 'react';
+
+export default {
+};