import React from 'react'; import lbry from '../lbry.js'; import lighthouse from '../lighthouse.js'; import {Link, ToolTipLink, DownloadLink, WatchLink} from '../component/link.js'; import {Thumbnail, CreditAmount, TruncatedText} from '../component/common.js'; var fetchResultsStyle = { color: '#888', textAlign: 'center', fontSize: '1.2em' }; var SearchActive = React.createClass({ render: function() { return (
); } }); var searchNoResultsStyle = { textAlign: 'center' }, searchNoResultsMessageStyle = { fontStyle: 'italic', marginRight: '5px' }; var SearchNoResults = React.createClass({ render: function() { return (
No one has checked anything in for {this.props.query} yet.
); } }); var SearchResults = React.createClass({ render: function() { var rows = []; this.props.results.forEach(function(result) { console.log(result); var mediaType = lbry.getMediaType(result.value.content_type); rows.push( ); }); return (
{rows}
); } }); var searchRowStyle = { height: (24 * 7) + 'px', overflowY: 'hidden' }, searchRowCompactStyle = { height: '180px', }, searchRowImgStyle = { maxWidth: '100%', maxHeight: (24 * 7) + 'px', display: 'block', marginLeft: 'auto', marginRight: 'auto' }, searchRowTitleStyle = { fontWeight: 'bold' }, searchRowTitleCompactStyle = { fontSize: '1.25em', lineHeight: '1.15', }, searchRowCostStyle = { float: 'right', }, searchRowDescriptionStyle = { color : '#444', marginTop: '12px', fontSize: '0.9em' }; var SearchResultRow = React.createClass({ getInitialState: function() { return { downloading: false, isHovered: false, cost: null, costIncludesData: null, } }, handleMouseOver: function() { this.setState({ isHovered: true, }); }, handleMouseOut: function() { this.setState({ isHovered: false, }); }, componentWillMount: function() { if ('cost' in this.props) { this.setState({ cost: this.props.cost, costIncludesData: this.props.costIncludesData, }); } else { lbry.getCostInfoForName(this.props.name, ({cost, includesData}) => { this.setState({ cost: cost, costIncludesData: includesData, }); }); } }, render: function() { var obscureNsfw = !lbry.getClientSetting('showNsfw') && this.props.nsfw; if (!this.props.compact) { var style = searchRowStyle; var titleStyle = searchRowTitleStyle; } else { var style = Object.assign({}, searchRowStyle, searchRowCompactStyle); var titleStyle = Object.assign({}, searchRowTitleStyle, searchRowTitleCompactStyle); } return (
{this.state.cost !== null ? : null}
lbry://{this.props.name}

{this.props.title}

{this.props.mediaType == 'video' ? : null}

{this.props.description}

{ !obscureNsfw || !this.state.isHovered ? null :

This content is Not Safe For Work. To view adult content, please change your .

}
); } }); var featuredContentItemContainerStyle = { position: 'relative', }; var FeaturedContentItem = React.createClass({ resolveSearch: false, propTypes: { name: React.PropTypes.string, }, getInitialState: function() { return { metadata: null, title: null, cost: null, overlayShowing: false, }; }, componentWillUnmount: function() { this.resolveSearch = false; }, componentDidMount: function() { this._isMounted = true; lbry.resolveName(this.props.name, (metadata) => { if (!this._isMounted) { return; } this.setState({ metadata: metadata, title: metadata && metadata.title ? metadata.title : ('lbry://' + this.props.name), }); }); }, render: function() { if (this.state.metadata === null) { // Still waiting for metadata, skip render return null; } return (
); } }); var featuredContentLegendStyle = { fontSize: '12px', color: '#aaa', verticalAlign: '15%', }; var FeaturedContent = React.createClass({ render: function() { return (

Featured Content

Community Content

); } }); var DiscoverPage = React.createClass({ userTypingTimer: null, componentDidUpdate: function() { if (this.props.query != this.state.query) { this.handleSearchChanged(); } }, handleSearchChanged: function() { this.setState({ searching: true, query: this.props.query, }); lighthouse.search(this.props.query, this.searchCallback); }, componentDidMount: function() { document.title = "Discover"; if (this.props.query) { // Rendering with a query already typed this.handleSearchChanged(); } }, getInitialState: function() { return { results: [], query: this.props.query, searching: this.props.query && this.props.query.length > 0 }; }, searchCallback: function(results) { if (this.state.searching) //could have canceled while results were pending, in which case nothing to do { this.setState({ results: results, searching: false //multiple searches can be out, we're only done if we receive one we actually care about }); } }, render: function() { return (
{ this.state.searching ? : null } { !this.state.searching && this.props.query && this.state.results.length ? : null } { !this.state.searching && this.props.query && !this.state.results.length ? : null } { !this.props.query && !this.state.searching ? : null }
); } }); export default DiscoverPage;