Merge pull request #1586 from lbryio/edit-thumbnail

Thumbnail edit improvements
2018-06-14 17:08:02 -04:00 · 2018-06-14 17:08:02 -04:00 · 194fecd7dd
commit 194fecd7dd
parent ae93a0d95d e09c214697
6 changed files with 46 additions and 27 deletions
--- 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#121ba56f47fff05531e27a7c99d7d417e79cd3ee",
+    "lbry-redux": "lbryio/lbry-redux#52ffd4c6bdf699d1d0bfebe905fb4cb3a95cf553",
    "localforage": "^1.7.1",
    "mixpanel-browser": "^2.17.1",
    "moment": "^2.22.0",
--- a/src/renderer/component/publishForm/view.jsx
+++ b/src/renderer/component/publishForm/view.jsx
@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { isNameValid, buildURI, regexInvalidURI } from 'lbry-redux';
+import { isNameValid, buildURI, regexInvalidURI, STATUSES } from 'lbry-redux';
 import { Form, FormField, FormRow, FormFieldPrice, Submit } from 'component/common/form';
 import Button from 'component/button';
 import ChannelSection from 'component/selectChannel';
@ -73,7 +73,10 @@ class PublishForm extends React.PureComponent<Props> {
  }

  componentWillMount() {
-    this.props.resetThumbnailStatus();
+    const { isStillEditing, thumbnail } = this.props;
+    if (!isStillEditing || !thumbnail) {
+      this.props.resetThumbnailStatus();
+    }
  }

  getNewUri(name: string, channel: string) {
@ -360,10 +363,16 @@ class PublishForm extends React.PureComponent<Props> {
          <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 '
+              {uploadThumbnailStatus === STATUSES.API_DOWN ? (
+                __('Enter a url for your thumbnail.')
+              ) : (
+                <React.Fragment>
+                  {__(
+                    '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" />.
+                </React.Fragment>
              )}
-              <Button button="link" label={__('here')} href="https://spee.ch/about" />.
            </div>
            <SelectThumbnail
              thumbnailPath={thumbnailPath}
@ -555,7 +564,12 @@ class PublishForm extends React.PureComponent<Props> {
          </section>

          <div className="card__actions">
-            <Submit label={submitLabel} disabled={formDisabled || !formValid || publishing} />
+            <Submit
+              label={submitLabel}
+              disabled={
+                formDisabled || !formValid || uploadThumbnailStatus === STATUSES.IN_PROGRESS
+              }
+            />
            <Button button="alt" onClick={this.handleCancelPublish} label={__('Cancel')} />
          </div>
          {!formDisabled && !formValid && this.renderFormErrors()}
--- a/src/renderer/component/selectThumbnail/view.jsx
+++ b/src/renderer/component/selectThumbnail/view.jsx
@ -1,5 +1,5 @@
 // @flow
-import { STATUSES, MODALS } from 'lbry-redux';
+import { THUMBNAIL_STATUSES, MODALS } from 'lbry-redux';
 import React from 'react';
 import { FormField, FormRow } from 'component/common/form';
 import FileSelector from 'component/common/file-selector';
@ -29,7 +29,7 @@ class SelectThumbnail extends React.PureComponent<Props> {

    return (
      <div>
-        {status === STATUSES.API_DOWN || status === STATUSES.MANUAL ? (
+        {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
          <FormRow padded>
            <FormField
              stretch
@ -44,14 +44,14 @@ class SelectThumbnail extends React.PureComponent<Props> {
          </FormRow>
        ) : (
          <div className="form-row--padded">
-            {(status === STATUSES.READY || status === STATUSES.COMPLETE) && (
+            {(status === THUMBNAIL_STATUSES.READY || status === THUMBNAIL_STATUSES.COMPLETE) && (
              <FileSelector
                currentPath={thumbnailPath}
                fileLabel={__('Choose Thumbnail')}
                onFileChosen={path => openModal({ id: MODALS.CONFIRM_THUMBNAIL_UPLOAD }, { path })}
              />
            )}
-            {status === STATUSES.COMPLETE && (
+            {status === THUMBNAIL_STATUSES.COMPLETE && (
              <div>
                <p>
                  Upload complete. View it{' '}
@ -63,23 +63,25 @@ class SelectThumbnail extends React.PureComponent<Props> {
          </div>
        )}
        <div className="card__actions">
-          {status === STATUSES.READY && (
+          {status === THUMBNAIL_STATUSES.READY && (
            <Button
              button="link"
              label={__('Or enter a URL manually')}
-              onClick={() => updatePublishForm({ uploadThumbnailStatus: STATUSES.MANUAL })}
+              onClick={() =>
+                updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.MANUAL })
+              }
            />
          )}
-          {status === STATUSES.MANUAL && (
+          {status === THUMBNAIL_STATUSES.MANUAL && (
            <Button
              button="link"
              label={__('Use thumbnail upload tool')}
-              onClick={() => updatePublishForm({ uploadThumbnailStatus: STATUSES.READY })}
+              onClick={() => updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.READY })}
            />
          )}
        </div>

-        {status === STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
+        {status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
      </div>
    );
  }
--- a/src/renderer/redux/actions/publish.js
+++ b/src/renderer/redux/actions/publish.js
@ -5,7 +5,7 @@ import {
  doNotify,
  MODALS,
  selectMyChannelClaims,
-  STATUSES,
+  THUMBNAIL_STATUSES,
  batchActions,
 } from 'lbry-redux';
 import { selectPendingPublishes } from 'redux/selectors/publish';
@ -22,8 +22,10 @@ type PromiseAction = Promise<Action>;
 type Dispatch = (action: Action | PromiseAction | Array<Action>) => any;
 type GetState = () => {};

-export const doClearPublish = () => (dispatch: Dispatch): Action =>
+export const doClearPublish = () => (dispatch: Dispatch): PromiseAction => {
  dispatch({ type: ACTIONS.CLEAR_PUBLISH });
+  return dispatch(doResetThumbnailStatus());
+};

 export const doUpdatePublishForm = (publishFormValue: UpdatePublishFormData) => (
  dispatch: Dispatch
@ -46,7 +48,7 @@ export const doResetThumbnailStatus = () => (dispatch: Dispatch): PromiseAction
      dispatch({
        type: ACTIONS.UPDATE_PUBLISH_FORM,
        data: {
-          uploadThumbnailStatus: STATUSES.READY,
+          uploadThumbnailStatus: THUMBNAIL_STATUSES.READY,
          thumbnail: '',
          nsfw: false,
        },
@ -56,7 +58,7 @@ export const doResetThumbnailStatus = () => (dispatch: Dispatch): PromiseAction
      dispatch({
        type: ACTIONS.UPDATE_PUBLISH_FORM,
        data: {
-          uploadThumbnailStatus: STATUSES.API_DOWN,
+          uploadThumbnailStatus: THUMBNAIL_STATUSES.API_DOWN,
          thumbnail: '',
          nsfw: false,
        },
@ -80,7 +82,7 @@ export const doUploadThumbnail = (filePath: string, nsfw: boolean) => (dispatch:
      batchActions(
        {
          type: ACTIONS.UPDATE_PUBLISH_FORM,
-          data: { uploadThumbnailStatus: STATUSES.API_DOWN },
+          data: { uploadThumbnailStatus: THUMBNAIL_STATUSES.API_DOWN },
        },
        dispatch(doNotify({ id: MODALS.ERROR, error }))
      )
@ -88,7 +90,7 @@ export const doUploadThumbnail = (filePath: string, nsfw: boolean) => (dispatch:

  dispatch({
    type: ACTIONS.UPDATE_PUBLISH_FORM,
-    data: { uploadThumbnailStatus: STATUSES.IN_PROGRESS },
+    data: { uploadThumbnailStatus: THUMBNAIL_STATUSES.IN_PROGRESS },
  });

  const data = new FormData();
@ -108,7 +110,7 @@ export const doUploadThumbnail = (filePath: string, nsfw: boolean) => (dispatch:
          ? dispatch({
              type: ACTIONS.UPDATE_PUBLISH_FORM,
              data: {
-                uploadThumbnailStatus: STATUSES.COMPLETE,
+                uploadThumbnailStatus: THUMBNAIL_STATUSES.COMPLETE,
                thumbnail: `${json.data.url}${fileExt}`,
              },
            })
@ -160,6 +162,7 @@ export const doPrepareEdit = (claim: any, uri: string) => (dispatch: Dispatch) =
    thumbnail,
    title,
    uri,
+    uploadThumbnailStatus: thumbnail ? THUMBNAIL_STATUSES.MANUAL : undefined,
  };

  dispatch({ type: ACTIONS.DO_PREPARE_EDIT, data: publishData });
--- a/src/renderer/redux/reducers/publish.js
+++ b/src/renderer/redux/reducers/publish.js
@ -2,7 +2,7 @@
 import { handleActions } from 'util/redux-utils';
 import { buildURI } from 'lbry-redux';
 import * as ACTIONS from 'constants/action_types';
-import * as STATUSES from 'constants/thumbnail_upload_statuses';
+import * as THUMBNAIL_STATUSES from 'constants/thumbnail_upload_statuses';
 import { CHANNEL_ANONYMOUS } from 'constants/claim';

 type PublishState = {
@ -102,7 +102,7 @@ const defaultState: PublishState = {
  title: '',
  thumbnail: '',
  thumbnailPath: '',
-  uploadThumbnailStatus: STATUSES.API_DOWN,
+  uploadThumbnailStatus: THUMBNAIL_STATUSES.API_DOWN,
  description: '',
  language: 'en',
  nsfw: false,
--- a/yarn.lock
+++ b/yarn.lock
@ -5564,9 +5564,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#121ba56f47fff05531e27a7c99d7d417e79cd3ee:
+lbry-redux@lbryio/lbry-redux#52ffd4c6bdf699d1d0bfebe905fb4cb3a95cf553:
  version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/121ba56f47fff05531e27a7c99d7d417e79cd3ee"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/52ffd4c6bdf699d1d0bfebe905fb4cb3a95cf553"
  dependencies:
    proxy-polyfill "0.1.6"
    reselect "^3.0.0"