Add instructions. Better title format.

README.md

@@ -8,4 +8,23 @@ Takes multiple OGG files, and allows remotely playing them with different pan an
 Prerequisites
 ---------------------------
 
+* node v10.0.0
+* yarn 1.6.0
+* npm 5.6.0
+* Chrome 66
 
+You may be able to use newer or older versions of these components, but this is not guaranteed to work.
+
+Running
+----------------------------
+
+1. Create a folder at /frontend/public/audio and save your audio files there. They should all be the same length.
+2. Copy the file /.env.sample to /.env. Change the `AUDIO_FILES_ARRAY` to include your files.
+3. Change the `ADMIN_PASSWORD` in .env to something else!
+4. Run `yarn install`
+5. Run `yarn run start`
+6. Navigate to http://localhost:3000 with Chrome. The app should be running.
+7. Open as many clients as you want, on as many computers as you want, then open the admin page in a new Chrome tab.
+8. Paste the admin password into the box, and click submit.
+
+An interface will appear, allowing you to control the sources playing on each client individually. If you name the clients using the client name box, the client's settings will be saved to `storage.json` using that name, and will be recalled any time you enter that name, even if you restart the server.

frontend/src/buffer-client-backend.js

@@ -163,9 +163,8 @@ class BufferClientBackend {
             ws.send(JSON.stringify({type: 'hello', timestamp: Date.now(),  }));
         });
 
-        ws.addEventListener('close', () => window.location.reload());
-        ws.addEventListener('error', () => window.location.reload());
-
+        ws.addEventListener('close', () => setTimeout(window.location.reload, 5000));
+        ws.addEventListener('error', () => setTimeout(window.location.reload, 5000)); 
         ws.addEventListener('message', evt => {
             let data = JSON.parse(evt.data);
 

frontend/src/view/admin.js

@@ -21,8 +21,8 @@ class Admin extends React.Component {
 
         let ws = this.ws = new WebSocket(`ws://${HOST}:3031`);
 
-        ws.addEventListener('close', () => window.location.reload());
-        ws.addEventListener('error', () => window.location.reload());
+        ws.addEventListener('close', () => setTimeout(window.location.reload, 5000));
+        ws.addEventListener('error', () => setTimeout(window.location.reload, 5000));
 
         ws.addEventListener('message', evt => {
             let data = JSON.parse(evt.data);

frontend/src/view/app.js

@@ -8,7 +8,7 @@ class App extends React.Component {
     render() {
         return (
             <div>
-                <Helmet titleTemplate="Web Audio - %s">
+                <Helmet titleTemplate="%s - Web Audio">
                     <title>Web Audio</title>
                 </Helmet>
                 <header>

frontend/src/view/client.js

@@ -14,12 +14,23 @@ class Client extends React.Component {
         this.props.onComponentMount && this.props.onComponentMount();
     }
     render() {
-        return ([
-            <Helmet>
-                <title>Client</title>
-            </Helmet>,
-            <BufferClient {...this.props} />,
-        ]);
+        return (
+            <div>
+                <Helmet>
+                    <title>{"Client " + this.props.clientName}</title>
+                </Helmet>
+                <h1>
+                    Client
+                </h1>
+                <p>
+                    This is the client page. This connects to the server, and will emit sounds with the configuration
+                    that the server specifies. If you enter a client name into the box below, it will load settings
+                    that were previously saved for this client after a few seconds. The client name is case sensitive.
+                    YARGY is different from Yargy and YaRgY.
+                </p>
+                <BufferClient {...this.props} />
+            </div>
+        );
     }
 }
 

package.json

@@ -7,6 +7,7 @@
     "debug": "npm-run-all --parallel debug-frontend debug-server",
     "debug-server": "nodemon --inspect-brk=0.0.0.0:9229 ./index.js",
     "debug-frontend": "cd ./frontend && yarn install && yarn run start",
+
     "start": "npm-run-all --parallel frontend server",
     "frontend": "cd ./frontend && yarn install && yarn run build && npx static-html-server -p 3000 -r ./build -f index.html",
     "server": "node ./index.js"