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

107 lines
3.3 KiB
React
Raw Normal View History

// @flow
2019-09-27 20:56:15 +02:00
import * as ICONS from 'constants/icons';
2019-12-09 19:51:00 +01:00
import React from 'react';
import { regexInvalidURI } from 'lbry-redux';
import FileSelector from 'component/common/file-selector';
import Button from 'component/button';
2019-09-27 20:56:15 +02:00
import Card from 'component/common/card';
import Spinner from 'component/spinner';
type Props = {
name: ?string,
filePath: string | WebFile,
isStillEditing: boolean,
balance: number,
updatePublishForm: ({}) => void,
2019-09-27 20:56:15 +02:00
disabled: boolean,
publishing: boolean,
2019-12-09 19:51:00 +01:00
showToast: string => void,
};
function PublishFile(props: Props) {
const { name, balance, filePath, isStillEditing, updatePublishForm, disabled, publishing } = props;
let currentFile = '';
if (filePath) {
if (typeof filePath === 'string') {
currentFile = filePath;
} else {
currentFile = filePath.name;
}
}
function handleFileChange(file: WebFile) {
2019-12-09 19:51:00 +01:00
const { showToast } = props;
// if electron, we'll set filePath to the path string because SDK is handling publishing.
// if web, we set the filePath (dumb name) to the File() object
// File.path will be undefined from web due to browser security, so it will default to the File Object.
// @if TARGET='web'
// we only need to enforce file sizes on 'web'
const PUBLISH_SIZE_LIMIT: number = 512000000;
if (typeof file !== 'string') {
if (file && file.size && Number(file.size) > PUBLISH_SIZE_LIMIT) {
2019-12-09 19:51:00 +01:00
showToast(__('File uploads currently limited to 500MB. Download the app for unlimited publishing.'));
updatePublishForm({ filePath: '', name: '' });
return;
}
}
// @endif
2019-12-09 19:51:00 +01:00
const publishFormParams: { filePath: string | WebFile, name?: string } = {
filePath: file.path || file,
};
2019-11-01 18:27:01 +01:00
// Strip off extention and replace invalid characters
let fileName = file.name.substr(0, file.name.lastIndexOf('.')) || file.name;
let replaceChars = new RegExp(regexInvalidURI, 'gu');
let parsedFileName = fileName.replace(replaceChars, '-');
if (!isStillEditing) {
publishFormParams.name = parsedFileName;
}
updatePublishForm(publishFormParams);
}
let title;
if (publishing) {
title = (
<span>
{__('Publishing')}
<Spinner type={'small'} />
</span>
);
} else {
title = isStillEditing ? __('Edit') : __('Publish');
}
2019-12-09 19:51:00 +01:00
return (
2019-09-27 20:56:15 +02:00
<Card
2019-11-22 22:13:00 +01:00
actionIconPadding={false}
2019-09-27 20:56:15 +02:00
icon={ICONS.PUBLISH}
2019-10-01 06:53:33 +02:00
disabled={disabled || balance === 0}
title={title}
2019-10-03 23:40:54 +02:00
subtitle={
isStillEditing ? __('You are currently editing a claim.') : __('Publish something totally wacky and wild.')
}
2019-09-27 20:56:15 +02:00
actions={
<React.Fragment>
2019-12-09 19:51:00 +01:00
<FileSelector disabled={disabled} currentPath={currentFile} onFileChosen={handleFileChange} />
2019-09-27 20:56:15 +02:00
{!isStillEditing && (
<p className="help">
{__('For video content, use MP4s in H264/AAC format for best compatibility.')}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/how-to-publish" />.
</p>
)}
{!!isStillEditing && name && (
<p className="help">
{__("If you don't choose a file, the file from your existing claim %name% will be used", { name: name })}
</p>
)}
</React.Fragment>
}
/>
);
}
export default PublishFile;