645f8ef452
* Add ICON.INFO - "i" within a circle. Basically, an inverted ICON.ALERT. * Posts: restore "Tip unlock | Claim details" component ## Issue 5882: tip unlock + claim id detials missing from markdown posts view ## Notes The easiest solution would be to put `FileDescription` into posts, but I think that goes against the clean up of the Post layout, where the focus should be on the content. The faded style of the File Details section seems too distracting, plus we don't want the File Description anyway. Fixed by: - Make the existing "LBC amount" clickable to show credit details. An additional padlock will appear if the content is yours and you have tips to unlock. - Add an "info" icon beside it to show file details. These "link" buttons are usually lit, but I dimmed it in this case to make them stand out less. Again, focusing on Post content instead of buttons.
115 lines
3.4 KiB
JavaScript
115 lines
3.4 KiB
JavaScript
// @flow
|
|
import * as React from 'react';
|
|
import * as ICONS from 'constants/icons';
|
|
import * as MODALS from 'constants/modal_types';
|
|
import { formatCredits } from 'lbry-redux';
|
|
import FileAuthor from 'component/fileAuthor';
|
|
import FileDetails from 'component/fileDetails';
|
|
import FileTitle from 'component/fileTitle';
|
|
import FileActions from 'component/fileActions';
|
|
import FileRenderInitiator from 'component/fileRenderInitiator';
|
|
import FileRenderInline from 'component/fileRenderInline';
|
|
import FileValues from 'component/fileValues';
|
|
import FileViewCount from 'component/fileViewCount';
|
|
import ClaimTags from 'component/claimTags';
|
|
import DateTime from 'component/dateTime';
|
|
import Button from 'component/button';
|
|
import LbcSymbol from 'component/common/lbc-symbol';
|
|
import classnames from 'classnames';
|
|
|
|
const EXPAND = {
|
|
NONE: 'none',
|
|
CREDIT_DETAILS: 'credit_details',
|
|
FILE_DETAILS: 'file_details',
|
|
};
|
|
|
|
type Props = {
|
|
uri: string,
|
|
claim: ?StreamClaim,
|
|
claimIsMine: boolean,
|
|
doOpenModal: (id: string, {}) => void,
|
|
};
|
|
|
|
function PostViewer(props: Props) {
|
|
const { uri, claim, claimIsMine, doOpenModal } = props;
|
|
const [expand, setExpand] = React.useState(EXPAND.NONE);
|
|
|
|
if (!claim) {
|
|
return null;
|
|
}
|
|
|
|
const amount = parseFloat(claim.amount) + parseFloat(claim.meta.support_amount);
|
|
const formattedAmount = formatCredits(amount, 2, true);
|
|
const hasSupport = claim && claim.meta && claim.meta.support_amount && Number(claim.meta.support_amount) > 0;
|
|
|
|
function handleExpand(newExpand) {
|
|
if (expand === newExpand) {
|
|
setExpand(EXPAND.NONE);
|
|
} else {
|
|
setExpand(newExpand);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="post">
|
|
<FileTitle uri={uri} className="post__title">
|
|
<span className="post__date">
|
|
<DateTime uri={uri} show={DateTime.SHOW_DATE} />
|
|
</span>
|
|
</FileTitle>
|
|
|
|
<div
|
|
className={classnames('post__info', {
|
|
'post__info--expanded': expand !== EXPAND.NONE,
|
|
})}
|
|
>
|
|
<div className="post__info--grouped">
|
|
<Button
|
|
button="link"
|
|
className="dim"
|
|
icon={ICONS.INFO}
|
|
aria-label={__('View claim details')}
|
|
onClick={() => handleExpand(EXPAND.FILE_DETAILS)}
|
|
/>
|
|
<Button button="link" className="dim" onClick={() => handleExpand(EXPAND.CREDIT_DETAILS)}>
|
|
<LbcSymbol postfix={expand === EXPAND.CREDIT_DETAILS ? __('Hide') : formattedAmount} />
|
|
</Button>
|
|
{claimIsMine && hasSupport && (
|
|
<Button
|
|
button="link"
|
|
className="expandable__button"
|
|
icon={ICONS.UNLOCK}
|
|
aria-label={__('Unlock tips')}
|
|
onClick={() => {
|
|
doOpenModal(MODALS.LIQUIDATE_SUPPORTS, { uri });
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
<FileViewCount uri={uri} />
|
|
</div>
|
|
|
|
{expand === EXPAND.CREDIT_DETAILS && (
|
|
<div className="section post__info--credit-details">
|
|
<FileValues uri={uri} />
|
|
</div>
|
|
)}
|
|
|
|
{expand === EXPAND.FILE_DETAILS && (
|
|
<div className="section post__info--credit-details">
|
|
<ClaimTags uri={uri} type="large" />
|
|
<FileDetails uri={uri} />
|
|
</div>
|
|
)}
|
|
|
|
<FileAuthor uri={uri} />
|
|
|
|
<FileRenderInitiator uri={uri} />
|
|
<FileRenderInline uri={uri} />
|
|
<FileActions uri={uri} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PostViewer;
|