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

276 lines
8 KiB
React
Raw Normal View History

2020-08-13 21:06:43 +02:00
// @flow
import React from 'react';
import moment from 'moment';
2020-08-13 21:06:43 +02:00
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';
import ChannelThumbnail from 'component/channelThumbnail';
import * as ICONS from 'constants/icons';
import Icon from 'component/common/icon';
2021-03-26 23:03:16 +01:00
import { NO_FILE } from 'redux/actions/publish';
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,
releaseTimeEdited: ?number,
2020-08-13 21:06:43 +02:00
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,
myChannels: ?Array<ChannelClaim>,
2021-03-30 01:05:18 +02:00
publishSuccess: boolean,
publishing: boolean,
isLivestreamClaim: boolean,
remoteFile: string,
2020-08-13 21:06:43 +02:00
};
2021-03-30 01:05:18 +02:00
// class ModalPublishPreview extends React.PureComponent<Props> {
const ModalPublishPreview = (props: Props) => {
const {
filePath,
isMarkdownPost,
optimize,
title,
description,
channel,
bid,
uri,
contentIsFree,
fee,
language,
releaseTimeEdited,
2021-03-30 01:05:18 +02:00
licenseType,
otherLicenseDescription,
licenseUrl,
tags,
isVid,
ffmpegStatus = {},
previewResponse,
enablePublishPreview,
setEnablePublishPreview,
isStillEditing,
myChannels,
publishSuccess,
publishing,
publish,
closeModal,
isLivestreamClaim,
remoteFile,
2021-03-30 01:05:18 +02:00
} = props;
2021-03-30 01:05:18 +02:00
const livestream =
(uri && isLivestreamClaim) ||
2021-03-30 01:05:18 +02:00
// $FlowFixMe
(previewResponse.outputs[0] && previewResponse.outputs[0].value && !previewResponse.outputs[0].value.source);
2021-03-30 01:05:18 +02:00
// leave the confirm modal up if we're not going straight to upload/reflecting
2021-03-30 04:04:14 +02:00
// @if TARGET='web'
2021-03-30 01:05:18 +02:00
React.useEffect(() => {
2021-03-30 04:04:14 +02:00
if (publishing && !livestream) {
2021-03-30 01:05:18 +02:00
closeModal();
} else if (publishSuccess) {
closeModal();
}
}, [publishSuccess, publishing, livestream]);
2021-03-30 04:04:14 +02:00
// @endif
2021-03-30 01:05:18 +02:00
function onConfirmed() {
2020-08-13 21:06:43 +02:00
// Publish for real:
2021-03-30 01:05:18 +02:00
publish(getFilePathName(filePath), false);
2021-03-30 04:04:14 +02:00
// @if TARGET='app'
closeModal();
// @endif
2020-08-13 21:06:43 +02:00
}
2021-03-30 01:05:18 +02:00
function getFilePathName(filePath: string | WebFile) {
if (!filePath) {
2021-03-26 23:03:16 +01:00
return NO_FILE;
}
2020-08-13 21:06:43 +02:00
if (typeof filePath === 'string') {
return filePath;
} else {
return filePath.name;
}
}
2021-03-30 01:05:18 +02:00
function createRow(label: string, value: any) {
2020-08-13 21:06:43 +02:00
return (
<tr>
<td>{label}</td>
<td>{value}</td>
</tr>
);
}
2021-03-30 01:05:18 +02:00
const txFee = previewResponse ? previewResponse['total_fee'] : null;
// $FlowFixMe add outputs[0] etc to PublishResponse type
const isOptimizeAvail = filePath && filePath !== '' && isVid && ffmpegStatus.available;
let modalTitle;
if (isStillEditing) {
if (livestream) {
modalTitle = __('Confirm Update');
} else {
modalTitle = __('Confirm Edit');
}
2021-03-30 01:05:18 +02:00
} else if (livestream) {
modalTitle = __('Create Livestream');
} else {
modalTitle = __('Confirm Upload');
}
2021-03-30 01:05:18 +02:00
let confirmBtnText;
if (!publishing) {
if (isStillEditing) {
confirmBtnText = __('Save');
} else if (livestream) {
confirmBtnText = __('Create');
} else {
confirmBtnText = __('Upload');
}
2021-03-30 01:05:18 +02:00
} else {
if (isStillEditing) {
confirmBtnText = __('Saving');
} else if (livestream) {
confirmBtnText = __('Creating');
} else {
confirmBtnText = __('Uploading');
}
2021-03-30 01:05:18 +02:00
}
2021-03-30 01:05:18 +02:00
const descriptionValue = description ? (
<div className="media__info-text-preview">
<MarkdownPreview content={description} simpleLinks />
</div>
) : null;
const licenseValue =
licenseType === COPYRIGHT ? (
<p>© {otherLicenseDescription}</p>
) : licenseType === OTHER ? (
<p>
{otherLicenseDescription}
<br />
{licenseUrl}
</p>
) : (
<p>{licenseType}</p>
2020-08-13 21:06:43 +02:00
);
2021-03-30 01:05:18 +02:00
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={() => {}} />);
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
}
2021-03-30 01:05:18 +02:00
const channelValue = (channel) => {
const channelClaim = myChannels && myChannels.find((x) => x.name === channel);
return channel ? (
<div className="channel-value">
{channelClaim && <ChannelThumbnail uri={channelClaim.permanent_url} />}
{channel}
</div>
) : (
<div className="channel-value">
<Icon sectionIcon icon={ICONS.ANONYMOUS} />
<i>{__('Anonymous')}</i>
</div>
);
};
const releaseTimeStr = (time) => {
return time ? moment(new Date(time * 1000)).format('MMMM Do, YYYY - h:mm a') : '';
};
2021-03-30 01:05:18 +02:00
return (
<Modal isOpen contentLabel={modalTitle} type="card" onAborted={closeModal}>
<Form onSubmit={onConfirmed}>
<Card
title={modalTitle}
body={
<>
<div className="section">
<table className="table table--condensed table--publish-preview">
<tbody>
{!livestream && !isMarkdownPost && createRow(__('File'), getFilePathName(filePath))}
{livestream && remoteFile && createRow(__('Replay'), __('Remote File Selected'))}
2021-03-30 01:05:18 +02:00
{isOptimizeAvail && createRow(__('Transcode'), optimize ? __('Yes') : __('No'))}
{createRow(__('Title'), title)}
{createRow(__('Description'), descriptionValue)}
{createRow(__('Channel'), channelValue(channel))}
{createRow(__('URL'), uri)}
{createRow(__('Deposit'), depositValue)}
{createRow(__('Price'), priceValue)}
{createRow(__('Language'), language)}
{releaseTimeEdited && createRow(__('Release Date'), releaseTimeStr(releaseTimeEdited))}
2021-03-30 01:05:18 +02:00
{createRow(__('License'), licenseValue)}
{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>
</div>
)}
</>
}
actions={
<>
<div className="section__actions">
<Button autoFocus button="primary" disabled={publishing} label={confirmBtnText} onClick={onConfirmed} />
<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)}
/>
</>
}
/>
</Form>
</Modal>
);
};
2020-08-13 21:06:43 +02:00
export default ModalPublishPreview;