diff --git a/js/component/file-tile.js b/js/component/file-tile.js index f86c7ac93..67bbf2962 100644 --- a/js/component/file-tile.js +++ b/js/component/file-tile.js @@ -4,6 +4,9 @@ import {Link, DownloadLink, WatchLink} from '../component/link.js'; import {Thumbnail, TruncatedText, CreditAmount} from '../component/common.js'; let FileTile = React.createClass({ + _isMounted: false, + _statusCheckInterval: 5000, + propTypes: { name: React.PropTypes.string.isRequired, mediaType: React.PropTypes.string.isRequired, @@ -13,12 +16,38 @@ let FileTile = React.createClass({ cost: React.PropTypes.number, costIncludesData: React.PropTypes.boolean, }, + 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"); + } + }, getInitialState: function() { return { downloading: false, isHovered: false, cost: null, costIncludesData: null, + fileInfo: 'fileInfo' in this.props ? this.props.fileInfo : null, } }, getDefaultProps: function() { @@ -51,8 +80,23 @@ let FileTile = React.createClass({ }); } }, + componentDidMount: function() { + this._isMounted = true; + this.updateFileInfo(); + }, + componentWillUnmount: function() { + this._isMounted = false; + }, render: function() { - let obscureNsfw = !lbry.getClientSetting('showNsfw') && this.props.nsfw; + 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; + } + return (
@@ -76,7 +120,7 @@ let FileTile = React.createClass({
{this.props.mediaType == 'video' ? : null} {!this.props.isMine - ? + ? : null}