more refactors, fixes

ui/js/actions/content.js

@@ -10,6 +10,9 @@ import {
   selectFileInfoForUri,
   selectDownloadingByUri,
 } from 'selectors/file_info'
+import {
+  selectResolvingUris
+} from 'selectors/content'
 import {
   selectCostInfoForUri,
 } from 'selectors/cost_info'
@@ -22,26 +25,38 @@ import {
 
 export function doResolveUri(uri) {
   return function(dispatch, getState) {
-    dispatch({
-      type: types.RESOLVE_URI_STARTED,
-      data: { uri }
-    })
 
-    lbry.resolve({ uri }).then((resolutionInfo) => {
-      const {
-        claim,
-        certificate,
-      } = resolutionInfo ? resolutionInfo : { claim : null, certificate: null }
+    const state = getState()
+    const alreadyResolving = selectResolvingUris(state).indexOf(uri) !== -1
 
+    if (!alreadyResolving) {
       dispatch({
-        type: types.RESOLVE_URI_COMPLETED,
-        data: {
-          uri,
+        type: types.RESOLVE_URI_STARTED,
+        data: { uri }
+      })
+
+      lbry.resolve({ uri }).then((resolutionInfo) => {
+        const {
           claim,
           certificate,
-        }
+        } = resolutionInfo ? resolutionInfo : { claim : null, certificate: null }
+
+        dispatch({
+          type: types.RESOLVE_URI_COMPLETED,
+          data: {
+            uri,
+            claim,
+            certificate,
+          }
+        })
       })
-    })
+    }
+  }
+}
+
+export function doCancelResolveUri(uri) {
+  return function(dispatch, getState) {
+    lbry.cancelResolve({ uri })
   }
 }
 

ui/js/actions/file_info.js

@@ -21,13 +21,6 @@ export function doFetchFileInfo(uri) {
     const outpoint = claim ? `${claim.txid}:${claim.nout}` : null
     const alreadyFetching = !!selectLoadingByUri(state)[uri]
 
-    if (!outpoint) {
-      console.log(claim);
-      console.log(outpoint);
-      console.log(selectClaimsByUri(state))
-      throw new Error("Unable to get outpoint from claim for URI " + uri);
-    }
-
     if (!alreadyFetching) {
       dispatch({
         type: types.FETCH_FILE_INFO_STARTED,

ui/js/component/app/index.js

@@ -7,6 +7,9 @@ import {
 import {
   doCheckUpgradeAvailable,
 } from 'actions/app'
+import {
+  doUpdateBalance,
+} from 'actions/wallet'
 import App from './view'
 
 const select = (state) => ({
@@ -15,6 +18,7 @@ const select = (state) => ({
 
 const perform = (dispatch) => ({
   checkUpgradeAvailable: () => dispatch(doCheckUpgradeAvailable()),
+  updateBalance: (balance) => dispatch(doUpdateBalance(balance))
 })
 
 export default connect(select, perform)(App)

ui/js/component/app/view.jsx

@@ -4,7 +4,8 @@ import Header from 'component/header';
 import ErrorModal from 'component/errorModal'
 import DownloadingModal from 'component/downloadingModal'
 import UpgradeModal from 'component/upgradeModal'
-import {Line} from 'rc-progress';
+import lbry from 'lbry'
+import {Line} from 'rc-progress'
 
 class App extends React.Component {
   componentWillMount() {
@@ -15,6 +16,10 @@ class App extends React.Component {
     if (!this.props.upgradeSkipped) {
       this.props.checkUpgradeAvailable()
     }
+
+    lbry.balanceSubscribe((balance) => {
+      this.props.updateBalance(balance)
+    })
   }
 
   render() {

ui/js/component/fileActions/index.js

@@ -3,7 +3,6 @@ import {
   connect,
 } from 'react-redux'
 import {
-  selectHasSignature,
   selectPlatform,
 } from 'selectors/app'
 import {

ui/js/component/fileActions/view.jsx

@@ -72,11 +72,14 @@ class FileActions extends React.Component {
 
     let content
 
-    if (fileInfo === undefined || isAvailable === undefined) {
+    console.log('file actions render')
+    console.log(this.props)
+
+    if (!fileInfo && isAvailable === undefined) {
 
       content = <BusyMessage message="Checking availability" />
 
-    } else if (!isAvailable && !this.state.forceShowActions) {
+    } else if (!fileInfo && !isAvailable && !this.state.forceShowActions) {
 
       content = <div>
         <div className="button-set-item empty">Content unavailable.</div>
@@ -119,7 +122,7 @@ class FileActions extends React.Component {
           </DropDownMenu> : '' }
         <Modal type="confirm" isOpen={modal == 'affirmPurchase'}
                contentLabel="Confirm Purchase" onConfirmed={this.onAffirmPurchase.bind(this)} onAborted={closeModal}>
-          Are you sure you'd like to buy <strong>{title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits?
+          This will purchase <strong>{title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits.
         </Modal>
         <Modal isOpen={modal == 'notEnoughCredits'} contentLabel="Not enough credits"
                onConfirmed={closeModal}>

ui/js/component/fileCard/index.js

@@ -7,6 +7,7 @@ import {
 } from 'actions/app'
 import {
   doResolveUri,
+  doCancelResolveUri,
 } from 'actions/content'
 import {
   selectObscureNsfw,
@@ -44,6 +45,7 @@ const makeSelect = () => {
 const perform = (dispatch) => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
   resolveUri: (uri) => dispatch(doResolveUri(uri)),
+  cancelResolveUri: (uri) => dispatch(doCancelResolveUri(uri))
 })
 
 export default connect(makeSelect, perform)(FileCard)

ui/js/component/fileCard/view.jsx

@@ -8,18 +8,30 @@ import UriIndicator from 'component/uriIndicator';
 
 class FileCard extends React.Component {
   componentDidMount() {
+    this.resolve(this.props)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.resolve(nextProps)
+  }
+
+  resolve(props) {
     const {
       isResolvingUri,
       resolveUri,
       claim,
       uri,
-    } = this.props
+    } = props
 
-    if(!isResolvingUri && !claim && uri) {
+    if(!isResolvingUri && claim === undefined && uri) {
       resolveUri(uri)
     }
   }
 
+  componentWillUnmount() {
+    this.props.cancelResolveUri(this.props.uri)
+  }
+
   handleMouseOver() {
     this.setState({
       hovered: true,

ui/js/component/fileList/view.jsx

@@ -58,6 +58,7 @@ class FileList extends React.Component {
   render() {
     const {
       handleSortChanged,
+      fetching,
       fileInfos,
       hidePrices,
     } = this.props
@@ -74,7 +75,8 @@ class FileList extends React.Component {
       content.push(<FileTile key={uri} uri={uri} hidePrice={hidePrices} hideOnRemove={true} showEmpty={""} />)
     })
     return (
-      <section>
+      <section className="file-list__header">
+        { fetching && <span className="busy-indicator"/> }
         <span className='sort-section'>
           Sort by { ' ' }
           <FormField type="select" onChange={this.handleSortChanged.bind(this)}>

ui/js/component/filePrice/index.js

@@ -20,7 +20,8 @@ const makeSelect = () => {
 }
 
 const perform = (dispatch) => ({
-  fetchCostInfo: (uri) => dispatch(doFetchCostInfoForUri(uri))
+  fetchCostInfo: (uri) => dispatch(doFetchCostInfoForUri(uri)),
+  cancelFetchCostInfo: (uri) => dispatch(doCancelFetchCostInfoForUri(uri))
 })
 
 export default connect(makeSelect, perform)(FilePrice)

ui/js/component/video/view.jsx

@@ -38,7 +38,7 @@ class VideoPlayButton extends React.Component {
 
     return (<div>
       <Link button={ button ? button : null }
-            disabled={isLoading || !costInfo || costInfo.cost === undefined || fileInfo === undefined}
+            disabled={isLoading || fileInfo === undefined || (fileInfo === null && (!costInfo || costInfo.cost === undefined))}
             label={label ? label : ""}
             className="video__play-button"
             icon="icon-play"
@@ -53,7 +53,7 @@ class VideoPlayButton extends React.Component {
         contentLabel="Confirm Purchase"
         onConfirmed={this.confirmPurchaseClick.bind(this)}
         onAborted={closeModal}>
-        Are you sure you'd like to buy <strong>{this.props.metadata.title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits?
+        This will purchase <strong>{title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits.
       </Modal>
       <Modal
         isOpen={modal == 'timedOut'} onConfirmed={closeModal} contentLabel="Timed Out">
@@ -98,6 +98,11 @@ class Video extends React.Component {
       isPlaying = false,
     } = this.state
 
+    const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0
+
+    console.log('video render')
+    console.log(this.props)
+
     let loadStatusMessage = ''
 
     if (isLoading) {
@@ -107,9 +112,9 @@ class Video extends React.Component {
     }
 
     return (
-      <div className={"video " + this.props.className + (isPlaying && fileInfo.isReadyToPlay ? " video--active" : " video--hidden")}>{
+      <div className={"video " + this.props.className + (isPlaying && isReadyToPlay ? " video--active" : " video--hidden")}>{
         isPlaying ?
-          (!fileInfo.isReadyToPlay ?
+          (!isReadyToPlay ?
             <span>this is the world's worst loading screen and we shipped our software with it anyway... <br /><br />{loadStatusMessage}</span> :
             <VideoPlayer downloadPath={fileInfo.download_path} />) :
         <div className="video__cover" style={{backgroundImage: 'url("' + metadata.thumbnail + '")'}}>

ui/js/jsonrpc.js

@@ -68,6 +68,8 @@ jsonrpc.call = function (connectionString, method, params, callback, errorCallba
   }));
 
   sessionStorage.setItem('JSONRPCCounter', counter + 1);
+
+  return xhr
 };
 
 export default jsonrpc;

ui/js/lbry.js

@@ -95,7 +95,7 @@ let lbry = {
 };
 
 lbry.call = function (method, params, callback, errorCallback, connectFailedCallback) {
-  jsonrpc.call(lbry.daemonConnectionString, method, params, callback, errorCallback, connectFailedCallback);
+  return jsonrpc.call(lbry.daemonConnectionString, method, params, callback, errorCallback, connectFailedCallback);
 }
 
 //core
@@ -177,11 +177,6 @@ lbry.setDaemonSetting = function(setting, value, callback) {
   lbry.call('set_settings', setSettingsArgs, callback)
 }
 
-
-lbry.getBalance = function(callback) {
-  lbry.call("wallet_balance", {}, callback);
-}
-
 lbry.sendToAddress = function(amount, address, callback, errorCallback) {
   lbry.call("send_amount_to_address", { "amount" : amount, "address": address }, callback, errorCallback);
 }
@@ -641,6 +636,7 @@ lbry.claim_list_mine = function(params={}) {
 
 const claimCacheKey = 'resolve_claim_cache';
 lbry._claimCache = getSession(claimCacheKey, {});
+lbry._resolveXhrs = {}
 lbry.resolve = function(params={}) {
   return new Promise((resolve, reject) => {
     if (!params.uri) {
@@ -649,7 +645,7 @@ lbry.resolve = function(params={}) {
     if (params.uri && lbry._claimCache[params.uri] !== undefined) {
       resolve(lbry._claimCache[params.uri]);
     } else {
-      lbry.call('resolve', params, function(data) {
+      lbry._resolveXhrs[params.uri] = lbry.call('resolve', params, function(data) {
         if (data !== undefined) {
           lbry._claimCache[params.uri] = data;
         }
@@ -660,6 +656,13 @@ lbry.resolve = function(params={}) {
   });
 }
 
+lbry.cancelResolve = function(params={}) {
+  const xhr = lbry._resolveXhrs[params.uri]
+  if (xhr && xhr.readyState > 0 && xhr.readyState < 4) {
+    xhr.abort()
+  }
+}
+
 // Adds caching.
 lbry._settingsPromise = null;
 lbry.settings_get = function(params={}) {

ui/js/page/fileListDownloaded/view.jsx

@@ -23,12 +23,14 @@ class FileListDownloaded extends React.Component {
     } = this.props
 
     let content
-    if (fetching) {
-      content = <BusyMessage message="Loading" />
-    } else if (!downloadedContent.length) {
-      content = <span>You haven't downloaded anything from LBRY yet. Go <Link onClick={() => navigate('/discover')} label="search for your first download" />!</span>
+    if (downloadedContent && downloadedContent.length > 0) {
+      content = <FileList fileInfos={downloadedContent} fetching={fetching} hidePrices={true} />
     } else {
-      content = <FileList fileInfos={downloadedContent} hidePrices={true} />
+      if (fetching) {
+        content = <BusyMessage message="Loading" />
+      } else {
+        content = <span>You haven't downloaded anything from LBRY yet. Go <Link onClick={() => navigate('/discover')} label="search for your first download" />!</span>
+      }
     }
 
     return (

ui/js/page/fileListPublished/view.jsx

@@ -44,12 +44,15 @@ class FileListPublished extends React.Component {
     } = this.props
 
     let content
-    if (fetching) {
-      content = <BusyMessage message="Loading" />
-    } else if (!publishedContent.length) {
-      content = <span>You haven't downloaded anything from LBRY yet. Go <Link onClick={() => navigate('/discover')} label="search for your first download" />!</span>
+
+    if (publishedContent && publishedContent.length > 0) {
+      content = <FileList fileInfos={publishedContent} fetching={fetching} hidePrices={true} />
     } else {
-      content = <FileList fileInfos={publishedContent} hidePrices={true} />
+      if (fetching) {
+        content = <BusyMessage message="Loading" />
+      } else {
+        content = <span>You haven't downloaded anything from LBRY yet. Go <Link onClick={() => navigate('/discover')} label="search for your first download" />!</span>
+      }
     }
 
     return (

ui/js/reducers/file_info.js

@@ -27,11 +27,6 @@ reducers[types.FETCH_FILE_INFO_COMPLETED] = function(state, action) {
   const newByUri = Object.assign({}, state.byUri)
   const newFetching = Object.assign({}, state.fetching)
 
-  if (fileInfo) {
-    fileInfo.isReadyToPlay = fileInfo.written_bytes > 0
-    fileInfo.isDownloaded = fileInfo.completed && fileInfo.written_bytes > 0;
-  }
-
   newByUri[uri] = fileInfo || null
 
   delete newFetching[uri]

ui/js/selectors/app.js

@@ -192,8 +192,3 @@ export const selectObscureNsfw = createSelector(
   _selectState,
   (state) => !!state.obscureNsfw
 )
-
-export const selectHasSignature = createSelector(
-  _selectState,
-  (state) => !!state.hasSignature
-)

ui/js/selectors/content.js

@@ -42,7 +42,7 @@ export const selectPublishedContent = createSelector(
   (state) => state.publishedContent || {}
 )
 
-const selectResolvingUris = createSelector(
+export const selectResolvingUris = createSelector(
   _selectState,
   (state) => state.resolvingUris || []
 )

ui/scss/_gui.scss

@@ -143,6 +143,14 @@ p
   font-style: italic;
 }
 
+/*should be redone/moved*/
+.file-list__header {
+  .busy-indicator {
+    float: left;
+    margin-top: 12px;
+  }
+}
+
 .sort-section {
   display: block;
   margin-bottom: $spacing-vertical * 2/3;