Merge pull request #82 from lbryio/thumbnail-component

Thumbnail component

js/component/common.js

@@ -113,3 +113,36 @@ var Address = React.createClass({
     );
   }
 });
+
+var Thumbnail = React.createClass({
+  _defaultImageUri: '/img/default-thumb.svg',
+  _maxLoadTime: 10000,
+
+  propTypes: {
+    src: React.PropTypes.string.isRequired,
+  },
+  handleError: function() {
+    if (this.state.imageUrl != this._defaultImageUri) {
+      this.setState({
+        imageUri: this._defaultImageUri,
+      });
+    }
+  },
+  getInitialState: function() {
+    return {
+      imageUri: this.props.src || this._defaultImageUri,
+    };
+  },
+  componentDidMount: function() {
+    setTimeout(() => {
+      if (!this.refs.img.complete) {
+        this.setState({
+          imageUri: this._defaultImageUri,
+        });
+      }
+    }, this._maxLoadTime);
+  },
+  render: function() {
+    return <img ref="img" onError={this.handleError} {... this.props} src={this.state.imageUri} /> 
+  },
+});

js/page/discover.js

@@ -113,7 +113,7 @@ var SearchResultRow = React.createClass({
       <section className={ 'card ' + (obscureNsfw ? 'card-obscured ' : '') + (this.props.compact ? 'card-compact' : '')} onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
         <div className="row-fluid card-content" style={style}>
           <div className="span3">
-            <a href={'/?show=' + this.props.name}><img src={this.props.imgUrl || '/img/default-thumb.svg'} alt={'Photo for ' + (this.props.title || this.props.name)} style={searchRowImgStyle} /></a>
+            <a href={'/?show=' + this.props.name}><Thumbnail src={this.props.imgUrl} alt={'Photo for ' + (this.props.title || this.props.name)} style={searchRowImgStyle} /></a>
           </div>
           <div className="span9">
             <span style={searchRowCostStyle}>
@@ -201,7 +201,7 @@ var FeaturedContentItem = React.createClass({
     }
 
     return (<div style={featuredContentItemContainerStyle}>
-      <SearchResultRow name={this.props.name} title={this.state.title} imgUrl={this.state.metadata.thumbnail || '/img/default-thumb.svg'}
+      <SearchResultRow name={this.props.name} title={this.state.title} imgUrl={this.state.metadata.thumbnail}
                  description={this.state.metadata.description} mediaType={lbry.getMediaType(this.state.metadata.content_type)}
                  cost={this.state.amount} nsfw={this.state.metadata.nsfw} available={this.state.available} compact />
     </div>);

js/page/my_files.js

@@ -115,7 +115,7 @@ var MyFilesRow = React.createClass({
       <section className="card">
         <div className="row-fluid">
           <div className="span3">
-            <img src={this.props.imgUrl || '/img/default-thumb.svg'} alt={'Photo for ' + this.props.title} style={artStyle} />
+            <Thumbnail src={this.props.imgUrl} alt={'Photo for ' + this.props.title} style={artStyle} />
           </div>
           <div className="span8">
             <h3>{this.props.pending ? this.props.title : <a href={'/?show=' + this.props.lbryUri}>{this.props.title}</a>}</h3>

js/page/show.js

@@ -31,7 +31,7 @@ var FormatItem = React.createClass({
     return (
       <div className="row-fluid">
         <div className="span4">
-          <img src={thumbnail || '/img/default-thumb.svg'} alt={'Photo for ' + title} style={formatItemImgStyle} />
+          <Thumbnail src={thumbnail} alt={'Photo for ' + title} style={formatItemImgStyle} />
         </div>
         <div className="span8">
           <p>{description}</p>