LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-09 20:19:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve notification links, allow right click menu

Browse source
This commit is contained in:
saltrafael 2021-07-27 12:24:07 -03:00
parent 1d6101ddd2
commit 08cca491fe
No known key found for this signature in database
GPG key ID: 9C7F1DC0B0F54515
2 changed files with 105 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

177
ui/component/notification/view.jsx
View file

@ -9,13 +9,14 @@ import DateTime from 'component/dateTime';
import Button from 'component/button'; import Button from 'component/button';
import ChannelThumbnail from 'component/channelThumbnail'; import ChannelThumbnail from 'component/channelThumbnail';
import { formatLbryUrlForWeb } from 'util/url'; import { formatLbryUrlForWeb } from 'util/url';
import { useHistory } from 'react-router';
import { parseURI } from 'lbry-redux'; import { parseURI } from 'lbry-redux';
import { PAGE_VIEW_QUERY, DISCUSSION_PAGE } from 'page/channel/view'; import { PAGE_VIEW_QUERY, DISCUSSION_PAGE } from 'page/channel/view';
import FileThumbnail from 'component/fileThumbnail'; import FileThumbnail from 'component/fileThumbnail';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import NotificationContentChannelMenu from 'component/notificationContentChannelMenu'; import NotificationContentChannelMenu from 'component/notificationContentChannelMenu';
import LbcMessage from 'component/common/lbc-message'; import LbcMessage from 'component/common/lbc-message';
import { NavLink } from 'react-router-dom';
import UriIndicator from 'component/uriIndicator';
type Props = { type Props = {
notification: WebNotification, notification: WebNotification,
@ -27,7 +28,6 @@ type Props = {
export default function Notification(props: Props) { export default function Notification(props: Props) {
const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props; const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props;
const { push } = useHistory();
const { notification_rule, notification_parameters, is_read, id } = notification; const { notification_rule, notification_parameters, is_read, id } = notification;
const isCommentNotification = const isCommentNotification =
notification_rule === RULE.COMMENT || notification_rule === RULE.COMMENT ||
@ -57,6 +57,24 @@ export default function Notification(props: Props) {
urlParams.append('lc', notification_parameters.dynamic.hash); urlParams.append('lc', notification_parameters.dynamic.hash);
} }
const notificationTitle = notification_parameters.device.title;
const titleSplit = notificationTitle.split(' ');
let creatorName;
titleSplit.map((s) => {
if (!creatorName && s.includes('@')) {
creatorName = s;
}
});
const title = titleSplit.map((message) => {
if (creatorName === message) {
return (
<UriIndicator uri={notification_parameters.dynamic.comment_author} link />
);
} else {
return <LbcMessage>{__(' %message% ', { message })}</LbcMessage>;
}
});
try { try {
const { isChannel } = parseURI(notificationTarget); const { isChannel } = parseURI(notificationTarget);
if (isChannel) { if (isChannel) {
@ -65,24 +83,32 @@ export default function Notification(props: Props) {
} catch (e) {} } catch (e) {}
notificationLink += `?${urlParams.toString()}`; notificationLink += `?${urlParams.toString()}`;
const navLinkProps = {
to: notificationLink,
onClick: (e) => e.stopPropagation(),
};
let icon; let icon;
const creatorIcon =
<UriIndicator uri={notification_parameters.dynamic.comment_author} link>
<ChannelThumbnail small uri={notification_parameters.dynamic.comment_author} />
</UriIndicator>;
switch (notification_rule) { switch (notification_rule) {
case RULE.CREATOR_SUBSCRIBER: case RULE.CREATOR_SUBSCRIBER:
icon = <Icon icon={ICONS.SUBSCRIBE} sectionIcon />; icon = <Icon icon={ICONS.SUBSCRIBE} sectionIcon />;
break; break;
case RULE.COMMENT: case RULE.COMMENT:
case RULE.CREATOR_COMMENT: case RULE.CREATOR_COMMENT:
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.comment_author} />; icon = creatorIcon;
break; break;
case RULE.COMMENT_REPLY: case RULE.COMMENT_REPLY:
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.reply_author} />; icon = creatorIcon;
break; break;
case RULE.NEW_CONTENT: case RULE.NEW_CONTENT:
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.channel_url} />; icon = creatorIcon;
break; break;
case RULE.NEW_LIVESTREAM: case RULE.NEW_LIVESTREAM:
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.channel_url} />; icon = creatorIcon;
break; break;
case RULE.DAILY_WATCH_AVAILABLE: case RULE.DAILY_WATCH_AVAILABLE:
case RULE.DAILY_WATCH_REMIND: case RULE.DAILY_WATCH_REMIND:
@ -101,10 +127,6 @@ export default function Notification(props: Props) {
if (!is_read) { if (!is_read) {
doReadNotifications([id]); doReadNotifications([id]);
} }
if (notificationLink) {
push(notificationLink);
}
} }
function handleReadNotification(e) { function handleReadNotification(e) {
@ -134,80 +156,83 @@ export default function Notification(props: Props) {
); );
return ( return (
<Wrapper> <NavLink {...navLinkProps}>
<div <Wrapper>
className={classnames('notification__wrapper', { <div
'notification__wrapper--unread': !is_read, className={classnames('notification__wrapper', {
})} 'notification__wrapper--unread': !is_read,
> })}
<div className="notification__icon">{icon}</div> >
<div className="notification__icon">{icon}</div>
<div className="notification__content-wrapper"> <div className="notification__content-wrapper">
<div className="notification__content"> <div className="notification__content">
<div className="notification__text-wrapper"> <div className="notification__text-wrapper">
{!isCommentNotification && ( {!isCommentNotification && (
<div className="notification__title"> <div className="notification__title">{title}</div>
<LbcMessage>{notification_parameters.device.title}</LbcMessage> )}
</div>
{isCommentNotification && commentText ? (
<>
<div className="notification__title">{title}</div>
<div title={commentText} className="notification__text mobile-hidden">
{commentText}
</div>
</>
) : (
<>
<div
title={notification_parameters.device.text.replace(/\sLBC/g, ' Credits')}
className="notification__text"
>
<LbcMessage>{notification_parameters.device.text}</LbcMessage>
</div>
</>
)}
</div>
{notification_rule === RULE.NEW_CONTENT && (
<FileThumbnail uri={notification_parameters.device.target} className="notification__content-thumbnail" />
)} )}
{notification_rule === RULE.NEW_LIVESTREAM && (
{isCommentNotification && commentText ? ( <FileThumbnail
<> thumbnail={notification_parameters.device.image_url}
<div className="notification__title"> className="notification__content-thumbnail"
<LbcMessage>{notification_parameters.device.title}</LbcMessage> />
</div>
<div title={commentText} className="notification__text mobile-hidden">
{commentText}
</div>
</>
) : (
<>
<div
title={notification_parameters.device.text.replace(/\sLBC/g, ' Credits')}
className="notification__text"
>
<LbcMessage>{notification_parameters.device.text}</LbcMessage>
</div>
</>
)} )}
</div> </div>
{notification_rule === RULE.NEW_CONTENT && ( <div className="notification__extra">
<FileThumbnail uri={notification_parameters.device.target} className="notification__content-thumbnail" /> {!is_read && <Button className="notification__mark-seen" onClick={handleReadNotification} />}
)} <div className="notification__time">
{notification_rule === RULE.NEW_LIVESTREAM && ( <DateTime timeAgo date={notification.active_at} />
<FileThumbnail </div>
thumbnail={notification_parameters.device.image_url}
className="notification__content-thumbnail"
/>
)}
</div>
<div className="notification__extra">
{!is_read && <Button className="notification__mark-seen" onClick={handleReadNotification} />}
<div className="notification__time">
<DateTime timeAgo date={notification.active_at} />
</div> </div>
</div> </div>
</div>
<div className="notification__menu"> <div className="notification__menu">
<Menu> <Menu>
<MenuButton className={'menu__button notification__menu-button'} onClick={(e) => e.stopPropagation()}> <MenuButton
<Icon size={18} icon={ICONS.MORE_VERTICAL} /> className={'menu__button notification__menu-button'}
</MenuButton> onClick={(e) => {
<MenuList className="menu__list"> e.preventDefault();
<MenuItem className="menu__link" onSelect={() => doDeleteNotification(id)}> e.stopPropagation();
<Icon aria-hidden icon={ICONS.DELETE} /> }}>
{__('Delete')} <Icon size={18} icon={ICONS.MORE_VERTICAL} />
</MenuItem> </MenuButton>
{notification_rule === RULE.NEW_CONTENT && channelUrl ? ( <MenuList className="menu__list">
<NotificationContentChannelMenu uri={channelUrl} /> <MenuItem className="menu__link" onSelect={() => doDeleteNotification(id)}>
) : null} <Icon aria-hidden icon={ICONS.DELETE} />
</MenuList> {__('Delete')}
</Menu> </MenuItem>
{notification_rule === RULE.NEW_CONTENT && channelUrl ? (
<NotificationContentChannelMenu uri={channelUrl} />
) : null}
</MenuList>
</Menu>
</div>
</div> </div>
</div> </Wrapper>
</Wrapper> </NavLink>
); );
} }

4
ui/scss/component/_notification.scss
View file

@ -42,6 +42,7 @@ $contentMaxWidth: 60rem;
width: 100%; width: 100%;
display: flex; display: flex;
padding: var(--spacing-m) 0; padding: var(--spacing-m) 0;
justify-content: space-between;
.channel-thumbnail { .channel-thumbnail {
@include handleChannelGif(3rem); @include handleChannelGif(3rem);
@ -60,6 +61,7 @@ $contentMaxWidth: 60rem;
.notification__wrapper--unread { .notification__wrapper--unread {
background-color: var(--color-card-background-highlighted); background-color: var(--color-card-background-highlighted);
justify-content: space-between;
&:hover { &:hover {
background-color: var(--color-button-secondary-bg); background-color: var(--color-button-secondary-bg);
@ -120,6 +122,7 @@ $contentMaxWidth: 60rem;
} }
.notification__title { .notification__title {
position: relative;
font-size: var(--font-small); font-size: var(--font-small);
color: var(--color-text); color: var(--color-text);
margin-bottom: var(--spacing-s); margin-bottom: var(--spacing-s);
@ -135,6 +138,7 @@ $contentMaxWidth: 60rem;
.notification__text { .notification__text {
font-size: var(--font-body); font-size: var(--font-body);
color: var(--color-text);
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;