Merge pull request #28 from SundownDEV/devFront

Add MusicContainer -> wrap App for music continous rendering

client/src/components/App.js

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import axios from 'axios';
 import '../styles/App.css';
 import Modal from 'react-modal';
-import Sound from 'react-sound';
-
 
 const customStyles = {
     content : {
@@ -123,13 +121,6 @@ class App extends Component {
   
     return (
       <div className="App container">
-      <Sound
-      url="/music.mp3"
-      playStatus={Sound.status.PLAYING}
-      playFromPosition={0}
-      volume={55}
-      loop={true}
-    />
           <Modal
               isOpen={this.state.modalIsOpen}
               onAfterOpen={this.afterOpenModal}

client/src/components/MusicContainer.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import App from './App';
+import Sound from 'react-sound';
+
+
+class MusicContainer extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+    position: 0
+    };
+  }
+
+  render() {
+  
+    return (
+      <div>
+      <Sound
+      url="/music.mp3"
+      playStatus={Sound.status.PLAYING}
+      playFromPosition={this.state.position}
+      volume={55}
+      onPlaying={(obj) => this.setState({position: obj.position})}
+      loop={true}
+    />
+        <App />
+      </div>
+    );
+  }
+}
+
+export default MusicContainer;

client/src/components/Router.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 import Home from './Home'
-import App from './App'
+import MusicContainer from './MusicContainer'
 
 const Router = () => (
     <main>
         <Switch>
             <Route exact path='/' component={Home}/>
-            <Route path='/app' component={App}/>
+            <Route path='/app' component={MusicContainer}/>
         </Switch>
     </main>
 );