lbry-desktop/ui/js/page/file-list.js

187 lines
5.1 KiB
JavaScript
Raw Normal View History

2017-01-13 23:18:37 +01:00
import React from 'react';
import lbry from '../lbry.js';
import {Link} from '../component/link.js';
import FormField from '../component/form.js';
import {FileTileStream} from '../component/file-tile.js';
import {BusyMessage, Thumbnail} from '../component/common.js';
export let FileListDownloaded = React.createClass({
_isMounted: false,
getInitialState: function() {
return {
fileInfos: null,
};
},
componentDidMount: function() {
this._isMounted = true;
document.title = "Downloaded Files";
lbry.claim_list_mine().then((myClaimInfos) => {
2017-01-13 23:18:37 +01:00
if (!this._isMounted) { return; }
lbry.file_list().then((fileInfos) => {
2017-01-13 23:18:37 +01:00
if (!this._isMounted) { return; }
const myClaimOutpoints = myClaimInfos.map(({txid, nout}) => txid + ':' + nout);
2017-01-13 23:18:37 +01:00
this.setState({
fileInfos: fileInfos.filter(({outpoint}) => !myClaimOutpoints.includes(outpoint)),
2017-01-13 23:18:37 +01:00
});
});
});
},
render: function() {
if (this.state.fileInfos === null) {
return (
<main className="page">
<BusyMessage message="Loading" />
</main>
);
} else if (!this.state.fileInfos.length) {
return (
<main className="page">
<span>You haven't downloaded anything from LBRY yet. Go <Link href="/index.html?discover" label="search for your first download" />!</span>
2017-01-13 23:18:37 +01:00
</main>
);
} else {
return (
<main className="page">
2017-01-17 11:19:09 +01:00
<FileList fileInfos={this.state.fileInfos} hidePrices={true} />
2017-01-13 23:18:37 +01:00
</main>
);
}
}
});
export let FileListPublished = React.createClass({
_isMounted: false,
getInitialState: function () {
return {
fileInfos: null,
};
},
componentDidMount: function () {
this._isMounted = true;
document.title = "Published Files";
lbry.claim_list_mine().then((claimInfos) => {
if (!this._isMounted) { return; }
lbry.file_list().then((fileInfos) => {
if (!this._isMounted) { return; }
2017-01-13 23:18:37 +01:00
const myClaimOutpoints = claimInfos.map(({txid, nout}) => txid + ':' + nout);
this.setState({
fileInfos: fileInfos.filter(({outpoint}) => myClaimOutpoints.includes(outpoint)),
2017-01-13 23:18:37 +01:00
});
});
2017-01-13 23:18:37 +01:00
});
},
render: function () {
if (this.state.fileInfos === null) {
return (
<main className="page">
<BusyMessage message="Loading" />
</main>
);
}
else if (!this.state.fileInfos.length) {
return (
<main className="page">
2017-02-24 09:57:24 +01:00
<span>You haven't published anything to LBRY yet.</span> Try <Link href="index.html?publish" label="publishing" />!
2017-01-13 23:18:37 +01:00
</main>
);
}
else {
return (
<main className="page">
<FileList fileInfos={this.state.fileInfos} />
</main>
);
}
}
});
export let FileList = React.createClass({
_sortFunctions: {
date: function(fileInfos) {
return fileInfos.slice().reverse();
2017-01-13 23:18:37 +01:00
},
title: function(fileInfos) {
return fileInfos.slice().sort(function(fileInfo1, fileInfo2) {
const title1 = fileInfo1.metadata ? fileInfo1.metadata.title.toLowerCase() : fileInfo1.name;
const title2 = fileInfo2.metadata ? fileInfo2.metadata.title.toLowerCase() : fileInfo2.name;
if (title1 < title2) {
return -1;
} else if (title1 > title2) {
return 1;
} else {
return 0;
}
2017-01-13 23:18:37 +01:00
});
},
filename: function(fileInfos) {
return fileInfos.slice().sort(function({file_name: fileName1}, {file_name: fileName2}) {
const fileName1Lower = fileName1.toLowerCase();
const fileName2Lower = fileName2.toLowerCase();
if (fileName1Lower < fileName2Lower) {
return -1;
} else if (fileName2Lower > fileName1Lower) {
return 1;
} else {
return 0;
}
2017-01-13 23:18:37 +01:00
});
},
},
propTypes: {
2017-01-17 11:19:09 +01:00
fileInfos: React.PropTypes.array.isRequired,
hidePrices: React.PropTypes.bool,
},
getDefaultProps: function() {
return {
hidePrices: false,
};
2017-01-13 23:18:37 +01:00
},
getInitialState: function() {
return {
sortBy: 'date',
};
},
handleSortChanged: function(event) {
this.setState({
sortBy: event.target.value,
});
},
render: function() {
var content = [],
seenUris = {};
const fileInfosSorted = this._sortFunctions[this.state.sortBy](this.props.fileInfos);
for (let {name, outpoint, metadata} of fileInfosSorted) {
if (!metadata || seenUris[name]) {
2017-01-13 23:18:37 +01:00
continue;
}
seenUris[name] = true;
content.push(<FileTileStream key={outpoint} outpoint={outpoint} name={name} hideOnRemove={true}
2017-01-17 11:19:09 +01:00
hidePrice={this.props.hidePrices} metadata={metadata} />);
2017-01-13 23:18:37 +01:00
}
return (
<section>
<span className='sort-section'>
Sort by { ' ' }
<FormField type="select" onChange={this.handleSortChanged}>
<option value="date">Date</option>
<option value="title">Title</option>
<option value="filename">File name</option>
</FormField>
</span>
{content}
</section>
);
}
});