lbry-desktop/ui/page/file/view.jsx

139 lines
3.9 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import * as React from 'react';
import classnames from 'classnames';
2018-03-26 23:32:43 +02:00
import Page from 'component/page';
import * as RENDER_MODES from 'constants/file_render_modes';
import FileTitle from 'component/fileTitle';
import FileRenderInitiator from 'component/fileRenderInitiator';
import FileRenderInline from 'component/fileRenderInline';
import FileRenderDownload from 'component/fileRenderDownload';
import RecommendedContent from 'component/recommendedContent';
import CommentsList from 'component/commentsList';
2021-02-04 06:45:49 +01:00
import Empty from 'component/common/empty';
export const PRIMARY_PLAYER_WRAPPER_CLASS = 'file-page__video-container';
2019-08-13 07:35:13 +02:00
2018-03-26 23:32:43 +02:00
type Props = {
costInfo: ?{ includesData: boolean, cost: number },
2019-04-24 16:02:08 +02:00
fileInfo: FileListItem,
2018-03-26 23:32:43 +02:00
uri: string,
fetchFileInfo: string => void,
fetchCostInfo: string => void,
setViewed: string => void,
renderMode: string,
obscureNsfw: boolean,
isMature: boolean,
2020-08-24 19:35:21 +02:00
linkedComment: any,
setPrimaryUri: (?string) => void,
2021-01-08 16:21:27 +01:00
videoTheaterMode: boolean,
2021-02-05 00:00:07 +01:00
commentsDisabled: boolean,
2018-03-26 23:32:43 +02:00
};
function FilePage(props: Props) {
const {
uri,
renderMode,
fetchFileInfo,
fetchCostInfo,
setViewed,
fileInfo,
obscureNsfw,
isMature,
costInfo,
linkedComment,
setPrimaryUri,
2021-01-08 16:21:27 +01:00
videoTheaterMode,
2021-02-05 00:00:07 +01:00
commentsDisabled,
} = props;
const cost = costInfo ? costInfo.cost : null;
const hasFileInfo = fileInfo !== undefined;
React.useEffect(() => {
2019-03-15 17:15:31 +01:00
// 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
2019-03-15 17:15:31 +01:00
// @if TARGET='app'
if (!hasFileInfo) {
fetchFileInfo(uri);
}
2019-03-15 17:15:31 +01:00
// @endif
2017-05-12 19:14:06 +02:00
// See https://github.com/lbryio/lbry-desktop/pull/1563 for discussion
fetchCostInfo(uri);
setViewed(uri);
setPrimaryUri(uri);
2019-03-14 19:40:26 +01:00
return () => {
setPrimaryUri(null);
};
}, [uri, hasFileInfo, fetchFileInfo, fetchCostInfo, setViewed, setPrimaryUri]);
2018-10-19 22:38:07 +02:00
function renderFilePageLayout() {
if (RENDER_MODES.FLOATING_MODES.includes(renderMode)) {
return (
<React.Fragment>
<div className={PRIMARY_PLAYER_WRAPPER_CLASS}>
2021-01-08 16:21:27 +01:00
<FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
</div>
{/* playables will be rendered and injected by <FileRenderFloating> */}
</React.Fragment>
);
}
if (RENDER_MODES.UNRENDERABLE_MODES.includes(renderMode)) {
return (
<React.Fragment>
<FileTitle uri={uri} />
<FileRenderDownload uri={uri} isFree={cost === 0} />
</React.Fragment>
);
}
if (RENDER_MODES.TEXT_MODES.includes(renderMode)) {
return (
<React.Fragment>
<FileTitle uri={uri} />
<FileRenderInitiator uri={uri} />
<FileRenderInline uri={uri} />
</React.Fragment>
);
}
return (
<React.Fragment>
2021-01-08 16:21:27 +01:00
<FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
<FileRenderInline uri={uri} />
<FileTitle uri={uri} />
</React.Fragment>
);
}
2021-01-08 16:21:27 +01:00
if (obscureNsfw && isMature) {
return (
<Page>
<FileTitle uri={uri} isNsfwBlocked />
</Page>
);
}
return (
<Page className="file-page" filePage>
<div className={classnames('section card-stack', `file-page__${renderMode}`)}>
{renderFilePageLayout()}
2021-01-08 16:21:27 +01:00
<div className="file-page__secondary-content">
<div>
{RENDER_MODES.FLOATING_MODES.includes(renderMode) && <FileTitle uri={uri} />}
2021-02-05 00:00:07 +01:00
{commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />}
{!commentsDisabled && <CommentsList uri={uri} linkedComment={linkedComment} />}
2021-01-08 16:21:27 +01:00
</div>
{videoTheaterMode && <RecommendedContent uri={uri} />}
</div>
</div>
2020-08-10 22:47:39 +02:00
2021-01-08 16:21:27 +01:00
{!videoTheaterMode && <RecommendedContent uri={uri} />}
</Page>
);
2017-05-05 07:10:37 +02:00
}
2017-05-01 21:59:40 +02:00
export default FilePage;