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

cleanup thumbnail upload styling

Browse source
This commit is contained in:
Sean Yesmunt 2018-06-08 00:05:45 -04:00
parent 9957be18bf
commit 3e283f3c73
13 changed files with 119 additions and 136 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",
"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",

2
src/renderer/component/common/file-selector.jsx
View file

@ -10,7 +10,7 @@ type Props = {
currentPath: ?string,
onFileChosen: (string, string) => void,
fileLabel: ?string,
directoryLabel: ?string,
directoryLabel?: string,
};
class FileSelector extends React.PureComponent<Props> {

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

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

9
src/renderer/component/selectThumbnail/index.js
View file

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

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

@ -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>
)}
/>
)}
</div>
{status === STATUSES.IN_PROGRESS && <p>uploading...</p>}
{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>
);
}

23
src/renderer/constants/modal_types.js
View file

@ -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';

9
src/renderer/modal/modalConfirmThumbnailUpload/index.js
View file

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

6
src/renderer/modal/modalConfirmThumbnailUpload/view.jsx
View file

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

2
src/renderer/modal/modalRouter/view.jsx
View file

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

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

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

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

@ -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',

7
src/renderer/scss/_gui.scss
View file

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

4
yarn.lock
View file

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