88 lines
2.7 KiB
JavaScript
88 lines
2.7 KiB
JavaScript
// @flow
|
|
import { STATUSES, MODALS } from 'lbry-redux';
|
|
import React from 'react';
|
|
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,
|
|
thumbnailPath: ?string,
|
|
openModal: ({ id: string }, {}) => void,
|
|
updatePublishForm: ({}) => void,
|
|
resetThumbnailStatus: () => void,
|
|
};
|
|
|
|
class SelectThumbnail extends React.PureComponent<Props> {
|
|
render() {
|
|
const {
|
|
thumbnail,
|
|
formDisabled,
|
|
uploadThumbnailStatus: status,
|
|
openModal,
|
|
updatePublishForm,
|
|
thumbnailPath,
|
|
resetThumbnailStatus,
|
|
} = this.props;
|
|
|
|
return (
|
|
<div>
|
|
{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>
|
|
)}
|
|
<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>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default SelectThumbnail;
|