add selectThumbnail component
This commit is contained in:
parent
e788d30f08
commit
05caa06aa7
3 changed files with 103 additions and 10 deletions
|
@ -7,6 +7,7 @@ import ChannelSection from 'component/selectChannel';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import type { PublishParams, UpdatePublishFormData } from 'redux/reducers/publish';
|
import type { PublishParams, UpdatePublishFormData } from 'redux/reducers/publish';
|
||||||
import FileSelector from 'component/common/file-selector';
|
import FileSelector from 'component/common/file-selector';
|
||||||
|
import SelectThumbnail from 'component/selectThumbnail';
|
||||||
import { COPYRIGHT, OTHER } from 'constants/licenses';
|
import { COPYRIGHT, OTHER } from 'constants/licenses';
|
||||||
import { CHANNEL_NEW, CHANNEL_ANONYMOUS, MINIMUM_PUBLISH_BID } from 'constants/claim';
|
import { CHANNEL_NEW, CHANNEL_ANONYMOUS, MINIMUM_PUBLISH_BID } from 'constants/claim';
|
||||||
import * as icons from 'constants/icons';
|
import * as icons from 'constants/icons';
|
||||||
|
@ -356,17 +357,12 @@ class PublishForm extends React.PureComponent<Props> {
|
||||||
/>
|
/>
|
||||||
</FormRow>
|
</FormRow>
|
||||||
<FormRow padded>
|
<FormRow padded>
|
||||||
<FormField
|
<SelectThumbnail
|
||||||
stretch
|
thumbnail={thumbnail}
|
||||||
type="text"
|
uploadThumbnailStatus={uploadThumbnailStatus}
|
||||||
name="content_thumbnail"
|
updatePublishForm={updatePublishForm}
|
||||||
label={__('Thumbnail')}
|
formDisabled={formDisabled}
|
||||||
placeholder="http://spee.ch/mylogo"
|
|
||||||
value={thumbnail}
|
|
||||||
disabled={formDisabled}
|
|
||||||
onChange={e => updatePublishForm({ thumbnail: e.target.value })}
|
|
||||||
/>
|
/>
|
||||||
<p>status: {uploadThumbnailStatus}</p>
|
|
||||||
</FormRow>
|
</FormRow>
|
||||||
<FormRow padded>
|
<FormRow padded>
|
||||||
<FormField
|
<FormField
|
||||||
|
|
9
src/renderer/component/selectThumbnail/index.js
Normal file
9
src/renderer/component/selectThumbnail/index.js
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { doOpenModal } from 'redux/actions/app';
|
||||||
|
import SelectThumbnail from './view';
|
||||||
|
|
||||||
|
const perform = dispatch => ({
|
||||||
|
openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(null, perform)(SelectThumbnail);
|
88
src/renderer/component/selectThumbnail/view.jsx
Normal file
88
src/renderer/component/selectThumbnail/view.jsx
Normal file
|
@ -0,0 +1,88 @@
|
||||||
|
// @flow
|
||||||
|
import * as modals from 'constants/modal_types';
|
||||||
|
import * as statuses from 'constants/thumbnail_upload_statuses';
|
||||||
|
import React from 'react';
|
||||||
|
import { FormField } from 'component/common/form';
|
||||||
|
import FileSelector from 'component/common/file-selector';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
thumbnail: ?string,
|
||||||
|
formDisabled: boolean,
|
||||||
|
uploadThumbnailStatus: string,
|
||||||
|
openModal: (string, any) => void,
|
||||||
|
updatePublishForm: ({}) => void,
|
||||||
|
};
|
||||||
|
|
||||||
|
class SelectThumbnail extends React.PureComponent<Props> {
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
thumbnail,
|
||||||
|
formDisabled,
|
||||||
|
uploadThumbnailStatus: status,
|
||||||
|
openModal,
|
||||||
|
updatePublishForm,
|
||||||
|
} = 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 })}
|
||||||
|
/>
|
||||||
|
</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 && (
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
className="link"
|
||||||
|
onClick={() => updatePublishForm({ uploadThumbnailStatus: statuses.MANUAL })}
|
||||||
|
>
|
||||||
|
Enter URL Manually
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{status === statuses.MANUAL && (
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
className="link"
|
||||||
|
onClick={() => updatePublishForm({ uploadThumbnailStatus: statuses.READY })}
|
||||||
|
>
|
||||||
|
Upload Thumbnail
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{status === statuses.IN_PROGRESS && <div>uploading...</div>}
|
||||||
|
|
||||||
|
{status === statuses.COMPLETE && (
|
||||||
|
<div>
|
||||||
|
<p className="form-field__label">{__('Thumbnail')}</p>
|
||||||
|
<p>
|
||||||
|
Upload Complete<br />URL: {thumbnail}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SelectThumbnail;
|
Loading…
Add table
Reference in a new issue