cleanup thumbnail upload styling

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",

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> {

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>

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);

src/renderer/component/selectThumbnail/view.jsx

@@ -1,16 +1,18 @@
 // @flow
-import { STATUSES } from 'lbry-redux';
+import { STATUSES, MODALS } from 'lbry-redux';
-import * as MODALS from 'constants/modal_types';
 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,66 +23,64 @@ class SelectThumbnail extends React.PureComponent<Props> {
       uploadThumbnailStatus: status,
       openModal,
       updatePublishForm,
+      thumbnailPath,
+      resetThumbnailStatus,
     } = this.props;
 
     return (
       <div>
-        {(status === STATUSES.READY || status === STATUSES.IN_PROGRESS) && (
+        {status === STATUSES.API_DOWN || status === STATUSES.MANUAL ? (
-          <div>
+          <FormRow padded>
-            <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')}
+              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.READY && (
-          <p>
-            <a
-              className="link"
-              onClick={() => updatePublishForm({ uploadThumbnailStatus: STATUSES.MANUAL })}
-            >
-              Enter URL Manually
-            </a>
-          </p>
-        )}
-
-        {status === STATUSES.MANUAL && (
-          <p>
-            <a
-              className="link"
-              onClick={() => updatePublishForm({ uploadThumbnailStatus: STATUSES.READY })}
-            >
-              Upload Thumbnail
-            </a>
-          </p>
-        )}
-
-        {status === STATUSES.IN_PROGRESS && <p>uploading...</p>}
-
             {status === STATUSES.COMPLETE && (
               <div>
-            <p className="form-field__label">{__('Thumbnail')}</p>
                 <p>
-              Upload Complete<br />URL: {thumbnail}
+                  Upload complete. View it{' '}
+                  <Button button="link" href={thumbnail} label={__('here')} />.
                 </p>
+                <Button button="link" label={__('New thumbnail')} onClick={resetThumbnailStatus} />
               </div>
             )}
           </div>
+        )}
+        <div className="card__actions">
+          {status === STATUSES.READY && (
+            <Button
+              button="link"
+              label={__('Or enter a URL manually')}
+              onClick={() => updatePublishForm({ uploadThumbnailStatus: STATUSES.MANUAL })}
+            />
+          )}
+          {status === STATUSES.MANUAL && (
+            <Button
+              button="link"
+              label={__('Use thumbnail upload tool')}
+              onClick={() => updatePublishForm({ uploadThumbnailStatus: STATUSES.READY })}
+            />
+          )}
+        </div>
+
+        {status === STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
+      </div>
     );
   }
 }

src/renderer/constants/modal_types.js

@@ -1,23 +0,0 @@
-export const CONFIRM_FILE_REMOVE = 'confirm_file_remove';
-export const INCOMPATIBLE_DAEMON = 'incompatible_daemon';
-export const FILE_TIMEOUT = 'file_timeout';
-export const DOWNLOADING = 'downloading';
-export const AUTO_UPDATE_DOWNLOADED = 'auto_update_downloaded';
-export const AUTO_UPDATE_CONFIRM = 'auto_update_confirm';
-export const ERROR = 'error';
-export const INSUFFICIENT_CREDITS = 'insufficient_credits';
-export const UPGRADE = 'upgrade';
-export const WELCOME = 'welcome';
-export const EMAIL_COLLECTION = 'email_collection';
-export const PHONE_COLLECTION = 'phone_collection';
-export const FIRST_REWARD = 'first_reward';
-export const AUTHENTICATION_FAILURE = 'auth_failure';
-export const TRANSACTION_FAILED = 'transaction_failed';
-export const REWARD_APPROVAL_REQUIRED = 'reward_approval_required';
-export const AFFIRM_PURCHASE = 'affirm_purchase';
-export const CONFIRM_CLAIM_REVOKE = 'confirm_claim_revoke';
-export const FIRST_SUBSCRIPTION = 'firstSubscription';
-export const SEND_TIP = 'send_tip';
-export const PUBLISH = 'publish';
-export const SEARCH = 'search';
-export const CONFIRM_THUMBNAIL_UPLOAD = 'confirmThumbnailUpload';

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);

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"

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;
     }

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 =>
+export const doResetThumbnailStatus = () => (dispatch: Dispatch): PromiseAction => {
-  fetch('https://spee.ch/api/channel/availability/@testing')
+  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) => {
+export const doPrepareEdit = (claim: any, uri: string) => (dispatch: Dispatch) => {
-  const { name, amount, channel_name: channelName, value: { stream: { metadata } } } = claim;
+  const {
-
+    name,
+    amount,
+    channel_name: channelName,
+    value: {
+      stream: { metadata },
+    },
+  } = claim;
 
   const {
     author,

src/renderer/redux/reducers/publish.js

@@ -15,6 +15,7 @@ type PublishState = {
   },
   title: string,
   thumbnail: string,
+  thumbnailPath: string,
   uploadThumbnailStatus: string,
   description: string,
   language: string,
@@ -41,6 +42,7 @@ export type UpdatePublishFormData = {
   title?: string,
   thumbnail?: string,
   uploadThumbnailStatus?: string,
+  thumbnailPath?: string,
   description?: string,
   language?: string,
   tosAccepted?: boolean,
@@ -99,6 +101,7 @@ const defaultState: PublishState = {
   },
   title: '',
   thumbnail: '',
+  thumbnailPath: '',
   uploadThumbnailStatus: STATUSES.API_DOWN,
   description: '',
   language: 'en',

src/renderer/scss/_gui.scss

@@ -360,10 +360,3 @@ p {
     padding-right: $spacing-vertical * 2/3;
   }
 }
-
-a.link {
-  cursor: pointer;
-  &:hover {
-    text-decoration: underline;
-  }
-}

yarn.lock

@@ -5647,9 +5647,9 @@ lazy-val@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"
 
-lbry-redux@lbryio/lbry-redux#a32e8835c238c0ba1081fe6979763c5b0fade76c:
+lbry-redux@lbryio/lbry-redux#7759bc6e8c482bed173d1f10aee6f6f9a439a15a:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/a32e8835c238c0ba1081fe6979763c5b0fade76c"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/7759bc6e8c482bed173d1f10aee6f6f9a439a15a"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"