From 62589c5a11b7c4681624922a0a11802e4789b2b1 Mon Sep 17 00:00:00 2001
From: empathicqubit <empathicqubit@allons.me>
Date: Sun, 27 May 2018 19:50:53 -0400
Subject: [PATCH] Added dynamic title.

---
 frontend/package.json               |  1 +
 frontend/src/index.css              |  4 ++++
 frontend/src/index.js               |  6 +++---
 frontend/src/view/admin.css         | 18 ++++++++++++++++++
 frontend/src/view/admin.js          |  4 ++++
 frontend/src/view/app.js            |  4 ++++
 frontend/src/view/buffer-client.css |  4 ++++
 frontend/src/view/client.js         | 10 +++++++---
 frontend/src/view/simulator.js      |  4 ++++
 frontend/yarn.lock                  | 24 ++++++++++++++++++++++++
 10 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index d15a7e2..0bca856 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,6 +7,7 @@
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-draggable": "^3.0.5",
+    "react-helmet": "^5.2.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.4",
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3cd44c9..3f424de 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -11,6 +11,10 @@ body {
     background-color: #FCC5A2;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    margin-bottom: 1em;
+}
+
 body, button {
     color: #00173D;
 }
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 7db6f32..cba4c83 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -27,9 +27,9 @@ const render = () => ReactDOM.render(router(), document.getElementById('root'));
 let routeSwitch = (
     <Switch>
         <Route path="/" exact render={() => <Redirect to="/client" />} />
-        <Route path="/client" render={(routeProps) => <Client {...routeProps} {...clientProps || (clientProps = getClientProps(render))} />} />
-        <Route path="/admin" render={(routeProps) => <Admin {...routeProps} {...adminProps || (adminProps = getAdminProps(render))} />} />
-        <Route path="/simulator" render={(routeProps) => <Simulator {...routeProps} {...simulatorProps || (simulatorProps = getSimulatorProps(render))} />} />
+        <Route title="Client" path="/client" render={(routeProps) => <Client {...routeProps} {...clientProps || (clientProps = getClientProps(render))} />} />
+        <Route title="Admin" path="/admin" render={(routeProps) => <Admin {...routeProps} {...adminProps || (adminProps = getAdminProps(render))} />} />
+        <Route title="Simulator" path="/simulator" render={(routeProps) => <Simulator {...routeProps} {...simulatorProps || (simulatorProps = getSimulatorProps(render))} />} />
     </Switch>
 );
 
diff --git a/frontend/src/view/admin.css b/frontend/src/view/admin.css
index e38ce8d..bc6f6e8 100644
--- a/frontend/src/view/admin.css
+++ b/frontend/src/view/admin.css
@@ -3,9 +3,27 @@
     float: left;
     width: 5em;
     height: 10em;
+    margin: 1em 0;
     -webkit-appearance: slider-vertical;
 }
 
+.track-controls button {
+    margin: 0;
+    border-radius: 0;
+}
+
+.track-controls button:first-child {
+    border-right: none;
+    border-bottom-left-radius: .5em;
+    border-top-left-radius: .5em;
+}
+
+.track-controls button:last-child {
+    border-left: none;
+    border-bottom-right-radius: .5em;
+    border-top-right-radius: .5em;
+}
+
 .clients {
     display: flex;
 }
diff --git a/frontend/src/view/admin.js b/frontend/src/view/admin.js
index c757b2d..78a8a92 100644
--- a/frontend/src/view/admin.js
+++ b/frontend/src/view/admin.js
@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';       
 import Knob from '../Knob';
+import Helmet from 'react-helmet';
 
 import './admin.css';
 
@@ -171,6 +172,9 @@ class Admin extends React.Component {
         const state = this.state
         return (
             <div>
+                <Helmet>
+                    <title>Source Administrator</title>
+                </Helmet>
                 <h1>
                     Source administrator
                 </h1>
diff --git a/frontend/src/view/app.js b/frontend/src/view/app.js
index 284e63f..88439ca 100644
--- a/frontend/src/view/app.js
+++ b/frontend/src/view/app.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { NavLink, Link } from 'react-router-dom';
+import {Helmet} from 'react-helmet';
 
 import './app.css';
 
@@ -7,6 +8,9 @@ class App extends React.Component {
     render() {
         return (
             <div>
+                <Helmet titleTemplate="Web Audio - %s">
+                    <title>Web Audio</title>
+                </Helmet>
                 <header>
                     <nav>
                         <ul>
diff --git a/frontend/src/view/buffer-client.css b/frontend/src/view/buffer-client.css
index a5efa88..a1c1079 100644
--- a/frontend/src/view/buffer-client.css
+++ b/frontend/src/view/buffer-client.css
@@ -2,3 +2,7 @@
     margin: 0 1em;
     padding: 0 0.5em;
 }
+
+.enabled-sources ul {
+    padding-top: .5em;
+}
diff --git a/frontend/src/view/client.js b/frontend/src/view/client.js
index d63dbf5..15644ad 100755
--- a/frontend/src/view/client.js
+++ b/frontend/src/view/client.js
@@ -1,6 +1,7 @@
 'use strict';
 import BufferClient from './buffer-client.js';
 import React from 'react';
+import Helmet from 'react-helmet';
 
 let e = React.createElement;
 let n = null;
@@ -13,9 +14,12 @@ class Client extends React.Component {
         this.props.onComponentMount && this.props.onComponentMount();
     }
     render() {
-        return (
-            <BufferClient {...this.props} />
-        );
+        return ([
+            <Helmet>
+                <title>Client</title>
+            </Helmet>,
+            <BufferClient {...this.props} />,
+        ]);
     }
 }
 
diff --git a/frontend/src/view/simulator.js b/frontend/src/view/simulator.js
index 29132d9..789fc30 100644
--- a/frontend/src/view/simulator.js
+++ b/frontend/src/view/simulator.js
@@ -1,6 +1,7 @@
 import BufferClient from './buffer-client.js';
 import React from 'react';
 import Draggable from 'react-draggable';
+import Helmet from 'react-helmet';
 
 import './simulator.css';
 import 'material-design-icons/sprites/svg-sprite/svg-sprite-hardware.css';
@@ -15,6 +16,9 @@ class Simulator extends React.Component {
     render() {
         return (
             <div>
+                <Helmet>
+                    <title>Simulator</title>
+                </Helmet>
                 <h1>
                     Simulator
                 </h1>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index e581c30..801e110 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2493,6 +2493,10 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+exenv@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -5575,6 +5579,15 @@ react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
 
+react-helmet@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.0.tgz#a81811df21313a6d55c5f058c4aeba5d6f3d97a7"
+  dependencies:
+    deep-equal "^1.0.1"
+    object-assign "^4.1.1"
+    prop-types "^15.5.4"
+    react-side-effect "^1.1.0"
+
 react-router-dom@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
@@ -5643,6 +5656,13 @@ react-scripts@1.1.4:
   optionalDependencies:
     fsevents "^1.1.3"
 
+react-side-effect@^1.1.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"
+  dependencies:
+    exenv "^1.2.1"
+    shallowequal "^1.0.1"
+
 react-transform-catch-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz#1b4d4a76e97271896fc16fe3086c793ec88a9eeb"
@@ -6139,6 +6159,10 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallowequal@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.0.2.tgz#1561dbdefb8c01408100319085764da3fcf83f8f"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"