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

126 lines
3.6 KiB
React
Raw Normal View History

// @flow
import React, { useState } from 'react';
import { FormField } from 'component/common/form';
import FileSelector from 'component/common/file-selector';
import Button from 'component/button';
import { SPEECH_URLS } from 'lbry-redux';
2019-07-02 19:54:42 +02:00
import uuid from 'uuid/v4';
const accept = '.png, .jpg, .jpeg, .gif';
const SOURCE_URL = 'url';
const SOURCE_UPLOAD = 'upload';
const SPEECH_READY = 'READY';
const SPEECH_UPLOADING = 'UPLOADING';
type Props = {
assetName: string,
currentValue: ?string,
onUpdate: string => void,
recommended: string,
};
function SelectAsset(props: Props) {
const { onUpdate, assetName, currentValue, recommended } = props;
const [assetSource, setAssetSource] = useState(SOURCE_URL);
const [pathSelected, setPathSelected] = useState('');
2019-11-15 19:52:21 +01:00
const [fileSelected, setFileSelected] = useState<any>(null);
const [uploadStatus, setUploadStatus] = useState(SPEECH_READY);
function doUploadAsset(file) {
const uploadError = (error = '') => {
console.log('error', error);
};
const setUrl = path => {
setUploadStatus(SPEECH_READY);
onUpdate(path);
setAssetSource(SOURCE_URL);
};
setUploadStatus(SPEECH_UPLOADING);
const data = new FormData();
2019-07-02 19:54:42 +02:00
const name = uuid();
data.append('name', name);
data.append('file', file);
return fetch(SPEECH_URLS.SPEECH_PUBLISH, {
method: 'POST',
body: data,
})
.then(response => response.json())
.then(json => (json.success ? setUrl(`${json.data.serveUrl}`) : uploadError(json.message)))
.catch(err => uploadError(err.message));
}
return (
<fieldset-section>
<fieldset-group className="fieldset-group--smushed">
<FormField
type="select"
name={assetName}
value={assetSource}
onChange={e => setAssetSource(e.target.value)}
label={__(assetName + ' source')}
>
<option key={'lmmnop'} value={'url'}>
URL
</option>
<option key={'lmmnopq'} value={'upload'}>
UPLOAD
</option>
</FormField>
{assetSource === SOURCE_UPLOAD && (
<>
{!pathSelected && (
<FileSelector
label={'File to upload'}
name={'assetSelector'}
onFileChosen={file => {
if (file.name) {
2019-11-15 19:52:21 +01:00
setPathSelected(file.path || file.name);
setFileSelected(file);
}
}}
accept={accept}
/>
)}
{pathSelected && (
<div>
{`...${pathSelected.slice(-18)}`} {uploadStatus}{' '}
<Button button={'primary'} onClick={() => doUploadAsset(fileSelected)}>
Upload
</Button>{' '}
<Button
button={'secondary'}
onClick={() => {
setPathSelected('');
2019-11-15 19:52:21 +01:00
setFileSelected(null);
}}
>
Clear
</Button>
</div>
)}
</>
)}
{assetSource === SOURCE_URL && (
<FormField
type={'text'}
name={'thumbnail'}
label={__(assetName + ' ' + recommended)}
2020-01-03 20:56:04 +01:00
placeholder={'https://example.com/image.png'}
disabled={false}
value={currentValue}
onChange={e => {
onUpdate(e.target.value);
}}
/>
)}
</fieldset-group>
</fieldset-section>
);
}
export default SelectAsset;