cleanup thumbnail upload styling

lbryio · Jun 8, 2018 · 3e283f3 · 3e283f3
1 parent 9957be1
commit 3e283f3
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 136 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "formik": "^0.10.4",
     "hast-util-sanitize": "^1.1.2",
     "keytar": "^4.2.1",
-    "lbry-redux": "lbryio/lbry-redux#a32e8835c238c0ba1081fe6979763c5b0fade76c",
+    "lbry-redux": "lbryio/lbry-redux#7759bc6e8c482bed173d1f10aee6f6f9a439a15a",
     "localforage": "^1.7.1",
     "mixpanel-browser": "^2.17.1",
     "moment": "^2.22.0",

diff --git a/src/renderer/component/common/file-selector.jsx b/src/renderer/component/common/file-selector.jsx
@@ -10,7 +10,7 @@ type Props = {
   currentPath: ?string,
   onFileChosen: (string, string) => void,
   fileLabel: ?string,
-  directoryLabel: ?string,
+  directoryLabel?: string,
 };
 
 class FileSelector extends React.PureComponent<Props> {

diff --git a/src/renderer/component/publishForm/view.jsx b/src/renderer/component/publishForm/view.jsx
@@ -23,6 +23,7 @@ type Props = {
   title: ?string,
   thumbnail: ?string,
   uploadThumbnailStatus: ?string,
+  thumbnailPath: ?string,
   description: ?string,
   language: string,
   nsfw: boolean,
@@ -78,32 +79,6 @@ class PublishForm extends React.PureComponent<Props> {
     const { resolveUri } = this.props;
     // If they are midway through a channel creation, treat it as anonymous until it completes
     const channelName = channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : channel;
-  }
-
-  componentWillMount() {
-    this.props.resetThumbnailStatus();
-  }
-
-  handlePublish() {
-    const {
-      publish,
-      filePath,
-      bid,
-      title,
-      thumbnail,
-      description,
-      language,
-      nsfw,
-      channel,
-      licenseType,
-      licenseUrl,
-      otherLicenseDescription,
-      copyrightNotice,
-      name,
-      contentIsFree,
-      price,
-      uri,
-    } = this.props;
 
     let uri;
     try {
@@ -322,6 +297,8 @@ class PublishForm extends React.PureComponent<Props> {
       bidError,
       publishing,
       clearPublish,
+      thumbnailPath,
+      resetThumbnailStatus,
     } = this.props;
 
     const formDisabled = (!filePath && !editingURI) || publishing;
@@ -382,14 +359,6 @@ class PublishForm extends React.PureComponent<Props> {
                 onChange={e => updatePublishForm({ title: e.target.value })}
               />
             </FormRow>
-            <FormRow padded>
-              <SelectThumbnail
-                thumbnail={thumbnail}
-                uploadThumbnailStatus={uploadThumbnailStatus}
-                updatePublishForm={updatePublishForm}
-                formDisabled={formDisabled}
-              />
-            </FormRow>
             <FormRow padded>
               <FormField
                 stretch
@@ -404,6 +373,24 @@ class PublishForm extends React.PureComponent<Props> {
             </FormRow>
           </section>
 
+          <section className="card card--section">
+            <div className="card__title">{__('Thumbnail')}</div>
+            <div className="card__subtitle">
+              {__(
+                'Upload your thumbnail to spee.ch, or enter the url manually. Learn more about spee.ch '
+              )}
+              <Button button="link" label={__('here')} href="https://spee.ch/about" />.
+            </div>
+            <SelectThumbnail
+              thumbnailPath={thumbnailPath}
+              thumbnail={thumbnail}
+              uploadThumbnailStatus={uploadThumbnailStatus}
+              updatePublishForm={updatePublishForm}
+              formDisabled={formDisabled}
+              resetThumbnailStatus={resetThumbnailStatus}
+            />
+          </section>
+
           <section className="card card--section">
             <div className="card__title">{__('Price')}</div>
             <div className="card__subtitle">{__('How much will this content cost?')}</div>

diff --git a/src/renderer/component/selectThumbnail/index.js b/src/renderer/component/selectThumbnail/index.js
@@ -1,9 +1,12 @@
 import { connect } from 'react-redux';
-import { doOpenModal } from 'redux/actions/app';
+import { doNotify } from 'lbry-redux';
 import SelectThumbnail from './view';
 
 const perform = dispatch => ({
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+  openModal: (modal, props) => dispatch(doNotify(modal, props)),
 });
 
-export default connect(null, perform)(SelectThumbnail);
+export default connect(
+  null,
+  perform
+)(SelectThumbnail);
diff --git a/src/renderer/component/selectThumbnail/view.jsx b/src/renderer/component/selectThumbnail/view.jsx
@@ -1,16 +1,18 @@
 // @flow
-import { STATUSES } from 'lbry-redux';
-import * as MODALS from 'constants/modal_types';
+import { STATUSES, MODALS } from 'lbry-redux';
 import React from 'react';
-import { FormField } from 'component/common/form';
+import { FormField, FormRow } from 'component/common/form';
 import FileSelector from 'component/common/file-selector';
+import Button from 'component/button';
 
 type Props = {
   thumbnail: ?string,
   formDisabled: boolean,
   uploadThumbnailStatus: string,
-  openModal: (string, {}) => void,
+  thumbnailPath: ?string,
+  openModal: ({ id: string }, {}) => void,
   updatePublishForm: ({}) => void,
+  resetThumbnailStatus: () => void,
 };
 
 class SelectThumbnail extends React.PureComponent<Props> {
@@ -21,65 +23,63 @@ class SelectThumbnail extends React.PureComponent<Props> {
       uploadThumbnailStatus: status,
       openModal,
       updatePublishForm,
+      thumbnailPath,
+      resetThumbnailStatus,
     } = 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 })}
+        {status === STATUSES.API_DOWN || status === STATUSES.MANUAL ? (
+          <FormRow padded>
+            <FormField
+              stretch
+              type="text"
+              name="content_thumbnail"
+              label={__('Url')}
+              placeholder="http://spee.ch/mylogo"
+              value={thumbnail}
+              disabled={formDisabled}
+              onChange={e => updatePublishForm({ thumbnail: e.target.value })}
             />
+          </FormRow>
+        ) : (
+          <div className="form-row--padded">
+            {(status === STATUSES.READY || status === STATUSES.COMPLETE) && (
+              <FileSelector
+                currentPath={thumbnailPath}
+                fileLabel={__('Choose Thumbnail')}
+                onFileChosen={path => openModal({ id: MODALS.CONFIRM_THUMBNAIL_UPLOAD }, { path })}
+              />
+            )}
+            {status === STATUSES.COMPLETE && (
+              <div>
+                <p>
+                  Upload complete. View it{' '}
+                  <Button button="link" href={thumbnail} label={__('here')} />.
+                </p>
+                <Button button="link" label={__('New thumbnail')} onClick={resetThumbnailStatus} />
+              </div>
+            )}
           </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 && (
-          <p>
-            <a
-              className="link"
+        <div className="card__actions">
+          {status === STATUSES.READY && (
+            <Button
+              button="link"
+              label={__('Or enter a URL manually')}
               onClick={() => updatePublishForm({ uploadThumbnailStatus: STATUSES.MANUAL })}
-            >
-              Enter URL Manually
-            </a>
-          </p>
-        )}
-
-        {status === STATUSES.MANUAL && (
-          <p>
-            <a
-              className="link"
+            />
+          )}
+          {status === STATUSES.MANUAL && (
+            <Button
+              button="link"
+              label={__('Use thumbnail upload tool')}
               onClick={() => updatePublishForm({ uploadThumbnailStatus: STATUSES.READY })}
-            >
-              Upload Thumbnail
-            </a>
-          </p>
-        )}
-
-        {status === STATUSES.IN_PROGRESS && <p>uploading...</p>}
+            />
+          )}
+        </div>
 
-        {status === STATUSES.COMPLETE && (
-          <div>
-            <p className="form-field__label">{__('Thumbnail')}</p>
-            <p>
-              Upload Complete<br />URL: {thumbnail}
-            </p>
-          </div>
-        )}
+        {status === STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
       </div>
     );
   }

diff --git a/src/renderer/constants/modal_types.js b/src/renderer/constants/modal_types.js
diff --git a/src/renderer/modal/modalConfirmThumbnailUpload/index.js b/src/renderer/modal/modalConfirmThumbnailUpload/index.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doCloseModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import { doUploadThumbnail, doUpdatePublishForm } from 'redux/actions/publish';
 import { selectPublishFormValues } from 'redux/selectors/publish';
 import ModalConfirmThumbnailUpload from './view';
@@ -10,9 +10,12 @@ const select = state => {
 };
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doCloseModal()),
+  closeModal: () => dispatch(doHideNotification()),
   upload: (path, nsfw = false) => dispatch(doUploadThumbnail(path, nsfw)),
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
 });
 
-export default connect(select, perform)(ModalConfirmThumbnailUpload);
+export default connect(
+  select,
+  perform
+)(ModalConfirmThumbnailUpload);
diff --git a/src/renderer/modal/modalConfirmThumbnailUpload/view.jsx b/src/renderer/modal/modalConfirmThumbnailUpload/view.jsx
@@ -13,8 +13,9 @@ type Props = {
 
 class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
   upload() {
-    const { upload, closeModal, path, nsfw } = this.props;
+    const { upload, updatePublishForm, closeModal, path, nsfw } = this.props;
     upload(path, nsfw);
+    updatePublishForm({ thumbnailPath: path });
     closeModal();
   }
 
@@ -30,7 +31,8 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
         onConfirmed={() => this.upload()}
         onAborted={closeModal}
       >
-        <p>{`Confirm upload: ${path}`}</p>
+        <p>{__('Are you sure you want to upload this thumbnail to spee.ch')}?</p>
+        <blockquote>{path}</blockquote>
         <FormField
           type="checkbox"
           name="content_is_mature"

diff --git a/src/renderer/modal/modalRouter/view.jsx b/src/renderer/modal/modalRouter/view.jsx
@@ -167,7 +167,7 @@ class ModalRouter extends React.PureComponent<Props> {
       case MODALS.CONFIRM_TRANSACTION:
         return <ModalConfirmTransaction {...notificationProps} />;
       case MODALS.CONFIRM_THUMBNAIL_UPLOAD:
-        return <ModalConfirmThumbnailUpload {...modalProps} />;
+        return <ModalConfirmThumbnailUpload {...notificationProps} />;
       default:
         return null;
     }

diff --git a/src/renderer/redux/actions/publish.js b/src/renderer/redux/actions/publish.js
@@ -6,7 +6,8 @@ import {
   doNotify,
   MODALS,
   selectMyChannelClaims,
-  STATUSES
+  STATUSES,
+  batchActions,
 } from 'lbry-redux';
 import { selectPendingPublishes } from 'redux/selectors/publish';
 import type {
@@ -33,8 +34,15 @@ export const doUpdatePublishForm = (publishFormValue: UpdatePublishFormData) =>
     data: { ...publishFormValue },
   });
 
-export const doResetThumbnailStatus = () => (dispatch: Dispatch): Action =>
-  fetch('https://spee.ch/api/channel/availability/@testing')
+export const doResetThumbnailStatus = () => (dispatch: Dispatch): PromiseAction => {
+  dispatch({
+    type: ACTIONS.UPDATE_PUBLISH_FORM,
+    data: {
+      thumbnailPath: '',
+    },
+  });
+
+  return fetch('https://spee.ch/api/channel/availability/@testing')
     .then(() =>
       dispatch({
         type: ACTIONS.UPDATE_PUBLISH_FORM,
@@ -55,6 +63,7 @@ export const doResetThumbnailStatus = () => (dispatch: Dispatch): Action =>
         },
       })
     );
+};
 
 export const doUploadThumbnail = (filePath: string, nsfw: boolean) => (dispatch: Dispatch) => {
   const thumbnail = fs.readFileSync(filePath);
@@ -109,9 +118,15 @@ export const doUploadThumbnail = (filePath: string, nsfw: boolean) => (dispatch:
     .catch(err => uploadError(err.message));
 };
 
-export const doPrepareEdit = (claim: any) => (dispatch: Dispatch) => {
-  const { name, amount, channel_name: channelName, value: { stream: { metadata } } } = claim;
-
+export const doPrepareEdit = (claim: any, uri: string) => (dispatch: Dispatch) => {
+  const {
+    name,
+    amount,
+    channel_name: channelName,
+    value: {
+      stream: { metadata },
+    },
+  } = claim;
 
   const {
     author,