Add "Publish Preview" modal

ui/constants/modal_types.js

@@ -22,6 +22,7 @@ export const SEND_TIP = 'send_tip';
 export const CONFIRM_SEND_TIP = 'confirm_send_tip';
 export const SOCIAL_SHARE = 'social_share';
 export const PUBLISH = 'publish';
+export const PUBLISH_PREVIEW = 'publish_preview';
 export const SEARCH = 'search';
 export const CONFIRM_TRANSACTION = 'confirm_transaction';
 export const CONFIRM_THUMBNAIL_UPLOAD = 'confirm_thumbnail_upload';

ui/modal/modalPublishPreview/index.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import ModalPublishPreview from './view';
+import { makeSelectPublishFormValue, selectPublishFormValues } from 'lbry-redux';
+import { selectFfmpegStatus } from 'redux/selectors/settings';
+import { doPublishDesktop } from 'redux/actions/publish';
+
+const select = state => ({
+  ...selectPublishFormValues(state),
+  isVid: makeSelectPublishFormValue('fileVid')(state),
+  ffmpegStatus: selectFfmpegStatus(state),
+});
+
+const perform = dispatch => ({
+  publish: (filePath, preview) => dispatch(doPublishDesktop(filePath, preview)),
+  closeModal: () => dispatch(doHideModal()),
+});
+
+export default connect(select, perform)(ModalPublishPreview);

ui/modal/modalPublishPreview/view.jsx

@@ -0,0 +1,157 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import { Form } from 'component/common/form';
+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';
+
+type Props = {
+  filePath: string | WebFile,
+  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,
+};
+
+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 (typeof filePath === 'string') {
+      return filePath;
+    } else {
+      return filePath.name;
+    }
+  }
+
+  createRow(label: string, value: any) {
+    return (
+      <tr>
+        <td>{label}</td>
+        <td>{value}</td>
+      </tr>
+    );
+  }
+
+  render() {
+    const {
+      filePath,
+      optimize,
+      title,
+      description,
+      channel,
+      bid,
+      uri,
+      contentIsFree,
+      fee,
+      language,
+      licenseType,
+      otherLicenseDescription,
+      licenseUrl,
+      tags,
+      isVid,
+      ffmpegStatus = {},
+      previewResponse,
+      closeModal,
+    } = this.props;
+
+    const modalTitle = __('Confirm Publish');
+    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} />
+      </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={() => {}} />);
+
+    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>
+                      {this.createRow(__('File'), this.resolveFilePathName(filePath))}
+                      {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'), bid ? `${bid} LBC` : '---')}
+                      {this.createRow(__('Price'), contentIsFree ? __('Free') : `${fee.amount} ${fee.currency}`)}
+                      {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>{txFee}</em> LBC
+                  </div>
+                )}
+              </>
+            }
+            actions={
+              <>
+                <div className="section__actions">
+                  <Button autoFocus button="primary" label={__('Publish')} onClick={() => this.onConfirmed()} />
+                  <Button button="link" label={__('Cancel')} onClick={closeModal} />
+                </div>
+                <p className="help">{__('Once the transaction is sent, it cannot be reversed.')}</p>
+              </>
+            }
+          />
+        </Form>
+      </Modal>
+    );
+  }
+}
+
+export default ModalPublishPreview;

ui/modal/modalRouter/view.jsx

@@ -20,6 +20,7 @@ import ModalRemoveBlocked from 'modal/modalRemoveBlocked';
 import ModalSocialShare from 'modal/modalSocialShare';
 import ModalSendTip from 'modal/modalSendTip';
 import ModalPublish from 'modal/modalPublish';
+import ModalPublishPreview from 'modal/modalPublishPreview';
 import ModalOpenExternalResource from 'modal/modalOpenExternalResource';
 import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
 import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
@@ -99,6 +100,8 @@ function ModalRouter(props: Props) {
       return <ModalSocialShare {...modalProps} />;
     case MODALS.PUBLISH:
       return <ModalPublish {...modalProps} />;
+    case MODALS.PUBLISH_PREVIEW:
+      return <ModalPublishPreview {...modalProps} />;
     case MODALS.CONFIRM_EXTERNAL_RESOURCE:
       return <ModalOpenExternalResource {...modalProps} />;
     case MODALS.CONFIRM_TRANSACTION:

ui/scss/component/_media.scss

@@ -119,6 +119,14 @@
   margin-top: var(--spacing-s);
 }
 
+.media__info-text-preview {
+  @extend .media__info-text;
+
+  max-height: 5rem;
+  overflow: auto;
+  padding: var(--spacing-xxs) 0; // for scrollbar to auto-hide
+}
+
 .media__actions {
   display: flex;
   flex-wrap: wrap;

ui/scss/component/_table.scss

@@ -209,3 +209,29 @@ th {
     margin-left: var(--spacing-m);
   }
 }
+
+.table--publish-preview {
+  line-height: 1.1;
+  table-layout: fixed;
+
+  th,
+  td {
+    padding: 0.4rem 1rem;
+  }
+
+  // Column-1: "Label"
+  td:nth-of-type(1) {
+    font-weight: bold;
+    // The "value" is more important on smaller screens, so we truncate the "label".
+    width: 30%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Column-2: "Value"
+  td:nth-of-type(2) {
+    white-space: normal;
+    max-width: 70%;
+  }
+}