2016-12-23 07:57:01 +01:00
import React from 'react' ;
import lbry from '../lbry.js' ;
import { Link , DownloadLink , WatchLink } from '../component/link.js' ;
import { Thumbnail , TruncatedText , CreditAmount } from '../component/common.js' ;
let FileTile = React . createClass ( {
2017-01-02 08:01:55 +01:00
_isMounted : false ,
_statusCheckInterval : 5000 ,
2016-12-25 06:12:50 +01:00
propTypes : {
name : React . PropTypes . string . isRequired ,
mediaType : React . PropTypes . string . isRequired ,
title : React . PropTypes . string . isRequired ,
description : React . PropTypes . string ,
compact : React . PropTypes . boolean ,
cost : React . PropTypes . number ,
costIncludesData : React . PropTypes . boolean ,
} ,
2017-01-02 08:01:55 +01:00
updateFileInfo : function ( progress = null ) {
const updateStatusCallback = ( ( result ) => {
if ( ! this . _isMounted || 'fileInfo' in this . props ) {
/ * *
* The component was unmounted , or a file info data structure has now been provided by the
* containing component .
* /
return ;
}
this . setState ( {
fileInfo : result || null ,
} ) ;
setTimeout ( ( ) => { this . updateFileInfo ( ) } , this . _statusCheckInterval ) ;
} ) ;
if ( 'sdHash' in this . props ) {
lbry . getFileInfoBySdHash ( this . props . sdHash , updateStatusCallback ) ;
} else if ( 'name' in this . props ) {
lbry . getFileInfoByName ( this . props . name , updateStatusCallback ) ;
} else {
throw new Error ( "No progress, stream name or sd hash passed to FileTile" ) ;
}
} ,
2016-12-23 07:57:01 +01:00
getInitialState : function ( ) {
return {
downloading : false ,
isHovered : false ,
cost : null ,
costIncludesData : null ,
2017-01-02 08:01:55 +01:00
fileInfo : 'fileInfo' in this . props ? this . props . fileInfo : null ,
2016-12-23 07:57:01 +01:00
}
} ,
2016-12-25 06:12:50 +01:00
getDefaultProps : function ( ) {
return {
compact : false ,
}
} ,
2016-12-23 07:57:01 +01:00
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 ,
} ) ;
} ) ;
}
} ,
2017-01-02 08:01:55 +01:00
componentDidMount : function ( ) {
this . _isMounted = true ;
this . updateFileInfo ( ) ;
} ,
componentWillUnmount : function ( ) {
this . _isMounted = false ;
} ,
2016-12-23 07:57:01 +01:00
render : function ( ) {
2017-01-02 08:01:55 +01:00
const obscureNsfw = ! lbry . getClientSetting ( 'showNsfw' ) && this . props . nsfw ;
let downloadLinkExtraProps = { } ;
if ( this . state . fileInfo !== null ) {
const { written _bytes , total _bytes , completed } = this . state . fileInfo ;
downloadLinkExtraProps [ 'progress' ] = written _bytes / total _bytes ;
downloadLinkExtraProps [ 'downloading' ] = ! completed ;
}
2016-12-23 07:57:01 +01:00
return (
< section className = { 'file-tile card ' + ( obscureNsfw ? 'card-obscured ' : '' ) + ( this . props . compact ? 'file-tile--compact' : '' ) } onMouseEnter = { this . handleMouseOver } onMouseLeave = { this . handleMouseOut } >
< div className = "row-fluid card-content file-tile__row" >
< div className = "span3" >
< a href = { '/?show=' + this . props . name } > < Thumbnail className = "file-tile__thumbnail" src = { this . props . imgUrl } alt = { 'Photo for ' + ( this . props . title || this . props . name ) } / > < / a >
< / d i v >
< div className = "span9" >
{ this . state . cost !== null
? < span className = "file-tile__cost" >
< CreditAmount amount = { this . state . cost } isEstimate = { ! this . state . costIncludesData } / >
< / s p a n >
: null }
< div className = "meta" > < a href = { '/?show=' + this . props . name } > lbry : //{this.props.name}</a></div>
< h3 className = { 'file-tile__title ' + ( this . props . compact ? 'file-tile__title--compact' : '' ) } >
< a href = { '/?show=' + this . props . name } >
< TruncatedText lines = { 3 } >
{ this . props . title }
< / T r u n c a t e d T e x t >
< / a >
< / h 3 >
< div >
{ this . props . mediaType == 'video' ? < WatchLink streamName = { this . props . name } button = "primary" / > : null }
2016-12-26 06:59:15 +01:00
{ ! this . props . isMine
2017-01-02 08:01:55 +01:00
? < DownloadLink streamName = { this . props . name } button = "text" { ... downloadLinkExtraProps } / >
2016-12-26 06:59:15 +01:00
: null }
< / d i v >
2016-12-23 07:57:01 +01:00
< p className = "file-tile__description" >
< TruncatedText lines = { 3 } >
{ this . props . description }
< / T r u n c a t e d T e x t >
< / p >
< / d i v >
< / d i v >
2016-12-23 08:02:05 +01:00
{ obscureNsfw && this . state . isHovered
? < 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 ;