cleanup

package.json

@@ -67,7 +67,7 @@
     "@babel/register": "^7.0.0",
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "^16.8",
-    "@lbry/components": "^3.0.4",
+    "@lbry/components": "^3.0.5",
     "@reach/menu-button": "^0.1.18",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",

ui/component/fileAuthor/view.jsx

@@ -6,7 +6,7 @@ type Props = {
   channelUri: string,
 };
 
-function LayoutWrapperDocument(props: Props) {
+function FileAuthor(props: Props) {
   const { channelUri } = props;
 
   return channelUri ? (
@@ -16,4 +16,4 @@ function LayoutWrapperDocument(props: Props) {
   );
 }
 
-export default LayoutWrapperDocument;
+export default FileAuthor;

ui/component/fileRender/index.js

@@ -10,7 +10,7 @@ import {
 } from 'lbry-redux';
 import { THEME, AUTOPLAY } from 'constants/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import { makeSelectNextUnplayedRecommended } from 'redux/selectors/content';
+import { makeSelectNextUnplayedRecommended, makeSelectIsText } from 'redux/selectors/content';
 import FileRender from './view';
 
 const select = (state, props) => ({
@@ -24,6 +24,7 @@ const select = (state, props) => ({
   streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
   autoplay: makeSelectClientSetting(AUTOPLAY)(state),
   nextUnplayed: makeSelectNextUnplayedRecommended(props.uri)(state),
+  isText: makeSelectIsText(props.uri)(state),
 });
 
 export default connect(select)(FileRender);

ui/component/fileRender/view.jsx

@@ -29,6 +29,7 @@ import ThreeViewer from 'component/viewers/threeViewer';
 type Props = {
   uri: string,
   mediaType: string,
+  isText: true,
   streamingUrl: string,
   contentType: string,
   claim: StreamClaim,
@@ -187,10 +188,10 @@ class FileRender extends React.PureComponent<Props> {
   }
 
   render() {
-    const { mediaType } = this.props;
+    const { isText } = this.props;
 
     return (
-      <div className={classnames('file-render', { 'file-render--document': mediaType === 'text' })}>
+      <div className={classnames('file-render', { 'file-render--document': isText })}>
         <Suspense fallback={<div />}>{this.renderViewer()}</Suspense>
       </div>
     );

ui/component/fileViewCount/view.jsx

@@ -6,7 +6,7 @@ type Props = {
   viewCount: string,
 };
 
-function LayoutWrapperDocument(props: Props) {
+function FileViewCount(props: Props) {
   const { viewCount } = props;
 
   return (
@@ -17,4 +17,4 @@ function LayoutWrapperDocument(props: Props) {
   );
 }
 
-export default LayoutWrapperDocument;
+export default FileViewCount;

ui/component/fileViewerInitiator/index.js

@@ -16,6 +16,7 @@ import {
   makeSelectShouldObscurePreview,
   selectPlayingUri,
   makeSelectCanAutoplay,
+  makeSelectIsText,
 } from 'redux/selectors/content';
 import FileViewer from './view';
 
@@ -33,6 +34,7 @@ const select = (state, props) => ({
   hasCostInfo: Boolean(makeSelectCostInfoForUri(props.uri)(state)),
   costInfo: makeSelectCostInfoForUri(props.uri)(state),
   isAutoPlayable: makeSelectCanAutoplay(props.uri)(state),
+  isText: makeSelectIsText(props.uri)(state),
 });
 
 const perform = dispatch => ({

ui/component/fileViewerInitiator/view.jsx

@@ -14,6 +14,7 @@ const SPACE_BAR_KEYCODE = 32;
 type Props = {
   play: string => void,
   mediaType: string,
+  isText: boolean,
   contentType: string,
   isLoading: boolean,
   isPlaying: boolean,
@@ -34,6 +35,7 @@ export default function FileViewerInitiator(props: Props) {
   const {
     play,
     mediaType,
+    isText,
     contentType,
     isPlaying,
     fileInfo,
@@ -50,7 +52,6 @@ export default function FileViewerInitiator(props: Props) {
   const cost = costInfo && costInfo.cost;
   const forceVideo = ['application/x-ext-mkv', 'video/x-matroska'].includes(contentType);
   const isPlayable = ['audio', 'video'].includes(mediaType) || forceVideo;
-  const isText = mediaType === 'text';
   const fileStatus = fileInfo && fileInfo.status;
   const webStreamOnly = contentType === 'application/pdf' || mediaType === 'text';
   const supported = IS_WEB ? (!cost && isStreamable) || webStreamOnly || forceVideo : true;

ui/component/floatingViewer/index.js

@@ -10,7 +10,12 @@ import {
   makeSelectTitleForUri,
 } from 'lbry-redux';
 import { doClaimEligiblePurchaseRewards } from 'lbryinc';
-import { makeSelectIsPlaying, makeSelectShouldObscurePreview, selectPlayingUri } from 'redux/selectors/content';
+import {
+  makeSelectIsPlaying,
+  makeSelectShouldObscurePreview,
+  selectPlayingUri,
+  makeSelectIsText,
+} from 'redux/selectors/content';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { doSetPlayingUri } from 'redux/actions/content';
 import { withRouter } from 'react-router';
@@ -31,6 +36,7 @@ const select = (state, props) => {
     streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
     isStreamable: makeSelectUriIsStreamable(uri)(state),
     floatingPlayerEnabled: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),
+    isText: makeSelectIsText(uri)(state),
   };
 };
 

ui/component/floatingViewer/view.jsx

@@ -17,6 +17,7 @@ import useIsMobile from 'effects/use-is-mobile';
 type Props = {
   mediaType: string,
   contentType: string,
+  isText: boolean,
   isLoading: boolean,
   isPlaying: boolean,
   fileInfo: FileListItem,
@@ -50,6 +51,7 @@ export default function FileViewer(props: Props) {
     claimRewards,
     mediaType,
     contentType,
+    isText,
   } = props;
   const isMobile = useIsMobile();
   const [playTime, setPlayTime] = useState();
@@ -124,7 +126,7 @@ export default function FileViewer(props: Props) {
   }
 
   const hidePlayer =
-    mediaType === 'text' ||
+    isText ||
     !isPlaying ||
     !uri ||
     (!inline && (isMobile || !floatingPlayerEnabled || !['audio', 'video'].includes(mediaType)));

ui/component/layoutWrapperText/index.js

@@ -7,8 +7,6 @@ import {
   makeSelectContentTypeForUri,
   doPrepareEdit,
   makeSelectTitleForUri,
-  makeSelectMetadataForUri,
-  makeSelectThumbnailForUri,
 } from 'lbry-redux';
 import { makeSelectCostInfoForUri } from 'lbryinc';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
@@ -24,8 +22,6 @@ const select = (state, props) => ({
   costInfo: makeSelectCostInfoForUri(props.uri)(state),
   supportOption: makeSelectClientSetting(SETTINGS.SUPPORT_OPTION)(state),
   title: makeSelectTitleForUri(props.uri)(state),
-  metadata: makeSelectMetadataForUri(props.uri)(state),
-  thumbnail: makeSelectThumbnailForUri(props.uri)(state),
 });
 
 const perform = dispatch => ({

ui/component/layoutWrapperText/view.jsx

@@ -3,33 +3,30 @@ import * as React from 'react';
 import { normalizeURI } from 'lbry-redux';
 import FilePrice from 'component/filePrice';
 import FileAuthor from 'component/fileAuthor';
-import FileThumbnail from 'component/fileThumbnail';
 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';
-import MarkdownPreview from 'component/common/markdown-preview';
 import ClaimUri from 'component/claimUri';
 import FileViewerInitiator from 'component/fileViewerInitiator';
 
 type Props = {
   uri: string,
-  metadata: StreamMetadata,
   title: string,
   nsfw: boolean,
   claim: StreamClaim,
   thumbnail: ?string,
 };
 
-function LayoutWrapperDocument(props: Props) {
-  const { uri, claim, metadata, title, nsfw, thumbnail } = props;
-  const { description } = metadata;
+function LayoutWrapperText(props: Props) {
+  const { uri, claim, title, nsfw } = props;
 
   return (
-    <div className="">
+    <div>
       <div className="main__document-wrapper">
         <ClaimUri uri={uri} />
 
@@ -42,30 +39,15 @@ function LayoutWrapperDocument(props: Props) {
           </span>
           <h1 className="media__title-text">{title}</h1>
         </div>
-      </div>
 
-      <div className="media__document-thumbnail">
-        <FileThumbnail thumbnail={thumbnail} />
-      </div>
-
-      <div className="section main__document-wrapper">
-        <div className="section__subtitle">
-          <em>
-            <MarkdownPreview content={description} />
-          </em>
-        </div>
         <div className="media__subtitle--between">
           <DateTime uri={uri} show={DateTime.SHOW_DATE} />
           <FileViewCount uri={uri} />
         </div>
-        <FileActions uri={uri} />
-
-        <div className="section__divider">
-          <hr />
+        <div className="section">
+          <FileAuthor uri={uri} />
         </div>
 
-        <FileAuthor uri={uri} />
-
         <div className="section__divider">
           <hr />
         </div>
@@ -73,14 +55,21 @@ function LayoutWrapperDocument(props: Props) {
         {/* Render the initiator to trigger the view of the file */}
         <FileViewerInitiator uri={uri} />
         <TextViewer uri={uri} />
-
-        <div className="section__divider">
-          <hr />
-        </div>
       </div>
 
       <div className="columns">
         <div>
+          <FileActions uri={uri} />
+
+          <div className="section__divider">
+            <hr />
+          </div>
+
+          <FileAuthor uri={uri} />
+
+          <div className="section">
+            <FileDetails uri={uri} />
+          </div>
           <div className="section__title--small">{__('Comments')}</div>
           <section className="section">
             <CommentCreate uri={uri} />
@@ -95,4 +84,4 @@ function LayoutWrapperDocument(props: Props) {
   );
 }
 
-export default LayoutWrapperDocument;
+export default LayoutWrapperText;

ui/page/file/index.js

@@ -9,11 +9,11 @@ import {
   makeSelectMetadataForUri,
   makeSelectChannelForClaimUri,
   selectBalance,
-  makeSelectMediaTypeForUri,
 } from 'lbry-redux';
 import { doFetchViewCount, makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
+import { makeSelectIsText } from 'redux/selectors/content';
 import FilePage from './view';
 
 const select = (state, props) => ({
@@ -26,7 +26,7 @@ const select = (state, props) => ({
   isSubscribed: makeSelectIsSubscribed(props.uri)(state),
   channelUri: makeSelectChannelForClaimUri(props.uri, true)(state),
   balance: selectBalance(state),
-  mediaType: makeSelectMediaTypeForUri(props.uri)(state),
+  isText: makeSelectIsText(props.uri)(state),
 });
 
 const perform = dispatch => ({

ui/page/file/view.jsx

@@ -22,7 +22,7 @@ type Props = {
   markSubscriptionRead: (string, string) => void,
   fetchViewCount: string => void,
   balance: number,
-  mediaType: string,
+  isText: boolean,
 };
 
 class FilePage extends React.Component<Props> {
@@ -75,9 +75,8 @@ class FilePage extends React.Component<Props> {
   }
 
   render() {
-    const { uri, claimIsMine, costInfo, fileInfo, balance, mediaType } = this.props;
+    const { uri, claimIsMine, costInfo, fileInfo, balance, isText } = this.props;
     const insufficientCredits = !claimIsMine && costInfo && costInfo.cost > balance;
-
     return (
       <Page className="main--file-page">
         {!fileInfo && insufficientCredits && (
@@ -93,7 +92,7 @@ class FilePage extends React.Component<Props> {
           </div>
         )}
 
-        {mediaType === 'text' ? <LayoutWrapperText uri={uri} /> : <LayoutWrapperFile uri={uri} />}
+        {isText ? <LayoutWrapperText uri={uri} /> : <LayoutWrapperFile uri={uri} />}
       </Page>
     );
   }

ui/redux/selectors/content.js

@@ -127,3 +127,12 @@ export const makeSelectCanAutoplay = (uri: string) =>
       return canAutoPlay;
     }
   );
+
+export const makeSelectIsText = (uri: string) =>
+  createSelector(
+    makeSelectMediaTypeForUri(uri),
+    mediaType => {
+      const isText = ['text', 'document'].includes(mediaType);
+      return isText;
+    }
+  );

ui/scss/component/_content.scss

@@ -6,6 +6,10 @@
 
 .content__viewer--inline {
   max-height: var(--inline-player-max-height);
+
+  @media (max-width: $breakpoint-small) {
+    margin-top: 10px;
+  }
 }
 
 .content__viewer--floating {

ui/scss/component/_file-render.scss

@@ -4,10 +4,24 @@
   z-index: 1;
   overflow: hidden;
   max-height: var(--inline-player-max-height);
+
+  @media (max-width: $breakpoint-small) {
+    // margin-top: 10px;
+  }
 }
 
 .file-render--document {
   max-height: none;
+
+  .content__loading {
+    background-color: transparent;
+    padding: 0;
+    margin: var(--spacing-xlarge) 0;
+
+    .content__loading-text {
+      color: var(--color-text);
+    }
+  }
 }
 
 .file-render__viewer {

ui/scss/component/_main.scss

@@ -102,8 +102,9 @@
 }
 
 .main__document-wrapper {
-  width: 60%;
+  width: 40em;
   margin: auto;
+  margin-bottom: var(--spacing-xlarge);
 
   @media (max-width: $breakpoint-small) {
     width: 100%;

ui/scss/component/_markdown-preview.scss

@@ -20,26 +20,22 @@
   }
 
   h1 {
-    font-size: 1.8em;
-  }
-  h2 {
     font-size: 1.7em;
   }
-  h3 {
-    font-size: 1.6em;
-  }
-  h4 {
+  h2 {
     font-size: 1.5em;
   }
-  h5 {
+  h3 {
     font-size: 1.4em;
   }
-  h6 {
+  h4 {
     font-size: 1.3em;
   }
-
-  @media (max-width: $breakpoint-small) {
-    font-size: 0.8em;
+  h5 {
+    font-size: 1.2em;
+  }
+  h6 {
+    font-size: 1em;
   }
 
   // Paragraphs

ui/scss/component/_media.scss

@@ -23,7 +23,8 @@
   text-overflow: ellipsis;
   font-weight: var(--font-weight-bold);
   white-space: normal;
-  font-size: var(--font-title);
+  // font-size: var(--font-title);
+  font-size: 2em;
   display: inline;
 }
 

ui/scss/init/_gui.scss

@@ -23,6 +23,10 @@ html {
 
 body {
   font-size: 1em;
+
+  @media (max-width: $breakpoint-small) {
+    font-size: 1.3em;
+  }
 }
 
 h1,

yarn.lock

@@ -1019,10 +1019,10 @@
     prop-types "^15.6.2"
     scheduler "^0.15.0"
 
-"@lbry/components@^3.0.4":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.4.tgz#521166732707ed06e354341383c5d443fdb4b798"
-  integrity sha512-kvkYFdPEYhjKMY/YqNBVwKvaIhTeGNCr+MqVQsE0wsb+tD+xlY+BRSt2G/H62BoL6P38qZ9lZJ5Y6OtiefL8Ag==
+"@lbry/components@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.5.tgz#4ab6cf8f97113e4c2c90fb6a840801c9da11923f"
+  integrity sha512-u0J5MY3JvGxPjusVQVtoWKUbTAokC6wy+zafq/qJdnCUtjJbEG57jx7sx6KSfdoCz7jqmr2bivAbzMx+oP2mzA==
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"