From 225921c0a41d46764036f05ef8ef2bf850c401ca Mon Sep 17 00:00:00 2001
From: 6ea86b96 <6ea86b96@gmail.com>
Date: Sun, 7 May 2017 14:07:40 +0700
Subject: [PATCH] Use HTML from master file tile stream

---
 ui/js/component/fileTileStream/view.jsx | 110 +++++++++++++++---------
 1 file changed, 71 insertions(+), 39 deletions(-)

diff --git a/ui/js/component/fileTileStream/view.jsx b/ui/js/component/fileTileStream/view.jsx
index 70738668a..9453f0cb0 100644
--- a/ui/js/component/fileTileStream/view.jsx
+++ b/ui/js/component/fileTileStream/view.jsx
@@ -83,49 +83,81 @@ class FileTileStream extends React.Component {
     }
 
     return (
-      <section className={ 'file-tile card ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
-        <div className={"row-fluid card__inner file-tile__row"}>
-          <div className="span3 file-tile__thumbnail-container">
-            <Link onClick={() => navigate('/show', { uri })}>
-              {metadata && metadata.thumbnail ?
-              <Thumbnail key={this.props.uri} className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + this.props.uri} />
-              :
-              <Thumbnail className="file-tile__thumbnail" alt={'Photo for ' + this.props.uri} />
-              }
-            </Link>
-          </div>
-          <div className="span9">
-            <div className="card__title-primary">
-              { !this.props.hidePrice
-                ? <FilePrice uri={this.props.uri} />
-                : null}
-                <div className="meta"><Link onClick={() => navigate('/show', { uri })}>{uri}</Link></div>
-              <h3>
-                <Link onClick={() => navigate('/show', { uri })} title={title}>
-                  <TruncatedText lines={1}>
-                    {title}
-                  </TruncatedText>
-                </Link>
-              </h3>
+      <section className={ 'card card--small card--link ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
+        <div className="card__inner">
+          <Link onClick={() => navigate('/show', { uri })} className="card__link">
+            <div className="card__title-identity">
+              <h5 title={title}><TruncatedText lines={1}>{title}</TruncatedText></h5>
+              <div className="card__subtitle">
+                { !this.props.hidePrice ? <span style={{float: "right"}}><FilePrice uri={uri} /></span>  : null}
+                <UriIndicator uri={uri} />
+              </div>
             </div>
-            <div className="card__actions">
+            { metadata && metadata.thumbnail ?
+              <div className="card__media" style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}></div> :
+              <div className="card__media" style={{ backgroundImage: "url('" + lbry.imagePath('default-thumb.svg') + "')" }}></div>
+            }
+            <div className="card__content card__subtext card__subtext--two-lines">
+                <TruncatedText lines={2}>
+                  {isConfirmed
+                    ? metadata.description
+                    : <span className="empty">This file is pending confirmation.</span>}
+                </TruncatedText>
             </div>
-            <div className="card__content">
-              <p className="file-tile__description">
-                <TruncatedText lines={2}>{description}</TruncatedText>
-              </p>
-            </div>
-          </div>
+          </Link>
+          {this.state.showNsfwHelp && this.state.hovered
+            ? <div className='card-overlay'>
+             <p>
+               This content is Not Safe For Work.
+               To view adult content, please change your <Link className="button-text" onClick={() => navigate('/settings')} label="Settings" />.
+             </p>
+           </div>
+            : null}
         </div>
-        {this.state.showNsfwHelp
-          ? <div className='card-overlay'>
-           <p>
-             This content is Not Safe For Work.
-             To view adult content, please change your <Link className="button-text" onClick={() => navigate('/settings')} label="Settings" />.
-           </p>
-         </div>
-          : null}
       </section>
+      // <section className={ 'file-tile card ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
+      //   <div className={"row-fluid card__inner file-tile__row"}>
+      //     <div className="span3 file-tile__thumbnail-container">
+      //       <Link onClick={() => navigate('/show', { uri })}>
+      //         {metadata && metadata.thumbnail ?
+      //         <Thumbnail key={this.props.uri} className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + this.props.uri} />
+      //         :
+      //         <Thumbnail className="file-tile__thumbnail" alt={'Photo for ' + this.props.uri} />
+      //         }
+      //       </Link>
+      //     </div>
+      //     <div className="span9">
+      //       <div className="card__title-primary">
+      //         { !this.props.hidePrice
+      //           ? <FilePrice uri={this.props.uri} />
+      //           : null}
+      //           <div className="meta"><Link onClick={() => navigate('/show', { uri })}>{uri}</Link></div>
+      //         <h3>
+      //           <Link onClick={() => navigate('/show', { uri })} title={title}>
+      //             <TruncatedText lines={1}>
+      //               {title}
+      //             </TruncatedText>
+      //           </Link>
+      //         </h3>
+      //       </div>
+      //       <div className="card__actions">
+      //       </div>
+      //       <div className="card__content">
+      //         <p className="file-tile__description">
+      //           <TruncatedText lines={2}>{description}</TruncatedText>
+      //         </p>
+      //       </div>
+      //     </div>
+      //   </div>
+      //   {this.state.showNsfwHelp
+      //     ? <div className='card-overlay'>
+      //      <p>
+      //        This content is Not Safe For Work.
+      //        To view adult content, please change your <Link className="button-text" onClick={() => navigate('/settings')} label="Settings" />.
+      //      </p>
+      //    </div>
+      //     : null}
+      // </section>
     );
   }
 }