diff --git a/CHANGELOG.md b/CHANGELOG.md index 93caaaafa..a6118a90e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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)) diff --git a/ui/component/notification/view.jsx b/ui/component/notification/view.jsx index 889d43ac4..3a0d70811 100644 --- a/ui/component/notification/view.jsx +++ b/ui/component/notification/view.jsx @@ -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 ( + + + + ); + }; + 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 = ; + channelUrl = notification_parameters.dynamic.comment_author; + icon = creatorIcon(channelUrl); break; case RULE.COMMENT_REPLY: - icon = ; + channelUrl = notification_parameters.dynamic.reply_author; + icon = creatorIcon(channelUrl); break; case RULE.NEW_CONTENT: - icon = ; + channelUrl = notification_parameters.dynamic.channel_url; + icon = creatorIcon(channelUrl); break; case RULE.NEW_LIVESTREAM: - icon = ; + 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 = ; } + 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 = ; + fullTitle.push(' '); + const resultTitle = fullTitle; + fullTitle = [' ']; + + return [resultTitle.join(' '), uriIndicator]; + } else { + fullTitle.push(message); + + if (index === titleSplit.length - 1) { + return {fullTitle.join(' ')}; + } + } + }); + + 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 }) => ( - - {props.children} - + + + {props.children} + + ) : (props: { children: any }) => (
- {!isCommentNotification && ( -
- {notification_parameters.device.title} -
- )} + {!isCommentNotification &&
{title}
} {isCommentNotification && commentText ? ( <> -
- {notification_parameters.device.title} -
+
{title}
{commentText}
@@ -193,7 +229,13 @@ export default function Notification(props: Props) {
- e.stopPropagation()}> + { + e.preventDefault(); + e.stopPropagation(); + }} + > diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss index f092095c4..6d61abba5 100644 --- a/ui/scss/component/_notification.scss +++ b/ui/scss/component/_notification.scss @@ -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;