Improve clickability of notification links (#6711)
This commit is contained in:
saltrafael
GitHub
parent
bd92110d1f
commit
d7329840ef
3 changed files with 81 additions and 34 deletions
|
|
@ -19,6 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
|||
- Update lighthouse search api _community pr!_ ([#6731](https://github.com/lbryio/lbry-desktop/pull/6731))
|
||||
- Update sockety api _community pr!_ ([#6747](https://github.com/lbryio/lbry-desktop/pull/6747))
|
||||
- Use resolve for OG metadata instead of chainquery _community pr!_ ([#6787](https://github.com/lbryio/lbry-desktop/pull/6787))
|
||||
- Improved clickability of notification links _community pr!_ ([#6711](https://github.com/lbryio/lbry-desktop/pull/6711))
|
||||
|
||||
### Fixed
|
||||
- App now supports '#' and ':' for claimId separator ([#6496](https://github.com/lbryio/lbry-desktop/pull/6496))
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ import FileThumbnail from 'component/fileThumbnail';
|
|||
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
|
||||
import NotificationContentChannelMenu from 'component/notificationContentChannelMenu';
|
||||
import LbcMessage from 'component/common/lbc-message';
|
||||
import UriIndicator from 'component/uriIndicator';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
type Props = {
|
||||
notification: WebNotification,
|
||||
|
|
@ -29,13 +31,12 @@ export default function Notification(props: Props) {
|
|||
const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props;
|
||||
const { push } = useHistory();
|
||||
const { notification_rule, notification_parameters, is_read, id } = notification;
|
||||
|
||||
const isCommentNotification =
|
||||
notification_rule === RULE.COMMENT ||
|
||||
notification_rule === RULE.COMMENT_REPLY ||
|
||||
notification_rule === RULE.CREATOR_COMMENT;
|
||||
const commentText = isCommentNotification && notification_parameters.dynamic.comment;
|
||||
const channelUrl =
|
||||
(notification_rule === RULE.NEW_CONTENT && notification.notification_parameters.dynamic.channel_url) || '';
|
||||
|
||||
let notificationTarget;
|
||||
switch (notification_rule) {
|
||||
|
|
@ -51,21 +52,14 @@ export default function Notification(props: Props) {
|
|||
notificationTarget = notification_parameters.device.target;
|
||||
}
|
||||
|
||||
let notificationLink = formatLbryUrlForWeb(notificationTarget);
|
||||
let urlParams = new URLSearchParams();
|
||||
if (isCommentNotification && notification_parameters.dynamic.hash) {
|
||||
urlParams.append('lc', notification_parameters.dynamic.hash);
|
||||
}
|
||||
|
||||
try {
|
||||
const { isChannel } = parseURI(notificationTarget);
|
||||
if (isChannel) {
|
||||
urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE);
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
notificationLink += `?${urlParams.toString()}`;
|
||||
|
||||
const creatorIcon = (channelUrl) => {
|
||||
return (
|
||||
<UriIndicator uri={channelUrl} link>
|
||||
<ChannelThumbnail small uri={channelUrl} />
|
||||
</UriIndicator>
|
||||
);
|
||||
};
|
||||
let channelUrl;
|
||||
let icon;
|
||||
switch (notification_rule) {
|
||||
case RULE.CREATOR_SUBSCRIBER:
|
||||
|
|
@ -73,16 +67,20 @@ export default function Notification(props: Props) {
|
|||
break;
|
||||
case RULE.COMMENT:
|
||||
case RULE.CREATOR_COMMENT:
|
||||
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.comment_author} />;
|
||||
channelUrl = notification_parameters.dynamic.comment_author;
|
||||
icon = creatorIcon(channelUrl);
|
||||
break;
|
||||
case RULE.COMMENT_REPLY:
|
||||
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.reply_author} />;
|
||||
channelUrl = notification_parameters.dynamic.reply_author;
|
||||
icon = creatorIcon(channelUrl);
|
||||
break;
|
||||
case RULE.NEW_CONTENT:
|
||||
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.channel_url} />;
|
||||
channelUrl = notification_parameters.dynamic.channel_url;
|
||||
icon = creatorIcon(channelUrl);
|
||||
break;
|
||||
case RULE.NEW_LIVESTREAM:
|
||||
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.channel_url} />;
|
||||
channelUrl = notification_parameters.dynamic.channel_url;
|
||||
icon = creatorIcon(channelUrl);
|
||||
break;
|
||||
case RULE.DAILY_WATCH_AVAILABLE:
|
||||
case RULE.DAILY_WATCH_REMIND:
|
||||
|
|
@ -97,12 +95,54 @@ export default function Notification(props: Props) {
|
|||
icon = <Icon icon={ICONS.NOTIFICATION} sectionIcon />;
|
||||
}
|
||||
|
||||
let notificationLink = formatLbryUrlForWeb(notificationTarget);
|
||||
let urlParams = new URLSearchParams();
|
||||
if (isCommentNotification && notification_parameters.dynamic.hash) {
|
||||
urlParams.append('lc', notification_parameters.dynamic.hash);
|
||||
}
|
||||
|
||||
let channelName = channelUrl && '@' + channelUrl.split('@')[1].split('#')[0];
|
||||
|
||||
const notificationTitle = notification_parameters.device.title;
|
||||
const titleSplit = notificationTitle.split(' ');
|
||||
let fullTitle = [' '];
|
||||
let uriIndicator;
|
||||
const title = titleSplit.map((message, index) => {
|
||||
if (channelName === message) {
|
||||
uriIndicator = <UriIndicator uri={channelUrl} link />;
|
||||
fullTitle.push(' ');
|
||||
const resultTitle = fullTitle;
|
||||
fullTitle = [' '];
|
||||
|
||||
return [resultTitle.join(' '), uriIndicator];
|
||||
} else {
|
||||
fullTitle.push(message);
|
||||
|
||||
if (index === titleSplit.length - 1) {
|
||||
return <LbcMessage>{fullTitle.join(' ')}</LbcMessage>;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
try {
|
||||
const { isChannel } = parseURI(notificationTarget);
|
||||
if (isChannel) {
|
||||
urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE);
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
notificationLink += `?${urlParams.toString()}`;
|
||||
const navLinkProps = {
|
||||
to: notificationLink,
|
||||
onClick: (e) => e.stopPropagation(),
|
||||
};
|
||||
|
||||
function handleNotificationClick() {
|
||||
if (!is_read) {
|
||||
doReadNotifications([id]);
|
||||
}
|
||||
|
||||
if (notificationLink) {
|
||||
if (menuButton && notificationLink) {
|
||||
push(notificationLink);
|
||||
}
|
||||
}
|
||||
|
|
@ -120,9 +160,11 @@ export default function Notification(props: Props) {
|
|||
)
|
||||
: notificationLink
|
||||
? (props: { children: any }) => (
|
||||
<a className="menu__link--notification" onClick={handleNotificationClick}>
|
||||
{props.children}
|
||||
</a>
|
||||
<NavLink {...navLinkProps}>
|
||||
<a className="menu__link--notification" onClick={handleNotificationClick}>
|
||||
{props.children}
|
||||
</a>
|
||||
</NavLink>
|
||||
)
|
||||
: (props: { children: any }) => (
|
||||
<span
|
||||
|
|
@ -145,17 +187,11 @@ export default function Notification(props: Props) {
|
|||
<div className="notification__content-wrapper">
|
||||
<div className="notification__content">
|
||||
<div className="notification__text-wrapper">
|
||||
{!isCommentNotification && (
|
||||
<div className="notification__title">
|
||||
<LbcMessage>{notification_parameters.device.title}</LbcMessage>
|
||||
</div>
|
||||
)}
|
||||
{!isCommentNotification && <div className="notification__title">{title}</div>}
|
||||
|
||||
{isCommentNotification && commentText ? (
|
||||
<>
|
||||
<div className="notification__title">
|
||||
<LbcMessage>{notification_parameters.device.title}</LbcMessage>
|
||||
</div>
|
||||
<div className="notification__title">{title}</div>
|
||||
<div title={commentText} className="notification__text mobile-hidden">
|
||||
{commentText}
|
||||
</div>
|
||||
|
|
@ -193,7 +229,13 @@ export default function Notification(props: Props) {
|
|||
|
||||
<div className="notification__menu">
|
||||
<Menu>
|
||||
<MenuButton className={'menu__button notification__menu-button'} onClick={(e) => e.stopPropagation()}>
|
||||
<MenuButton
|
||||
className={'menu__button notification__menu-button'}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Icon size={18} icon={ICONS.MORE_VERTICAL} />
|
||||
</MenuButton>
|
||||
<MenuList className="menu__list">
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ $contentMaxWidth: 60rem;
|
|||
width: 100%;
|
||||
display: flex;
|
||||
padding: var(--spacing-m) 0;
|
||||
justify-content: space-between;
|
||||
|
||||
.channel-thumbnail {
|
||||
@include handleChannelGif(3rem);
|
||||
|
|
@ -60,6 +61,7 @@ $contentMaxWidth: 60rem;
|
|||
|
||||
.notification__wrapper--unread {
|
||||
background-color: var(--color-card-background-highlighted);
|
||||
justify-content: space-between;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-secondary-bg);
|
||||
|
|
@ -120,6 +122,7 @@ $contentMaxWidth: 60rem;
|
|||
}
|
||||
|
||||
.notification__title {
|
||||
position: relative;
|
||||
font-size: var(--font-small);
|
||||
color: var(--color-text);
|
||||
margin-bottom: var(--spacing-s);
|
||||
|
|
@ -135,6 +138,7 @@ $contentMaxWidth: 60rem;
|
|||
|
||||
.notification__text {
|
||||
font-size: var(--font-body);
|
||||
color: var(--color-text);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue