lbry-desktop/src/renderer/component/selectThumbnail/view.jsx

168 lines
5.3 KiB
React
Raw Normal View History

2018-04-02 18:39:00 +02:00
// @flow
import * as MODALS from 'constants/modal_types';
import { THUMBNAIL_STATUSES } from 'lbry-redux';
2018-07-18 17:46:21 +02:00
import * as React from 'react';
import { FormField } from 'component/common/form';
2018-04-02 18:39:00 +02:00
import FileSelector from 'component/common/file-selector';
2018-06-08 06:05:45 +02:00
import Button from 'component/button';
2018-07-17 19:43:43 +02:00
import Native from 'native';
2018-04-02 18:39:00 +02:00
type Props = {
thumbnail: ?string,
formDisabled: boolean,
uploadThumbnailStatus: string,
2018-06-08 06:05:45 +02:00
thumbnailPath: ?string,
openModal: ({ id: string }, {}) => void,
2018-04-02 18:39:00 +02:00
updatePublishForm: ({}) => void,
2018-06-08 06:05:45 +02:00
resetThumbnailStatus: () => void,
2018-04-02 18:39:00 +02:00
};
2018-07-17 19:43:43 +02:00
type State = {
2018-07-18 17:46:21 +02:00
thumbnailError: boolean,
thumbnailErrorImage: string,
2018-07-18 17:46:21 +02:00
};
2018-07-17 19:43:43 +02:00
class SelectThumbnail extends React.PureComponent<Props, State> {
constructor() {
super();
2018-07-18 17:46:21 +02:00
2018-07-17 19:43:43 +02:00
this.state = {
2018-07-18 17:46:21 +02:00
thumbnailError: false,
thumbnailErrorImage: 'no-thumbnail.png',
2018-07-17 19:43:43 +02:00
};
2018-07-18 17:46:21 +02:00
2018-07-17 19:43:43 +02:00
(this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this);
}
2018-07-18 17:46:21 +02:00
handleThumbnailChange(e: SyntheticInputEvent<*>) {
2018-07-17 19:43:43 +02:00
const { updatePublishForm } = this.props;
const newThumbnail = e.target.value.replace(' ', '');
2018-07-18 17:46:21 +02:00
2018-07-17 19:43:43 +02:00
updatePublishForm({ thumbnail: newThumbnail });
this.setState({ thumbnailError: false, thumbnailErrorImage: 'no-thumbnail.png' });
2018-07-17 19:43:43 +02:00
}
2018-07-18 17:46:21 +02:00
2018-04-02 18:39:00 +02:00
render() {
const {
thumbnail,
formDisabled,
uploadThumbnailStatus: status,
openModal,
updatePublishForm,
2018-06-08 06:05:45 +02:00
thumbnailPath,
resetThumbnailStatus,
2018-04-02 18:39:00 +02:00
} = this.props;
2018-10-13 17:49:47 +02:00
const filters = [
{
name: __('Thumbnail Image'),
extensions: ['png', 'jpg', 'jpeg', 'gif'],
},
];
const { thumbnailError, thumbnailErrorImage } = this.state;
2018-07-18 17:46:21 +02:00
const thumbnailSrc =
!thumbnail || thumbnailError ? Native.imagePath(thumbnailErrorImage) : thumbnail;
2018-07-18 17:46:21 +02:00
/*
Note:
We are using backgroundImage instead of an <img /> to zoom if the selected thumbnail isn't
the proper aspect ratio. This is to avoid blackbars on the side of images and inconsistent thumbnails
We still need to render the image to see if there is an error loading the url
*/
2018-04-02 18:39:00 +02:00
return (
2018-07-17 19:43:43 +02:00
<div className="card__content">
{status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
2018-07-17 19:43:43 +02:00
<div className="column">
<div
2018-10-12 00:57:00 +02:00
className="column__item thumbnail-preview"
style={{ backgroundImage: `url(${thumbnailSrc})` }}
>
<img
style={{ display: 'none' }}
src={thumbnailSrc}
alt={__('Thumbnail Preview')}
onError={() => {
this.setState({
thumbnailError: true,
thumbnailErrorImage:
thumbnail && thumbnail.length > 0 ? 'broken.png' : 'no-thumbnail.png',
});
}}
/>
</div>
2018-07-17 19:43:43 +02:00
<div className="column__item">
<FormField
2018-07-18 17:46:21 +02:00
className="input--thumbnail"
2018-07-17 19:43:43 +02:00
type="text"
name="content_thumbnail"
2018-07-18 17:46:21 +02:00
label="URL"
2018-10-06 00:19:31 +02:00
placeholder="https://spee.ch/mylogo"
2018-07-17 19:43:43 +02:00
value={thumbnail}
disabled={formDisabled}
onChange={this.handleThumbnailChange}
2018-07-18 17:46:21 +02:00
/>
2018-07-17 19:43:43 +02:00
<div className="card__actions">
<Button
button="link"
label={__('Use thumbnail upload tool')}
2018-07-18 17:46:21 +02:00
onClick={() =>
updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.READY })
}
2018-07-17 19:43:43 +02:00
/>
</div>
</div>
</div>
2018-06-08 06:05:45 +02:00
) : (
2018-07-18 17:46:21 +02:00
<React.Fragment>
2018-07-17 19:43:43 +02:00
{status === THUMBNAIL_STATUSES.READY && (
2018-06-08 06:05:45 +02:00
<FileSelector
currentPath={thumbnailPath}
fileLabel={__('Choose Thumbnail')}
2018-10-13 17:49:47 +02:00
filters={filters}
onFileChosen={path => openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, { path })}
2018-06-08 06:05:45 +02:00
/>
)}
{status === THUMBNAIL_STATUSES.COMPLETE && (
2018-07-17 19:43:43 +02:00
<div className="column column--space-between">
<img
className="column__item thumbnail-preview"
src={thumbnail}
2018-07-18 17:46:21 +02:00
alt={__('Thumbnail Preview')}
/>
2018-07-17 19:43:43 +02:00
<div className="column__item">
<p>
Upload complete.{' '}
2018-07-18 18:01:28 +02:00
<Button button="link" href={thumbnail} label={__('View it on spee.ch')} />.
2018-07-17 19:43:43 +02:00
</p>
2018-07-18 18:01:28 +02:00
<div className="card__actions">
<Button
button="link"
label={__('New thumbnail')}
onClick={resetThumbnailStatus}
/>
</div>
2018-07-17 19:43:43 +02:00
</div>
2018-07-18 17:46:21 +02:00
</div>
2018-06-08 06:05:45 +02:00
)}
2018-07-18 17:46:21 +02:00
</React.Fragment>
2018-04-02 18:39:00 +02:00
)}
2018-07-18 17:46:21 +02:00
{status === THUMBNAIL_STATUSES.READY && (
<div className="card__actions">
2018-06-08 06:05:45 +02:00
<Button
button="link"
label={__('Or enter a URL manually')}
onClick={() =>
updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.MANUAL })
}
2018-06-08 06:05:45 +02:00
/>
2018-07-18 17:46:21 +02:00
</div>
)}
2018-04-02 18:39:00 +02:00
{status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
2018-04-02 18:39:00 +02:00
</div>
);
}
}
export default SelectThumbnail;