From 6df4032c9060bc91aa26abc310f0fb4f3dd5c72d Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 18 Jul 2018 11:46:21 -0400
Subject: [PATCH] improve thumbnail preview styling

---
 .../component/common/file-selector.jsx        |  4 +-
 src/renderer/component/publishForm/view.jsx   | 28 ++++---
 .../component/selectThumbnail/view.jsx        | 80 ++++++++++---------
 src/renderer/scss/component/_form-field.scss  |  4 +-
 4 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/src/renderer/component/common/file-selector.jsx b/src/renderer/component/common/file-selector.jsx
index ec19394e1..3729202d0 100644
--- a/src/renderer/component/common/file-selector.jsx
+++ b/src/renderer/component/common/file-selector.jsx
@@ -9,7 +9,7 @@ type Props = {
   type: string,
   currentPath: ?string,
   onFileChosen: (string, string) => void,
-  fileLabel: ?string,
+  fileLabel?: string,
   directoryLabel?: string,
 };
 
@@ -56,7 +56,7 @@ class FileSelector extends React.PureComponent<Props> {
       type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
 
     return (
-      <FormRow verticallyCentered padded>
+      <FormRow verticallyCentered>
         <Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
         <input
           webkitdirectory="true"
diff --git a/src/renderer/component/publishForm/view.jsx b/src/renderer/component/publishForm/view.jsx
index 7c572ced3..c291ccaee 100644
--- a/src/renderer/component/publishForm/view.jsx
+++ b/src/renderer/component/publishForm/view.jsx
@@ -73,7 +73,7 @@ class PublishForm extends React.PureComponent<Props> {
   }
 
   componentWillMount() {
-    const { isStillEditing, thumbnail } = this.props;
+    const { thumbnail } = this.props;
     if (!thumbnail) {
       this.props.resetThumbnailStatus();
     }
@@ -356,14 +356,17 @@ class PublishForm extends React.PureComponent<Props> {
               />
             </div>
           )}
-          <FileSelector currentPath={filePath} onFileChosen={this.handleFileChange} />
-          {!!isStillEditing && (
-            <p className="card__content card__subtitle">
-              {__("If you don't choose a file, the file from your existing claim")}
-              {` "${name}" `}
-              {__('will be used.')}
-            </p>
-          )}
+          <div className="card__content">
+            <FileSelector currentPath={filePath} onFileChosen={this.handleFileChange} />
+            {!!isStillEditing &&
+              name && (
+                <p className="card__content card__subtitle">
+                  {__("If you don't choose a file, the file from your existing claim")}
+                  {` "${name}" `}
+                  {__('will be used.')}
+                </p>
+              )}
+          </div>
         </section>
         <div className={classnames({ 'card--disabled': formDisabled })}>
           <section className="card card--section">
@@ -400,10 +403,9 @@ class PublishForm extends React.PureComponent<Props> {
                 __('Enter a URL for your thumbnail.')
               ) : (
                 <React.Fragment>
-                  {__(
-                    'Upload your thumbnail (.png/.jpg/.jpeg/.gif) to spee.ch, or enter the URL manually. Learn more about spee.ch '
-                  )}
-                  <Button button="link" label={__('here')} href="https://spee.ch/about" />.
+                  {__('Upload your thumbnail (.png/.jpg/.jpeg/.gif) to')}{' '}
+                  <Button button="link" label={__('spee.ch')} href="https://spee.ch/about" />.{' '}
+                  {__('Recommended size: 800x450 (16:9)')}
                 </React.Fragment>
               )}
             </div>
diff --git a/src/renderer/component/selectThumbnail/view.jsx b/src/renderer/component/selectThumbnail/view.jsx
index d34d90289..0c8f6b813 100644
--- a/src/renderer/component/selectThumbnail/view.jsx
+++ b/src/renderer/component/selectThumbnail/view.jsx
@@ -1,7 +1,7 @@
 // @flow
 import { THUMBNAIL_STATUSES, MODALS } from 'lbry-redux';
-import React from 'react';
-import { FormField, FormRow } from 'component/common/form';
+import * as React from 'react';
+import { FormField } from 'component/common/form';
 import FileSelector from 'component/common/file-selector';
 import Button from 'component/button';
 import Native from 'native';
@@ -17,28 +17,28 @@ type Props = {
 };
 
 type State = {
-  thumbnailValid: boolean,
-}
+  thumbnailError: boolean,
+};
 
 class SelectThumbnail extends React.PureComponent<Props, State> {
   constructor() {
     super();
-    
+
     this.state = {
-      thumbnailValid: false,
+      thumbnailError: false,
     };
-    
+
     (this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this);
   }
-  
-  handleThumbnailChange(e) {
+
+  handleThumbnailChange(e: SyntheticInputEvent<*>) {
     const { updatePublishForm } = this.props;
     const newThumbnail = e.target.value.replace(' ', '');
-    
+
     updatePublishForm({ thumbnail: newThumbnail });
-    this.setState({ thumbnailValid: true })
+    this.setState({ thumbnailError: false });
   }
-  
+
   render() {
     const {
       thumbnail,
@@ -49,43 +49,46 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
       thumbnailPath,
       resetThumbnailStatus,
     } = this.props;
-    
-    const { thumbnailValid } = this.state;
-    
+    const { thumbnailError } = this.state;
+    const thumbnailSrc =
+      !thumbnail || thumbnailError ? Native.imagePath('thumbnail.png') : thumbnail;
+
     return (
       <div className="card__content">
         {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
           <div className="column">
+            <img
+              src={thumbnailSrc}
+              className="column__item thumbnail-preview"
+              alt={__('Thumbnail Preview')}
+              onError={() => {
+                this.setState({ thumbnailError: true });
+              }}
+            />
             <div className="column__item">
               <FormField
-                stretch
+                className="input--thumbnail"
                 type="text"
                 name="content_thumbnail"
-                label={'URL'}
+                label="URL"
                 placeholder="http://spee.ch/mylogo"
                 value={thumbnail}
                 disabled={formDisabled}
                 onChange={this.handleThumbnailChange}
-                />
+              />
               <div className="card__actions">
                 <Button
                   button="link"
                   label={__('Use thumbnail upload tool')}
-                  onClick={() => updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.READY })}
+                  onClick={() =>
+                    updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.READY })
+                  }
                 />
               </div>
             </div>
-            <img
-              src={(!thumbnail || !thumbnailValid) ? Native.imagePath('thumbnail.png') : thumbnail}
-              className="column__item thumbnail-preview"
-              alt="Thumbnail Preview"
-              onError={() => {
-                this.setState({ thumbnailValid: false })
-              }}
-            />
           </div>
         ) : (
-          <div className="form-row--padded">
+          <React.Fragment>
             {status === THUMBNAIL_STATUSES.READY && (
               <FileSelector
                 currentPath={thumbnailPath}
@@ -98,20 +101,25 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
                 <img
                   className="column__item thumbnail-preview"
                   src={thumbnail}
-                  />
+                  alt={__('Thumbnail Preview')}
+                />
                 <div className="column__item">
                   <p>
                     Upload complete.{' '}
                     <Button button="link" href={thumbnail} label={__('View it on spee.ch')} />
                   </p>
-                  <Button button="link" label={__('New thumbnail')} onClick={resetThumbnailStatus} />
+                  <Button
+                    button="link"
+                    label={__('New thumbnail')}
+                    onClick={resetThumbnailStatus}
+                  />
                 </div>
-            </div>
+              </div>
             )}
-          </div>
+          </React.Fragment>
         )}
-        <div className="card__actions">
-          {status === THUMBNAIL_STATUSES.READY && (
+        {status === THUMBNAIL_STATUSES.READY && (
+          <div className="card__actions">
             <Button
               button="link"
               label={__('Or enter a URL manually')}
@@ -119,8 +127,8 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
                 updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.MANUAL })
               }
             />
-          )}
-        </div>
+          </div>
+        )}
 
         {status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
       </div>
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index e46223982..0b5ad5f4a 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -67,8 +67,8 @@
     width: 35px;
   }
 
-  input.paginate-channel {
-    width: 35px;
+  input.input--thumbnail {
+    width: 370px;
   }
 
   &.form-field--auto-height {