LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Merge pull request #1586 from lbryio/edit-thumbnail

Browse source 
Thumbnail edit improvements
This commit is contained in:
Sean Yesmunt 2018-06-14 17:08:02 -04:00 • committed by GitHub
commit 194fecd7dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 46 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -48,7 +48,7 @@
"formik": "^0.10.4", "formik": "^0.10.4",
"hast-util-sanitize": "^1.1.2", "hast-util-sanitize": "^1.1.2",
"keytar": "^4.2.1", "keytar": "^4.2.1",
"lbry-redux": "lbryio/lbry-redux#121ba56f47fff05531e27a7c99d7d417e79cd3ee", "lbry-redux": "lbryio/lbry-redux#52ffd4c6bdf699d1d0bfebe905fb4cb3a95cf553",
"localforage": "^1.7.1", "localforage": "^1.7.1",
"mixpanel-browser": "^2.17.1", "mixpanel-browser": "^2.17.1",
"moment": "^2.22.0", "moment": "^2.22.0",

26
src/renderer/component/publishForm/view.jsx
View file

@ -1,6 +1,6 @@
// @flow // @flow
import * as React from 'react'; 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 { Form, FormField, FormRow, FormFieldPrice, Submit } from 'component/common/form';
import Button from 'component/button'; import Button from 'component/button';
import ChannelSection from 'component/selectChannel'; import ChannelSection from 'component/selectChannel';
@ -73,7 +73,10 @@ class PublishForm extends React.PureComponent<Props> {
} }
componentWillMount() { componentWillMount() {
this.props.resetThumbnailStatus(); const { isStillEditing, thumbnail } = this.props;
if (!isStillEditing || !thumbnail) {
this.props.resetThumbnailStatus();
}
} }
getNewUri(name: string, channel: string) { getNewUri(name: string, channel: string) {
@ -360,10 +363,16 @@ class PublishForm extends React.PureComponent<Props> {
<section className="card card--section"> <section className="card card--section">
<div className="card__title">{__('Thumbnail')}</div> <div className="card__title">{__('Thumbnail')}</div>
<div className="card__subtitle"> <div className="card__subtitle">
{__( {uploadThumbnailStatus === STATUSES.API_DOWN ? (
'Upload your thumbnail to spee.ch, or enter the url manually. Learn more about spee.ch ' __('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> </div>
<SelectThumbnail <SelectThumbnail
thumbnailPath={thumbnailPath} thumbnailPath={thumbnailPath}
@ -555,7 +564,12 @@ class PublishForm extends React.PureComponent<Props> {
</section> </section>
<div className="card__actions"> <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')} /> <Button button="alt" onClick={this.handleCancelPublish} label={__('Cancel')} />
</div> </div>
{!formDisabled && !formValid && this.renderFormErrors()} {!formDisabled && !formValid && this.renderFormErrors()}

20
src/renderer/component/selectThumbnail/view.jsx
View file

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

17
src/renderer/redux/actions/publish.js
View file

@ -5,7 +5,7 @@ import {
doNotify, doNotify,
MODALS, MODALS,
selectMyChannelClaims, selectMyChannelClaims,
STATUSES, THUMBNAIL_STATUSES,
batchActions, batchActions,
} from 'lbry-redux'; } from 'lbry-redux';
import { selectPendingPublishes } from 'redux/selectors/publish'; import { selectPendingPublishes } from 'redux/selectors/publish';
@ -22,8 +22,10 @@ type PromiseAction = Promise<Action>;
type Dispatch = (action: Action | PromiseAction | Array<Action>) => any; type Dispatch = (action: Action | PromiseAction | Array<Action>) => any;
type GetState = () => {}; type GetState = () => {};
export const doClearPublish = () => (dispatch: Dispatch): Action => export const doClearPublish = () => (dispatch: Dispatch): PromiseAction => {
dispatch({ type: ACTIONS.CLEAR_PUBLISH }); dispatch({ type: ACTIONS.CLEAR_PUBLISH });
return dispatch(doResetThumbnailStatus());
};
export const doUpdatePublishForm = (publishFormValue: UpdatePublishFormData) => ( export const doUpdatePublishForm = (publishFormValue: UpdatePublishFormData) => (
dispatch: Dispatch dispatch: Dispatch
@ -46,7 +48,7 @@ export const doResetThumbnailStatus = () => (dispatch: Dispatch): PromiseAction
dispatch({ dispatch({
type: ACTIONS.UPDATE_PUBLISH_FORM, type: ACTIONS.UPDATE_PUBLISH_FORM,
data: { data: {
uploadThumbnailStatus: STATUSES.READY, uploadThumbnailStatus: THUMBNAIL_STATUSES.READY,
thumbnail: '', thumbnail: '',
nsfw: false, nsfw: false,
}, },
@ -56,7 +58,7 @@ export const doResetThumbnailStatus = () => (dispatch: Dispatch): PromiseAction
dispatch({ dispatch({
type: ACTIONS.UPDATE_PUBLISH_FORM, type: ACTIONS.UPDATE_PUBLISH_FORM,
data: { data: {
uploadThumbnailStatus: STATUSES.API_DOWN, uploadThumbnailStatus: THUMBNAIL_STATUSES.API_DOWN,
thumbnail: '', thumbnail: '',
nsfw: false, nsfw: false,
}, },
@ -80,7 +82,7 @@ export const doUploadThumbnail = (filePath: string, nsfw: boolean) => (dispatch:
batchActions( batchActions(
{ {
type: ACTIONS.UPDATE_PUBLISH_FORM, type: ACTIONS.UPDATE_PUBLISH_FORM,
data: { uploadThumbnailStatus: STATUSES.API_DOWN }, data: { uploadThumbnailStatus: THUMBNAIL_STATUSES.API_DOWN },
}, },
dispatch(doNotify({ id: MODALS.ERROR, error })) dispatch(doNotify({ id: MODALS.ERROR, error }))
) )
@ -88,7 +90,7 @@ export const doUploadThumbnail = (filePath: string, nsfw: boolean) => (dispatch:
dispatch({ dispatch({
type: ACTIONS.UPDATE_PUBLISH_FORM, type: ACTIONS.UPDATE_PUBLISH_FORM,
data: { uploadThumbnailStatus: STATUSES.IN_PROGRESS }, data: { uploadThumbnailStatus: THUMBNAIL_STATUSES.IN_PROGRESS },
}); });
const data = new FormData(); const data = new FormData();
@ -108,7 +110,7 @@ export const doUploadThumbnail = (filePath: string, nsfw: boolean) => (dispatch:
? dispatch({ ? dispatch({
type: ACTIONS.UPDATE_PUBLISH_FORM, type: ACTIONS.UPDATE_PUBLISH_FORM,
data: { data: {
uploadThumbnailStatus: STATUSES.COMPLETE, uploadThumbnailStatus: THUMBNAIL_STATUSES.COMPLETE,
thumbnail: `${json.data.url}${fileExt}`, thumbnail: `${json.data.url}${fileExt}`,
}, },
}) })
@ -160,6 +162,7 @@ export const doPrepareEdit = (claim: any, uri: string) => (dispatch: Dispatch) =
thumbnail, thumbnail,
title, title,
uri, uri,
uploadThumbnailStatus: thumbnail ? THUMBNAIL_STATUSES.MANUAL : undefined,
}; };
dispatch({ type: ACTIONS.DO_PREPARE_EDIT, data: publishData }); dispatch({ type: ACTIONS.DO_PREPARE_EDIT, data: publishData });

4
src/renderer/redux/reducers/publish.js
View file

@ -2,7 +2,7 @@
import { handleActions } from 'util/redux-utils'; import { handleActions } from 'util/redux-utils';
import { buildURI } from 'lbry-redux'; import { buildURI } from 'lbry-redux';
import * as ACTIONS from 'constants/action_types'; 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'; import { CHANNEL_ANONYMOUS } from 'constants/claim';
type PublishState = { type PublishState = {
@ -102,7 +102,7 @@ const defaultState: PublishState = {
title: '', title: '',
thumbnail: '', thumbnail: '',
thumbnailPath: '', thumbnailPath: '',
uploadThumbnailStatus: STATUSES.API_DOWN, uploadThumbnailStatus: THUMBNAIL_STATUSES.API_DOWN,
description: '', description: '',
language: 'en', language: 'en',
nsfw: false, nsfw: false,

4
yarn.lock
View file

@ -5564,9 +5564,9 @@ lazy-val@^1.0.3:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc" 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" 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: dependencies:
proxy-polyfill "0.1.6" proxy-polyfill "0.1.6"
reselect "^3.0.0" reselect "^3.0.0"