diff --git a/ui/js/app.js b/ui/js/app.js index 0272ae148..a52efd48e 100644 --- a/ui/js/app.js +++ b/ui/js/app.js @@ -109,6 +109,7 @@ var App = React.createClass({ let appUrl = target.getAttribute('href'); this._storeHistoryOfNextRender = true; this.setState(Object.assign({}, this.getViewingPageAndArgs(appUrl), { appUrl: appUrl })); + document.body.scrollTop = 0; } } target = target.parentNode; diff --git a/ui/js/page/show.js b/ui/js/page/show.js index 4f91dc426..ea22a116f 100644 --- a/ui/js/page/show.js +++ b/ui/js/page/show.js @@ -16,10 +16,9 @@ var FormatItem = React.createClass({ outpoint: React.PropTypes.string, }, render: function() { - const {thumbnail, author, title, description, language, license} = this.props.metadata; - const mediaType = lbry.getMediaType(this.props.contentType); + const {author, language, license} = this.props.metadata; - if (!this.props.contentType && [author, language, license].filter().length === 0) { + if (!this.props.contentType && [author, language, license].filter((val) => {return !!val; }).length === 0) { return null; } @@ -59,7 +58,101 @@ let ChannelPage = React.createClass({ } -}) +}); + +let FilePage = React.createClass({ + _isMounted: false, + + propTypes: { + uri: React.PropTypes.string, + }, + + getInitialState: function() { + return { + cost: null, + costIncludesData: null, + isDownloaded: null, + }; + }, + + componentWillUnmount: function() { + this._isMounted = false; + }, + + componentWillReceiveProps: function(nextProps) { + if (nextProps.outpoint != this.props.outpoint || nextProps.uri != this.props.uri) { + this.loadCostAndFileState(nextProps.uri, nextProps.outpoint); + } + }, + + componentWillMount: function() { + this._isMounted = true; + this.loadCostAndFileState(this.props.uri, this.props.outpoint); + }, + + loadCostAndFileState: function(uri, outpoint) { + lbry.file_list({outpoint: outpoint}).then((fileInfo) => { + if (this._isMounted) { + this.setState({ + isDownloaded: fileInfo.length > 0, + }); + } + }); + + lbry.getCostInfo(uri).then(({cost, includesData}) => { + if (this._isMounted) { + this.setState({ + cost: cost, + costIncludesData: includesData, + }); + } + }); + }, + + render: function() { + const metadata = this.props.metadata, + title = metadata ? this.props.metadata.title : this.props.uri, + uriIndicator = ; + + return ( +
+
+ { this.props.contentType && this.props.contentType.startsWith('video/') ? +
+
+
+
+ {this.state.isDownloaded === false + ? + : null} +

{title}

+
+ { this.props.channelUri ? + {uriIndicator} : + uriIndicator} +
+
+ +
+
+
+ {metadata.description} +
+
+ { metadata ? +
+ +
: '' } +
+ +
+
+
+ ); + } +}); let ShowPage = React.createClass({ _uri: null, @@ -80,7 +173,6 @@ let ShowPage = React.createClass({ cost: null, costIncludesData: null, uriLookupComplete: null, - isDownloaded: null, isFailed: false, }; }, @@ -91,6 +183,7 @@ let ShowPage = React.createClass({ componentWillReceiveProps: function(nextProps) { if (nextProps.uri != this.props.uri) { + this.setState(this.getInitialState()); this.loadUri(nextProps.uri); } }, @@ -122,26 +215,11 @@ let ShowPage = React.createClass({ contentType: contentType }); - lbry.file_list({outpoint: newState.outpoint}).then((fileInfo) => { - this.setState({ - isDownloaded: fileInfo.length > 0, - }); - }); lbry.setTitle(metadata.title ? metadata.title : this._uri) - lbry.getCostInfo(this._uri).then(({cost, includesData}) => { - if (this._isMounted) { - this.setState({ - cost: cost, - costIncludesData: includesData, - }); - } - }); } else { - console.log('channel'); let {certificate: {txid: txid, nout: nout, has_signature: has_signature}} = resolveData; - console.log(txid); Object.assign(newState, { claimType: "channel", outpoint: txid + ':' + nout, @@ -165,79 +243,42 @@ let ShowPage = React.createClass({ render: function() { const metadata = this.state.metadata, - title = metadata ? this.state.metadata.title : this._uri, - channelUriObj = lbryuri.parse(this._uri); + title = metadata ? this.state.metadata.title : this._uri; - delete channelUriObj.path; - delete channelUriObj.contentName; - const channelUri = this.props.hasSignature && channelUriObj.isChannel ? lbryuri.build(channelUriObj, false) : null; + let innerContent = ""; - if (this.state.isFailed) { - return
-
+ if (!this.state.uriLookupComplete || this.state.isFailed) { + innerContent =
-

{this._uri}

+

{title}

-

- This location is not yet in use. - { ' ' } - . -

-
-
-
- } - - if (this.state.claimType == "channel") { - return - } - - const uriIndicator = ; - return ( -
-
- { this.state.contentType && this.state.contentType.startsWith('video/') ? -
-
-
-
- {this.state.isDownloaded === false - ? - : null} -

{title}

- { this.state.uriLookupComplete && this.state.outpoint ? -
-
- { this.state.signatureIsValid ? - {uriIndicator} : - uriIndicator} -
-
- -
-
: '' } -
{ this.state.uriLookupComplete ? -
-
- {metadata.description} -
-
- :
} +

This location is not yet in use. { ' ' }.

: + + }
- { metadata ? -
- -
: '' } -
- -
-
-
- ); + ; + } else if (this.state.claimType == "channel") { + innerContent = + } else { + let channelUriObj = lbryuri.parse(this._uri) + delete channelUriObj.path; + delete channelUriObj.contentName; + const channelUri = this.state.signatureIsValid && this.state.hasSignature && channelUriObj.isChannel ? lbryuri.build(channelUriObj, false) : null; + console.log(this.state); + innerContent = ; + } + + return
{innerContent}
; } });