add selectThumbnail component

src/renderer/component/publishForm/view.jsx

@@ -7,6 +7,7 @@ import ChannelSection from 'component/selectChannel';
 import classnames from 'classnames';
 import type { PublishParams, UpdatePublishFormData } from 'redux/reducers/publish';
 import FileSelector from 'component/common/file-selector';
+import SelectThumbnail from 'component/selectThumbnail';
 import { COPYRIGHT, OTHER } from 'constants/licenses';
 import { CHANNEL_NEW, CHANNEL_ANONYMOUS, MINIMUM_PUBLISH_BID } from 'constants/claim';
 import * as icons from 'constants/icons';
@@ -356,17 +357,12 @@ class PublishForm extends React.PureComponent<Props> {
               />
             </FormRow>
             <FormRow padded>
-              <FormField
+              <SelectThumbnail
-                stretch
+                thumbnail={thumbnail}
-                type="text"
+                uploadThumbnailStatus={uploadThumbnailStatus}
-                name="content_thumbnail"
+                updatePublishForm={updatePublishForm}
-                label={__('Thumbnail')}
+                formDisabled={formDisabled}
-                placeholder="http://spee.ch/mylogo"
-                value={thumbnail}
-                disabled={formDisabled}
-                onChange={e => updatePublishForm({ thumbnail: e.target.value })}
               />
-              <p>status: {uploadThumbnailStatus}</p>
             </FormRow>
             <FormRow padded>
               <FormField

src/renderer/component/selectThumbnail/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { doOpenModal } from 'redux/actions/app';
+import SelectThumbnail from './view';
+
+const perform = dispatch => ({
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+});
+
+export default connect(null, perform)(SelectThumbnail);

src/renderer/component/selectThumbnail/view.jsx

@@ -0,0 +1,88 @@
+// @flow
+import * as modals from 'constants/modal_types';
+import * as statuses from 'constants/thumbnail_upload_statuses';
+import React from 'react';
+import { FormField } from 'component/common/form';
+import FileSelector from 'component/common/file-selector';
+
+type Props = {
+  thumbnail: ?string,
+  formDisabled: boolean,
+  uploadThumbnailStatus: string,
+  openModal: (string, any) => void,
+  updatePublishForm: ({}) => void,
+};
+
+class SelectThumbnail extends React.PureComponent<Props> {
+  render() {
+    const {
+      thumbnail,
+      formDisabled,
+      uploadThumbnailStatus: status,
+      openModal,
+      updatePublishForm,
+    } = this.props;
+
+    return (
+      <div>
+        {(status === statuses.READY || status === statuses.IN_PROGRESS) && (
+          <div>
+            <span className="form-field__label">{__('Thumbnail')}</span>
+            <FileSelector
+              fileLabel={__('Choose Thumbnail')}
+              onFileChosen={path => openModal(modals.CONFIRM_THUMBNAIL_UPLOAD, { path })}
+            />
+          </div>
+        )}
+
+        {(status === statuses.API_DOWN || status === statuses.MANUAL) && (
+          <FormField
+            stretch
+            type="text"
+            name="content_thumbnail"
+            label={__('Thumbnail')}
+            placeholder="http://spee.ch/mylogo"
+            value={thumbnail}
+            disabled={formDisabled}
+            onChange={e => updatePublishForm({ thumbnail: e.target.value })}
+          />
+        )}
+
+        {status === statuses.READY && (
+          <div>
+            <a
+              className="link"
+              onClick={() => updatePublishForm({ uploadThumbnailStatus: statuses.MANUAL })}
+            >
+              Enter URL Manually
+            </a>
+          </div>
+        )}
+
+        {status === statuses.MANUAL && (
+          <div>
+            <a
+              className="link"
+              onClick={() => updatePublishForm({ uploadThumbnailStatus: statuses.READY })}
+            >
+              Upload Thumbnail
+            </a>
+          </div>
+        )}
+
+        {status === statuses.IN_PROGRESS && <div>uploading...</div>}
+
+        {status === statuses.COMPLETE && (
+          <div>
+            <p className="form-field__label">{__('Thumbnail')}</p>
+            <p>
+              Upload Complete<br />URL: {thumbnail}
+            </p>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default SelectThumbnail;