bring in lbc/file details for everyone

ui/component/fileDescription/index.js

@@ -1,5 +1,10 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimForUri, makeSelectMetadataForUri, makeSelectTagsForUri } from 'lbry-redux';
+import {
+  makeSelectClaimForUri,
+  makeSelectMetadataForUri,
+  makeSelectTagsForUri,
+  makeSelectPendingAmountByUri,
+} from 'lbry-redux';
 import { selectUser } from 'redux/selectors/user';
 import FileDescription from './view';
 
@@ -8,6 +13,7 @@ const select = (state, props) => ({
   metadata: makeSelectMetadataForUri(props.uri)(state),
   user: selectUser(state),
   tags: makeSelectTagsForUri(props.uri)(state),
+  pendingAmount: makeSelectPendingAmountByUri(props.uri)(state),
 });
 
 export default connect(select, null)(FileDescription);

ui/component/fileDescription/view.jsx

@@ -1,9 +1,13 @@
 // @flow
 import React from 'react';
 import classnames from 'classnames';
+import { formatCredits } from 'lbry-redux';
 import MarkdownPreview from 'component/common/markdown-preview';
 import ClaimTags from 'component/claimTags';
 import Button from 'component/button';
+import LbcSymbol from 'component/common/lbc-symbol';
+import FileDetails from 'component/fileDetails';
+import FileValues from 'component/fileValues';
 
 type Props = {
   uri: string,
@@ -11,23 +15,15 @@ type Props = {
   metadata: StreamMetadata,
   user: ?any,
   tags: any,
+  pendingAmount: number,
 };
 
 function FileDescription(props: Props) {
-  const { uri, claim, metadata, tags } = props;
+  const { uri, claim, metadata, tags, pendingAmount } = props;
   const [expanded, setExpanded] = React.useState(false);
-  const [hasOverflow, setHasOverflow] = React.useState(false);
-  const [hasCalculatedOverflow, setHasCalculatedOverflow] = React.useState(false);
-  const descriptionRef = React.useRef();
-
-  React.useEffect(() => {
-    if (descriptionRef && descriptionRef.current) {
-      const element = descriptionRef.current;
-      const isOverflowing = element.scrollHeight > element.clientHeight;
-      setHasOverflow(isOverflowing);
-      setHasCalculatedOverflow(true);
-    }
-  }, [descriptionRef]);
+  const [showCreditDetails, setShowCreditDetails] = React.useState(false);
+  const amount = parseFloat(claim.amount) + parseFloat(pendingAmount || claim.meta.support_amount);
+  const formattedAmount = formatCredits(amount, 2, true);
 
   if (!claim || !metadata) {
     return <span className="empty">{__('Empty claim or metadata info.')}</span>;
@@ -40,23 +36,32 @@ function FileDescription(props: Props) {
   return (
     <div>
       <div
-        ref={descriptionRef}
         className={classnames({
           'media__info-text--contracted': !expanded,
           'media__info-text--expanded': expanded,
-          'media__info-text--fade': hasOverflow && !expanded,
+          'media__info-text--fade': !expanded,
         })}
       >
         <MarkdownPreview className="markdown-preview--description" content={description} simpleLinks />
         <ClaimTags uri={uri} type="large" />
+        <FileDetails uri={uri} />
       </div>
-      {hasCalculatedOverflow && hasOverflow && (
-        <div className="media__info-expand">
-          {expanded ? (
-            <Button button="link" label={__('Less')} onClick={() => setExpanded(!expanded)} />
-          ) : (
-            <Button button="link" label={__('More')} onClick={() => setExpanded(!expanded)} />
-          )}
+
+      <div className="section__actions--between">
+        {expanded ? (
+          <Button button="link" label={__('Less')} onClick={() => setExpanded(!expanded)} />
+        ) : (
+          <Button button="link" label={__('More')} onClick={() => setExpanded(!expanded)} />
+        )}
+
+        <Button button="link" onClick={() => setShowCreditDetails(!showCreditDetails)}>
+          <LbcSymbol postfix={showCreditDetails ? __('Hide') : formattedAmount} />
+        </Button>
+      </div>
+
+      {showCreditDetails && (
+        <div className="section">
+          <FileValues uri={uri} />
         </div>
       )}
     </div>

ui/component/fileDetails/view.jsx

@@ -1,8 +1,7 @@
 // @flow
-import React, { Fragment, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import Button from 'component/button';
 import path from 'path';
-import Card from 'component/common/card';
 import { formatBytes } from 'util/format-bytes';
 
 type Props = {
@@ -39,67 +38,58 @@ class FileDetails extends PureComponent<Props> {
     }
 
     return (
-      <Fragment>
-        <Card
-          title={__('File details')}
-          defaultExpand={false}
-          actions={
-            <table className="table table--condensed table--fixed table--file-details">
-              <tbody>
-                <tr>
-                  <td> {__('Content Type')}</td>
-                  <td>{mediaType}</td>
-                </tr>
-                {fileSize && (
-                  <tr>
-                    <td> {__('File Size')}</td>
-                    <td>{fileSize}</td>
-                  </tr>
-                )}
+      <table className="table table--condensed table--fixed table--file-details">
+        <tbody>
+          <tr>
+            <td> {__('Content Type')}</td>
+            <td>{mediaType}</td>
+          </tr>
+          {fileSize && (
+            <tr>
+              <td> {__('File Size')}</td>
+              <td>{fileSize}</td>
+            </tr>
+          )}
 
-                <tr>
-                  <td> {__('URL')}</td>
-                  <td>{claim.canonical_url}</td>
-                </tr>
+          <tr>
+            <td> {__('URL')}</td>
+            <td>{claim.canonical_url}</td>
+          </tr>
 
-                <tr>
-                  <td> {__('Claim ID')}</td>
-                  <td>{claim.claim_id}</td>
-                </tr>
+          <tr>
+            <td> {__('Claim ID')}</td>
+            <td>{claim.claim_id}</td>
+          </tr>
 
-                {languages && (
-                  <tr>
-                    <td>{__('Languages')}</td>
-                    <td>{languages.join(' ')}</td>
-                  </tr>
-                )}
-                <tr>
-                  <td>{__('License')}</td>
-                  <td>{license}</td>
-                </tr>
-                {downloadPath && (
-                  <tr>
-                    <td>{__('Downloaded to')}</td>
-                    <td>
-                      {/* {downloadPath.replace(/(.{10})/g, '$1\u200b')} */}
-                      <Button
-                        button="link"
-                        className="button--download-link"
-                        onClick={() => {
-                          if (downloadPath) {
-                            openFolder(downloadPath);
-                          }
-                        }}
-                        label={downloadNote || downloadPath.replace(/(.{10})/g, '$1\u200b')}
-                      />
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          }
-        />
-      </Fragment>
+          {languages && (
+            <tr>
+              <td>{__('Languages')}</td>
+              <td>{languages.join(' ')}</td>
+            </tr>
+          )}
+          <tr>
+            <td>{__('License')}</td>
+            <td>{license}</td>
+          </tr>
+          {downloadPath && (
+            <tr>
+              <td>{__('Downloaded to')}</td>
+              <td>
+                <Button
+                  button="link"
+                  className="button--download-link"
+                  onClick={() => {
+                    if (downloadPath) {
+                      openFolder(downloadPath);
+                    }
+                  }}
+                  label={downloadNote || downloadPath.replace(/(.{10})/g, '$1\u200b')}
+                />
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
     );
   }
 }

ui/component/fileSubtitle/index.js

@@ -1,9 +1,2 @@
-import { connect } from 'react-redux';
-import { makeSelectClaimForUri, makeSelectPendingAmountByUri } from 'lbry-redux';
 import FileSubtitle from './view';
-
-const select = (state, props) => ({
-  claim: makeSelectClaimForUri(props.uri)(state),
-  pendingAmount: makeSelectPendingAmountByUri(props.uri)(state),
-});
-export default connect(select)(FileSubtitle);
+export default FileSubtitle;

ui/component/fileSubtitle/view.jsx

@@ -1,36 +1,20 @@
 // @flow
-import { SIMPLE_SITE } from 'config';
 import React from 'react';
 import DateTime from 'component/dateTime';
 import FileViewCount from 'component/fileViewCount';
-import CreditAmount from 'component/common/credit-amount';
 import FileActions from 'component/fileActions';
 
 type Props = {
   uri: string,
-  claim: StreamClaim,
-  pendingAmount: string,
 };
 
 function FileSubtitle(props: Props) {
-  const { uri, claim, pendingAmount } = props;
+  const { uri } = props;
 
   return (
     <div className="media__subtitle--between">
       <div className="file__viewdate">
-        <span>
-          <DateTime uri={uri} show={DateTime.SHOW_DATE} />
-          {!SIMPLE_SITE && (
-            <>
-              {' • ' /* this is bad, but it's quick! */}
-              <CreditAmount
-                amount={parseFloat(claim.amount) + parseFloat(pendingAmount || claim.meta.support_amount)}
-                precision={2}
-              />
-            </>
-          )}
-        </span>
-
+        <DateTime uri={uri} show={DateTime.SHOW_DATE} />
         <FileViewCount uri={uri} />
       </div>
 

ui/component/fileValues/view.jsx

@@ -1,13 +1,12 @@
 // @flow
-import React, { Fragment, PureComponent } from 'react';
 import * as ICONS from 'constants/icons';
 import * as MODALS from 'constants/modal_types';
+import * as PAGES from 'constants/pages';
+import React, { PureComponent } from 'react';
 import Button from 'component/button';
 import Spinner from 'component/spinner';
-import * as PAGES from 'constants/pages';
 import HelpLink from 'component/common/help-link';
 import CreditAmount from 'component/common/credit-amount';
-import Card from 'component/common/card';
 
 type Props = {
   uri: string,
@@ -32,86 +31,76 @@ class FileValues extends PureComponent<Props> {
     const purchaseReceipt = claim && claim.purchase_receipt;
 
     return (
-      <Fragment>
-        <Card
-          title={__('Credit details')}
-          defaultExpand={false}
-          actions={
-            <table className="table table--condensed table--fixed table--lbc-details">
-              <tbody>
-                {purchaseReceipt && (
-                  <tr>
-                    <td> {__('Purchase Amount')}</td>
-                    <td>
-                      <Button
-                        button="link"
-                        href={`https://explorer.lbry.com/tx/${purchaseReceipt.txid}`}
-                        label={<CreditAmount amount={Number(purchaseReceipt.amount)} precision={2} />}
-                      />
-                    </td>
-                  </tr>
-                )}
-                <tr>
-                  <td> {__('Original Publish Amount')}</td>
-                  <td>
-                    {claim && claim.amount ? <CreditAmount amount={Number(claim.amount)} precision={2} /> : <p>...</p>}
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    {__('Supports and Tips')}
-                    <HelpLink href="https://lbry.com/faq/tipping" />
-                  </td>
-                  <td>
-                    {claimIsMine && !pendingAmount && Boolean(supportsAmount) && (
-                      <>
-                        <Button
-                          button="link"
-                          className="expandable__button"
-                          icon={ICONS.UNLOCK}
-                          label={<CreditAmount amount={Number(supportsAmount)} precision={2} />}
-                          onClick={() => {
-                            openModal(MODALS.LIQUIDATE_SUPPORTS, { uri });
-                          }}
-                        />{' '}
-                      </>
-                    )}
-                    {(!claimIsMine || (claimIsMine && !pendingAmount && supportsAmount === 0)) && (
-                      <CreditAmount amount={Number(supportsAmount)} precision={2} />
-                    )}
+      <table className="table table--condensed table--fixed table--lbc-details">
+        <tbody>
+          {purchaseReceipt && (
+            <tr>
+              <td> {__('Purchase Amount')}</td>
+              <td>
+                <Button
+                  button="link"
+                  href={`https://explorer.lbry.com/tx/${purchaseReceipt.txid}`}
+                  label={<CreditAmount amount={Number(purchaseReceipt.amount)} precision={2} />}
+                />
+              </td>
+            </tr>
+          )}
+          <tr>
+            <td> {__('Original Publish Amount')}</td>
+            <td>{claim && claim.amount ? <CreditAmount amount={Number(claim.amount)} precision={2} /> : <p>...</p>}</td>
+          </tr>
+          <tr>
+            <td>
+              {__('Supports and Tips')}
+              <HelpLink href="https://lbry.com/faq/tipping" />
+            </td>
+            <td>
+              {claimIsMine && !pendingAmount && Boolean(supportsAmount) && (
+                <>
+                  <Button
+                    button="link"
+                    className="expandable__button"
+                    icon={ICONS.UNLOCK}
+                    label={<CreditAmount amount={Number(supportsAmount)} precision={2} />}
+                    onClick={() => {
+                      openModal(MODALS.LIQUIDATE_SUPPORTS, { uri });
+                    }}
+                  />{' '}
+                </>
+              )}
+              {(!claimIsMine || (claimIsMine && !pendingAmount && supportsAmount === 0)) && (
+                <CreditAmount amount={Number(supportsAmount)} precision={2} />
+              )}
 
-                    {claimIsMine && pendingAmount && <Spinner type={'small'} />}
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <div>
-                      {__('Total Staked Amount')}
-                      <HelpLink href="https://lbry.com/faq/tipping" />
-                    </div>
-                  </td>
-                  <td>
-                    <CreditAmount amount={Number(claim.meta.effective_amount)} precision={2} />
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    {__('Community Choice?')}
-                    <HelpLink href="https://lbry.com/faq/naming" />
-                  </td>
-                  <td>
-                    <Button
-                      button="link"
-                      label={claim.meta.is_controlling ? __('Yes') : __('No')}
-                      navigate={`/$/${PAGES.TOP}?name=${claim.name}`}
-                    />
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          }
-        />
-      </Fragment>
+              {claimIsMine && pendingAmount && <Spinner type={'small'} />}
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div>
+                {__('Total Staked Amount')}
+                <HelpLink href="https://lbry.com/faq/tipping" />
+              </div>
+            </td>
+            <td>
+              <CreditAmount amount={Number(claim.meta.effective_amount)} precision={2} />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {__('Community Choice?')}
+              <HelpLink href="https://lbry.com/faq/naming" />
+            </td>
+            <td>
+              <Button
+                button="link"
+                label={claim.meta.is_controlling ? __('Yes') : __('No')}
+                navigate={`/$/${PAGES.TOP}?name=${claim.name}`}
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
     );
   }
 }

ui/page/file/view.jsx

@@ -7,8 +7,6 @@ import FileTitle from 'component/fileTitle';
 import FileRenderInitiator from 'component/fileRenderInitiator';
 import FileRenderInline from 'component/fileRenderInline';
 import FileRenderDownload from 'component/fileRenderDownload';
-import FileDetails from 'component/fileDetails';
-import FileValues from 'component/fileValues';
 import RecommendedContent from 'component/recommendedContent';
 import CommentsList from 'component/commentsList';
 
@@ -135,8 +133,6 @@ function FilePage(props: Props) {
     <Page className="file-page" filePage>
       <div className={classnames('section card-stack', `file-page__${renderMode}`)}>
         {renderFilePageLayout()}
-        <FileValues uri={uri} />
-        <FileDetails uri={uri} />
 
         <CommentsList uri={uri} linkedComment={linkedComment} />
       </div>

ui/scss/component/_card.scss

@@ -197,6 +197,7 @@
 .card__title-actions {
   align-self: flex-start;
   padding: var(--spacing-m);
+  padding-right: var(--spacing-l);
 
   @media (max-width: $breakpoint-small) {
     padding: 0;

ui/scss/component/_media.scss

@@ -101,7 +101,7 @@
 
 .media__info-text--contracted {
   margin-top: var(--spacing-m);
-  max-height: 5rem;
+  max-height: 2rem;
   overflow: hidden;
 }
 

ui/scss/component/_table.scss

@@ -180,6 +180,7 @@ th {
 }
 .table--file-details {
   @extend .table--details;
+  margin-top: var(--spacing-m);
 
   td:nth-of-type(1) {
     width: 25%;