lbry-desktop/ui/component/selectAsset/view.jsx

128 lines
3.7 KiB
React
Raw Normal View History

// @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';
2020-06-29 21:54:07 +02:00
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);
});
}
return (
<Card
title={title || __('Choose Image')}
actions={
<Form onSubmit={onDone}>
{error && <div className="error__text">{error}</div>}
{useUrl ? (
2020-06-29 21:54:07 +02:00
<FormField
autoFocus
2020-06-29 21:54:07 +02:00
type={'text'}
name={'thumbnail'}
label={`${assetName} ${recommended}`}
2020-06-29 21:54:07 +02:00
placeholder={'https://example.com/image.png'}
value={url}
2020-06-29 21:54:07 +02:00
onChange={e => {
setUrl(e.target.value);
2020-06-29 21:54:07 +02:00
onUpdate(e.target.value);
}}
/>
) : (
<FileSelector
2020-07-02 19:39:29 +02:00
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"
2020-07-02 19:39:29 +02:00
label={__('Use a URL')}
checked={useUrl}
onChange={() => setUseUrl(!useUrl)}
/>
</div>
</Form>
}
/>
);
}
export default SelectAsset;