improve thumbnail preview styling
This commit is contained in:
parent
45de83fdf3
commit
6df4032c90
4 changed files with 63 additions and 53 deletions
|
@ -9,7 +9,7 @@ type Props = {
|
||||||
type: string,
|
type: string,
|
||||||
currentPath: ?string,
|
currentPath: ?string,
|
||||||
onFileChosen: (string, string) => void,
|
onFileChosen: (string, string) => void,
|
||||||
fileLabel: ?string,
|
fileLabel?: string,
|
||||||
directoryLabel?: string,
|
directoryLabel?: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -56,7 +56,7 @@ class FileSelector extends React.PureComponent<Props> {
|
||||||
type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
|
type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FormRow verticallyCentered padded>
|
<FormRow verticallyCentered>
|
||||||
<Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
|
<Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
|
||||||
<input
|
<input
|
||||||
webkitdirectory="true"
|
webkitdirectory="true"
|
||||||
|
|
|
@ -73,7 +73,7 @@ class PublishForm extends React.PureComponent<Props> {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillMount() {
|
componentWillMount() {
|
||||||
const { isStillEditing, thumbnail } = this.props;
|
const { thumbnail } = this.props;
|
||||||
if (!thumbnail) {
|
if (!thumbnail) {
|
||||||
this.props.resetThumbnailStatus();
|
this.props.resetThumbnailStatus();
|
||||||
}
|
}
|
||||||
|
@ -356,14 +356,17 @@ class PublishForm extends React.PureComponent<Props> {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<FileSelector currentPath={filePath} onFileChosen={this.handleFileChange} />
|
<div className="card__content">
|
||||||
{!!isStillEditing && (
|
<FileSelector currentPath={filePath} onFileChosen={this.handleFileChange} />
|
||||||
<p className="card__content card__subtitle">
|
{!!isStillEditing &&
|
||||||
{__("If you don't choose a file, the file from your existing claim")}
|
name && (
|
||||||
{` "${name}" `}
|
<p className="card__content card__subtitle">
|
||||||
{__('will be used.')}
|
{__("If you don't choose a file, the file from your existing claim")}
|
||||||
</p>
|
{` "${name}" `}
|
||||||
)}
|
{__('will be used.')}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<div className={classnames({ 'card--disabled': formDisabled })}>
|
<div className={classnames({ 'card--disabled': formDisabled })}>
|
||||||
<section className="card card--section">
|
<section className="card card--section">
|
||||||
|
@ -400,10 +403,9 @@ class PublishForm extends React.PureComponent<Props> {
|
||||||
__('Enter a URL for your thumbnail.')
|
__('Enter a URL for your thumbnail.')
|
||||||
) : (
|
) : (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
{__(
|
{__('Upload your thumbnail (.png/.jpg/.jpeg/.gif) to')}{' '}
|
||||||
'Upload your thumbnail (.png/.jpg/.jpeg/.gif) to spee.ch, or enter the URL manually. Learn more about spee.ch '
|
<Button button="link" label={__('spee.ch')} href="https://spee.ch/about" />.{' '}
|
||||||
)}
|
{__('Recommended size: 800x450 (16:9)')}
|
||||||
<Button button="link" label={__('here')} href="https://spee.ch/about" />.
|
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
import { THUMBNAIL_STATUSES, MODALS } from 'lbry-redux';
|
import { THUMBNAIL_STATUSES, MODALS } from 'lbry-redux';
|
||||||
import React from 'react';
|
import * as React from 'react';
|
||||||
import { FormField, FormRow } from 'component/common/form';
|
import { FormField } from 'component/common/form';
|
||||||
import FileSelector from 'component/common/file-selector';
|
import FileSelector from 'component/common/file-selector';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import Native from 'native';
|
import Native from 'native';
|
||||||
|
@ -17,28 +17,28 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
thumbnailValid: boolean,
|
thumbnailError: boolean,
|
||||||
}
|
};
|
||||||
|
|
||||||
class SelectThumbnail extends React.PureComponent<Props, State> {
|
class SelectThumbnail extends React.PureComponent<Props, State> {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
thumbnailValid: false,
|
thumbnailError: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
(this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this);
|
(this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleThumbnailChange(e) {
|
handleThumbnailChange(e: SyntheticInputEvent<*>) {
|
||||||
const { updatePublishForm } = this.props;
|
const { updatePublishForm } = this.props;
|
||||||
const newThumbnail = e.target.value.replace(' ', '');
|
const newThumbnail = e.target.value.replace(' ', '');
|
||||||
|
|
||||||
updatePublishForm({ thumbnail: newThumbnail });
|
updatePublishForm({ thumbnail: newThumbnail });
|
||||||
this.setState({ thumbnailValid: true })
|
this.setState({ thumbnailError: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
thumbnail,
|
thumbnail,
|
||||||
|
@ -49,43 +49,46 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
|
||||||
thumbnailPath,
|
thumbnailPath,
|
||||||
resetThumbnailStatus,
|
resetThumbnailStatus,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
const { thumbnailError } = this.state;
|
||||||
const { thumbnailValid } = this.state;
|
const thumbnailSrc =
|
||||||
|
!thumbnail || thumbnailError ? Native.imagePath('thumbnail.png') : thumbnail;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card__content">
|
<div className="card__content">
|
||||||
{status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
|
{status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
|
||||||
<div className="column">
|
<div className="column">
|
||||||
|
<img
|
||||||
|
src={thumbnailSrc}
|
||||||
|
className="column__item thumbnail-preview"
|
||||||
|
alt={__('Thumbnail Preview')}
|
||||||
|
onError={() => {
|
||||||
|
this.setState({ thumbnailError: true });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<div className="column__item">
|
<div className="column__item">
|
||||||
<FormField
|
<FormField
|
||||||
stretch
|
className="input--thumbnail"
|
||||||
type="text"
|
type="text"
|
||||||
name="content_thumbnail"
|
name="content_thumbnail"
|
||||||
label={'URL'}
|
label="URL"
|
||||||
placeholder="http://spee.ch/mylogo"
|
placeholder="http://spee.ch/mylogo"
|
||||||
value={thumbnail}
|
value={thumbnail}
|
||||||
disabled={formDisabled}
|
disabled={formDisabled}
|
||||||
onChange={this.handleThumbnailChange}
|
onChange={this.handleThumbnailChange}
|
||||||
/>
|
/>
|
||||||
<div className="card__actions">
|
<div className="card__actions">
|
||||||
<Button
|
<Button
|
||||||
button="link"
|
button="link"
|
||||||
label={__('Use thumbnail upload tool')}
|
label={__('Use thumbnail upload tool')}
|
||||||
onClick={() => updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.READY })}
|
onClick={() =>
|
||||||
|
updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.READY })
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img
|
|
||||||
src={(!thumbnail || !thumbnailValid) ? Native.imagePath('thumbnail.png') : thumbnail}
|
|
||||||
className="column__item thumbnail-preview"
|
|
||||||
alt="Thumbnail Preview"
|
|
||||||
onError={() => {
|
|
||||||
this.setState({ thumbnailValid: false })
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="form-row--padded">
|
<React.Fragment>
|
||||||
{status === THUMBNAIL_STATUSES.READY && (
|
{status === THUMBNAIL_STATUSES.READY && (
|
||||||
<FileSelector
|
<FileSelector
|
||||||
currentPath={thumbnailPath}
|
currentPath={thumbnailPath}
|
||||||
|
@ -98,20 +101,25 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
|
||||||
<img
|
<img
|
||||||
className="column__item thumbnail-preview"
|
className="column__item thumbnail-preview"
|
||||||
src={thumbnail}
|
src={thumbnail}
|
||||||
/>
|
alt={__('Thumbnail Preview')}
|
||||||
|
/>
|
||||||
<div className="column__item">
|
<div className="column__item">
|
||||||
<p>
|
<p>
|
||||||
Upload complete.{' '}
|
Upload complete.{' '}
|
||||||
<Button button="link" href={thumbnail} label={__('View it on spee.ch')} />
|
<Button button="link" href={thumbnail} label={__('View it on spee.ch')} />
|
||||||
</p>
|
</p>
|
||||||
<Button button="link" label={__('New thumbnail')} onClick={resetThumbnailStatus} />
|
<Button
|
||||||
|
button="link"
|
||||||
|
label={__('New thumbnail')}
|
||||||
|
onClick={resetThumbnailStatus}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</React.Fragment>
|
||||||
)}
|
)}
|
||||||
<div className="card__actions">
|
{status === THUMBNAIL_STATUSES.READY && (
|
||||||
{status === THUMBNAIL_STATUSES.READY && (
|
<div className="card__actions">
|
||||||
<Button
|
<Button
|
||||||
button="link"
|
button="link"
|
||||||
label={__('Or enter a URL manually')}
|
label={__('Or enter a URL manually')}
|
||||||
|
@ -119,8 +127,8 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
|
||||||
updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.MANUAL })
|
updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.MANUAL })
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
{status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
|
{status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -67,8 +67,8 @@
|
||||||
width: 35px;
|
width: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.paginate-channel {
|
input.input--thumbnail {
|
||||||
width: 35px;
|
width: 370px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.form-field--auto-height {
|
&.form-field--auto-height {
|
||||||
|
|
Loading…
Reference in a new issue