ui/js/component/auth.js

@@ -137,7 +137,7 @@ 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 5 LBRY credits, or <em>LBC</em>.</p>
+            <p>You earned a reward of %award% 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>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>

ui/js/component/file-actions.js

@@ -27,7 +27,6 @@ let FileActionsRow = React.createClass({
       deleteChecked: false,
       attemptingDownload: false,
       attemptingRemove: false,
-      affirmedPurchase: false
     }
   },
   onFileInfoUpdate: function(fileInfo) {

ui/js/page/show.js

@@ -80,21 +80,17 @@ let ShowPage = React.createClass({
     });
   },
   render: function() {
-    if (this.state.metadata == null) {
-      return null;
-    }
-
-    //                  <div className="card__media" style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}></div>
     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">
           { this.state.contentType && this.state.contentType.startsWith('video/') ?
               <Video className="video-embedded" uri={this._uri} metadata={metadata} /> :
-              <Thumbnail src={metadata.thumbnail} /> }
+              (metadata ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
         </section>
         <section className="card">
           <div className="card__inner">
@@ -117,11 +113,12 @@ let ShowPage = React.createClass({
                     {metadata.description}
                   </div>
                 </div>
-              : <BusyMessage message="Loading..." /> }
+              : <div className="card__content"><BusyMessage message="Loading magic decentralized data..." /></div> }
           </div>
+          { metadata ?
               <div className="card__content">
                 <FormatItem metadata={metadata} contentType={this.state.contentType} cost={this.state.cost} uri={this._uri} outpoint={this.state.outpoint} costIncludesData={this.state.costIncludesData}  />
-          </div>
+              </div> : '' }
           <div className="card__content">
             <Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
           </div>

ui/js/page/watch.js

@@ -2,11 +2,87 @@ import React from 'react';
 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 LoadScreen from '../component/load_screen.js'
 
 const fs = require('fs');
 const VideoStream = require('videostream');
 
+export let WatchLink = React.createClass({
+  propTypes: {
+    uri: React.PropTypes.string,
+    downloadStarted: React.PropTypes.bool,
+    onGet: React.PropTypes.func
+  },
+  getInitialState: function() {
+    affirmedPurchase: false
+  },
+  onAffirmPurchase: function() {
+    lbry.get({uri: this.props.uri}).then((streamInfo) => {
+      if (streamInfo === null || typeof streamInfo !== 'object') {
+        this.setState({
+          modal: 'timedOut',
+          attemptingDownload: false,
+        });
+      }
+    });
+    if (this.props.onGet) {
+      this.props.onGet()
+    }
+  },
+  onWatchClick: function() {
+    this.setState({
+      loading: true
+    });
+    lbry.getCostInfo(this.props.uri).then(({cost}) => {
+      lbry.getBalance((balance) => {
+        if (cost > balance) {
+          this.setState({
+            modal: 'notEnoughCredits',
+            attemptingDownload: false,
+          });
+        } else if (cost <= 0.01) {
+          this.onAffirmPurchase()
+        } else {
+          this.setState({
+            modal: 'affirmPurchase'
+          });
+        }
+      });
+    });
+  },
+  getInitialState: function() {
+    return {
+      modal: null,
+      loading: false,
+    };
+  },
+  closeModal: function() {
+    this.setState({
+      loading: false,
+      modal: null,
+    });
+  },
+  render: function() {
+    return (<div>
+      <Link button={ this.props.button ? this.props.button : null }
+            disabled={this.state.loading}
+            label={this.props.label ? this.props.label : ""}
+            className={this.props.className}
+            icon="icon-play"
+            onClick={this.onWatchClick} />
+      <Modal contentLabel="Not enough credits" isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
+        You don't have enough LBRY credits to pay for this stream.
+      </Modal>
+      <Modal type="confirm" isOpen={this.state.modal == 'affirmPurchase'}
+             contentLabel="Confirm Purchase"  onConfirmed={this.onAffirmPurchase} onAborted={this.closeModal}>
+        Confirm you want to purchase this bro.
+      </Modal>
+    </div>);
+  }
+});
+
+
 export let Video = React.createClass({
   _isMounted: false,
   _controlsHideDelay: 3000, // Note: this needs to be shorter than the built-in delay in Electron, or Electron will hide the controls before us
@@ -27,22 +103,7 @@ export let Video = React.createClass({
       controlsShown: false,
     };
   },
-  start: function() {
-    // lbry.getCostInfo(this.props.uri).then(({cost}) => {
-    //   lbry.getBalance((balance) => {
-    //     if (cost > balance) {
-    //       this.setState({
-    //         modal: 'notEnoughCredits',
-    //         loading: false,
-    //       });
-    //     } else {
-    //       this.startVideo();
-    //     }
-    //   });
-    // // });
-    // <Modal contentLabel="Not enough credits" isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
-    //   You don't have enough LBRY credits to pay for this stream.
-    // </Modal>
+  onGet: function() {
     lbry.get({uri: this.props.uri}).then((fileInfo) => {
       this._outpoint = fileInfo.outpoint;
       this.updateLoadStatus();
@@ -127,9 +188,8 @@ export let Video = React.createClass({
           !this.state.readyToPlay  ?
             <span>this is the world's world loading screen and we shipped our software with it anyway... <br/><br/>{this.state.loadStatusMessage}</span> :
             <video controls id="video" ref="video"></video> :
-          <div className="video__cover">
-            <Thumbnail src={this.props.metadata.thumbnail} />
-            <a className="video__play-button" onClick={this.start}><Icon icon="icon-play" /></a>
+          <div className="video__cover" style={{backgroundImage: 'url("' + this.props.metadata.thumbnail + '")'}}>
+            <WatchLink className="video__play-button" uri={this.props.uri} onGet={this.onGet} icon="icon-play"></WatchLink>
           </div>
       }</div>
     );

ui/scss/component/_video.scss

@@ -30,11 +30,9 @@ video {
   text-align: center;
   height: 100%;
   width: 100%;
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    vertical-align: middle;
-  }
+  background-size: auto 100%;
+  background-position: center center;
+  background-repeat: no-repeat;
   position: relative;
   &:hover {
     .video__play-button { @include absolute-center(); }