93 lines
2.7 KiB
JavaScript
93 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import lbry from 'lbry.js';
|
|
import lbryuri from 'lbryuri.js';
|
|
import Link from 'component/link';
|
|
import {FormField} from 'component/form.js';
|
|
import FileTile from 'component/fileTile';
|
|
import rewards from 'rewards.js';
|
|
import lbryio from 'lbryio.js';
|
|
import {BusyMessage, Thumbnail} from 'component/common.js';
|
|
|
|
class FileList extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.state = {
|
|
sortBy: 'date',
|
|
}
|
|
|
|
this._sortFunctions = {
|
|
date: function(fileInfos) {
|
|
return fileInfos.slice().reverse();
|
|
},
|
|
title: function(fileInfos) {
|
|
return fileInfos.slice().sort(function(fileInfo1, fileInfo2) {
|
|
const title1 = fileInfo1.metadata ? fileInfo1.metadata.stream.metadata.title.toLowerCase() : fileInfo1.name;
|
|
const title2 = fileInfo2.metadata ? fileInfo2.metadata.stream.metadata.title.toLowerCase() : fileInfo2.name;
|
|
if (title1 < title2) {
|
|
return -1;
|
|
} else if (title1 > title2) {
|
|
return 1;
|
|
} else {
|
|
return 0;
|
|
}
|
|
})
|
|
},
|
|
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;
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
|
|
handleSortChanged(event) {
|
|
this.setState({
|
|
sortBy: event.target.value,
|
|
})
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
handleSortChanged,
|
|
fetching,
|
|
fileInfos,
|
|
} = this.props
|
|
const {
|
|
sortBy,
|
|
} = this.state
|
|
const content = []
|
|
|
|
this._sortFunctions[sortBy](fileInfos).forEach(fileInfo => {
|
|
const uri = lbryuri.build({
|
|
contentName: fileInfo.name,
|
|
channelName: fileInfo.channel_name,
|
|
})
|
|
content.push(<FileTile key={uri} uri={uri} hidePrice={true} showEmpty={this.props.fileTileShowEmpty} />)
|
|
})
|
|
return (
|
|
<section className="file-list__header">
|
|
{ fetching && <span className="busy-indicator"/> }
|
|
<span className='sort-section'>
|
|
{__("Sort by")} { ' ' }
|
|
<FormField type="select" onChange={this.handleSortChanged.bind(this)}>
|
|
<option value="date">{__("Date")}</option>
|
|
<option value="title">{__("Title")}</option>
|
|
<option value="filename">{__("File name")}</option>
|
|
</FormField>
|
|
</span>
|
|
{content}
|
|
</section>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default FileList
|