Refactor file page

- doFetchFileInfo used for App only
- avoid repeting right side content

ui/page/file/index.js

@@ -7,7 +7,6 @@ import {
   selectIsStreamPlaceholderForUri,
 } from 'redux/selectors/claims';
 import { makeSelectFileInfoForUri } from 'redux/selectors/file_info';
-import { doFetchFileInfo } from 'redux/actions/file_info';
 import { makeSelectCollectionForId } from 'redux/selectors/collections';
 import * as COLLECTIONS_CONSTS from 'constants/collections';
 import * as SETTINGS from 'constants/settings';
@@ -19,32 +18,33 @@ import { DISABLE_COMMENTS_TAG } from 'constants/tags';
 import FilePage from './view';
 
 const select = (state, props) => {
-  const { search } = props.location;
+  const { uri } = props;
+  const { search } = location;
+
   const urlParams = new URLSearchParams(search);
   const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
 
   return {
     linkedCommentId: urlParams.get('lc'),
-    costInfo: selectCostInfoForUri(state, props.uri),
+    costInfo: selectCostInfoForUri(state, uri),
     obscureNsfw: !selectShowMatureContent(state),
-    isMature: selectClaimIsNsfwForUri(state, props.uri),
+    isMature: selectClaimIsNsfwForUri(state, uri),
-    fileInfo: makeSelectFileInfoForUri(props.uri)(state),
+    fileInfo: makeSelectFileInfoForUri(uri)(state),
-    renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
+    renderMode: makeSelectFileRenderModeForUri(uri)(state),
     videoTheaterMode: selectClientSetting(state, SETTINGS.VIDEO_THEATER_MODE),
-    commentsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
+    commentsDisabled: makeSelectTagInClaimOrChannelForUri(uri, DISABLE_COMMENTS_TAG)(state),
-    isLivestream: selectIsStreamPlaceholderForUri(state, props.uri),
+    isLivestream: selectIsStreamPlaceholderForUri(state, uri),
-    collection: makeSelectCollectionForId(collectionId)(state),
+    hasCollectionById: Boolean(makeSelectCollectionForId(collectionId)(state)),
     collectionId,
-    position: makeSelectContentPositionForUri(props.uri)(state),
+    position: makeSelectContentPositionForUri(uri)(state),
   };
 };
 
-const perform = (dispatch) => ({
+const perform = {
-  fetchFileInfo: (uri) => dispatch(doFetchFileInfo(uri)),
+  doFetchCostInfoForUri,
-  fetchCostInfo: (uri) => dispatch(doFetchCostInfoForUri(uri)),
+  doSetContentHistoryItem,
-  setViewed: (uri) => dispatch(doSetContentHistoryItem(uri)),
+  doSetPrimaryUri,
-  setPrimaryUri: (uri) => dispatch(doSetPrimaryUri(uri)),
+  clearPosition,
-  clearPosition: (uri) => dispatch(clearPosition(uri)),
+};
-});
 
 export default withRouter(connect(select, perform)(FilePage));

ui/page/file/view.jsx

@@ -25,47 +25,46 @@ type Props = {
   costInfo: ?{ includesData: boolean, cost: number },
   fileInfo: FileListItem,
   uri: string,
-  fetchFileInfo: (string) => void,
-  fetchCostInfo: (string) => void,
-  setViewed: (string) => void,
   renderMode: string,
   obscureNsfw: boolean,
   isMature: boolean,
   linkedCommentId?: string,
-  setPrimaryUri: (?string) => void,
+  hasCollectionById?: boolean,
-  collection?: Collection,
   collectionId: string,
   videoTheaterMode: boolean,
   claimIsMine: boolean,
   commentsDisabled: boolean,
   isLivestream: boolean,
-  clearPosition: (string) => void,
   position: number,
+  doFetchCostInfoForUri: (uri: string) => void,
+  doSetContentHistoryItem: (uri: string) => void,
+  doSetPrimaryUri: (uri: ?string) => void,
+  clearPosition: (uri: string) => void,
 };
 
-function FilePage(props: Props) {
+export default function FilePage(props: Props) {
   const {
     uri,
     renderMode,
-    fetchFileInfo,
-    fetchCostInfo,
-    setViewed,
     fileInfo,
     obscureNsfw,
     isMature,
     costInfo,
     linkedCommentId,
-    setPrimaryUri,
     videoTheaterMode,
 
     claimIsMine,
     commentsDisabled,
-    collection,
+    hasCollectionById,
     collectionId,
     isLivestream,
-    clearPosition,
     position,
+    doFetchCostInfoForUri,
+    doSetContentHistoryItem,
+    doSetPrimaryUri,
+    clearPosition,
   } = props;
+
   const cost = costInfo ? costInfo.cost : null;
   const hasFileInfo = fileInfo !== undefined;
   const isMarkdown = renderMode === RENDER_MODES.MARKDOWN;
@@ -81,12 +80,6 @@ function FilePage(props: Props) {
   React.useEffect(() => {
     // always refresh file info when entering file page to see if we have the file
     // this could probably be refactored into more direct components now
-    // @if TARGET='app'
-    if (!hasFileInfo) {
-      fetchFileInfo(uri);
-    }
-    // @endif
-
     if (collectionId) {
       clearPosition(uri);
     }
@@ -96,44 +89,39 @@ function FilePage(props: Props) {
     }
 
     // See https://github.com/lbryio/lbry-desktop/pull/1563 for discussion
-    fetchCostInfo(uri);
+    doFetchCostInfoForUri(uri);
-    setViewed(uri);
+    doSetContentHistoryItem(uri);
-    setPrimaryUri(uri);
+    doSetPrimaryUri(uri);
 
-    return () => {
+    return () => doSetPrimaryUri(null);
-      setPrimaryUri(null);
-    };
   }, [
     uri,
     hasFileInfo,
     fileInfo,
     videoPlayedEnoughToResetPosition,
-    fetchFileInfo,
     collectionId,
     clearPosition,
-    fetchCostInfo,
+    doFetchCostInfoForUri,
-    setViewed,
+    doSetContentHistoryItem,
-    setPrimaryUri,
+    doSetPrimaryUri,
   ]);
 
   function renderFilePageLayout() {
     if (RENDER_MODES.FLOATING_MODES.includes(renderMode)) {
       return (
-        <React.Fragment>
+        <div className={PRIMARY_PLAYER_WRAPPER_CLASS}>
-          <div className={PRIMARY_PLAYER_WRAPPER_CLASS}>
-            <FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
-          </div>
           {/* playables will be rendered and injected by <FileRenderFloating> */}
-        </React.Fragment>
+          <FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
+        </div>
       );
     }
 
     if (RENDER_MODES.UNRENDERABLE_MODES.includes(renderMode)) {
       return (
-        <React.Fragment>
+        <>
           <FileTitleSection uri={uri} />
           <FileRenderDownload uri={uri} isFree={cost === 0} />
-        </React.Fragment>
+        </>
       );
     }
 
@@ -147,43 +135,44 @@ function FilePage(props: Props) {
 
     if (RENDER_MODES.TEXT_MODES.includes(renderMode)) {
       return (
-        <React.Fragment>
+        <>
           <FileTitleSection uri={uri} />
           <FileRenderInitiator uri={uri} />
           <FileRenderInline uri={uri} />
-        </React.Fragment>
+        </>
       );
     }
 
     if (renderMode === RENDER_MODES.IMAGE) {
       return (
-        <React.Fragment>
+        <>
           <div className="file-render--img-container">
             <FileRenderInitiator uri={uri} />
             <FileRenderInline uri={uri} />
           </div>
           <FileTitleSection uri={uri} />
-        </React.Fragment>
+        </>
       );
     }
 
     return (
-      <React.Fragment>
+      <>
         <FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
         <FileRenderInline uri={uri} />
         <FileTitleSection uri={uri} />
-      </React.Fragment>
+      </>
     );
   }
 
+  const rightSideProps = { hasCollectionById, collectionId, uri };
+
   if (obscureNsfw && isMature) {
     return (
       <Page className="file-page" filePage isMarkdown={isMarkdown}>
         <div className={classnames('section card-stack', `file-page__${renderMode}`)}>
           <FileTitleSection uri={uri} isNsfwBlocked />
         </div>
-        {collection && !isMarkdown && !videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
+        {!isMarkdown && !videoTheaterMode && <RightSideContent {...rightSideProps} />}
-        {!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
       </Page>
     );
   }
@@ -195,7 +184,7 @@ function FilePage(props: Props) {
 
         {!isMarkdown && (
           <div className="file-page__secondary-content">
-            <div>
+            <>
               {claimIsMine && isLivestream && (
                 <div className="livestream__creator-message">
                   <h4>{__('Only visible to you')}</h4>
@@ -208,28 +197,44 @@ function FilePage(props: Props) {
                   </div>
                 </div>
               )}
+
               {RENDER_MODES.FLOATING_MODES.includes(renderMode) && <FileTitleSection uri={uri} />}
-              {commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />}
+
-              <React.Suspense fallback={null}>
+              {commentsDisabled ? (
-                {!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />}
+                <Empty text={__('The creator of this content has disabled comments.')} />
-              </React.Suspense>
+              ) : (
-            </div>
+                <React.Suspense fallback={null}>
-            {!collection && !isMarkdown && videoTheaterMode && <RecommendedContent uri={uri} />}
+                  <CommentsList uri={uri} linkedCommentId={linkedCommentId} />
-            {collection && !isMarkdown && videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
+                </React.Suspense>
+              )}
+            </>
+
+            {!isMarkdown && videoTheaterMode && <RightSideContent {...rightSideProps} />}
           </div>
         )}
       </div>
-      {collection && !isMarkdown && !videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
+
-      {!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
+      {!isMarkdown
-      {isMarkdown && (
+        ? !videoTheaterMode && <RightSideContent {...rightSideProps} />
-        <div className="file-page__post-comments">
+        : !commentsDisabled && (
-          <React.Suspense fallback={null}>
+            <div className="file-page__post-comments">
-            {!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />}
+              <React.Suspense fallback={null}>
-          </React.Suspense>
+                <CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />
-        </div>
+              </React.Suspense>
-      )}
+            </div>
+          )}
     </Page>
   );
 }
 
-export default FilePage;
+type RightSideProps = {
+  hasCollectionById?: boolean,
+  collectionId?: string,
+  uri: string,
+};
+
+const RightSideContent = (rightSideProps: RightSideProps) => {
+  const { hasCollectionById, collectionId, uri } = rightSideProps;
+
+  return hasCollectionById ? <CollectionContent id={collectionId} uri={uri} /> : <RecommendedContent uri={uri} />;
+};

ui/scss/component/_main.scss

@@ -108,7 +108,7 @@
 
   .file-page__secondary-content {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     width: 100%;
     margin-top: var(--spacing-m);
@@ -120,10 +120,6 @@
       flex: 1;
       max-width: 100%;
     }
-
-    @media (min-width: $breakpoint-medium) {
-      flex-direction: row;
-    }
   }
 
   @keyframes fadeIn {