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

Refactor My Files page (WIP)
This commit is contained in:
alexliebowitz 2016-12-28 03:38:52 -05:00 committed by GitHub
commit a9ef9ea391
2 changed files with 100 additions and 70 deletions

View file

@ -242,6 +242,22 @@ lbry.getFilesInfo = function(callback) {
lbry.call('get_lbry_files', {}, 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.startFile = function(name, callback) {
lbry.call('start_lbry_file', { name: name }, callback); lbry.call('start_lbry_file', { name: name }, callback);
} }

View file

@ -168,12 +168,11 @@ var MyFilesPage = React.createClass({
_fileTimeout: null, _fileTimeout: null,
_fileInfoCheckRate: 300, _fileInfoCheckRate: 300,
_fileInfoCheckNum: 0, _fileInfoCheckNum: 0,
_filesOwnership: {},
getInitialState: function() { getInitialState: function() {
return { return {
filesInfo: null, filesInfo: null,
filesOwnershipLoaded: false, publishedFilesSdHashes: null,
filesAvailable: {}, filesAvailable: {},
}; };
}, },
@ -186,8 +185,30 @@ var MyFilesPage = React.createClass({
document.title = "My Files"; document.title = "My Files";
}, },
componentWillMount: function() { componentWillMount: function() {
this.getFilesOwnership(); if (this.props.show == 'downloaded') {
this.updateFilesInfo(); 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() { componentWillUnmount: function() {
if (this._fileTimeout) if (this._fileTimeout)
@ -195,83 +216,79 @@ var MyFilesPage = React.createClass({
clearTimeout(this._fileTimeout); 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() { updateFilesInfo: function() {
lbry.getFilesInfo((filesInfo) => { this._fileInfoCheckNum += 1;
if (!filesInfo) {
filesInfo = [];
}
let newFilesAvailable; if (this.props.show == 'published') {
if (!(this._fileInfoCheckNum % this._fileInfoCheckRate)) { // We're in the Published tab, so populate this.state.filesInfo with data from the user's claims
// Time to update file availability status lbry.getMyClaims((claimsInfo) => {
let newFilesInfo = [];
newFilesAvailable = {}; let claimInfoProcessedCount = 0;
let filePeersCheckCount = 0; for (let claimInfo of claimsInfo) {
for (let fileInfo of filesInfo) { let metadata = JSON.parse(claimInfo.value);
lbry.getPeersForBlobHash(fileInfo.sd_hash, (peers) => { lbry.getFileInfoBySdHash(metadata.sources.lbry_sd_hash, (fileInfo) => {
filePeersCheckCount++; claimInfoProcessedCount++;
newFilesAvailable[fileInfo.sd_hash] = peers.length >= 0; if (fileInfo !== false) {
if (filePeersCheckCount >= filesInfo.length) { newFilesInfo.push(fileInfo);
}
if (claimInfoProcessedCount >= claimsInfo.length) {
this.setState({ this.setState({
filesAvailable: newFilesAvailable, filesInfo: newFilesInfo
}); });
this._fileTimeout = setTimeout(() => { this.updateFilesInfo() }, 1000);
} }
}); });
} }
}
this._fileInfoCheckNum += 1;
this.setState({
filesInfo: filesInfo,
}); });
} 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;
}),
});
this._fileTimeout = setTimeout(() => { this.updateFilesInfo() }, 1000); let newFilesAvailable;
}); if (!(this._fileInfoCheckNum % this._fileInfoCheckRate)) {
// Time to update file availability status
newFilesAvailable = {};
let filePeersCheckCount = 0;
for (let {sd_hash} of filesInfo) {
lbry.getPeersForBlobHash(sd_hash, (peers) => {
filePeersCheckCount++;
newFilesAvailable[sd_hash] = peers.length >= 0;
if (filePeersCheckCount >= filesInfo.length) {
this.setState({
filesAvailable: newFilesAvailable,
});
}
});
}
}
this._fileTimeout = setTimeout(() => { this.updateFilesInfo() }, 1000);
})
}
}, },
render: function() { render: function() {
if (this.state.filesInfo === null || !this.state.filesOwnershipLoaded) { if (this.state.filesInfo === null || (this.props.show == 'downloaded' && this.state.publishedFileSdHashes === null)) {
return ( return (
<main className="page"> <main className="page">
<BusyMessage message="Loading" /> <BusyMessage message="Loading" />
</main> </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 { } else {
var content = [], var content = [],
seenUris = {}; seenUris = {};
@ -280,10 +297,7 @@ var MyFilesPage = React.createClass({
let {completed, written_bytes, total_bytes, lbry_uri, file_name, download_path, let {completed, written_bytes, total_bytes, lbry_uri, file_name, download_path,
stopped, metadata, sd_hash} = fileInfo; 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; 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} 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} ratioLoaded={ratioLoaded} imgUrl={thumbnail} path={download_path}
showWatchButton={showWatchButton} pending={pending} showWatchButton={showWatchButton} pending={pending}
available={this.state.filesAvailable[sd_hash]} isMine={isMine} />); available={this.state.filesAvailable[sd_hash]} isMine={this.props.show == 'published'} />);
} }
} }
return ( return (