Add autoconnect

src/socket.js

@@ -41,3 +41,7 @@ export function ws_init(uri, open, close) {
   ws.addEventListener("message", ws_recv);
   ws.addEventListener("close", close);
 }
+
+export function ws_disconnect() {
+  ws.close();
+}

src/ui/connection.js

@@ -16,14 +16,18 @@ import { SOCKET_STATE } from '../actions/socket';
 class ConnectionOverlay extends Component {
   constructor() {
     super();
-    this.state = {
-      uri: "ws://127.0.0.1:8412",
-      autoconnect: false,
-      connecting: false
-    };
-    // TODO: "connecting..." UI
-    // TODO: autoconnect
-    // TODO: gracefully handle dis/reconnections
+    const uri = localStorage.getItem("autoconnect");
+    this.state = { uri: uri || "ws://127.0.0.1:8412", autoconnect: !!uri };
+    if (uri) {
+      initialize(this.state.uri);
+    }
+  }
+
+  connect() {
+    if (this.state.autoconnect) {
+      localStorage.setItem("autoconnect", this.state.uri);
+    }
+    initialize(this.state.uri);
   }
 
   render() {
@@ -72,7 +76,7 @@ class ConnectionOverlay extends Component {
             </FormGroup>
             <button
               className="btn btn-primary"
-              onClick={() => initialize(this.state.uri)}
+              onClick={this.connect.bind(this)}
             >{socket.reason ? "Reconnect" : "Connect"}</button>
           </CardBlock>
         </Card>

src/ui/server.js

@@ -1,19 +1,26 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { formatBitrate } from '../bitrate';
+import { ws_disconnect } from '../socket';
 
-function throttle(v) {
-  return v === null ? "Unlimited" : formatBitrate(v);
-}
+const throttle = _ => _ === null ? "Unlimited" : formatBitrate(_);
 
 function Server({ server }) {
   if (!server.id) {
-    // TODO: websocket status?
     return null;
   }
   return (
     <div>
-      <h3>Server</h3>
+      <h3>
+        Server
+        <button
+          className="btn btn-sm btn-outline-danger pull-right"
+          onClick={() => {
+            localStorage.removeItem("autoconnect");
+            ws_disconnect();
+          }}
+        >Disconnect</button>
+      </h3>
       <dl>
         <dt>Running since</dt>
         {/* TODO: pretty print dates */}