LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Highlight livestream comment and menu button on hover

Browse source
This commit is contained in:
saltrafael 2021-10-08 09:38:08 -03:00
parent 5b29107d08
commit 763b118a40
No known key found for this signature in database
GPG key ID: 85B63D36CBFAB1E5
2 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/component/livestreamComment/view.jsx
View file

@ -11,6 +11,7 @@ import classnames from 'classnames';
import CommentMenuList from 'component/commentMenuList'; import CommentMenuList from 'component/commentMenuList';
import Button from 'component/button'; import Button from 'component/button';
import CreditAmount from 'component/common/credit-amount'; import CreditAmount from 'component/common/credit-amount';
import useHover from 'effects/use-hover';
type Props = { type Props = {
uri: string, uri: string,
@ -43,14 +44,18 @@ function LivestreamComment(props: Props) {
isPinned, isPinned,
} = props; } = props;
const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri; const commentRef = React.useRef();
const isHovering = useHover(commentRef);
const commentByContentOwner = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri;
const { claimName } = parseURI(authorUri); const { claimName } = parseURI(authorUri);
return ( return (
<li <li
className={classnames('livestream-comment', { className={classnames('livestream-comment', {
'livestream-comment--superchat': supportAmount > 0, 'livestream-comment--superchat': supportAmount > 0,
'livestream-comment--hover': isHovering,
})} })}
ref={commentRef}
> >
{supportAmount > 0 && ( {supportAmount > 0 && (
<div className="super-chat livestream-superchat__banner"> <div className="super-chat livestream-superchat__banner">
@ -78,7 +83,7 @@ function LivestreamComment(props: Props) {
</Tooltip> </Tooltip>
)} )}
{commentByOwnerOfContent && ( {commentByContentOwner && (
<Tooltip label={__('Streamer')}> <Tooltip label={__('Streamer')}>
<span className="comment__badge"> <span className="comment__badge">
<Icon icon={ICONS.BADGE_STREAMER} size={16} /> <Icon icon={ICONS.BADGE_STREAMER} size={16} />
@ -88,7 +93,7 @@ function LivestreamComment(props: Props) {
<Button <Button
className={classnames('button--uri-indicator comment__author', { className={classnames('button--uri-indicator comment__author', {
'comment__author--creator': commentByOwnerOfContent, 'comment__author--creator': commentByContentOwner,
})} })}
target="_blank" target="_blank"
navigate={authorUri} navigate={authorUri}

12
ui/scss/component/_livestream.scss
View file

@ -124,6 +124,18 @@ $recent-msg-button__height: 2rem;
} }
} }
.livestream-comment--hover {
background-color: var(--color-card-background-highlighted);
}
@media (min-width: $breakpoint-small) {
.livestream-comment:not(:hover) {
.menu__button:not(:focus):not([aria-expanded='true']) {
opacity: 0;
}
}
}
.livestream-comment__body { .livestream-comment__body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;