2016-08-08 06:47:48 +02:00
var fetchResultsStyle = {
2016-04-10 02:00:56 +02:00
color : '#888' ,
textAlign : 'center' ,
fontSize : '1.2em'
} ;
var SearchActive = React . createClass ( {
render : function ( ) {
return (
2016-08-08 04:48:45 +02:00
< div style = { fetchResultsStyle } >
2016-08-21 16:55:32 +02:00
< BusyMessage message = "Looking up the Dewey Decimals" / >
2016-08-08 04:48:45 +02:00
< / d i v >
2016-04-10 02:00:56 +02:00
) ;
}
} ) ;
var searchNoResultsStyle = {
textAlign : 'center'
} , searchNoResultsMessageStyle = {
fontStyle : 'italic' ,
marginRight : '5px'
} ;
var SearchNoResults = React . createClass ( {
render : function ( ) {
return (
< section style = { searchNoResultsStyle } >
< span style = { searchNoResultsMessageStyle } > No one has checked anything in for { this . props . query } yet . < / s p a n >
2016-08-03 11:55:53 +02:00
< Link label = "Be the first" href = "?publish" / >
2016-04-10 02:00:56 +02:00
< / s e c t i o n >
) ;
}
} ) ;
var SearchResults = React . createClass ( {
render : function ( ) {
var rows = [ ] ;
this . props . results . forEach ( function ( result ) {
2016-08-22 22:56:52 +02:00
console . log ( result ) ;
2016-09-08 10:36:57 +02:00
var mediaType = lbry . getMediaType ( result . value . content _type ) ;
2016-08-22 22:56:52 +02:00
rows . push (
< SearchResultRow key = { result . name } name = { result . name } title = { result . value . title } imgUrl = { result . value . thumbnail }
2016-09-08 10:36:57 +02:00
description = { result . value . description } cost = { result . cost } nsfw = { result . value . nsfw }
mediaType = { mediaType } / >
2016-08-22 22:56:52 +02:00
) ;
2016-04-10 02:00:56 +02:00
} ) ;
return (
2016-08-08 04:48:45 +02:00
< div > { rows } < / d i v >
2016-04-10 02:00:56 +02:00
) ;
}
} ) ;
2016-07-14 03:46:26 +02:00
var
2016-08-08 06:47:48 +02:00
searchRowStyle = {
2016-08-08 06:53:38 +02:00
height : ( 24 * 7 ) + 'px' ,
2016-08-08 06:47:48 +02:00
overflowY : 'hidden'
} ,
2016-09-22 08:41:03 +02:00
searchRowCompactStyle = {
height : '180px' ,
} ,
2016-07-14 03:46:26 +02:00
searchRowImgStyle = {
maxWidth : '100%' ,
2016-08-08 06:53:38 +02:00
maxHeight : ( 24 * 7 ) + 'px' ,
2016-04-10 02:00:56 +02:00
display : 'block' ,
marginLeft : 'auto' ,
2016-08-08 06:53:38 +02:00
marginRight : 'auto'
2016-04-10 02:00:56 +02:00
} ,
2016-07-14 03:46:26 +02:00
searchRowTitleStyle = {
fontWeight : 'bold'
} ,
2016-09-22 08:41:03 +02:00
searchRowTitleCompactStyle = {
fontSize : '1.25em' ,
lineHeight : '1.15' ,
} ,
2016-04-10 02:00:56 +02:00
searchRowCostStyle = {
float : 'right' ,
} ,
searchRowDescriptionStyle = {
color : '#444' ,
2016-08-08 06:47:48 +02:00
marginTop : '12px' ,
2016-04-10 02:00:56 +02:00
fontSize : '0.9em'
} ;
var SearchResultRow = React . createClass ( {
2016-04-21 12:55:41 +02:00
getInitialState : function ( ) {
return {
2016-08-22 22:56:52 +02:00
downloading : false ,
isHovered : false ,
2016-04-21 12:55:41 +02:00
}
} ,
2016-08-22 22:56:52 +02:00
handleMouseOver : function ( ) {
this . setState ( {
isHovered : true ,
} ) ;
} ,
handleMouseOut : function ( ) {
this . setState ( {
isHovered : false ,
} ) ;
} ,
2016-04-10 02:00:56 +02:00
render : function ( ) {
2016-08-22 22:56:52 +02:00
var obscureNsfw = ! lbry . getClientSetting ( 'showNsfw' ) && this . props . nsfw ;
2016-09-22 08:41:03 +02:00
if ( ! this . props . compact ) {
var style = searchRowStyle ;
var titleStyle = searchRowTitleStyle ;
} else {
var style = Object . assign ( { } , searchRowStyle , searchRowCompactStyle ) ;
var titleStyle = Object . assign ( { } , searchRowTitleStyle , searchRowTitleCompactStyle ) ;
}
2016-04-10 02:00:56 +02:00
return (
2016-09-22 08:41:03 +02:00
< section className = { 'card ' + ( obscureNsfw ? 'card-obscured ' : '' ) + ( this . props . compact ? 'card-compact' : '' ) } onMouseEnter = { this . handleMouseOver } onMouseLeave = { this . handleMouseOut } >
< div className = "row-fluid card-content" style = { style } >
2016-08-08 04:48:45 +02:00
< div className = "span3" >
2016-09-02 09:34:08 +02:00
< a href = { '/?show=' + this . props . name } > < img src = { this . props . imgUrl || '/img/default-thumb.svg' } alt = { 'Photo for ' + ( this . props . title || this . props . name ) } style = { searchRowImgStyle } / > < / a >
2016-08-08 04:48:45 +02:00
< / d i v >
< div className = "span9" >
< span style = { searchRowCostStyle } >
2016-08-19 09:15:13 +02:00
< CreditAmount amount = { this . props . cost } isEstimate = { ! this . props . available } / >
2016-08-08 04:48:45 +02:00
< / s p a n >
2016-09-02 09:34:08 +02:00
< div className = "meta" > < a href = { '/?show=' + this . props . name } > lbry : //{this.props.name}</a></div>
2016-09-22 08:41:03 +02:00
< h3 style = { titleStyle } >
< a href = { '/?show=' + this . props . name } >
2016-10-21 12:28:42 +02:00
< TruncatedText lines = { 3 } >
2016-09-22 08:41:03 +02:00
{ this . props . title }
< / T r u n c a t e d T e x t >
< / a >
< / h 3 >
2016-08-08 04:48:45 +02:00
< div >
2016-09-02 10:51:22 +02:00
{ this . props . mediaType == 'video' ? < WatchLink streamName = { this . props . name } button = "primary" / > : null }
2016-08-08 06:47:48 +02:00
< DownloadLink streamName = { this . props . name } button = "text" / >
2016-08-08 04:48:45 +02:00
< / d i v >
2016-09-22 08:41:03 +02:00
< p style = { searchRowDescriptionStyle } >
2016-10-21 12:28:42 +02:00
< TruncatedText lines = { 3 } >
2016-09-22 08:41:03 +02:00
{ this . props . description }
< / T r u n c a t e d T e x t >
< / p >
2016-04-10 02:00:56 +02:00
< / d i v >
< / d i v >
2016-08-22 22:56:52 +02:00
{
! obscureNsfw || ! this . state . isHovered ? null :
< div className = 'card-overlay' >
< p >
This content is Not Safe For Work .
To view adult content , please change your < Link href = "?settings" label = "Settings" / > .
< / p >
< / d i v >
}
2016-08-04 09:33:44 +02:00
< / s e c t i o n >
2016-04-10 02:00:56 +02:00
) ;
}
} ) ;
2016-08-22 14:00:58 +02:00
var featuredContentItemContainerStyle = {
position : 'relative' ,
} ;
2016-07-27 12:25:26 +02:00
2016-08-08 06:47:48 +02:00
var FeaturedContentItem = React . createClass ( {
2016-08-22 22:56:52 +02:00
resolveSearch : false ,
2016-05-16 15:20:32 +02:00
propTypes : {
name : React . PropTypes . string ,
} ,
2016-08-08 06:47:48 +02:00
2016-05-16 15:20:32 +02:00
getInitialState : function ( ) {
return {
metadata : null ,
title : null ,
2016-07-05 03:55:58 +02:00
amount : 0.0 ,
2016-08-22 14:00:58 +02:00
overlayShowing : false ,
2016-05-16 15:20:32 +02:00
} ;
} ,
2016-08-08 06:47:48 +02:00
2016-08-22 22:56:52 +02:00
componentWillUnmount : function ( ) {
this . resolveSearch = false ;
2016-08-22 14:00:58 +02:00
} ,
2016-08-22 22:56:52 +02:00
componentDidMount : function ( ) {
this . resolveSearch = true ;
2016-08-22 14:00:58 +02:00
2016-08-22 22:56:52 +02:00
lbry . search ( this . props . name , function ( results ) {
2016-08-18 09:34:20 +02:00
var result = results [ 0 ] ;
var metadata = result . value ;
2016-08-22 22:56:52 +02:00
if ( this . resolveSearch )
{
this . setState ( {
metadata : metadata ,
amount : result . cost ,
available : result . available ,
title : metadata && metadata . title ? metadata . title : ( 'lbry://' + this . props . name ) ,
} ) ;
}
} . bind ( this ) ) ;
2016-05-16 15:20:32 +02:00
} ,
2016-08-08 06:47:48 +02:00
2016-05-16 15:20:32 +02:00
render : function ( ) {
2016-08-22 22:56:52 +02:00
if ( this . state . metadata === null ) {
// Still waiting for metadata, skip render
2016-05-16 15:20:32 +02:00
return null ;
}
2016-08-19 09:15:13 +02:00
2016-08-22 22:56:52 +02:00
return ( < div style = { featuredContentItemContainerStyle } >
2016-08-26 14:03:08 +02:00
< SearchResultRow name = { this . props . name } title = { this . state . title } imgUrl = { this . state . metadata . thumbnail || '/img/default-thumb.svg' }
2016-09-02 10:51:22 +02:00
description = { this . state . metadata . description } mediaType = { lbry . getMediaType ( this . state . metadata . content _type ) }
2016-09-22 08:41:53 +02:00
cost = { this . state . amount } nsfw = { this . state . metadata . nsfw } available = { this . state . available } compact / >
2016-08-22 14:00:58 +02:00
< / d i v > ) ;
2016-05-16 15:20:32 +02:00
}
} ) ;
2016-08-08 04:48:45 +02:00
var featuredContentLegendStyle = {
2016-07-26 14:02:55 +02:00
fontSize : '12px' ,
color : '#aaa' ,
verticalAlign : '15%' ,
2016-05-16 15:20:32 +02:00
} ;
var FeaturedContent = React . createClass ( {
render : function ( ) {
2016-08-08 04:48:45 +02:00
return (
2016-07-26 14:02:55 +02:00
< div className = "row-fluid" >
< div className = "span6" >
< h3 > Featured Content < / h 3 >
2016-08-08 04:48:45 +02:00
< FeaturedContentItem name = "what" / >
< FeaturedContentItem name = "itsadisaster" / >
2016-10-10 23:57:00 +02:00
< FeaturedContentItem name = "superman1940-e4" / >
< FeaturedContentItem name = "skateyrselfclean" / >
< FeaturedContentItem name = "gtasoc" / >
2016-08-26 14:07:46 +02:00
2016-07-26 14:02:55 +02:00
< / d i v >
< div className = "span6" >
2016-08-07 22:36:57 +02:00
< h3 > Community Content < ToolTipLink style = { featuredContentLegendStyle } label = "What's this?"
2016-08-26 14:07:46 +02:00
tooltip = 'Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names "one," "two," "three," "four" and "five" to put your content here!' / > < / h 3 >
2016-07-27 12:24:10 +02:00
< FeaturedContentItem name = "one" / >
2016-07-26 14:02:55 +02:00
< FeaturedContentItem name = "two" / >
< FeaturedContentItem name = "three" / >
< FeaturedContentItem name = "four" / >
2016-08-26 14:07:46 +02:00
< FeaturedContentItem name = "five" / >
2016-07-26 14:02:55 +02:00
< / d i v >
2016-05-16 15:20:32 +02:00
< / d i v >
2016-08-08 04:48:45 +02:00
) ;
2016-05-16 15:20:32 +02:00
}
} ) ;
2016-04-10 02:00:56 +02:00
2016-08-08 02:57:12 +02:00
var DiscoverPage = React . createClass ( {
2016-04-10 02:00:56 +02:00
userTypingTimer : null ,
2016-08-08 04:48:45 +02:00
componentDidUpdate : function ( ) {
2016-08-09 16:58:28 +02:00
if ( this . props . query != this . state . query )
2016-08-08 04:48:45 +02:00
{
2016-08-22 15:14:56 +02:00
this . handleSearchChanged ( ) ;
2016-08-08 04:48:45 +02:00
}
} ,
2016-08-22 15:14:56 +02:00
handleSearchChanged : function ( ) {
this . setState ( {
searching : true ,
query : this . props . query ,
} ) ;
lbry . search ( this . props . query , this . searchCallback ) ;
} ,
2016-08-08 02:57:12 +02:00
componentDidMount : function ( ) {
document . title = "Discover" ;
2016-09-29 09:43:18 +02:00
if ( this . props . query ) {
2016-08-22 15:14:56 +02:00
// Rendering with a query already typed
this . handleSearchChanged ( ) ;
}
2016-08-08 02:57:12 +02:00
} ,
2016-04-10 02:00:56 +02:00
getInitialState : function ( ) {
return {
results : [ ] ,
2016-08-08 06:47:48 +02:00
query : this . props . query ,
2016-08-08 04:48:45 +02:00
searching : this . props . query && this . props . query . length > 0
2016-04-10 02:00:56 +02:00
} ;
} ,
2016-08-08 06:47:48 +02:00
searchCallback : function ( results ) {
2016-04-10 02:00:56 +02:00
if ( this . state . searching ) //could have canceled while results were pending, in which case nothing to do
{
this . setState ( {
results : results ,
2016-08-08 06:47:48 +02:00
searching : false //multiple searches can be out, we're only done if we receive one we actually care about
2016-04-10 02:00:56 +02:00
} ) ;
}
} ,
render : function ( ) {
return (
2016-08-08 02:57:12 +02:00
< main >
2016-04-10 02:00:56 +02:00
{ this . state . searching ? < SearchActive / > : null }
2016-08-08 04:48:45 +02:00
{ ! this . state . searching && this . props . query && this . state . results . length ? < SearchResults results = { this . state . results } / > : null }
{ ! this . state . searching && this . props . query && ! this . state . results . length ? < SearchNoResults query = { this . props . query } / > : null }
{ ! this . props . query && ! this . state . searching ? < FeaturedContent / > : null }
2016-04-10 02:00:56 +02:00
< / m a i n >
) ;
}
2016-08-21 22:59:32 +02:00
} ) ;