Initial show page commit

dist/index.html

@@ -35,6 +35,7 @@
       <script src="./js/page/my_files.js"></script>
       <script src="./js/page/start.js"></script>
       <script src="./js/page/claim_code.js"></script>
+      <script src="./js/page/show.js"></script>
       <script src="./js/app.js"></script>
       <script src="./js/main.js"></script>
     </body>

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 <StartPage />;
     } else if (this.state.viewingPage == 'claim') {
       return <ClaimCodePage />;
+    } else if (this.state.viewingPage == 'show') {
+      return <DetailPage />;
     }
   }
 });

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 (
+      <div className="row-fluid" style={formatItemStyle}>
+        <div className="span4">
+          <img src={metadata.thumbnail} alt={'Photo for ' + this.props.metadata.title} style={thumbStyle} />
+        </div>
+        <div className="span8">
+          <h4 style={formatHeaderStyle}>{this.state.title}</h4>
+          <div style={formatSubheaderStyle}>
+            <div style={formatItemCostStyle}><CreditAmount amount={this.props.amount} isEstimate={true}/></div>
+            <WatchLink streamName={this.props.name} />
+            &nbsp;&nbsp;&nbsp;
+            <DownloadLink streamName={this.props.name} />
+          </div>
+          <p style={formatItemDescriptionStyle}>{metadata.description}</p>
+          <div>
+            <span style={formatItemMetadataStyle}>Author: {metadata.author}</span><br />
+            <span style={formatItemMetadataStyle}>Language: {metadata.language}</span><br />
+            <span style={formatItemMetadataStyle}>License: {metadata.license}</span><br />
+          </div>
+        </div>
+      </div>
+      );
+  }
+});
+
+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 (
+      <h1>this.props.name</h1>
+      <section>
+    // In future, anticipate multiple formats, just a guess at what it could look like
+    // var formats = metadata.formats
+    // return (<tbody>{formats.map(function(format,i){
+        <FormatItem metadata=format>
+    //  })}</tbody>);
+      </section>);
+  }
+});
+
+var DetailPage = React.createClass({
+  propTypes: {
+    name: React.PropTypes.string,
+  },
+  render: function() {
+    return (
+      <main className="page">
+        <SubPageLogo />
+        <FormatsSection name=name/>
+        <section>
+          <Link href="/" label="<< Return" />
+        </section>
+      </main>);
+  }
+});