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

202 lines
6.5 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
/*
On submit, this component calls publish, which dispatches doPublishDesktop.
doPublishDesktop calls lbry-redux Lbry publish method using lbry-redux publish state as params.
Publish simply instructs the SDK to find the file path on disk and publish it with the provided metadata.
On web, the Lbry publish method call is overridden in platform/web/api-setup, using a function in platform/web/publish.
File upload is carried out in the background by that function.
*/
import React, { useEffect, Fragment } from 'react';
import { CHANNEL_NEW, CHANNEL_ANONYMOUS } from 'constants/claim';
2019-07-24 20:21:34 +02:00
import { buildURI, isURIValid, isNameValid, THUMBNAIL_STATUSES } from 'lbry-redux';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
import ChannelSection from 'component/selectChannel';
import classnames from 'classnames';
import TagsSelect from 'component/tagsSelect';
import PublishText from 'component/publishText';
import PublishPrice from 'component/publishPrice';
import PublishFile from 'component/publishFile';
import PublishName from 'component/publishName';
import PublishAdditionalOptions from 'component/publishAdditionalOptions';
import PublishFormErrors from 'component/publishFormErrors';
import SelectThumbnail from 'component/selectThumbnail';
2019-09-27 20:56:15 +02:00
import Card from 'component/common/card';
2018-03-26 23:32:43 +02:00
type Props = {
2019-10-28 19:53:59 +01:00
disabled: boolean,
tags: Array<Tag>,
2019-11-01 20:17:06 +01:00
publish: (?string) => void,
2018-03-26 23:32:43 +02:00
filePath: ?string,
bid: ?number,
editingURI: ?string,
title: ?string,
thumbnail: ?string,
uploadThumbnailStatus: ?string,
2018-06-08 06:05:45 +02:00
thumbnailPath: ?string,
2018-03-26 23:32:43 +02:00
description: ?string,
language: string,
nsfw: boolean,
contentIsFree: boolean,
fee: {
amount: string,
2018-03-26 23:32:43 +02:00
currency: string,
},
channel: string,
name: ?string,
nameError: ?string,
isResolvingUri: boolean,
winningBidForClaimUri: number,
2019-04-24 16:02:08 +02:00
myClaimForUri: ?StreamClaim,
2018-03-26 23:32:43 +02:00
licenseType: string,
otherLicenseDescription: ?string,
licenseUrl: ?string,
uri: ?string,
publishing: boolean,
balance: number,
2018-06-12 07:11:17 +02:00
isStillEditing: boolean,
2018-03-26 23:32:43 +02:00
clearPublish: () => void,
resolveUri: string => void,
scrollToTop: () => void,
2018-10-13 17:49:47 +02:00
prepareEdit: (claim: any, uri: string) => void,
resetThumbnailStatus: () => void,
2018-09-25 02:17:08 +02:00
amountNeededForTakeover: ?number,
// Add back type
updatePublishForm: any => void,
2018-03-26 23:32:43 +02:00
};
function PublishForm(props: Props) {
const {
thumbnail,
name,
channel,
editingURI,
resolveUri,
title,
bid,
uploadThumbnailStatus,
resetThumbnailStatus,
updatePublishForm,
filePath,
publishing,
clearPublish,
isStillEditing,
tags,
publish,
2019-10-28 19:53:59 +01:00
disabled = false,
} = props;
const formDisabled = (!filePath && !editingURI) || publishing;
// If they are editing, they don't need a new file chosen
2019-07-24 20:21:34 +02:00
const formValidLessFile =
name && isNameValid(name, false) && title && bid && !(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
const formValid = editingURI && !filePath ? isStillEditing && formValidLessFile : formValidLessFile;
let submitLabel;
if (isStillEditing) {
submitLabel = !publishing ? __('Edit') : __('Editing...');
} else {
submitLabel = !publishing ? __('Publish') : __('Publishing...');
2018-03-26 23:32:43 +02:00
}
useEffect(() => {
2018-07-17 19:43:43 +02:00
if (!thumbnail) {
resetThumbnailStatus();
2018-06-13 06:19:39 +02:00
}
}, [thumbnail, resetThumbnailStatus]);
// Every time the channel or name changes, resolve the uris to find winning bid amounts
useEffect(() => {
// If they are midway through a channel creation, treat it as anonymous until it completes
const channelName = channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : channel;
2018-03-26 23:32:43 +02:00
2018-09-25 02:17:08 +02:00
// We are only going to store the full uri, but we need to resolve the uri with and without the channel name
let uri;
try {
2019-11-01 18:27:01 +01:00
uri = name && buildURI({ streamName: name, channelName });
} catch (e) {}
if (channelName && name) {
// resolve without the channel name so we know the winning bid for it
2019-07-02 06:49:21 +02:00
try {
const uriLessChannel = buildURI({ streamName: name });
2019-07-02 06:49:21 +02:00
resolveUri(uriLessChannel);
} catch (e) {}
}
2019-07-03 16:49:28 +02:00
const isValid = isURIValid(uri);
if (uri && isValid) {
resolveUri(uri);
updatePublishForm({ uri });
}
}, [name, channel, resolveUri, updatePublishForm]);
return (
<Fragment>
2019-10-28 19:53:59 +01:00
<PublishFile disabled={disabled || publishing} />
<div className={classnames({ 'card--disabled': formDisabled })}>
<PublishText disabled={formDisabled} />
2019-09-27 20:56:15 +02:00
<Card actions={<SelectThumbnail />} />
<TagsSelect
2019-09-27 20:56:15 +02:00
suggestMature
disableAutoFocus
2019-11-22 22:13:00 +01:00
hideHeader
label={__('Selected Tags')}
2019-09-27 20:56:15 +02:00
empty={__('No tags added')}
2019-11-22 22:13:00 +01:00
placeholder={__('Add a tag...')}
2019-10-18 20:01:53 +02:00
onSelect={newTags => {
const validatedTags = [];
newTags.forEach(newTag => {
if (!tags.some(tag => tag.name === newTag.name)) {
validatedTags.push(newTag);
}
});
updatePublishForm({ tags: [...tags, ...validatedTags] });
2019-09-27 20:56:15 +02:00
}}
onRemove={clickedTag => {
const newTags = tags.slice().filter(tag => tag.name !== clickedTag.name);
updatePublishForm({ tags: newTags });
}}
tagsChosen={tags}
/>
<Card
actions={
<React.Fragment>
<ChannelSection channel={channel} onChannelChange={channel => updatePublishForm({ channel })} />
<p className="help">
{__('This is a username or handle that your content can be found under.')}{' '}
{__('Ex. @Marvel, @TheBeatles, @BooksByJoe')}
</p>
</React.Fragment>
}
/>
<PublishName disabled={formDisabled} />
<PublishPrice disabled={formDisabled} />
<PublishAdditionalOptions disabled={formDisabled} />
2019-07-21 23:31:22 +02:00
<section>
{!formDisabled && !formValid && <PublishFormErrors />}
<div className="card__actions">
<Button
button="primary"
2019-11-01 18:27:01 +01:00
onClick={() => publish(filePath)}
label={submitLabel}
disabled={formDisabled || !formValid || uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS}
/>
<Button button="link" onClick={clearPublish} label={__('Cancel')} />
</div>
<p className="help">
{__('By continuing, you accept the')}{' '}
<Button button="link" href="https://www.lbry.com/termsofservice" label={__('LBRY Terms of Service')} />.
</p>
</section>
</div>
</Fragment>
);
}
export default PublishForm;