Merge pull request #12 from kimihiro64/add-detail-page

Add detail page

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 name={this.state.pageArgs}/>;
     }
   }
 });

js/component/common.js

@@ -87,12 +87,8 @@ var WatchLink = React.createClass({
   },
 
   render: function() {
-    // No support for lbry:// URLs in Windows or on Chrome yet
-    if (/windows|win32/i.test(navigator.userAgent) || (window.chrome && window.navigator.vendor == "Google Inc.")) {
-      var uri = "/?watch=" + this.props.streamName;
-    } else {
-      var uri = 'lbry://' + this.props.streamName;
-    }
+    var uri = "/?watch=" + this.props.streamName;
+    
     return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
                  href={uri} label={this.props.label} icon={this.props.icon} onClick={this.onClick} />;
   }

js/page/home.js

@@ -102,7 +102,7 @@ var SearchResultRow = React.createClass({
           <span style={searchRowCostStyle}>
             <CreditAmount amount={this.props.cost_est} isEstimate={true}/>
           </span>
-          <h2 style={searchRowTitleStyle}>{this.props.title}</h2>
+          <h2 style={searchRowTitleStyle}><a href={'/?show=' + this.props.name}>{this.props.title}</a></h2>
           <div style={searchRowNameStyle}>lbry://{this.props.name}</div>
           <p style={searchRowDescriptionStyle}>{this.props.description}</p>
           <div>
@@ -191,7 +191,7 @@ var FeaturedContentItem = React.createClass({
           <img src={metadata.thumbnail} alt={'Photo for ' + this.state.title} style={thumbStyle} />
         </div>
         <div className="span8">
-          <h4 style={featuredContentHeaderStyle}>{this.state.title}</h4>
+          <h4 style={featuredContentHeaderStyle}><a href={'/?show=' + this.props.name}>{this.state.title}</a></h4>
           <div style={featuredContentSubheaderStyle}>
             <div style={featuredContentItemCostStyle}><CreditAmount amount={this.state.amount} isEstimate={true}/></div>
             <WatchLink streamName={this.props.name} />

js/page/my_files.js

@@ -97,7 +97,7 @@ var MyFilesRow = React.createClass({
           <img src={this.props.imgUrl} alt={'Photo for ' + this.props.title} style={artStyle} />
         </div>
         <div className="span6">
-          <h2>{this.props.title}</h2>
+          <h2><a href={'/?show=' + this.props.lbryUri}>{this.props.title}</a></h2>
           <div className={this.props.completed ? 'hidden' : ''} style={curProgressBarStyle}></div>
           { ' ' }
           {this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}

js/page/show.js

@@ -0,0 +1,139 @@
+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: '1.2em',
+}, formatItemMetadataStyle = {
+  color: '#444',
+  marginBottom: '5px',
+  fontSize: '0.9em',
+}, formatItemCostStyle = {
+  float: 'right'
+};
+
+var FormatItem = React.createClass({
+  propTypes: {
+    results: React.PropTypes.object,
+  },
+  render: function() {
+    var results = this.props.results;
+    var name = results.name;
+    var thumbnail = results.thumbnail;
+    var title = results.title;
+    var amount = results.cost_est ? results.cost_est : 0.0;
+    var description = results.description;
+    var author = results.author;
+    var language = results.language;
+    var license = results.license;
+    var fileContentType = results['content-type'];
+
+    return (
+      <div className="row-fluid" style={formatItemStyle}>
+        <div className="span4">
+          <img src={thumbnail} alt={'Photo for ' + title} style={formatItemImgStyle} />
+        </div>
+        <div className="span8">
+          <h4 style={formatItemMetadataStyle}><b>Address:</b> {name}</h4>
+          <h4 style={formatItemMetadataStyle}><b>Content-Type:</b> {fileContentType}</h4>
+          <div style={formatSubheaderStyle}>
+            <div style={formatItemCostStyle}><CreditAmount amount={amount} isEstimate={true}/></div>
+            <WatchLink streamName={name} />
+            &nbsp;&nbsp;&nbsp;
+            <DownloadLink streamName={name} />
+          </div>
+          <p style={formatItemDescriptionStyle}>{description}</p>
+          <div>
+            <span style={formatItemMetadataStyle}><b>Author:</b> {author}</span><br />
+            <span style={formatItemMetadataStyle}><b>Language:</b> {language}</span><br />
+            <span style={formatItemMetadataStyle}><b>License:</b> {license}</span><br />
+          </div>
+        </div>
+      </div>
+      );
+  }
+});
+
+var FormatsSection = React.createClass({
+  propTypes: {
+    results: React.PropTypes.object,
+    name: React.PropTypes.string,
+  },
+  render: function() {
+    var name = this.props.name;
+    var format = this.props.results;
+    var title = format.title;
+
+    if(format == null)
+    {
+      return (
+        <div>
+          <h1 style={formatHeaderStyle}>Sorry, no results found for "{name}".</h1>
+        </div>);
+    }
+
+    return (
+      <div>
+        <h1 style={formatHeaderStyle}>{title}</h1>
+      {/* In future, anticipate multiple formats, just a guess at what it could look like
+      // var formats = this.props.results.formats
+      // return (<tbody>{formats.map(function(format,i){ */}
+          <FormatItem results={format}/>
+      {/*  })}</tbody>); */}
+      </div>);
+  }
+});
+
+var DetailPage = React.createClass({
+  propTypes: {
+    name: React.PropTypes.string,
+  },
+  getInitialState: function() {
+    return {
+      results: null,
+      searching: true,
+    };
+  },
+  componentWillMount: function() {
+    lbry.search(this.props.name, (results) => {
+      this.setState({
+        results: results[0],
+        searching: false,
+      });
+    });
+  },
+  render: function() {
+    if (this.state.results == null && this.state.searching) {
+      // Still waiting for metadata
+      return null;
+    }
+
+    var name = this.props.name;
+    var metadata = this.state.metadata;
+    var results = this.state.results;
+
+    return (
+      <main className="page">
+        <SubPageLogo />
+        <FormatsSection name={name} results={results}/>
+        <section>
+          <Link href="/" label="<< Return" />
+        </section>
+      </main>);
+  }
+});