thumbnail preview on publish page

src/renderer/component/publishForm/view.jsx

@@ -74,7 +74,7 @@ class PublishForm extends React.PureComponent<Props> {
 
   componentWillMount() {
     const { isStillEditing, thumbnail } = this.props;
-    if (!isStillEditing || !thumbnail) {
+    if (!thumbnail) {
       this.props.resetThumbnailStatus();
     }
   }

src/renderer/component/selectThumbnail/view.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { FormField, FormRow } from 'component/common/form';
 import FileSelector from 'component/common/file-selector';
 import Button from 'component/button';
+import Native from 'native';
 
 type Props = {
   thumbnail: ?string,
@@ -15,7 +16,29 @@ type Props = {
   resetThumbnailStatus: () => void,
 };
 
-class SelectThumbnail extends React.PureComponent<Props> {
+type State = {
+  thumbnailValid: boolean,
+}
+
+class SelectThumbnail extends React.PureComponent<Props, State> {
+  constructor() {
+    super();
+    
+    this.state = {
+      thumbnailValid: false,
+    };
+    
+    (this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this);
+  }
+  
+  handleThumbnailChange(e) {
+    const { updatePublishForm } = this.props;
+    const newThumbnail = e.target.value.replace(' ', '');
+    
+    updatePublishForm({ thumbnail: newThumbnail });
+    this.setState({ thumbnailValid: true })
+  }
+  
   render() {
     const {
       thumbnail,
@@ -27,24 +50,43 @@ class SelectThumbnail extends React.PureComponent<Props> {
       resetThumbnailStatus,
     } = this.props;
     
+    const { thumbnailValid } = this.state;
+    
     return (
-      <div>
+      <div className="card__content">
         {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
-          <FormRow padded>
+          <div className="column">
+            <div className="column__item">
               <FormField
                 stretch
                 type="text"
                 name="content_thumbnail"
-              label={__('URL')}
+                label={'URL'}
                 placeholder="http://spee.ch/mylogo"
                 value={thumbnail}
                 disabled={formDisabled}
-              onChange={e => updatePublishForm({ thumbnail: e.target.value })}
+                onChange={this.handleThumbnailChange}
                 />
-          </FormRow>
+              <div className="card__actions">
+                <Button
+                  button="link"
+                  label={__('Use thumbnail upload tool')}
+                  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">
-            {(status === THUMBNAIL_STATUSES.READY || status === THUMBNAIL_STATUSES.COMPLETE) && (
+            {status === THUMBNAIL_STATUSES.READY && (
               <FileSelector
                 currentPath={thumbnailPath}
                 fileLabel={__('Choose Thumbnail')}
@@ -52,13 +94,19 @@ class SelectThumbnail extends React.PureComponent<Props> {
               />
             )}
             {status === THUMBNAIL_STATUSES.COMPLETE && (
-              <div>
+              <div className="column column--space-between">
+                <img
+                  className="column__item thumbnail-preview"
+                  src={thumbnail}
+                  />
+                <div className="column__item">
                   <p>
-                  Upload complete. View it{' '}
+                    Upload complete.{' '}
-                  <Button button="link" href={thumbnail} label={__('here')} />.
+                    <Button button="link" href={thumbnail} label={__('View it on spee.ch')} />
                   </p>
                   <Button button="link" label={__('New thumbnail')} onClick={resetThumbnailStatus} />
                 </div>
+            </div>
             )}
           </div>
         )}
@@ -72,13 +120,6 @@ class SelectThumbnail extends React.PureComponent<Props> {
               }
             />
           )}
-          {status === THUMBNAIL_STATUSES.MANUAL && (
-            <Button
-              button="link"
-              label={__('Use thumbnail upload tool')}
-              onClick={() => updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.READY })}
-            />
-          )}
         </div>
 
         {status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}

src/renderer/scss/_gui.scss

@@ -153,7 +153,6 @@ dd {
 
 p {
   font-family: 'metropolis-medium';
-  padding: $spacing-vertical * 1/3 0;
 }
 
 .page {
@@ -302,6 +301,14 @@ p {
   opacity: 0.5;
 }
 
+.column {
+  display: flex;
+  
+  .column__item:not(:first-child) {
+    padding-left: $spacing-width * 2/3;
+  }
+}
+
 .truncated-text {
   //display: inline-block;
   display: -webkit-box;
@@ -361,3 +368,8 @@ p {
     margin-top: $spacing-vertical * 2/3;
   }
 }
+
+.thumbnail-preview {
+  height: 100px;
+  width: 177px;
+}

src/renderer/scss/component/_card.scss

@@ -255,6 +255,12 @@
   right: $spacing-vertical;
 }
 
+.card__actions-bottom-corner {
+  position: absolute;
+  bottom: $spacing-vertical;
+  right: $spacing-vertical;
+}
+
 .card__actions--end {
   justify-content: flex-end;
 }