79 lines
2.6 KiB
React
79 lines
2.6 KiB
React
|
// @flow
|
||
|
|
import * as ICONS from 'constants/icons';
|
||
|
|
import React from 'react';
|
||
|
|
import MarkdownPreview from 'component/common/markdown-preview';
|
||
|
|
import ChannelThumbnail from 'component/channelThumbnail';
|
||
|
|
import { Menu, MenuButton } from '@reach/menu-button';
|
||
|
|
import Icon from 'component/common/icon';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
import CommentMenuList from 'component/commentMenuList';
|
||
|
|
import UriIndicator from 'component/uriIndicator';
|
||
|
|
import CreditAmount from 'component/common/credit-amount';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
uri: string,
|
||
|
|
claim: StreamClaim,
|
||
|
|
authorUri: string,
|
||
|
|
commentId: string,
|
||
|
|
message: string,
|
||
|
|
commentIsMine: boolean,
|
||
|
|
stakedLevel: number,
|
||
|
|
supportAmount: number,
|
||
|
|
};
|
||
|
|
|
||
|
|
function Comment(props: Props) {
|
||
|
|
const { claim, uri, authorUri, message, commentIsMine, commentId, stakedLevel, supportAmount } = props;
|
||
|
|
const [mouseIsHovering, setMouseHover] = React.useState(false);
|
||
|
|
const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<li
|
||
|
|
className={classnames('livestream-comment', {
|
||
|
|
'livestream-comment--superchat': supportAmount > 0,
|
||
|
|
})}
|
||
|
|
onMouseOver={() => setMouseHover(true)}
|
||
|
|
onMouseOut={() => setMouseHover(false)}
|
||
|
|
>
|
||
|
|
{supportAmount > 0 && (
|
||
|
|
<div className="super-chat livestream-superchat__banner">
|
||
|
|
<div className="livestream-superchat__banner-corner" />
|
||
|
|
<CreditAmount amount={supportAmount} superChat className="livestream-superchat__amount" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="livestream-comment__body">
|
||
|
|
{supportAmount > 0 && <ChannelThumbnail uri={authorUri} xsmall />}
|
||
|
|
<div className="livestream-comment__info">
|
||
|
|
<UriIndicator
|
||
|
|
className={classnames('comment__author', {
|
||
|
|
'comment__author--creator': commentByOwnerOfContent,
|
||
|
|
})}
|
||
|
|
link
|
||
|
|
external
|
||
|
|
uri={authorUri}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="livestream-comment__text">
|
||
|
|
<MarkdownPreview content={message} promptLinks stakedLevel={stakedLevel} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="livestream-comment__menu">
|
||
|
|
<Menu>
|
||
|
|
<MenuButton className="menu__button">
|
||
|
|
<Icon
|
||
|
|
size={18}
|
||
|
|
className={mouseIsHovering ? 'comment__menu-icon--hovering' : 'comment__menu-icon'}
|
||
|
|
icon={ICONS.MORE_VERTICAL}
|
||
|
|
/>
|
||
|
|
</MenuButton>
|
||
|
|
<CommentMenuList uri={uri} commentId={commentId} authorUri={authorUri} commentIsMine={commentIsMine} />
|
||
|
|
</Menu>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Comment;
|