Merge pull request #113 from lbryio/developer-settings

Developer Settings page (WIP)

js/app.js

@@ -13,6 +13,7 @@ import DetailPage from './page/show.js';
 import PublishPage from './page/publish.js';
 import DiscoverPage from './page/discover.js';
 import SplashScreen from './component/splash.js';
+import DeveloperPage from './page/developer.js';
 import Drawer from './component/drawer.js';
 import Header from './component/header.js';
 import Modal from './component/modal.js';
@@ -191,6 +192,8 @@ var App = React.createClass({
         return <DetailPage name={this.state.pageArgs} />;
       case 'publish':
         return <PublishPage />;
+      case 'developer':
+        return <DeveloperPage />;
       case 'discover':
       default:
         return <DiscoverPage query={this.state.pageArgs} />;

js/lbry.js

@@ -10,6 +10,9 @@ var lbry = {
   },
   defaultClientSettings: {
     showNsfw: false,
+    debug: false,
+    useCustomLighthouseServers: false,
+    customLighthouseServers: [],
   }
 };
 

js/lighthouse.js

@@ -1,8 +1,8 @@
 import lbry from './lbry.js';
 
 var lighthouse = {
-  _search_timeout: 5000,
-  _max_search_tries: 5,
+  _query_timeout: 5000,
+  _max_query_tries: 5,
 
   servers: [
     'http://lighthouse4.lbry.io:50005',
@@ -12,37 +12,56 @@ var lighthouse = {
   path: '/',
 
   call: function(method, params, callback, errorCallback, connectFailedCallback, timeout) {
-    lbry.jsonrpc_call(this.server + this.path, method, params, callback, errorCallback, connectFailedCallback, timeout);
-  },
-
-  search: function(query, callback, errorCallback, connectFailedCallback, timeout) {
-    let handleSearchFailed = function(tryNum=0) {
-      if (tryNum > lighthouse._max_search_tries) {
+    const handleConnectFailed = function(tryNum=0) {
+      if (tryNum > lighthouse._max_query_tries) {
         if (connectFailedCallback) {
           connectFailedCallback();
         } else {
           throw new Error(`Could not connect to Lighthouse server. Last server attempted: ${lighthouse.server}`);
         }
       } else {
-        // Randomly choose one of the other search servers to switch to
-        let otherServers = lighthouse.servers.slice();
-        otherServers.splice(otherServers.indexOf(lighthouse.server), 1);
-        lighthouse.server = otherServers[Math.round(Math.random() * (otherServers.length - 1))];
-
-        lighthouse.call('search', [query], callback, errorCallback, function() {
-          handleSearchFailed(tryNum + 1);
-        }, lighthouse._search_timeout);
+        lbry.call(method, params, callback, errorCallback, () => { handleConnectFailed(tryNum + 1) }, timeout);
       }
     }
 
-    lighthouse.call('search', [query], callback, errorCallback, function() { handleSearchFailed() }, lighthouse._search_timeout);
+    // Set the Lighthouse server if it hasn't been set yet, or if the current server is not in
+    // the current set of servers (most likely because of a settings change).
+    if (typeof lighthouse.server === 'undefined' || lighthouse.getServers().indexOf(lighthouse.server) == -1) {
+      lighthouse.chooseNewServer();
+    }
+
+    lbry.jsonrpc_call(this.server + this.path, method, params, callback, errorCallback,
+                      () => { handleConnectFailed() }, timeout || lighthouse.query_timeout);
+  },
+
+  getServers: function() {
+    return lbry.getClientSetting('useCustomLighthouseServers')
+      ? lbry.getClientSetting('customLighthouseServers')
+      : lighthouse.servers;
+  },
+
+  chooseNewServer: function() {
+    // Randomly choose a new Lighthouse server and switch to it. If a server is already set, this
+    // will choose a different one (used for switching servers after a failed query).
+    const servers = lighthouse.getServers();
+    let newServerChoices;
+    if (!lighthouse.server) {
+      newServerChoices = servers;
+    } else {
+      newServerChoices = lighthouse.getServers().slice();
+      newServerChoices.splice(newServerChoices.indexOf(lighthouse.server), 1);
+    }
+    lighthouse.server = newServerChoices[Math.round(Math.random() * (newServerChoices.length - 1))];
+  },
+
+  search: function(query, callback, errorCallback, connectFailedCallback, timeout) {
+    lighthouse.call('search', [query], callback, errorCallback, connectFailedCallback, timeout);
   },
 
   getSizeForName: function(name, callback, errorCallback, connectFailedCallback, timeout) {
-    return lighthouse.call('get_size_for_name', [name], callback, errorCallback, connectFailedCallback, timeout);
+    lighthouse.call('get_size_for_name', [name], callback, errorCallback, connectFailedCallback, timeout);
   }
 };
 
-lighthouse.server = lighthouse.servers[Math.round(Math.random() * (lighthouse.servers.length - 1))];
 
 export default lighthouse;

js/main.js

@@ -1,11 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import lbry from './lbry.js';
+import lighthouse from './lighthouse.js';
 import App from './app.js';
 import SplashScreen from './component/splash.js';
 
 
 var init = function() {
+  if (lbry.getClientSetting('debug')) {
+    window.lbry = lbry;
+    window.lighthouse = lighthouse;
+  }
+
   var canvas = document.getElementById('canvas');
 
   ReactDOM.render(

js/page/developer.js

@@ -0,0 +1,56 @@
+import lbry from '../lbry.js';
+import React from 'react';
+import FormField from '../component/form.js';
+
+const DeveloperPage = React.createClass({
+  getInitialState: function() {
+    return {
+      debugMode: lbry.getClientSetting('debug'),
+      useCustomLighthouseServers: lbry.getClientSetting('useCustomLighthouseServers'),
+      customLighthouseServers: lbry.getClientSetting('customLighthouseServers').join('\n'),
+    };
+  },
+  handleDebugModeChange: function(event) {
+    lbry.setClientSetting('debug', event.target.checked);
+    this.setState({
+      debugMode: event.target.checked,
+    });
+  },
+  handleUseCustomLighthouseServersChange: function(event) {
+    lbry.setClientSetting('useCustomLighthouseServers', event.target.checked);
+    this.setState({
+      useCustomLighthouseServers: event.target.checked,
+    });
+  },
+  handleCustomLighthouseServersChange: function(event) {
+    lbry.setClientSetting('customLighthouseServers', event.target.value.trim().split('\n'));
+    this.setState({
+      customLighthouseServers: event.target.value,
+    });
+  },
+  render: function() {
+    return (
+      <main>
+        <section className="card">
+          <h3>Developer Settings</h3>
+          <div className="form-row">
+            <label><FormField type="checkbox" onChange={this.handleDebugModeChange} checked={this.state.debugMode} /> Enable debug mode (exposes LBRY modules in global scope)</label>
+          </div>
+          <div className="form-row">
+            <label><FormField type="checkbox" onChange={this.handleUseCustomLighthouseServersChange} checked={this.state.useCustomLighthouseServers} /> Use custom search servers</label>
+          </div>
+          {this.state.useCustomLighthouseServers
+            ? <div className="form-row">
+                <label>
+                  Custom search servers (one per line)
+                  <div><FormField type="textarea" className="developer-page__custom-lighthouse-servers" value={this.state.customLighthouseServers} onChange={this.handleCustomLighthouseServersChange} checked={this.state.debugMode} /></div>
+                </label>
+              </div>
+            : null}
+        </section>
+      </main>
+    );
+  }
+});
+
+export default DeveloperPage;

scss/_gui.scss

@@ -365,4 +365,5 @@ input[type="text"], input[type="search"]
 
 .download-started-modal__file-path {
   word-break: break-all;
-}
+}
+

scss/all.scss

@@ -4,4 +4,5 @@
 @import "_mediaelement";
 @import "_canvas";
 @import "_table";
-@import "_gui";
+@import "_gui";
+@import "page/_developer.scss";

scss/page/_developer.scss

@@ -0,0 +1,5 @@
+.developer-page__custom-lighthouse-servers {
+  font: 0.8em monospace;
+  width: 30em;
+  height: 10em;
+}