129 lines
3.7 KiB
JavaScript
129 lines
3.7 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
import FileSelector from 'component/common/file-selector';
|
|
import { SPEECH_URLS } from 'lbry-redux';
|
|
import { FormField, Form } from 'component/common/form';
|
|
import Button from 'component/button';
|
|
import Card from 'component/common/card';
|
|
import { generateThumbnailName } from 'util/generate-thumbnail-name';
|
|
import usePersistedState from 'effects/use-persisted-state';
|
|
|
|
const accept = '.png, .jpg, .jpeg, .gif';
|
|
const SPEECH_READY = 'READY';
|
|
const SPEECH_UPLOADING = 'UPLOADING';
|
|
|
|
type Props = {
|
|
assetName: string,
|
|
currentValue: ?string,
|
|
onUpdate: string => void,
|
|
recommended: string,
|
|
title: string,
|
|
onDone?: () => void,
|
|
};
|
|
|
|
function SelectAsset(props: Props) {
|
|
const { onUpdate, onDone, assetName, recommended, title } = props;
|
|
const [pathSelected, setPathSelected] = React.useState('');
|
|
const [fileSelected, setFileSelected] = React.useState<any>(null);
|
|
const [uploadStatus, setUploadStatus] = React.useState(SPEECH_READY);
|
|
const [useUrl, setUseUrl] = usePersistedState('thumbnail-upload:mode', false);
|
|
const [url, setUrl] = React.useState('');
|
|
const [error, setError] = React.useState();
|
|
|
|
React.useEffect(() => {
|
|
if (pathSelected && fileSelected) {
|
|
doUploadAsset();
|
|
}
|
|
}, [pathSelected, fileSelected]);
|
|
|
|
function doUploadAsset() {
|
|
const uploadError = (error = '') => {
|
|
setError(error);
|
|
};
|
|
|
|
const onSuccess = thumbnailUrl => {
|
|
setUploadStatus(SPEECH_READY);
|
|
onUpdate(thumbnailUrl);
|
|
|
|
if (onDone) {
|
|
onDone();
|
|
}
|
|
};
|
|
|
|
setUploadStatus(SPEECH_UPLOADING);
|
|
|
|
const data = new FormData();
|
|
const name = generateThumbnailName();
|
|
data.append('name', name);
|
|
data.append('file', fileSelected);
|
|
|
|
return fetch(SPEECH_URLS.SPEECH_PUBLISH, {
|
|
method: 'POST',
|
|
body: data,
|
|
})
|
|
.then(response => response.json())
|
|
.then(json => (json.success ? onSuccess(`${json.data.serveUrl}`) : uploadError(json.message)))
|
|
.catch(err => {
|
|
uploadError(err.message);
|
|
setUploadStatus(SPEECH_READY);
|
|
});
|
|
}
|
|
|
|
return (
|
|
<Card
|
|
title={title || __('Choose image')}
|
|
actions={
|
|
<Form onSubmit={onDone}>
|
|
{error && <div className="error__text">{error}</div>}
|
|
{useUrl ? (
|
|
<FormField
|
|
autoFocus
|
|
type={'text'}
|
|
name={'thumbnail'}
|
|
label={`${assetName} ${recommended}`}
|
|
placeholder={'https://example.com/image.png'}
|
|
value={url}
|
|
onChange={e => {
|
|
setUrl(e.target.value);
|
|
onUpdate(e.target.value);
|
|
}}
|
|
/>
|
|
) : (
|
|
<FileSelector
|
|
autoFocus
|
|
disabled={uploadStatus === SPEECH_UPLOADING}
|
|
label={uploadStatus === SPEECH_UPLOADING ? __('Uploading...') : __('File to upload')}
|
|
name="assetSelector"
|
|
currentPath={pathSelected}
|
|
onFileChosen={file => {
|
|
if (file.name) {
|
|
setFileSelected(file);
|
|
// file.path is undefined in web but available in electron
|
|
setPathSelected(file.name || file.path);
|
|
}
|
|
}}
|
|
accept={accept}
|
|
/>
|
|
)}
|
|
|
|
<div className="section__actions">
|
|
{onDone && (
|
|
<Button button="primary" type="submit" label={__('Done')} disabled={uploadStatus === SPEECH_UPLOADING} />
|
|
)}
|
|
<FormField
|
|
name="toggle-upload"
|
|
type="checkbox"
|
|
label={__('Use a URL')}
|
|
checked={useUrl}
|
|
onChange={() => setUseUrl(!useUrl)}
|
|
/>
|
|
</div>
|
|
</Form>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default SelectAsset;
|