2016-12-23 07:57:01 +01:00
import React from 'react' ;
import lbry from '../lbry.js' ;
2017-01-13 03:03:34 +01:00
import { Link } from '../component/link.js' ;
import { FileActions } from '../component/file-actions.js' ;
2016-12-23 07:57:01 +01:00
import { Thumbnail , TruncatedText , CreditAmount } from '../component/common.js' ;
2017-01-13 03:03:34 +01:00
let FilePrice = React . createClass ( {
2017-01-02 08:01:55 +01:00
_isMounted : false ,
2016-12-25 06:12:50 +01:00
propTypes : {
2017-01-13 03:03:34 +01:00
name : React . PropTypes . string
2016-12-25 06:12:50 +01:00
} ,
2017-01-02 08:01:55 +01:00
2017-01-13 03:03:34 +01:00
getInitialState : function ( ) {
return {
cost : null ,
costIncludesData : null ,
}
} ,
2017-01-02 08:01:55 +01:00
2017-01-13 03:03:34 +01:00
componentDidMount : function ( ) {
this . _isMounted = true ;
2017-01-02 08:01:55 +01:00
2017-01-13 03:03:34 +01:00
lbry . getCostInfoForName ( this . props . name , ( { cost , includesData } ) => {
if ( this . _isMounted ) {
this . setState ( {
cost : cost ,
costIncludesData : includesData ,
} ) ;
}
} ) ;
} ,
2017-01-06 12:27:43 +01:00
2017-01-13 03:03:34 +01:00
componentWillUnmount : function ( ) {
this . _isMounted = false ;
2017-01-02 08:01:55 +01:00
} ,
2017-01-13 03:03:34 +01:00
render : function ( ) {
if ( this . state . cost === null )
{
return null ;
2017-01-06 12:27:43 +01:00
}
2017-01-13 03:03:34 +01:00
return (
< span className = "file-tile__cost" >
< CreditAmount amount = { this . state . cost } isEstimate = { ! this . state . costIncludesData } / >
< / s p a n >
) ;
}
} ) ;
2017-01-06 12:27:43 +01:00
2017-01-13 03:03:34 +01:00
let FileTile = React . createClass ( {
_isMounted : false ,
propTypes : {
name : React . PropTypes . string ,
sdHash : React . PropTypes . string ,
showPrice : React . PropTypes . bool ,
obscureNsfw : React . PropTypes . bool ,
hideOnRemove : React . PropTypes . bool
2017-01-06 12:27:43 +01:00
} ,
2017-01-13 03:03:34 +01:00
2016-12-23 07:57:01 +01:00
getInitialState : function ( ) {
return {
2017-01-13 03:03:34 +01:00
metadata : null ,
title : null ,
showNsfwHelp : false ,
isRemoved : false
2016-12-23 07:57:01 +01:00
}
} ,
2016-12-25 06:12:50 +01:00
getDefaultProps : function ( ) {
return {
2017-01-11 08:30:43 +01:00
hideOnRemove : false ,
2017-01-13 03:03:34 +01:00
obscureNsfw : ! lbry . getClientSetting ( 'showNsfw' ) ,
showPrice : true
2016-12-25 06:12:50 +01:00
}
} ,
2016-12-23 07:57:01 +01:00
handleMouseOver : function ( ) {
2017-01-13 03:03:34 +01:00
if ( this . props . obscureNsfw && this . state . metadata && this . state . metadata . nsfw ) {
this . setState ( {
showNsfwHelp : true ,
} ) ;
}
2016-12-23 07:57:01 +01:00
} ,
handleMouseOut : function ( ) {
2017-01-13 03:03:34 +01:00
if ( this . state . showNsfwHelp ) {
this . setState ( {
showNsfwHelp : false ,
} ) ;
}
2016-12-23 07:57:01 +01:00
} ,
2017-01-13 03:03:34 +01:00
onRemove : function ( ) {
2017-01-11 08:30:43 +01:00
this . setState ( {
2017-01-13 03:03:34 +01:00
isRemoved : true ,
2017-01-11 08:30:43 +01:00
} ) ;
} ,
2017-01-13 03:03:34 +01:00
componentDidMount : function ( ) {
this . _isMounted = true ;
2017-01-06 12:27:43 +01:00
2017-01-13 03:03:34 +01:00
lbry . resolveName ( this . props . name , ( metadata ) => {
if ( this . _isMounted ) {
2016-12-23 07:57:01 +01:00
this . setState ( {
2017-01-13 03:03:34 +01:00
metadata : metadata ,
title : metadata && metadata . title ? metadata . title : ( 'lbry://' + this . props . name ) ,
2016-12-23 07:57:01 +01:00
} ) ;
2017-01-13 03:03:34 +01:00
}
} ) ;
2017-01-02 08:01:55 +01:00
} ,
componentWillUnmount : function ( ) {
this . _isMounted = false ;
} ,
2016-12-23 07:57:01 +01:00
render : function ( ) {
2017-01-13 03:03:34 +01:00
if ( this . state . metadata === null || ( this . props . hideOnRemove && this . state . isRemoved ) ) {
2017-01-06 12:27:43 +01:00
return null ;
}
2017-01-13 03:03:34 +01:00
const obscureNsfw = this . props . obscureNsfw && this . state . metadata . nsfw ;
2017-01-02 08:01:55 +01:00
2016-12-23 07:57:01 +01:00
return (
2017-01-13 03:03:34 +01:00
< section className = { 'file-tile card ' + ( obscureNsfw ? 'card-obscured ' : '' ) } onMouseEnter = { this . handleMouseOver } onMouseLeave = { this . handleMouseOut } >
2016-12-23 07:57:01 +01:00
< div className = "row-fluid card-content file-tile__row" >
< div className = "span3" >
2017-01-13 03:03:34 +01:00
< a href = { '/?show=' + this . props . name } > < Thumbnail className = "file-tile__thumbnail" src = { this . state . metadata . thumbnail } alt = { 'Photo for ' + ( this . state . metadata . title || this . props . name ) } / > < / a >
2016-12-23 07:57:01 +01:00
< / d i v >
< div className = "span9" >
2017-01-13 03:03:34 +01:00
{ this . props . showPrice
? < FilePrice name = { this . props . name } / >
2016-12-23 07:57:01 +01:00
: null }
< div className = "meta" > < a href = { '/?show=' + this . props . name } > lbry : //{this.props.name}</a></div>
2017-01-13 03:03:34 +01:00
< h3 className = "file-tile__title" >
2016-12-23 07:57:01 +01:00
< a href = { '/?show=' + this . props . name } >
2017-01-13 03:03:34 +01:00
< TruncatedText lines = { 2 } >
{ this . state . metadata . title }
2016-12-23 07:57:01 +01:00
< / T r u n c a t e d T e x t >
< / a >
< / h 3 >
2017-01-13 03:03:34 +01:00
< FileActions streamName = { this . props . name } metadata = { this . state . metadata } / >
2016-12-23 07:57:01 +01:00
< p className = "file-tile__description" >
< TruncatedText lines = { 3 } >
2017-01-13 03:03:34 +01:00
{ this . state . metadata . description }
2016-12-23 07:57:01 +01:00
< / T r u n c a t e d T e x t >
< / p >
< / d i v >
< / d i v >
2017-01-13 03:03:34 +01:00
{ this . state . showNsfwHelp
2016-12-23 08:02:05 +01:00
? < div className = 'card-overlay' >
2016-12-23 07:57:01 +01:00
< 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-12-23 08:02:05 +01:00
: null }
2016-12-23 07:57:01 +01:00
< / s e c t i o n >
) ;
}
} ) ;
export default FileTile ;