Merge pull request #77 from lbryio/my-files-refactor

Refactor My Files page (WIP)

js/lbry.js

@@ -242,6 +242,22 @@ lbry.getFilesInfo = function(callback) {
   lbry.call('get_lbry_files', {}, callback);
 }
 
+lbry.getFileInfoByName = function(name, callback) {
+  lbry.call('get_lbry_file', {name: name}, callback);
+}
+
+lbry.getFileInfoBySdHash = function(sdHash, callback) {
+  lbry.call('get_lbry_file', {sd_hash: sdHash}, callback);
+}
+
+lbry.getFileInfoByFilename = function(filename, callback) {
+  lbry.call('get_lbry_file', {file_name: filename}, callback);
+}
+
+lbry.getMyClaims = function(callback) {
+  lbry.call('get_name_claims', {}, callback);
+}
+
 lbry.startFile = function(name, callback) {
   lbry.call('start_lbry_file', { name: name }, callback);
 }

js/page/my_files.js

@@ -168,12 +168,11 @@ var MyFilesPage = React.createClass({
   _fileTimeout: null,
   _fileInfoCheckRate: 300,
   _fileInfoCheckNum: 0,
-  _filesOwnership: {},
 
   getInitialState: function() {
     return {
       filesInfo: null,
-      filesOwnershipLoaded: false,
+      publishedFilesSdHashes: null,
       filesAvailable: {},
     };
   },
@@ -186,8 +185,30 @@ var MyFilesPage = React.createClass({
     document.title = "My Files";
   },
   componentWillMount: function() {
-    this.getFilesOwnership();
+    if (this.props.show == 'downloaded') {
+      this.getPublishedFilesSdHashes(() => {
         this.updateFilesInfo();
+      });
+    } else {
+      this.updateFilesInfo();
+    }
+  },
+  getPublishedFilesSdHashes: function(callback) {
+    // Determines which files were published by the user and saves their SD hashes in
+    // this.state.publishedFilesSdHashes. Used on the Downloads page to filter out claims published
+    // by the user.
+    var publishedFilesSdHashes = [];
+    lbry.getMyClaims((claimsInfo) => {
+      for (let claimInfo of claimsInfo) {
+        let metadata = JSON.parse(claimInfo.value);
+        publishedFilesSdHashes.push(metadata.sources.lbry_sd_hash);
+      }
+
+      this.setState({
+        publishedFilesSdHashes: publishedFilesSdHashes,
+      });
+      callback();
+    });
   },
   componentWillUnmount: function() {
     if (this._fileTimeout)
@@ -195,43 +216,40 @@ var MyFilesPage = React.createClass({
       clearTimeout(this._fileTimeout);
     }
   },
-  getFilesOwnership: function() {
-    lbry.getFilesInfo((filesInfo) => {
-      if (!filesInfo) {
-        this.setState({
-          filesOwnershipLoaded: true,
-        });
-        return;
-      }
-
-      var ownershipLoadedCount = 0;
-      for (let i = 0; i < filesInfo.length; i++) {
-        let fileInfo = filesInfo[i];
-        lbry.call('get_my_claim', {name: fileInfo.lbry_uri}, (claim) => {
-          this._filesOwnership[fileInfo.lbry_uri] = !!claim;
-          ownershipLoadedCount++;
-          if (ownershipLoadedCount >= filesInfo.length) {
-            this.setState({
-              filesOwnershipLoaded: true,
-            });
-          }
-        }, (claim) => {
-          this._filesOwnership[fileInfo.lbry_uri] = true;
-          ownershipLoadedCount++;
-          if (ownershipLoadedCount >= filesInfo.length) {
-            this.setState({
-              filesOwnershipLoaded: true,
-            });
-          }
-        });
-      }
-    });
-  },
   updateFilesInfo: function() {
-    lbry.getFilesInfo((filesInfo) => {
+    this._fileInfoCheckNum += 1;
-      if (!filesInfo) {
+
-        filesInfo = [];
+    if (this.props.show == 'published') {
+      // We're in the Published tab, so populate this.state.filesInfo with data from the user's claims
+      lbry.getMyClaims((claimsInfo) => {
+        let newFilesInfo = [];
+        let claimInfoProcessedCount = 0;
+        for (let claimInfo of claimsInfo) {
+          let metadata = JSON.parse(claimInfo.value);
+          lbry.getFileInfoBySdHash(metadata.sources.lbry_sd_hash, (fileInfo) => {
+            claimInfoProcessedCount++;
+            if (fileInfo !== false) {
+              newFilesInfo.push(fileInfo);
             }
+            if (claimInfoProcessedCount >= claimsInfo.length) {
+              this.setState({
+                filesInfo: newFilesInfo
+              });
+
+              this._fileTimeout = setTimeout(() => { this.updateFilesInfo() }, 1000);
+            }
+          });
+        }
+      });
+    } else {
+      // We're in the Downloaded tab, so populate this.state.filesInfo with files the user has in
+      // lbrynet, with published files filtered out.
+      lbry.getFilesInfo((filesInfo) => {
+        this.setState({
+          filesInfo: filesInfo.filter(({sd_hash}) => {
+            return this.state.publishedFilesSdHashes.indexOf(sd_hash) == -1;
+          }),
+        });
 
         let newFilesAvailable;
         if (!(this._fileInfoCheckNum % this._fileInfoCheckRate)) {
@@ -239,10 +257,10 @@ var MyFilesPage = React.createClass({
 
           newFilesAvailable = {};
           let filePeersCheckCount = 0;
-        for (let fileInfo of filesInfo) {
+          for (let {sd_hash} of filesInfo) {
-          lbry.getPeersForBlobHash(fileInfo.sd_hash, (peers) => {
+            lbry.getPeersForBlobHash(sd_hash, (peers) => {
               filePeersCheckCount++;
-            newFilesAvailable[fileInfo.sd_hash] = peers.length >= 0;
+              newFilesAvailable[sd_hash] = peers.length >= 0;
               if (filePeersCheckCount >= filesInfo.length) {
                 this.setState({
                   filesAvailable: newFilesAvailable,
@@ -252,26 +270,25 @@ var MyFilesPage = React.createClass({
           }
         }
 
-      this._fileInfoCheckNum += 1;
-
-      this.setState({
-        filesInfo: filesInfo,
-      });
-
         this._fileTimeout = setTimeout(() => { this.updateFilesInfo() }, 1000);
-    });
+      })
+    }
   },
   render: function() {
-    if (this.state.filesInfo === null || !this.state.filesOwnershipLoaded) {
+    if (this.state.filesInfo === null || (this.props.show == 'downloaded' && this.state.publishedFileSdHashes === null)) {
       return (
         <main className="page">
           <BusyMessage message="Loading" />
         </main>
       );
-    }
+    } else if (!this.state.filesInfo.length) {
-
+      return (
-    if (!this.state.filesInfo.length) {
+        <main className="page">
-      var content = <span>You haven't downloaded anything from LBRY yet. Go <Link href="/" label="search for your first download" />!</span>;
+          {this.props.show == 'downloaded'
+            ? <span>You haven't downloaded anything from LBRY yet. Go <Link href="/" label="search for your first download" />!</span>
+            : <span>You haven't published anything to LBRY yet.</span>}
+        </main>
+      );
     } else {
       var content = [],
           seenUris = {};
@@ -280,10 +297,7 @@ var MyFilesPage = React.createClass({
         let {completed, written_bytes, total_bytes, lbry_uri, file_name, download_path,
           stopped, metadata, sd_hash} = fileInfo;
 
-        var isMine = this._filesOwnership[lbry_uri];
+        if (!metadata || seenUris[lbry_uri]) {
-
-        if (!metadata || seenUris[lbry_uri] || (this.props.show == 'downloaded' && isMine) ||
-            (this.props.show == 'published' && !isMine)) {
           continue;
         }
 
@@ -308,7 +322,7 @@ var MyFilesPage = React.createClass({
         content.push(<MyFilesRow key={lbry_uri} lbryUri={lbry_uri} title={title || ('lbry://' + lbry_uri)} completed={completed} stopped={stopped}
                                  ratioLoaded={ratioLoaded} imgUrl={thumbnail} path={download_path}
                                  showWatchButton={showWatchButton} pending={pending}
-                                 available={this.state.filesAvailable[sd_hash]} isMine={isMine} />);
+                                 available={this.state.filesAvailable[sd_hash]} isMine={this.props.show == 'published'} />);
       }
     }
     return (