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

171 lines
5.2 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 ClaimUri from 'component/claimUri';
import FileTitle from 'component/fileTitle';
import FileRenderInitiator from 'component/fileRenderInitiator';
import FileRenderInline from 'component/fileRenderInline';
import FileRenderDownload from 'component/fileRenderDownload';
import Card from 'component/common/card';
import FileDetails from 'component/fileDetails';
import FileValues from 'component/fileValues';
import FileDescription from 'component/fileDescription';
import WaitUntilOnPage from 'component/common/wait-until-on-page';
import RecommendedContent from 'component/recommendedContent';
import CommentsList from 'component/commentsList';
import CommentCreate from 'component/commentCreate';
import YoutubeBadge from 'component/youtubeBadge';
2020-04-14 01:48:11 +02:00
export const FILE_WRAPPER_CLASS = 'file-page__video-container';
2019-08-13 07:35:13 +02:00
2018-03-26 23:32:43 +02:00
type Props = {
2019-04-24 16:02:08 +02:00
claim: StreamClaim,
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,
2018-10-19 22:38:07 +02:00
isSubscribed: boolean,
channelUri: string,
renderMode: string,
2018-10-19 22:38:07 +02:00
markSubscriptionRead: (string, string) => void,
2018-03-26 23:32:43 +02:00
};
class FilePage extends React.Component<Props> {
2017-05-13 00:50:51 +02:00
componentDidMount() {
const { uri, fetchFileInfo, fetchCostInfo, setViewed, isSubscribed } = this.props;
2018-10-19 22:38:07 +02:00
if (isSubscribed) {
2018-10-19 22:38:07 +02:00
this.removeFromSubscriptionNotifications();
}
2019-03-14 19:40:26 +01:00
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'
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);
2017-05-12 19:14:06 +02:00
}
2018-10-19 22:38:07 +02:00
componentDidUpdate(prevProps: Props) {
const { isSubscribed, uri, fileInfo, setViewed, fetchFileInfo } = this.props;
2019-03-14 19:40:26 +01:00
if (!prevProps.isSubscribed && isSubscribed) {
2018-10-19 22:38:07 +02:00
this.removeFromSubscriptionNotifications();
}
2019-03-14 19:40:26 +01:00
2019-06-11 20:10:58 +02:00
if (prevProps.uri !== uri) {
setViewed(uri);
}
// @if TARGET='app'
2020-02-14 17:42:38 +01:00
if (prevProps.uri !== uri && fileInfo === undefined) {
fetchFileInfo(uri);
}
// @endif
2018-10-19 22:38:07 +02:00
}
removeFromSubscriptionNotifications() {
// Always try to remove
// If it doesn't exist, nothing will happen
const { markSubscriptionRead, uri, channelUri } = this.props;
2018-10-19 22:38:07 +02:00
markSubscriptionRead(channelUri, uri);
}
renderFilePageLayout(uri: string, mode: string, cost: ?number) {
const { claim } = this.props;
const channelClaimId = claim.signing_channel ? claim.signing_channel.claim_id : null;
if (RENDER_MODES.FLOATING_MODES.includes(mode)) {
return (
<React.Fragment>
<ClaimUri uri={uri} />
<YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<div className={FILE_WRAPPER_CLASS}>
<FileRenderInitiator uri={uri} />
</div>
{/* playables will be rendered and injected by <FileRenderFloating> */}
<FileTitle uri={uri} />
</React.Fragment>
);
}
if (RENDER_MODES.UNRENDERABLE_MODES.includes(mode)) {
return (
<React.Fragment>
<ClaimUri uri={uri} />
<YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<FileTitle uri={uri} />
<FileRenderDownload uri={uri} isFree={cost === 0} />
</React.Fragment>
);
}
if (RENDER_MODES.TEXT_MODES.includes(mode)) {
return (
<React.Fragment>
<ClaimUri uri={uri} />
<YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<FileTitle uri={uri} />
<FileRenderInitiator uri={uri} />
<FileRenderInline uri={uri} />
</React.Fragment>
);
}
return (
<React.Fragment>
<ClaimUri uri={uri} />
<YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<FileRenderInitiator uri={uri} />
<FileRenderInline uri={uri} />
<FileTitle uri={uri} />
</React.Fragment>
);
}
2017-05-12 19:14:06 +02:00
render() {
const { uri, renderMode, costInfo } = this.props;
2020-02-14 17:42:38 +01:00
2017-05-12 19:14:06 +02:00
return (
<Page className="file-page">
<div className={classnames('section card-stack', `file-page__${renderMode}`)}>
{this.renderFilePageLayout(uri, renderMode, costInfo ? costInfo.cost : null)}
</div>
<div className="section columns">
<div className="card-stack">
<FileDescription uri={uri} />
<FileValues uri={uri} />
<FileDetails uri={uri} />
<Card
title={__('Leave a Comment')}
actions={
<div>
<CommentCreate uri={uri} />
<WaitUntilOnPage>
<CommentsList uri={uri} />
</WaitUntilOnPage>
</div>
}
/>
2019-06-17 22:32:38 +02:00
</div>
<WaitUntilOnPage>
<RecommendedContent uri={uri} />
</WaitUntilOnPage>
</div>
2018-03-26 23:32:43 +02:00
</Page>
2017-06-06 23:19:12 +02:00
);
2017-05-12 19:14:06 +02:00
}
2017-05-05 07:10:37 +02:00
}
2017-05-01 21:59:40 +02:00
export default FilePage;