lbry-desktop/ui/modal/modalPublishPreview/view.jsx

198 lines
6 KiB
React
Raw Normal View History

2020-08-13 21:06:43 +02:00
// @flow
import React from 'react';
import Button from 'component/button';
import { Form, FormField } from 'component/common/form';
2020-08-13 21:06:43 +02:00
import { Modal } from 'modal/modal';
import Card from 'component/common/card';
import Tag from 'component/tag';
import MarkdownPreview from 'component/common/markdown-preview';
import { COPYRIGHT, OTHER } from 'constants/licenses';
import LbcSymbol from 'component/common/lbc-symbol';
2020-08-13 21:06:43 +02:00
type Props = {
filePath: string | WebFile,
isMarkdownPost: boolean,
2020-08-13 21:06:43 +02:00
optimize: boolean,
title: ?string,
description: ?string,
channel: ?string,
bid: ?number,
uri: ?string,
contentIsFree: boolean,
fee: {
amount: string,
currency: string,
},
language: string,
licenseType: string,
otherLicenseDescription: ?string,
licenseUrl: ?string,
tags: Array<Tag>,
isVid: boolean,
ffmpegStatus: any,
previewResponse: PublishResponse,
publish: (?string, ?boolean) => void,
closeModal: () => void,
enablePublishPreview: boolean,
setEnablePublishPreview: (boolean) => void,
isStillEditing: boolean,
2020-08-13 21:06:43 +02:00
};
class ModalPublishPreview extends React.PureComponent<Props> {
onConfirmed() {
const { filePath, publish, closeModal } = this.props;
// Publish for real:
publish(this.resolveFilePathName(filePath), false);
closeModal();
}
resolveFilePathName(filePath: string | WebFile) {
if (!filePath) {
return '---';
}
2020-08-13 21:06:43 +02:00
if (typeof filePath === 'string') {
return filePath;
} else {
return filePath.name;
}
}
createRow(label: string, value: any) {
return (
<tr>
<td>{label}</td>
<td>{value}</td>
</tr>
);
}
togglePreviewEnabled() {
const { enablePublishPreview, setEnablePublishPreview } = this.props;
setEnablePublishPreview(!enablePublishPreview);
}
2020-08-13 21:06:43 +02:00
render() {
const {
filePath,
isMarkdownPost,
2020-08-13 21:06:43 +02:00
optimize,
title,
description,
channel,
bid,
uri,
contentIsFree,
fee,
language,
licenseType,
otherLicenseDescription,
licenseUrl,
tags,
isVid,
ffmpegStatus = {},
previewResponse,
closeModal,
enablePublishPreview,
setEnablePublishPreview,
isStillEditing,
2020-08-13 21:06:43 +02:00
} = this.props;
const modalTitle = isStillEditing ? __('Confirm Edit') : __('Confirm Upload');
const confirmBtnText = isStillEditing ? __('Save') : __('Upload');
2020-08-13 21:06:43 +02:00
const txFee = previewResponse ? previewResponse['total_fee'] : null;
const isOptimizeAvail = filePath && filePath !== '' && isVid && ffmpegStatus.available;
const descriptionValue = description ? (
<div className="media__info-text-preview">
<MarkdownPreview content={description} simpleLinks />
2020-08-13 21:06:43 +02:00
</div>
) : null;
const licenseValue =
licenseType === COPYRIGHT ? (
<p>© {otherLicenseDescription}</p>
) : licenseType === OTHER ? (
<p>
{otherLicenseDescription}
<br />
{licenseUrl}
</p>
) : (
<p>{licenseType}</p>
);
const tagsValue =
// Do nothing for onClick(). Setting to 'null' results in "View Tag" action -- we don't want to leave the modal.
tags.map((tag) => <Tag key={tag.name} title={tag.name} name={tag.name} type={'flow'} onClick={() => {}} />);
2020-08-13 21:06:43 +02:00
const depositValue = bid ? <LbcSymbol postfix={`${bid}`} size={14} /> : <p>---</p>;
let priceValue = __('Free');
if (!contentIsFree) {
if (fee.currency === 'LBC') {
priceValue = <LbcSymbol postfix={fee.amount} />;
} else {
priceValue = `${fee.amount} ${fee.currency}`;
}
}
2020-08-13 21:06:43 +02:00
return (
<Modal isOpen contentLabel={modalTitle} type="card" onAborted={closeModal}>
<Form onSubmit={() => this.onConfirmed()}>
<Card
title={modalTitle}
body={
<>
<div className="section">
<table className="table table--condensed table--publish-preview">
<tbody>
{!isMarkdownPost && this.createRow(__('File'), this.resolveFilePathName(filePath))}
2020-08-13 21:06:43 +02:00
{isOptimizeAvail && this.createRow(__('Transcode'), optimize ? __('Yes') : __('No'))}
{this.createRow(__('Title'), title)}
{this.createRow(__('Description'), descriptionValue)}
{this.createRow(__('Channel'), channel)}
{this.createRow(__('URL'), uri)}
{this.createRow(__('Deposit'), depositValue)}
{this.createRow(__('Price'), priceValue)}
2020-08-13 21:06:43 +02:00
{this.createRow(__('Language'), language)}
{this.createRow(__('License'), licenseValue)}
{this.createRow(__('Tags'), tagsValue)}
</tbody>
</table>
</div>
{txFee && (
<div className="section" aria-label={__('Estimated transaction fee:')}>
<b>{__('Est. transaction fee:')}</b>&nbsp;&nbsp;
<em>
<LbcSymbol postfix={txFee} />
</em>
2020-08-13 21:06:43 +02:00
</div>
)}
</>
}
actions={
<>
<div className="section__actions">
<Button autoFocus button="primary" label={confirmBtnText} onClick={() => this.onConfirmed()} />
2020-08-13 21:06:43 +02:00
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
<p className="help">{__('Once the transaction is sent, it cannot be reversed.')}</p>
<FormField
type="checkbox"
name="sync_toggle"
label={__('Skip preview and confirmation')}
checked={!enablePublishPreview}
onChange={() => setEnablePublishPreview(!enablePublishPreview)}
/>
2020-08-13 21:06:43 +02:00
</>
}
/>
</Form>
</Modal>
);
}
}
export default ModalPublishPreview;