diff --git a/dist/index.html b/dist/index.html index 1d42421a7..f6f7ba88a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -35,6 +35,7 @@ + diff --git a/js/app.js b/js/app.js index ef6dc5cbe..1eee54e4e 100644 --- a/js/app.js +++ b/js/app.js @@ -4,7 +4,7 @@ var App = React.createClass({ var match, param, val; [match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/); - if (['settings', 'help', 'start', 'watch', 'report', 'files', 'claim'].indexOf(param) != -1) { + if (['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show'].indexOf(param) != -1) { var viewingPage = param; } else { var viewingPage = 'home'; @@ -58,6 +58,8 @@ var App = React.createClass({ return ; } else if (this.state.viewingPage == 'claim') { return ; + } else if (this.state.viewingPage == 'show') { + return ; } } }); \ No newline at end of file diff --git a/js/page/show.js b/js/page/show.js new file mode 100644 index 000000000..ccee6d4ca --- /dev/null +++ b/js/page/show.js @@ -0,0 +1,118 @@ +var formatItemStyle = { + fontSize: '0.95em', + marginTop: '10px', + maxHeight: '220px' +}, formatItemImgStyle = { + maxWidth: '100%', + maxHeight: '100%', + display: 'block', + marginLeft: 'auto', + marginRight: 'auto', + marginTop: '5px', +}, formatHeaderStyle = { + fontWeight: 'bold', + marginBottom: '5px' +}, formatSubheaderStyle = { + marginBottom: '10px', + fontSize: '0.9em' +}, formatItemDescriptionStyle = { + color: '#444', + marginBottom: '5px', + fontSize: '0.9em', +}, formatItemMetadataStyle = { + color: '#444', + marginBottom: '5px', + fontSize: '0.9em', +}, formatItemCostStyle = { + float: 'right' +}; + +var FormatItem = React.createClass({ + propTypes: { + metadata: React.PropTypes.object, + name: React.PropTypes.string, + amount: React.PropTypes.double, + }, + render: function() { + return ( +
+
+ {'Photo +
+
+

{this.state.title}

+
+
+ +     + +
+

{metadata.description}

+
+ Author: {metadata.author}
+ Language: {metadata.language}
+ License: {metadata.license}
+
+
+
+ ); + } +}); + +var FormatsSection = React.createClass({ + propTypes: { + name: React.PropTypes.string, + }, + getInitialState: function() { + return { + metadata: null, + amount: 0.0, + }; + }, + componentWillMount: function() { + lbry.resolveName(this.props.name, (metadata) => { + this.setState({ + metadata: metadata, + }) + }); + lbry.search(this.props.name, (results) => { + this.setState({ + amount: (results ? results[0].cost_est : 0.0) + }); + }); + }, + render: function() { + if (this.state.metadata == null) { + // Still waiting for metadata + return null; + } + + var format = this.state.metadata; + + return ( +

this.props.name

+
+ // In future, anticipate multiple formats, just a guess at what it could look like + // var formats = metadata.formats + // return ({formats.map(function(format,i){ + + // })}); +
); + } +}); + +var DetailPage = React.createClass({ + propTypes: { + name: React.PropTypes.string, + }, + render: function() { + return ( +
+ + +
+ +
+
); + } +}); \ No newline at end of file