Merge pull request #1 from lbryio/settings-page

merge updates from settings-page

.gitignore

@@ -1,3 +1,5 @@
 dist/css/*
 dist/js/*
+node_modules
 .sass-cache
+.idea

dist/index.html

@@ -20,7 +20,13 @@
       <div id="canvas"></div>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.7.4/polyfill.js"></script>
       <script src="./js/lbry.js"></script>
-      <script src="./js/gui.js"></script>
+      <script src="./js/component/common.js"></script>
+      <script src="./js/component/splash.js"></script>
+      <script src="./js/page/home.js"></script>
+      <script src="./js/page/settings.js"></script>
+      <script src="./js/app.js"></script>
+      <script src="./js/main.js"></script>
     </body>
 </html>

js/app.js

@@ -0,0 +1,40 @@
+var appStyles = {
+  width: '800px',
+  marginLeft: 'auto',
+  marginRight: 'auto',
+};
+var App = React.createClass({
+  getInitialState: function() {
+    return {
+      viewingPage: window.location.search === '?settings' ? 'settings' : 'home'
+    }
+  },
+  componentWillMount: function() {
+    lbry.checkNewVersionAvailable(function(isAvailable) {
+      if (isAvailable) {
+        alert("The version of LBRY you're using is not up to date.\n\n" +
+              "You'll now be taken to lbry.io, where you can download the latest version.");
+        window.location = "http://www.lbry.io/" + (navigator.userAgent.indexOf('Mac OS X') != -1 ? 'osx' : 'linux');
+      }
+    });
+  },
+  componentDidMount: function() {
+    lbry.getStartNotice(function(notice) {
+      if (notice) {
+        alert(notice);
+      }
+    });
+  },
+  render: function() {
+    if (this.state.viewingPage == 'home') {
+      var content = <HomePage />;
+    } else if (this.state.viewingPage == 'settings') {
+      var content = <SettingsPage />;
+    }
+    return (
+      <div style={appStyles}>
+        {content}
+      </div>
+    );
+  }
+});

js/component/common.js

@@ -0,0 +1,50 @@
+//component/icon.js
+
+var Icon = React.createClass({
+  propTypes: {
+    style: React.PropTypes.object,
+  },
+  render: function() {
+    var className = 'icon ' + this.props.icon;
+    return <span className={className} style={this.props.style}></span>
+  }
+});
+
+var Link = React.createClass({
+  render: function() {
+    console.log(this.props);
+    var href = this.props.href ? this.props.href : 'javascript:;',
+      icon = this.props.icon ? <Icon icon={this.props.icon} />  : '',
+      className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text');
+    return (
+      <a className={className} href={href} style={this.props.style ? this.props.style : {}} onClick={this.props.onClick}>
+        {this.props.icon ? icon : '' }
+        {this.props.label}
+      </a>
+    );
+  }
+});
+
+var creditAmountStyle = {
+  color: '#216C2A',
+  fontWeight: 'bold',
+  fontSize: '0.8em'
+}, estimateStyle = {
+  marginLeft : '5px',
+  color: '#aaa',
+};
+
+var CreditAmount = React.createClass({
+  propTypes: {
+    amount: React.PropTypes.number,
+  },
+  render: function() {
+    var formattedAmount = lbry.formatCredits(this.props.amount);
+    return (
+      <span className="credit-amount">
+        <span style={creditAmountStyle}>{formattedAmount}</span>
+        { this.props.isEstimate ? <span style={estimateStyle}>(est)</span> : null }
+      </span>
+    );
+  }
+});

js/component/splash.js

@@ -0,0 +1,65 @@
+var splashStyle = {
+  color: 'white',
+  backgroundImage: 'url(' + lbry.imagePath('lbry-bg.png') + ')',
+  backgroundSize: 'cover',
+  minHeight: '100vh',
+  minWidth: '100vw',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center'
+}, splashMessageStyle = {
+  marginTop: '24px',
+  width: '325px',
+  textAlign: 'center',
+};
+
+var SplashScreen = React.createClass({
+  propTypes: {
+    message: React.PropTypes.string,
+    onLoadDone: React.PropTypes.func,
+  },
+  getInitialState: function() {
+    return {
+      details: 'Starting daemon',
+      isLagging: false,
+    }
+  },
+  updateStatus: function(checkNum=0, was_lagging=false) {
+      lbry.getDaemonStatus((status) => {
+        if (status.code == 'started') {
+          this.props.onLoadDone();
+          return;
+        }
+
+        this.setState({
+          details: status.message + (status.is_lagging ? '' : '...'),
+          isLagging: status.is_lagging,
+        });
+
+        if (checkNum < 600) {
+          setTimeout(() => {
+            this.updateStatus(checkNum + 1, status.is_lagging);
+          }, 500);
+        }
+      });
+  },
+  componentDidMount: function() {
+    this.updateStatus();
+  },
+  render: function() {
+    var imgSrc = lbry.imagePath('lbry-white-485x160.png');
+    return (
+      <div className="splash-screen" style={splashStyle}>
+        <img src={imgSrc} alt="LBRY"/>
+        <div style={splashMessageStyle}>
+          <h3>
+            {this.props.message}
+            <span className="busy-indicator"></span>
+          </h3>
+          <Icon icon='icon-warning' style={this.state.isLagging ? {} : { display: 'none' }}/> <span style={ this.state.isLagging ? {} : {'color': '#c3c3c3'} }>{this.state.details}</span>
+        </div>
+      </div>
+    );
+  }
+});

js/lbry.js

@@ -6,16 +6,19 @@ var lbry = {
   }
 };
 
-lbry.call = function (method, params, callback, connectFailedCallback)
+lbry.call = function (method, params, callback, errorCallback, connectFailedCallback)
 {
   var xhr = new XMLHttpRequest;
   xhr.addEventListener('load', function() {
     var response = JSON.parse(xhr.responseText);
 
     if (response.error) {
-      throw new Error('Call to method ' + method + ' failed with message: ' + response.error);
+      if (errorCallback) {
+        errorCallback(response.error);        
       }
+    } else if (callback) {
       callback(response.result);       
+    }
   });
 
   if (connectFailedCallback) {
@@ -44,7 +47,7 @@ lbry.connect = function(callback)
         lbry.isConnected = true;
         callback(true);
       } else {
-        if (tryNum <= 50) { // Move # of tries into constant or config option
+        if (tryNum <= 600) { // Move # of tries into constant or config option
           setTimeout(function () {
             checkDaemonRunning(tryNum + 1);
           }, 500);
@@ -61,11 +64,27 @@ lbry.daemonRunningStatus = function (callback) {
   // Returns true/false whether the daemon is running (i.e. fully conncected to the network),
   // or null if the AJAX connection to the daemon fails.
 
-  lbry.call('is_running', {}, callback, function () {
+  lbry.call('is_running', {}, callback, null, function () {
     callback(null);
   });
 };
 
+lbry.getDaemonStatus = function (callback) {
+  lbry.call('daemon_status', {}, callback);
+};
+
+lbry.getStartNotice = function(callback) {
+  lbry.call('get_start_notice', {}, callback);
+}
+
+lbry.getSettings = function(callback) {
+  lbry.call('get_settings', {}, callback);
+};
+
+lbry.setSettings = function(settings, callback) {
+  lbry.call('set_settings', settings, callback);
+};
+
 lbry.getBalance = function(callback)
 {
   lbry.call("get_balance", {}, callback);
@@ -76,6 +95,18 @@ lbry.search = function(query, callback)
   lbry.call("search_nametrie", { "search": query }, callback);
 }
 
+lbry.checkNewVersionAvailable = function(callback) {
+  lbry.call('version', {}, function() {
+    // If the "version" method is available, we have a daemon new enough to do version checking
+    lbry.call('check_for_new_version', {}, callback);
+  }, function(err) {
+    if (err.fault == 'NoSuchFunction') {
+      // If it's not available, we're definitely in an old version
+      callback(true);
+    }
+  });
+}
+
 //utilities
 lbry.formatCredits = function(amount, precision)
 {

js/main.js

@@ -0,0 +1,13 @@
+//main.js
+var init = function() {
+  var canvas = document.getElementById('canvas');
+
+  ReactDOM.render(
+    <SplashScreen message="Connecting" onLoadDone={function() {
+      ReactDOM.render(<App/>, canvas);
+    }}/>,
+    canvas
+  );
+};
+
+init();

js/page/home.js

@@ -1,183 +1,15 @@
-//component/icon.js
-
-var Icon = React.createClass({
-  render: function() {
-    var className = 'icon ' + this.props.icon;
-    return <span className={className}></span>
-  }
-});
-
-//component/link.js
-
-var Link = React.createClass({
-  render: function() {
-    console.log(this.props);
-    var href = this.props.href ? this.props.href : 'javascript:;',
-        icon = this.props.icon ? <Icon icon={this.props.icon} />  : '',
-        className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') +
-                    (this.props.fadeIn ? ' fade-in-link' : '');
-    return (
-      <a className={className} href={href} style={this.props.style ? this.props.style : {}}>
-        {this.props.icon ? icon : '' }
-        {this.props.label}
-      </a>
-    );
-  }
-});
-
-
-//component/splash.js
-var splashStyle = {
-  color: 'white',
-  backgroundImage: 'url(' + lbry.imagePath('lbry-bg.png') + ')',
-  backgroundSize: 'cover',
-  minHeight: '100vh',
-  minWidth: '100vw',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center'
-}, splashMessageStyle = {
-  marginTop: '24px'
-};
-
-var SplashScreen = React.createClass({
-  propTypes: {
-    message: React.PropTypes.string,
-  },
-  render: function() {
-    var imgSrc = lbry.imagePath('lbry-white-485x160.png');
-    return (
-       <div className="splash-screen" style={splashStyle}>
-         <img src={imgSrc} alt="LBRY"/>
-         <div style={splashMessageStyle}>
-           <h3>
-             {this.props.message}
-             <span className="busy-indicator"></span>
-            </h3>
-         </div>
-       </div>
-    );
-  }
-});
-
-//component/credit-amount.js
-var creditAmountStyle = {
-  color: '#216C2A',
-  fontWeight: 'bold',
-  fontSize: '0.8em'
-}, estimateStyle = {
-  marginLeft : '5px',
-  color: '#aaa',
-};
-
-var CreditAmount = React.createClass({
-  propTypes: {
-    amount: React.PropTypes.number,
-  },
-  render: function() {
-    var formattedAmount = lbry.formatCredits(this.props.amount);
-    return (
-      <span className="credit-amount">
-        <span style={creditAmountStyle}>{formattedAmount}</span>
-        { this.props.isEstimate ? <span style={estimateStyle}>(est)</span> : null }
-      </span>
-    );
-  }
-});
-
-//component/header.js
-var logoStyle = {
-  padding: '48px 12px',
-  textAlign: 'center',
-  maxHeight: '80px',
-},
-    balanceStyle = {
-//  float: 'right',
-  marginTop: '3px'
-},
-    imgStyle = { //@TODO: remove this, img should be properly scaled once size is settled
-  height: '80px'
-};
-
-var Header = React.createClass({
-  render: function() {
-    return (
-      <header>
-        <TopBar />
-        <div style={logoStyle}>
-          <img src="./img/lbry-dark-1600x528.png" style={imgStyle}/>
-        </div>
-      </header>
-    );
-  }
-});
-
-
-var topBarStyle = {
-  'float': 'right'
-};
-
-var TopBar = React.createClass({
-  getInitialState: function() {
-    return {
-      balance: 0
-    };
-  },
-  componentDidMount: function() {
-    lbry.getBalance(function(balance) {
-      this.setState({
-        balance: balance
-      });
-    }.bind(this));
-  },
-
-  render: function() {
-    return (
-      <span className='top-bar' style={topBarStyle}>
-        <span style={balanceStyle}>
-          <CreditAmount amount={this.state.balance}/>
-        </span>
-        <Menu />
-      </span>
-    );
-  }
-});
-
-var menuStyle = {
-  position: 'relative',
-  top: '3px',
-  marginLeft: '2px'
-}, menuItemStyle = {
-  marginLeft: '3px'
-};
-
-
-var Menu = React.createClass({
-  render: function() {
-    return (
-      <span className='menu' style={menuStyle}>
-        <Link href='#' icon="icon-gear" fadeIn={true} style={menuItemStyle} />
-      </span>
-    )
-  }
-});
-
-
-//component/discover.js
-
 var searchInputStyle = {
     width: '400px',
     display: 'block',
     marginBottom: '48px',
     marginLeft: 'auto',
     marginRight: 'auto'
-},
+  },
   fetchResultsStyle = {
     color: '#888',
     textAlign: 'center',
     fontSize: '1.2em'
-};
+  };
 
 var SearchActive = React.createClass({
   render: function() {
@@ -234,24 +66,24 @@ var searchRowImgStyle = {
     marginLeft: 'auto',
     marginRight: 'auto',
     float: 'left'
-}, 
+  },
   searchRowCostStyle = {
     float: 'right',
     marginLeft: '20px',
     marginTop: '5px',
     display: 'inline-block'
-},
+  },
   searchRowNameStyle = {
     fontSize: '0.9em',
     color: '#666',
     marginBottom: '24px',
     clear: 'both'
-},
+  },
   searchRowDescriptionStyle = {
     color : '#444',
     marginBottom: '24px',
     fontSize: '0.9em'
-};
+  };
 
 
 var SearchResultRow = React.createClass({
@@ -349,38 +181,68 @@ var Discover = React.createClass({
   }
 });
 
-//component/home.js
+var logoStyle = {
+    padding: '48px 12px',
+    textAlign: 'center',
+    maxHeight: '80px',
+  },
+  imgStyle = { //@TODO: remove this, img should be properly scaled once size is settled
+    height: '80px'
+  };
 
-var homeStyles = {
+var Header = React.createClass({
-    width: '800px',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-};
-
-var Home = React.createClass({
   render: function() {
     return (
-      <div style={homeStyles}>
+      <header>
+        <TopBar onPageChosen={this.handlePageChosen}/>
+        <div style={logoStyle}>
+          <img src="./img/lbry-dark-1600x528.png" style={imgStyle}/>
+        </div>
+      </header>
+    );
+  }
+});
+
+var topBarStyle = {
+  'float': 'right'
+},
+balanceStyle = {
+  'marginRight': '5px'
+};
+
+var TopBar = React.createClass({
+  getInitialState: function() {
+    return {
+      balance: 0
+    };
+  },
+  componentDidMount: function() {
+    lbry.getBalance(function(balance) {
+      this.setState({
+        balance: balance
+      });
+    }.bind(this));
+  },
+
+  render: function() {
+    return (
+      <span className='top-bar' style={topBarStyle}>
+        <span style={balanceStyle}>
+          <CreditAmount amount={this.state.balance}/>
+        </span>
+        <Link href='/?settings' icon="icon-gear" />
+      </span>
+    );
+  }
+});
+
+var HomePage = React.createClass({
+  render: function() {
+    return (
+      <div>
         <Header />
         <Discover />
       </div>
     );
   }
 });
-
-//main.js
-var init = function() {
-  var canvas = document.getElementById('canvas');
-
-  ReactDOM.render(
-    <SplashScreen message="Connecting"/>,
-    canvas
-  );
-
-  lbry.connect(function() {
-    ReactDOM.render(<Home/>, canvas);
-  })
-};
-
-init();
-

js/page/settings.js

@@ -0,0 +1,121 @@
+var settingsRadioOptionStyles = {
+  display: 'block',
+  marginLeft: '13px'
+}, settingsCheckBoxOptionStyles = {
+  display: 'block',
+  marginLeft: '13px'
+}, settingsNumberFieldStyles = {
+  width: '40px'
+}, downloadDirectoryLabelStyles = {
+  fontSize: '.9em',
+  marginLeft: '13px'
+}, downloadDirectoryFieldStyles= {
+  width: '300px'
+};
+
+var SettingsPage = React.createClass({
+  storeSetting: function(setting, val) {
+    var settings = Object.assign({}, this.state.settings);
+    settings[setting] = val;
+    this.setState({
+      'settings': settings
+    });
+    lbry.setSettings(settings);
+  },
+  onRunOnStartChange: function (event) {
+    this.storeSetting('run_on_startup', event.target.checked);
+  },
+  onShareDataChange: function (event) {
+    this.storeSetting('upload_log', event.target.checked);
+  },
+  onDownloadDirChange: function(event) {
+    this.storeSetting('default_download_directory', event.target.value);
+  },
+  onMaxUploadPrefChange: function(isLimited) {
+    if (!isLimited) {
+      this.storeSetting('max_upload', 0.0);
+    }
+    this.setState({
+      isMaxUpload: isLimited
+    });
+  },
+  onMaxUploadFieldChange: function(event) {
+    this.storeSetting('max_upload', Number(event.target.value));
+  },
+  onMaxDownloadPrefChange: function(isLimited) {
+    if (!isLimited) {
+      this.storeSetting('max_download', 0.0);
+    }
+    this.setState({
+      isMaxDownload: isLimited
+    });
+  },
+  onMaxDownloadFieldChange: function(event) {
+    this.storeSetting('max_download', Number(event.target.value));
+  },
+  getInitialState: function() {
+    return {
+      settings: null
+    }
+  },
+  componentWillMount: function() {
+    lbry.getSettings(function(settings) {
+      this.setState({
+        settings: settings,
+        isMaxUpload: settings.max_upload != 0,
+        isMaxDownload: settings.max_download != 0
+      });
+    }.bind(this));
+  },
+  render: function() {
+    if (!this.state.settings) { // If the settings aren't loaded yet, don't render anything.
+      return null;
+    }
+
+    return (
+      <main>
+        <h1>Settings</h1>
+        <section>
+          <h4>Run on startup</h4>
+          <label style={settingsCheckBoxOptionStyles}>
+            <input type="checkbox" onChange={this.onRunOnStartChange} defaultChecked={this.state.settings.run_on_startup} /> Run LBRY automatically when I start my computer
+          </label>
+        </section>
+        <section>
+          <h4>Download directory</h4>
+          <div className="help">Where would you like the files you download from LBRY to be saved?</div>
+          <input style={downloadDirectoryFieldStyles} type="text" name="default_download_directory" defaultValue={this.state.settings.default_download_directory} onChange={this.onDownloadDirChange}/>
+        </section>
+        <section>
+          <h4>Max Upload</h4>
+          <label style={settingsRadioOptionStyles}>
+            <input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxUpload}/> Unlimited
+          </label>
+          <label style={settingsRadioOptionStyles}>
+            <input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxUpload}/> { this.state.isMaxUpload ? 'Up to' : 'Choose limit...' }
+            <span className={ this.state.isMaxUpload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_upload} style={settingsNumberFieldStyles} onChange={this.onMaxUploadFieldChange}/> MB/s</span>
+          </label>
+        </section>
+        <section>
+          <h4>Max Download</h4>
+          <label style={settingsRadioOptionStyles}>
+            <input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited
+          </label>
+          <label style={settingsRadioOptionStyles}>
+            <input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxDownload}/> { this.state.isMaxDownload ? 'Up to' : 'Choose limit...' }
+            <span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span>
+          </label>
+        </section>
+        <section>
+          <h4>Share diagnostic data</h4>
+          <label style={settingsCheckBoxOptionStyles}>
+            <input type="checkbox" onChange={this.onShareDataChange} defaultChecked={this.state.settings.upload_log} /> Help make LBRY better by contributing diagnostic data about my usage
+          </label>
+        </section>
+        <section>
+          <Link href="/" label="<< Return"/>
+        </section>
+       </main>
+    );
+  }
+});

scss/_global.scss

@@ -5,10 +5,11 @@ $spacing-vertical: 24px;
 $color-primary: #155B4A;
 $color-light-alt: hsl(hue($color-primary), 15, 85);
 $color-text-dark: #000;
+$color-help: #666;
 $color-money: #216C2A;
 $color-meta-light: #505050;
 
-$font-size: 18px;
+$font-size: 16px;
 
 $mobile-width-threshold: 801px;
 $max-content-width: 1000px;

scss/_gui.scss

@@ -13,7 +13,16 @@ body
     position: relative;
 }
 
-h1 { font-size: 2.0em; }
+section
+{
+  margin-bottom: $spacing-vertical;
+  &:last-child
+  {
+    margin-bottom: 0;
+  }
+}
+
+h1 { font-size: 2.0em; margin-bottom: $spacing-vertical / 2; margin-top: $spacing-vertical * 1.5; }
 h2 { font-size: 1.75em; }
 h3 { font-size: 1.4em; }
 h4 { font-size: 1.2em; }
@@ -24,13 +33,15 @@ sup, sub {
 }
 sup { top: -0.4em; }
 sub { top: 0.4em; }
+label { cursor: pointer; }
 
-.fade-in-link {
+header
-  opacity: 0.55;
+{
-  transition: opacity .225s ease;
+  line-height: $spacing-vertical;
-  &:hover {
+}
-    opacity: 1;
+
-  }
+.hidden {
+  display: none;
 }
 
 input[type="search"]
@@ -102,4 +113,21 @@ input[type="search"]
 {
   color: $color-primary;
   text-decoration: underline;
+  &:hover
+  {
+    opacity: 0.70;
+    transition: opacity .225s ease;
+  }
+}
+
+.fade-in-link {
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.help
+{
+  color: $color-help;
 }