From d6c86b16dc5e4a13dc20d4ea9570493e06b6d933 Mon Sep 17 00:00:00 2001
From: empathicqubit <empathicqubit@allons.me>
Date: Sun, 27 May 2018 20:30:48 -0400
Subject: [PATCH] Add instructions. Better title format.

---
 README.md                             | 19 +++++++++++++++++++
 frontend/src/buffer-client-backend.js |  5 ++---
 frontend/src/view/admin.js            |  4 ++--
 frontend/src/view/app.js              |  2 +-
 frontend/src/view/client.js           | 23 +++++++++++++++++------
 package.json                          |  1 +
 6 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 16eeafd..01a1e86 100644
--- a/README.md
+++ b/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.
diff --git a/frontend/src/buffer-client-backend.js b/frontend/src/buffer-client-backend.js
index a025125..687af42 100644
--- a/frontend/src/buffer-client-backend.js
+++ b/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);
 
diff --git a/frontend/src/view/admin.js b/frontend/src/view/admin.js
index 78a8a92..b72d999 100644
--- a/frontend/src/view/admin.js
+++ b/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);
diff --git a/frontend/src/view/app.js b/frontend/src/view/app.js
index 88439ca..1f51eca 100644
--- a/frontend/src/view/app.js
+++ b/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>
diff --git a/frontend/src/view/client.js b/frontend/src/view/client.js
index 15644ad..4d10649 100755
--- a/frontend/src/view/client.js
+++ b/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>
+        );
     }
 }
 
diff --git a/package.json b/package.json
index 38977d2..2fee042 100755
--- a/package.json
+++ b/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"