var searchInputStyle = { width: '400px', display: 'block', marginBottom: '48px', marginLeft: 'auto', marginRight: 'auto' }, fetchResultsStyle = { color: '#888', textAlign: 'center', fontSize: '1.2em' }; var SearchActive = React.createClass({ render: function() { return (
Looking up the Dewey Decimals
); } }); 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 = []; console.log('results'); console.log('made it here'); this.props.results.forEach(function(result) { rows.push( ); }); console.log(this.props.results); console.log(rows); console.log('done'); return (
{rows}
); } }); var searchRowImgStyle = { maxHeight: '100px', display: 'block', marginLeft: 'auto', marginRight: 'auto', float: 'left' }, searchRowCostStyle = { float: 'right', marginLeft: '20px', marginTop: '5px', display: 'inline-block' }, searchRowNameStyle = { fontSize: '0.9em', color: '#666', marginBottom: '24px', clear: 'both' }, searchRowDescriptionStyle = { color : '#444', marginBottom: '24px', fontSize: '0.9em' }; var SearchResultRow = React.createClass({ getInitialState: function() { return { downloading: false } }, render: function() { return (
{'Photo

{this.props.title}

lbry://{this.props.name}

{this.props.description}

); } }); var featuredContentItemStyle = { fontSize: '0.95em', marginBottom: '10px', }, featuredContentItemImgStyle = { maxHeight: '90px', display: 'block', marginLeft: 'auto', marginRight: 'auto', marginTop: '5px', float: 'left', }, featuredContentItemDescriptionStyle = { color: '#444', marginBottom: '5px', fontSize: '0.9em', }, featuredContentItemCostStyle = { display: 'block', float: 'right', fontSize: '0.95em', }; var FeaturedContentItem = React.createClass({ propTypes: { name: React.PropTypes.string, }, getInitialState: function() { return { metadata: null, title: null, }; }, componentWillMount: function() { lbry.resolveName(this.props.name, (metadata) => { this.setState({ metadata: metadata, title: metadata.name || metadata.stream_name || ('lbry://' + this.props.name), }) }); }, render: function() { if (this.state.metadata == null) { // Still waiting for metadata return null; } var metadata = this.state.metadata; return (
{'Photo

{this.state.title}

{metadata.description}

{ ' ' }
); } }); var featuredContentStyle = { width: '100%', }; var FeaturedContent = React.createClass({ render: function() { return (

Featured content

{/* When ready, change to one/two/three/four/five/six */}
); } }); var discoverMainStyle = { color: '#333' }; var Discover = React.createClass({ userTypingTimer: null, getInitialState: function() { return { results: [], searching: false, query: '' }; }, search: function() { if (this.state.query) { console.log('search'); lbry.search(this.state.query, this.searchCallback.bind(this, this.state.query)); } else { this.setState({ searching: false, results: [] }); } }, searchCallback: function(originalQuery, results) { if (this.state.searching) //could have canceled while results were pending, in which case nothing to do { this.setState({ results: results, searching: this.state.query != originalQuery, //multiple searches can be out, we're only done if we receive one we actually care about }); } }, onQueryChange: function(event) { if (this.userTypingTimer) { clearTimeout(this.userTypingTimer); } //@TODO: Switch to React.js timing this.userTypingTimer = setTimeout(this.search, 800); // 800ms delay, tweak for faster/slower this.setState({ searching: event.target.value.length > 0, query: event.target.value }); }, render: function() { console.log(this.state); return (
{ this.state.searching ? : null } { !this.state.searching && this.state.query && this.state.results.length ? : null } { !this.state.searching && this.state.query && !this.state.results.length ? : null } {/* !this.state.query && !this.state.searching ? : null */}
); } }); var logoStyle = { padding: '48px 12px', textAlign: 'center', maxHeight: '80px', }, imgStyle = { //@TODO: remove this, img should be properly scaled once size is settled height: '80px' }; var Header = React.createClass({ render: function() { return (
); } }); var topBarStyle = { 'float': 'right', 'position': 'relative', 'height': '26px', }, balanceStyle = { 'marginRight': '5px' }; var mainMenuStyle = { position: 'absolute', top: '26px', right: '0px', }; var MainMenu = React.createClass({ render: function() { var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management return (
{isLinux ? : null}
); } }); var TopBar = React.createClass({ getInitialState: function() { return { balance: 0, }; }, componentDidMount: function() { lbry.getBalance(function(balance) { this.setState({ balance: balance }); }.bind(this)); }, onClose: function() { window.location.href = "?start"; }, render: function() { return ( ); } }); var HomePage = React.createClass({ componentDidMount: function() { lbry.getStartNotice(function(notice) { if (notice) { alert(notice); } }); }, render: function() { return (
); } });