Add Developer Settings page

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/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,11 @@ input[type="text"], input[type="search"]
 
 .download-started-modal__file-path {
   word-break: break-all;
+}
+
+
+.developer-page__custom-lighthouse-servers {
+  font: 0.8em monospace;
+  width: 30em;
+  height: 10em;
 }