Add showPage again. Not 100% sure if it's needed?
This commit is contained in:
6ea86b96
parent
f2490c902f
commit
daabe975e1
4 changed files with 110 additions and 229 deletions
|
|
@ -4,7 +4,7 @@ import HelpPage from 'page/help';
|
|||
import ReportPage from 'page/report.js';
|
||||
import StartPage from 'page/start.js';
|
||||
import WalletPage from 'page/wallet';
|
||||
import FilePage from 'page/filePage';
|
||||
import ShowPage from 'page/showPage'
|
||||
import PublishPage from 'page/publish';
|
||||
import DiscoverPage from 'page/discover';
|
||||
import SplashScreen from 'component/splash.js';
|
||||
|
|
@ -36,7 +36,7 @@ const Router = (props) => {
|
|||
'wallet': <WalletPage {...props} />,
|
||||
'send': <WalletPage {...props} />,
|
||||
'receive': <WalletPage {...props} />,
|
||||
'show': <FilePage {...props} />,
|
||||
'show': <ShowPage {...props} />,
|
||||
'channel': <ChannelPage {...props} />,
|
||||
'publish': <PublishPage {...props} />,
|
||||
'developer': <DeveloperPage {...props} />,
|
||||
|
|
|
|||
|
|
@ -126,230 +126,4 @@ const FilePage = (props) => {
|
|||
)
|
||||
}
|
||||
|
||||
let ShowPage = React.createClass({
|
||||
_uri: null,
|
||||
_isMounted: false,
|
||||
|
||||
propTypes: {
|
||||
uri: React.PropTypes.string,
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
outpoint: null,
|
||||
metadata: null,
|
||||
contentType: null,
|
||||
hasSignature: false,
|
||||
claimType: null,
|
||||
signatureIsValid: false,
|
||||
cost: null,
|
||||
costIncludesData: null,
|
||||
uriLookupComplete: null,
|
||||
isFailed: false,
|
||||
};
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
this._isMounted = false;
|
||||
},
|
||||
|
||||
componentWillReceiveProps: function(nextProps) {
|
||||
if (nextProps.uri != this.props.uri) {
|
||||
this.setState(this.getInitialState());
|
||||
this.loadUri(nextProps.uri);
|
||||
}
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
this._isMounted = true;
|
||||
this.loadUri(this.props.uri);
|
||||
},
|
||||
|
||||
loadUri: function(uri) {
|
||||
this._uri = lbryuri.normalize(uri);
|
||||
|
||||
lbry.resolve({uri: this._uri}).then((resolveData) => {
|
||||
const isChannel = resolveData && resolveData.claims_in_channel;
|
||||
if (!this._isMounted) {
|
||||
return;
|
||||
}
|
||||
if (resolveData) {
|
||||
let newState = { uriLookupComplete: true }
|
||||
if (!isChannel) {
|
||||
let {claim: {txid: txid, nout: nout, has_signature: has_signature, signature_is_valid: signature_is_valid, value: {stream: {metadata: metadata, source: {contentType: contentType}}}}} = resolveData;
|
||||
|
||||
Object.assign(newState, {
|
||||
claimType: "file",
|
||||
metadata: metadata,
|
||||
outpoint: txid + ':' + nout,
|
||||
hasSignature: has_signature,
|
||||
signatureIsValid: signature_is_valid,
|
||||
contentType: contentType
|
||||
});
|
||||
|
||||
|
||||
lbry.setTitle(metadata.title ? metadata.title : this._uri)
|
||||
|
||||
} else {
|
||||
let {certificate: {txid: txid, nout: nout, has_signature: has_signature}} = resolveData;
|
||||
Object.assign(newState, {
|
||||
claimType: "channel",
|
||||
outpoint: txid + ':' + nout,
|
||||
txid: txid,
|
||||
metadata: {
|
||||
title:resolveData.certificate.name
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.setState(newState);
|
||||
|
||||
} else {
|
||||
this.setState(Object.assign({}, this.getInitialState(), {
|
||||
uriLookupComplete: true,
|
||||
isFailed: true
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const metadata = this.state.metadata,
|
||||
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 {
|
||||
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;
|
||||
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}
|
||||
/>;
|
||||
}
|
||||
|
||||
return <main className="main--single-column">{innerContent}</main>;
|
||||
}
|
||||
});
|
||||
|
||||
export default FilePage;
|
||||
|
||||
//
|
||||
// const ShowPage = (props) => {
|
||||
// const {
|
||||
// claim,
|
||||
// navigate,
|
||||
// claim: {
|
||||
// txid,
|
||||
// nout,
|
||||
// has_signature: hasSignature,
|
||||
// signature_is_valid: signatureIsValid,
|
||||
// value,
|
||||
// value: {
|
||||
// stream,
|
||||
// stream: {
|
||||
// metadata,
|
||||
// source,
|
||||
// metadata: {
|
||||
// title,
|
||||
// } = {},
|
||||
// source: {
|
||||
// contentType,
|
||||
// } = {},
|
||||
// } = {},
|
||||
// } = {},
|
||||
// },
|
||||
// uri,
|
||||
// isDownloaded,
|
||||
// fileInfo,
|
||||
// costInfo,
|
||||
// costInfo: {
|
||||
// cost,
|
||||
// includesData: costIncludesData,
|
||||
// } = {},
|
||||
// } = props
|
||||
//
|
||||
// const outpoint = txid + ':' + nout;
|
||||
// const uriLookupComplete = !!claim && Object.keys(claim).length
|
||||
//
|
||||
// if (props.isFailed) {
|
||||
// return (
|
||||
// <main className="main--single-column">
|
||||
// <section className="card">
|
||||
// <div className="card__inner">
|
||||
// <div className="card__title-identity"><h1>{uri}</h1></div>
|
||||
// </div>
|
||||
// <div className="card__content">
|
||||
// <p>
|
||||
// This location is not yet in use.
|
||||
// { ' ' }
|
||||
// <Link href="#" onClick={() => navigate('publish')} label="Put something here" />.
|
||||
// </p>
|
||||
// </div>
|
||||
// </section>
|
||||
// </main>
|
||||
// )
|
||||
// }
|
||||
//
|
||||
// return (
|
||||
// <main className="main--single-column">
|
||||
// <section className="show-page-media">
|
||||
// { contentType && contentType.startsWith('video/') ?
|
||||
// <Video className="video-embedded" uri={uri} metadata={metadata} outpoint={outpoint} /> :
|
||||
// (metadata ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
|
||||
// </section>
|
||||
// <section className="card">
|
||||
// <div className="card__inner">
|
||||
// <div className="card__title-identity">
|
||||
// {isDownloaded === false
|
||||
// ? <span style={{float: "right"}}><FilePrice uri={lbryuri.normalize(uri)} /></span>
|
||||
// : null}
|
||||
// <h1>{title}</h1>
|
||||
// { uriLookupComplete ?
|
||||
// <div>
|
||||
// <div className="card__subtitle">
|
||||
// <UriIndicator uri={uri} />
|
||||
// </div>
|
||||
// <div className="card__actions">
|
||||
// <FileActions uri={uri} outpoint={outpoint} metadata={metadata} contentType={contentType} />
|
||||
// </div>
|
||||
// </div> : '' }
|
||||
// </div>
|
||||
// { 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={contentType} cost={cost} uri={uri} outpoint={outpoint} costIncludesData={costIncludesData} />
|
||||
// </div> : '' }
|
||||
// <div className="card__content">
|
||||
// <Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
|
||||
// </div>
|
||||
// </section>
|
||||
// </main>
|
||||
// )
|
||||
// }
|
||||
export default FilePage;
|
||||
35
ui/js/page/showPage/index.js
Normal file
35
ui/js/page/showPage/index.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import React from 'react'
|
||||
import {
|
||||
connect
|
||||
} from 'react-redux'
|
||||
import {
|
||||
selectCurrentUri,
|
||||
} from 'selectors/app'
|
||||
import {
|
||||
selectCurrentUriIsDownloaded,
|
||||
} from 'selectors/file_info'
|
||||
import {
|
||||
selectCurrentUriClaim,
|
||||
} from 'selectors/claims'
|
||||
import {
|
||||
selectCurrentUriFileInfo,
|
||||
} from 'selectors/file_info'
|
||||
import {
|
||||
selectCurrentUriCostInfo,
|
||||
} from 'selectors/cost_info'
|
||||
import ShowPage from './view'
|
||||
|
||||
const select = (state) => ({
|
||||
claim: selectCurrentUriClaim(state),
|
||||
uri: selectCurrentUri(state),
|
||||
isDownloaded: selectCurrentUriIsDownloaded(state),
|
||||
fileInfo: selectCurrentUriFileInfo(state),
|
||||
costInfo: selectCurrentUriCostInfo(state),
|
||||
isFailed: false,
|
||||
claimType: 'file',
|
||||
})
|
||||
|
||||
const perform = (dispatch) => ({
|
||||
})
|
||||
|
||||
export default connect(select, perform)(ShowPage)
|
||||
72
ui/js/page/showPage/view.jsx
Normal file
72
ui/js/page/showPage/view.jsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
BusyMessage,
|
||||
} from 'component/common';
|
||||
import FilePage from 'page/filePage'
|
||||
|
||||
const ShowPage = (props) => {
|
||||
const {
|
||||
claim,
|
||||
navigate,
|
||||
claim: {
|
||||
txid,
|
||||
nout,
|
||||
has_signature: hasSignature,
|
||||
signature_is_valid: signatureIsValid,
|
||||
value,
|
||||
value: {
|
||||
stream,
|
||||
stream: {
|
||||
metadata,
|
||||
source,
|
||||
metadata: {
|
||||
title,
|
||||
} = {},
|
||||
source: {
|
||||
contentType,
|
||||
} = {},
|
||||
} = {},
|
||||
} = {},
|
||||
},
|
||||
uri,
|
||||
isDownloaded,
|
||||
fileInfo,
|
||||
costInfo,
|
||||
costInfo: {
|
||||
cost,
|
||||
includesData: costIncludesData,
|
||||
} = {},
|
||||
isFailed,
|
||||
claimType,
|
||||
} = props
|
||||
|
||||
const outpoint = txid + ':' + nout;
|
||||
const uriLookupComplete = !!claim && Object.keys(claim).length
|
||||
const pageTitle = metadata ? metadata.title : uri;
|
||||
|
||||
let innerContent = "";
|
||||
|
||||
if (!uriLookupComplete || isFailed) {
|
||||
innerContent = <section className="card">
|
||||
<div className="card__inner">
|
||||
<div className="card__title-identity"><h1>{pageTitle}</h1></div>
|
||||
</div>
|
||||
<div className="card__content">
|
||||
{ uriLookupComplete ?
|
||||
<p>This location is not yet in use. { ' ' }<Link href="#" onClick={() => navigate('publish')} label="Put something here" />.</p> :
|
||||
<BusyMessage message="Loading magic decentralized data..." />
|
||||
}
|
||||
</div>
|
||||
</section>;
|
||||
} else if (claimType == "channel") {
|
||||
innerContent = <ChannelPage title={uri} />
|
||||
} else {
|
||||
innerContent = <FilePage uri={uri} />
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="main--single-column">{innerContent}</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default ShowPage
|
||||
Loading…
Reference in a new issue