views, rewards, fixes for no api, other fixes

app/main.js

@@ -62,7 +62,7 @@ function getPidsForProcessName(name) {
 }
 
 function createWindow () {
-  win = new BrowserWindow({backgroundColor: '#155B4A', minWidth: 800, minHeight: 1000 }) //$color-primary
+  win = new BrowserWindow({backgroundColor: '#155B4A', minWidth: 800, minHeight: 600 }) //$color-primary
   win.maximize()
   win.webContents.openDevTools();
   win.loadURL(`file://${__dirname}/dist/index.html`)

ui/js/component/auth.js

@@ -5,6 +5,7 @@ import Modal from './modal.js';
 import ModalPage from './modal-page.js';
 import {Link, RewardLink} from '../component/link.js';
 import {FormField, FormRow} from '../component/form.js';
+import {CreditAmount} from '../component/common.js';
 import rewards from '../rewards.js';
 
 
@@ -114,9 +115,10 @@ const WelcomeStage = React.createClass({
     }
   },
   onRewardClaim: function(reward) {
+    console.log(reward);
     this.setState({
       hasReward: true,
-      rewardAmount: reward
+      rewardAmount: reward.amount
     })
   },
   render: function() {
@@ -127,8 +129,8 @@ const WelcomeStage = React.createClass({
             <h3 className="modal__header">Welcome to LBRY.</h3>
             <p>Using LBRY is like dating a centaur. Totally normal up top, and <em>way different</em> underneath.</p>
             <p>On the upper level, LBRY is like other popular video and media sites.</p>
-            <p>Below, LBRY is like nothing else. Using blockchain and decentralization, LBRY is controlled by its users -- you -- and no one else.</p>
+            <p>Below, LBRY is controlled by its users -- you -- through the power of blockchain and decentralization.</p>
-            <p>Thanks for being a part of it! Here's a nickel, kid.</p>
+            <p>Thanks for making it possible! Here's a nickel, kid.</p>
             <div style={{textAlign: "center", marginBottom: "12px"}}>
               <RewardLink type="new_user" button="primary" onRewardClaim={this.onRewardClaim} onRewardFailure={this.props.endAuth} />
             </div>
@@ -137,8 +139,8 @@ const WelcomeStage = React.createClass({
          <Modal type="alert" overlayClassName="modal-overlay modal-overlay--clear" isOpen={true} contentLabel="Welcome to LBRY" {...this.props} onConfirmed={this.props.endAuth}>
           <section>
             <h3 className="modal__header">About Your Reward</h3>
-            <p>You earned a reward of %award% LBRY credits, or <em>LBC</em>.</p>
+            <p>You earned a reward of <CreditAmount amount={this.state.rewardAmount} label={false} /> LBRY credits, or <em>LBC</em>.</p>
-            <p>This reward will show in your Wallet momentarily, likely while you are reading this message.</p>
+            <p>This reward will show in your Wallet momentarily, probably while you are reading this message.</p>
             <p>LBC is used to compensate creators, to publish, and to have say in how the network works.</p>
             <p>No need to understand it all just yet! Try watching or downloading something next.</p>
           </section>

ui/js/component/file-actions.js

@@ -43,8 +43,6 @@ let FileActionsRow = React.createClass({
       attemptingRemove: false
     });
     lbry.getCostInfo(this.props.uri).then(({cost}) => {
-      console.log(cost);
-      console.log(this.props.uri);
       lbry.getBalance((balance) => {
         if (cost > balance) {
           this.setState({

ui/js/component/form.js

@@ -96,7 +96,7 @@ export let FormField = React.createClass({
 export let FormRow = React.createClass({
   _fieldRequiredText: 'This field is required',
   propTypes: {
-    label: React.PropTypes.string,
+    label: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element])
     // helper: React.PropTypes.html,
   },
   getInitialState: function() {

ui/js/component/link.js

@@ -92,20 +92,20 @@ export let RewardLink = React.createClass({
     this.setState({
       pending: true
     })
-    rewards.claimReward(this.props.type).then(function(reward) {
+    rewards.claimReward(this.props.type).then((reward) => {
       this.setState({
         pending: false,
         errorMessage: null
       })
       if (this.props.onRewardClaim) {
-        this.props.onRewardClaim();
+        this.props.onRewardClaim(reward);
       }
-    }.bind(this)).catch(function(error) {
+    }).catch((error) => {
       this.setState({
         errorMessage: error.message,
         pending: false
       })
-    }.bind(this))
+    })
   },
   clearError: function() {
     if (this.props.onRewardFailure) {
@@ -120,7 +120,8 @@ export let RewardLink = React.createClass({
       <div className="reward-link">
         {this.props.claimed
           ? <span><Icon icon="icon-check" /> Reward claimed.</span>
-          : <Link button={this.props.button ? this.props.button : 'alt'} disabled={this.state.pending || !this.state.claimable } label="Claim Reward" onClick={this.claimReward} />}
+          : <Link button={this.props.button ? this.props.button : 'alt'} disabled={this.state.pending || !this.state.claimable }
+                  label={ this.state.pending ? "Claiming..." : "Claim Reward"} onClick={this.claimReward} />}
         {this.state.errorMessage ?
          <Modal isOpen={true} contentLabel="Reward Claim Error" className="error-modal" onConfirmed={this.clearError}>
            {this.state.errorMessage}

ui/js/lbryio.js

@@ -6,7 +6,8 @@ const querystring = require('querystring');
 const lbryio = {
   _accessToken: getLocal('accessToken'),
   _authenticationPromise: null,
-  _user : null
+  _user : null,
+  enabled: false
 };
 
 const CONNECTION_STRING = 'http://localhost:8080/';
@@ -25,6 +26,10 @@ const mocks = {
 
 lbryio.call = function(resource, action, params={}, method='get') {
   return new Promise((resolve, reject) => {
+    if (!lbryio.enabled) {
+      reject(new Error("LBRY interal API is disabled"))
+      return
+    }
     /* temp code for mocks */
     if (`${resource}.${action}` in mocks) {
       resolve(mocks[`${resource}.${action}`](params));
@@ -90,6 +95,14 @@ lbryio.setAccessToken = (token) => {
 }
 
 lbryio.authenticate = function() {
+  if (!lbryio.enabled) {
+    return new Promise((resolve, reject) => {
+      resolve({
+        ID: 1,
+        HasVerifiedEmail: true
+      })
+    })
+  }
   if (lbryio._authenticationPromise === null) {
     lbryio._authenticationPromise = new Promise((resolve, reject) => {
       lbry.status().then(({installation_id}) => {

ui/js/main.js

@@ -30,8 +30,7 @@ let init = function() {
 
   function onDaemonReady() {
     window.sessionStorage.setItem('loaded', 'y'); //once we've made it here once per session, we don't need to show splash again
-    //<AuthOverlay  />
+    ReactDOM.render(<div>{ lbryio.enabled ? <AuthOverlay/> : '' }<App /><SnackBar /></div>, canvas)
-    ReactDOM.render(<div><App /><SnackBar /></div>, canvas)
   }
 
   if (window.sessionStorage.getItem('loaded') == 'y') {

ui/js/page/discover.js

@@ -81,6 +81,7 @@ var FeaturedContent = React.createClass({
   getInitialState: function() {
     return {
       featuredUris: {},
+      failed: false
     };
   },
   componentWillMount: function() {
@@ -92,19 +93,25 @@ var FeaturedContent = React.createClass({
         }
       })
       this.setState({ featuredUris: featuredUris });
+    }, () => {
+      this.setState({
+        failed: true
+      })
     });
   },
   render: function() {
     return (
-      <div>
+      this.state.failed ?
-        {
+        <div className="empty">Failed to load landing content.</div> :
-          Object.keys(this.state.featuredUris).map(function(category) {
+        <div>
-            return this.state.featuredUris[category].length ?
+          {
-                   <FeaturedCategory key={category} category={category} names={this.state.featuredUris[category]} /> :
+              Object.keys(this.state.featuredUris).map(function(category) {
-                   '';
+                return this.state.featuredUris[category].length ?
-          }.bind(this))
+                       <FeaturedCategory key={category} category={category} names={this.state.featuredUris[category]} /> :
-        }
+                       '';
-      </div>
+              }.bind(this))
+          }
+        </div>
     );
   }
 });

ui/js/page/publish.js

@@ -27,7 +27,7 @@ var PublishPage = React.createClass({
     // Calls API to update displayed list of channels. If a channel name is provided, will select
     // that channel at the same time (used immediately after creating a channel)
     lbry.channel_list_mine().then((channels) => {
-      rewards.claimReward(rewards.TYPE_FIRST_CHANNEL)
+      rewards.claimReward(rewards.TYPE_FIRST_CHANNEL).then(() => {}, () => {})
       this.setState({
         channels: channels,
         ... channel ? {channel} : {}

ui/js/page/rewards.js

@@ -42,6 +42,7 @@ var RewardsPage = React.createClass({
   getInitialState: function() {
     return {
       userRewards: null,
+      failed: null
     };
   },
   loadRewards: function() {
@@ -49,6 +50,8 @@ var RewardsPage = React.createClass({
       this.setState({
         userRewards: userRewards,
       });
+    }, () => {
+      this.setState({failed: true })
     });
   },
   render: function() {
@@ -56,7 +59,7 @@ var RewardsPage = React.createClass({
       <main>
         <form onSubmit={this.handleSubmit}>
           {!this.state.userRewards
-            ? null
+            ? (this.state.failed ? <div className="empty">Failed to load rewards.</div> : '')
             : this.state.userRewards.map(({RewardType, RewardTitle, RewardDescription, TransactionID, RewardAmount}) => {
               return <RewardTile key={RewardType} onRewardClaim={this.loadRewards} type={RewardType} title={RewardTitle} description={RewardDescription} claimed={!!TransactionID} value={RewardAmount} />;
             })}

ui/js/page/show.js

@@ -83,8 +83,7 @@ let ShowPage = React.createClass({
     const
       metadata = this.state.uriLookupComplete ? this.state.metadata : null,
       title = this.state.uriLookupComplete ? metadata.title : this._uri;
-
+    
-    console.log(metadata);
     return (
       <main className="constrained-page">
         <section className="show-page-media">

ui/js/page/watch.js

@@ -3,6 +3,7 @@ import {Icon, Thumbnail} from '../component/common.js';
 import {Link} from '../component/link.js';
 import lbry from '../lbry.js';
 import Modal from '../component/modal.js';
+import lbryio from '../lbryio.js';
 import LoadScreen from '../component/load_screen.js'
 
 const fs = require('fs');
@@ -25,6 +26,12 @@ export let WatchLink = React.createClass({
           attemptingDownload: false,
         });
       }
+
+      lbryio.call('file', 'view', {
+        uri: this.props.uri,
+        outpoint: streamInfo.outpoint,
+        claimId: streamInfo.claim_id
+      })
     });
     if (this.props.onGet) {
       this.props.onGet()

ui/js/rewards.js

@@ -24,6 +24,10 @@ rewards.TYPE_NEW_DEVELOPER = "new_developer",
 rewards.claimReward = function (type) {
 
   function requestReward(resolve, reject, params) {
+    if (!lbryio.enabled) {
+      reject(new Error("Rewards are not enabled."))
+      return;
+    }
     lbryio.call('reward', 'new', params, 'post').then(({RewardAmount}) => {
       const
         message = rewardMessage(type, RewardAmount),