Add autoconnect

This commit is contained in:
Drew DeVault 2017-09-08 14:07:31 +09:00
parent 589150b817
commit a3e05119fa
3 changed files with 29 additions and 14 deletions

View File

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

View File

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

View File

@ -1,19 +1,26 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { formatBitrate } from '../bitrate'; import { formatBitrate } from '../bitrate';
import { ws_disconnect } from '../socket';
function throttle(v) { const throttle = _ => _ === null ? "Unlimited" : formatBitrate(_);
return v === null ? "Unlimited" : formatBitrate(v);
}
function Server({ server }) { function Server({ server }) {
if (!server.id) { if (!server.id) {
// TODO: websocket status?
return null; return null;
} }
return ( return (
<div> <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> <dl>
<dt>Running since</dt> <dt>Running since</dt>
{/* TODO: pretty print dates */} {/* TODO: pretty print dates */}