2016-11-22 14:19:08 -06:00
|
|
|
import React from 'react';
|
2017-04-23 16:56:50 +07:00
|
|
|
import lbryio from 'lbryio.js';
|
|
|
|
import FileTile from 'component/fileTile';
|
|
|
|
import { FileTileStream } from 'component/fileTileStream'
|
|
|
|
import {ToolTip} from 'component/tooltip.js';
|
2016-04-09 20:00:56 -04:00
|
|
|
|
2017-04-10 08:32:40 -04:00
|
|
|
const communityCategoryToolTipText = ('Community Content is a public space where anyone can share content with the ' +
|
2017-04-30 20:15:21 -04:00
|
|
|
'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' +
|
2017-04-10 08:32:40 -04:00
|
|
|
'"five" to put your content here!');
|
|
|
|
|
2017-04-23 16:56:50 +07:00
|
|
|
const FeaturedCategory = (props) => {
|
|
|
|
const {
|
|
|
|
category,
|
|
|
|
names,
|
|
|
|
} = props
|
2017-04-24 21:17:36 +07:00
|
|
|
|
2017-04-23 16:56:50 +07:00
|
|
|
return <div className="card-row card-row--small">
|
|
|
|
<h3 className="card-row__header">{category}
|
|
|
|
{category && category.match(/^community/i) && <ToolTip label="What's this?" body={communityCategoryToolTipText} className="tooltip--header" />}
|
|
|
|
</h3>
|
2017-04-28 22:14:44 +07:00
|
|
|
{names && names.map(name => <FileTile key={name} displayStyle="card" uri={name} />)}
|
2017-04-23 16:56:50 +07:00
|
|
|
</div>
|
|
|
|
}
|
2016-05-16 09:20:32 -04:00
|
|
|
|
2017-04-30 20:15:21 -04:00
|
|
|
let DiscoverPage = React.createClass({
|
2017-02-09 15:53:19 -05:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
2017-04-11 22:01:45 -04:00
|
|
|
featuredUris: {},
|
2017-04-14 18:23:42 -04:00
|
|
|
failed: false
|
2017-02-09 15:53:19 -05:00
|
|
|
};
|
|
|
|
},
|
|
|
|
componentWillMount: function() {
|
2017-04-11 22:01:45 -04:00
|
|
|
lbryio.call('discover', 'list', { version: "early-access" } ).then(({Categories, Uris}) => {
|
|
|
|
let featuredUris = {}
|
|
|
|
Categories.forEach((category) => {
|
|
|
|
if (Uris[category] && Uris[category].length) {
|
|
|
|
featuredUris[category] = Uris[category]
|
|
|
|
}
|
|
|
|
})
|
|
|
|
this.setState({ featuredUris: featuredUris });
|
2017-04-14 18:23:42 -04:00
|
|
|
}, () => {
|
|
|
|
this.setState({
|
|
|
|
failed: true
|
|
|
|
})
|
2017-02-09 15:53:19 -05:00
|
|
|
});
|
|
|
|
},
|
2016-05-16 09:20:32 -04:00
|
|
|
render: function() {
|
2017-04-30 20:15:21 -04:00
|
|
|
return <main>{
|
2017-04-14 18:23:42 -04:00
|
|
|
this.state.failed ?
|
|
|
|
<div className="empty">Failed to load landing content.</div> :
|
|
|
|
<div>
|
|
|
|
{
|
2017-04-30 20:15:21 -04:00
|
|
|
Object.keys(this.state.featuredUris).map((category) => {
|
|
|
|
return this.state.featuredUris[category].length ?
|
|
|
|
<FeaturedCategory key={category} category={category} names={this.state.featuredUris[category]} /> :
|
|
|
|
'';
|
|
|
|
})
|
2017-04-14 18:23:42 -04:00
|
|
|
}
|
|
|
|
</div>
|
2017-04-30 20:15:21 -04:00
|
|
|
}</main>;
|
2016-04-09 20:00:56 -04:00
|
|
|
}
|
2017-04-24 21:17:36 +07:00
|
|
|
})
|
2016-11-22 14:19:08 -06:00
|
|
|
|
2017-04-27 00:08:26 +07:00
|
|
|
export default DiscoverPage;
|