90 lines
2.7 KiB
React
90 lines
2.7 KiB
React
|
// @flow
|
||
|
|
import * as React from 'react';
|
||
|
|
import { normalizeURI } from 'lbry-redux';
|
||
|
|
import FileViewerInitiator from 'component/fileViewerInitiator';
|
||
|
|
import FilePrice from 'component/filePrice';
|
||
|
|
import FileDetails from 'component/fileDetails';
|
||
|
|
import FileAuthor from 'component/fileAuthor';
|
||
|
|
import FileActions from 'component/fileActions';
|
||
|
|
import DateTime from 'component/dateTime';
|
||
|
|
import RecommendedContent from 'component/recommendedContent';
|
||
|
|
import CommentsList from 'component/commentsList';
|
||
|
|
import CommentCreate from 'component/commentCreate';
|
||
|
|
import ClaimUri from 'component/claimUri';
|
||
|
|
import FileViewCount from 'component/fileViewCount';
|
||
|
|
|
||
|
|
export const FILE_WRAPPER_CLASS = 'grid-area--content';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
claim: StreamClaim,
|
||
|
|
fileInfo: FileListItem,
|
||
|
|
uri: string,
|
||
|
|
claimIsMine: boolean,
|
||
|
|
costInfo: ?{ cost: number },
|
||
|
|
balance: number,
|
||
|
|
title: string,
|
||
|
|
nsfw: boolean,
|
||
|
|
};
|
||
|
|
|
||
|
|
function LayoutWrapperFile(props: Props) {
|
||
|
|
const { claim, uri, claimIsMine, costInfo, balance, title, nsfw } = props;
|
||
|
|
const insufficientCredits = !claimIsMine && costInfo && costInfo.cost > balance;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<ClaimUri uri={uri} />
|
||
|
|
<div className={`card ${FILE_WRAPPER_CLASS}`}>
|
||
|
|
<FileViewerInitiator uri={uri} insufficientCredits={insufficientCredits} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="media__title">
|
||
|
|
<span className="media__title-badge">
|
||
|
|
{nsfw && <span className="badge badge--tag-mature">{__('Mature')}</span>}
|
||
|
|
</span>
|
||
|
|
<span className="media__title-badge">
|
||
|
|
<FilePrice badge uri={normalizeURI(uri)} />
|
||
|
|
</span>
|
||
|
|
<h1 className="media__title-text">{title}</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="columns">
|
||
|
|
<div className="grid-area--info">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<FileAuthor uri={uri} />
|
||
|
|
|
||
|
|
<div className="section">
|
||
|
|
<FileDetails uri={uri} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="section__divider">
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="section__title--small">{__('Comments')}</div>
|
||
|
|
<section className="section">
|
||
|
|
<CommentCreate uri={uri} />
|
||
|
|
</section>
|
||
|
|
<section className="section">
|
||
|
|
<CommentsList uri={uri} />
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<div className="grid-area--related">
|
||
|
|
<RecommendedContent uri={uri} claimId={claim.claim_id} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default LayoutWrapperFile;
|