Seed Support #56

Closed
ocnios wants to merge 173 commits from master into build
2 changed files with 128 additions and 86 deletions
Showing only changes of commit 59da42a84b - Show all commits

View file

@ -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;

View file

@ -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({
</section>
</main>
}
})
});
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 = <UriIndicator uri={this.props.uri} hasSignature={this.props.hasSignature} signatureIsValid={this.props.signatureIsValid} />;
return (
<main className="main--single-column">
<section className="show-page-media">
{ this.props.contentType && this.props.contentType.startsWith('video/') ?
<Video className="video-embedded" uri={this.props.uri} metadata={metadata} outpoint={this.props.outpoint} /> :
(metadata ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
</section>
<section className="card">
<div className="card__inner">
<div className="card__title-identity">
{this.state.isDownloaded === false
? <span style={{float: "right"}}><FilePrice uri={this.props.uri} metadata={metadata} /></span>
: null}
<h1>{title}</h1>
<div className="card__subtitle">
{ this.props.channelUri ?
<Link href={"?show=" + this.props.channelUri }>{uriIndicator}</Link> :
uriIndicator}
</div>
<div className="card__actions">
<FileActions uri={this.props.uri} outpoint={this.props.outpoint} metadata={metadata} contentType={this.props.contentType} />
</div>
</div>
<div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
{metadata.description}
</div>
</div>
{ metadata ?
<div className="card__content">
<FormatItem metadata={metadata} contentType={this.state.contentType} cost={this.state.cost} uri={this.props.uri} outpoint={this.props.outpoint} costIncludesData={this.state.costIncludesData} />
</div> : '' }
<div className="card__content">
<Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
</div>
</section>
</main>
);
}
});
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;
let innerContent = "";
if (!this.state.uriLookupComplete || this.state.isFailed) {
innerContent = <section className="card">
<div className="card__inner">
<div className="card__title-identity"><h1>{title}</h1></div>
</div>
<div className="card__content">
{ this.state.uriLookupComplete ?
<p>This location is not yet in use. { ' ' }<Link href="?publish" label="Put something here" />.</p> :
<BusyMessage message="Loading magic decentralized data..." />
}
</div>
</section>;
} else if (this.state.claimType == "channel") {
innerContent = <ChannelPage title={this._uri} />
} else {
let channelUriObj = lbryuri.parse(this._uri)
delete channelUriObj.path;
delete channelUriObj.contentName;
const channelUri = this.props.hasSignature && channelUriObj.isChannel ? lbryuri.build(channelUriObj, false) : null;
if (this.state.isFailed) {
return <main className="main--single-column">
<section className="card">
<div className="card__inner">
<div className="card__title-identity"><h1>{this._uri}</h1></div>
</div>
<div className="card__content">
<p>
This location is not yet in use.
{ ' ' }
<Link href="?publish" label="Put something here" />.
</p>
</div>
</section>
</main>
const channelUri = this.state.signatureIsValid && this.state.hasSignature && channelUriObj.isChannel ? lbryuri.build(channelUriObj, false) : null;
console.log(this.state);
innerContent = <FilePage
uri={this._uri}
channelUri={channelUri}
outpoint={this.state.outpoint}
metadata={metadata}
contentType={this.state.contentType}
hasSignature={this.state.hasSignature}
signatureIsValid={this.state.signatureIsValid}
/>;
}
if (this.state.claimType == "channel") {
return <ChannelPage title={this._uri} />
}
const uriIndicator = <UriIndicator uri={this._uri} hasSignature={this.state.hasSignature} signatureIsValid={this.state.signatureIsValid} />;
return (
<main className="main--single-column">
<section className="show-page-media">
{ this.state.contentType && this.state.contentType.startsWith('video/') ?
<Video className="video-embedded" uri={this._uri} metadata={metadata} outpoint={this.state.outpoint} /> :
(metadata ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
</section>
<section className="card">
<div className="card__inner">
<div className="card__title-identity">
{this.state.isDownloaded === false
? <span style={{float: "right"}}><FilePrice uri={this._uri} metadata={this.state.metadata} /></span>
: null}
<h1>{title}</h1>
{ this.state.uriLookupComplete && this.state.outpoint ?
<div>
<div className="card__subtitle">
{ this.state.signatureIsValid ?
<Link href={"?show=" + channelUri }>{uriIndicator}</Link> :
uriIndicator}
</div>
<div className="card__actions">
<FileActions uri={this._uri} outpoint={this.state.outpoint} metadata={metadata} contentType={this.state.contentType} />
</div>
</div> : '' }
</div>
{ this.state.uriLookupComplete ?
<div>
<div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
{metadata.description}
</div>
</div>
: <div className="card__content"><BusyMessage message="Loading magic decentralized data..." /></div> }
</div>
{ metadata ?
<div className="card__content">
<FormatItem metadata={metadata} contentType={this.state.contentType} cost={this.state.cost} uri={this._uri} outpoint={this.state.outpoint} costIncludesData={this.state.costIncludesData} />
</div> : '' }
<div className="card__content">
<Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
</div>
</section>
</main>
);
return <main className="main--single-column">{innerContent}</main>;
}
});