Refactor file page
- doFetchFileInfo used for App only - avoid repeting right side content
This commit is contained in:
Rafael
Thomas Zarebczan
parent
6443af34a0
commit
48e2de6ca4
3 changed files with 85 additions and 84 deletions
|
|
@ -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),
|
||||
fileInfo: makeSelectFileInfoForUri(props.uri)(state),
|
||||
renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
|
||||
isMature: selectClaimIsNsfwForUri(state, uri),
|
||||
fileInfo: makeSelectFileInfoForUri(uri)(state),
|
||||
renderMode: makeSelectFileRenderModeForUri(uri)(state),
|
||||
videoTheaterMode: selectClientSetting(state, SETTINGS.VIDEO_THEATER_MODE),
|
||||
commentsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
|
||||
isLivestream: selectIsStreamPlaceholderForUri(state, props.uri),
|
||||
collection: makeSelectCollectionForId(collectionId)(state),
|
||||
commentsDisabled: makeSelectTagInClaimOrChannelForUri(uri, DISABLE_COMMENTS_TAG)(state),
|
||||
isLivestream: selectIsStreamPlaceholderForUri(state, uri),
|
||||
hasCollectionById: Boolean(makeSelectCollectionForId(collectionId)(state)),
|
||||
collectionId,
|
||||
position: makeSelectContentPositionForUri(props.uri)(state),
|
||||
position: makeSelectContentPositionForUri(uri)(state),
|
||||
};
|
||||
};
|
||||
|
||||
const perform = (dispatch) => ({
|
||||
fetchFileInfo: (uri) => dispatch(doFetchFileInfo(uri)),
|
||||
fetchCostInfo: (uri) => dispatch(doFetchCostInfoForUri(uri)),
|
||||
setViewed: (uri) => dispatch(doSetContentHistoryItem(uri)),
|
||||
setPrimaryUri: (uri) => dispatch(doSetPrimaryUri(uri)),
|
||||
clearPosition: (uri) => dispatch(clearPosition(uri)),
|
||||
});
|
||||
const perform = {
|
||||
doFetchCostInfoForUri,
|
||||
doSetContentHistoryItem,
|
||||
doSetPrimaryUri,
|
||||
clearPosition,
|
||||
};
|
||||
|
||||
export default withRouter(connect(select, perform)(FilePage));
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
collection?: Collection,
|
||||
hasCollectionById?: boolean,
|
||||
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);
|
||||
setViewed(uri);
|
||||
setPrimaryUri(uri);
|
||||
doFetchCostInfoForUri(uri);
|
||||
doSetContentHistoryItem(uri);
|
||||
doSetPrimaryUri(uri);
|
||||
|
||||
return () => {
|
||||
setPrimaryUri(null);
|
||||
};
|
||||
return () => doSetPrimaryUri(null);
|
||||
}, [
|
||||
uri,
|
||||
hasFileInfo,
|
||||
fileInfo,
|
||||
videoPlayedEnoughToResetPosition,
|
||||
fetchFileInfo,
|
||||
collectionId,
|
||||
clearPosition,
|
||||
fetchCostInfo,
|
||||
setViewed,
|
||||
setPrimaryUri,
|
||||
doFetchCostInfoForUri,
|
||||
doSetContentHistoryItem,
|
||||
doSetPrimaryUri,
|
||||
]);
|
||||
|
||||
function renderFilePageLayout() {
|
||||
if (RENDER_MODES.FLOATING_MODES.includes(renderMode)) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className={PRIMARY_PLAYER_WRAPPER_CLASS}>
|
||||
<FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
|
||||
</div>
|
||||
<div className={PRIMARY_PLAYER_WRAPPER_CLASS}>
|
||||
{/* 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} />}
|
||||
{!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
|
||||
{!isMarkdown && !videoTheaterMode && <RightSideContent {...rightSideProps} />}
|
||||
</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 && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />}
|
||||
</React.Suspense>
|
||||
</div>
|
||||
{!collection && !isMarkdown && videoTheaterMode && <RecommendedContent uri={uri} />}
|
||||
{collection && !isMarkdown && videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
|
||||
|
||||
{commentsDisabled ? (
|
||||
<Empty text={__('The creator of this content has disabled comments.')} />
|
||||
) : (
|
||||
<React.Suspense fallback={null}>
|
||||
<CommentsList uri={uri} linkedCommentId={linkedCommentId} />
|
||||
</React.Suspense>
|
||||
)}
|
||||
</>
|
||||
|
||||
{!isMarkdown && videoTheaterMode && <RightSideContent {...rightSideProps} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{collection && !isMarkdown && !videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
|
||||
{!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
|
||||
{isMarkdown && (
|
||||
<div className="file-page__post-comments">
|
||||
<React.Suspense fallback={null}>
|
||||
{!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />}
|
||||
</React.Suspense>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isMarkdown
|
||||
? !videoTheaterMode && <RightSideContent {...rightSideProps} />
|
||||
: !commentsDisabled && (
|
||||
<div className="file-page__post-comments">
|
||||
<React.Suspense fallback={null}>
|
||||
<CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />
|
||||
</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} />;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue