stake amounts on file pages

ui/component/fileSubtitle/index.js

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

ui/component/fileSubtitle/view.jsx

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

ui/component/layoutWrapperFile/view.jsx

@@ -2,16 +2,15 @@
 import * as React from 'react';
 import { normalizeURI } from 'lbry-redux';
 import FileViewerInitiator from 'component/fileViewerInitiator';
+import FileSubtitle from 'component/fileSubtitle';
 import FilePrice from 'component/filePrice';
 import FileDetails from 'component/fileDetails';
 import FileAuthor from 'component/fileAuthor';
 import FileActions from 'component/fileActions';
-import DateTime from 'component/dateTime';
 import RecommendedContent from 'component/recommendedContent';
 import CommentsList from 'component/commentsList';
 import CommentCreate from 'component/commentCreate';
 import ClaimUri from 'component/claimUri';
-import FileViewCount from 'component/fileViewCount';
 
 export const FILE_WRAPPER_CLASS = 'grid-area--content';
 
@@ -49,11 +48,7 @@ function LayoutWrapperFile(props: Props) {
 
       <div className="columns">
         <div className="grid-area--info">
-          <div className="media__subtitle--between">
-            <DateTime uri={uri} show={DateTime.SHOW_DATE} />
-            <FileViewCount uri={uri} />
-          </div>
-
+          <FileSubtitle uri={uri} />
           <FileActions uri={uri} />
 
           <div className="section__divider">

ui/component/layoutWrapperText/view.jsx

@@ -2,13 +2,12 @@
 import * as React from 'react';
 import { normalizeURI } from 'lbry-redux';
 import classNames from 'classnames';
+import FileSubtitle from 'component/fileSubtitle';
 import FilePrice from 'component/filePrice';
 import FileAuthor from 'component/fileAuthor';
-import FileViewCount from 'component/fileViewCount';
 import FileActions from 'component/fileActions';
 import FileDetails from 'component/fileDetails';
 import TextViewer from 'component/textViewer';
-import DateTime from 'component/dateTime';
 import RecommendedContent from 'component/recommendedContent';
 import CommentsList from 'component/commentsList';
 import CommentCreate from 'component/commentCreate';
@@ -46,10 +45,8 @@ function LayoutWrapperText(props: Props) {
           <h1 className="media__title-text">{title}</h1>
         </div>
 
-        <div className="media__subtitle--between">
-          <DateTime uri={uri} show={DateTime.SHOW_DATE} />
-          <FileViewCount uri={uri} />
-        </div>
+        <FileSubtitle uri={uri} />
+
         <div className="section">
           <FileAuthor uri={uri} />
         </div>