diff --git a/ui/component/common/markdown-preview.jsx b/ui/component/common/markdown-preview.jsx
index f9c56a5c2..ccb12edd4 100644
--- a/ui/component/common/markdown-preview.jsx
+++ b/ui/component/common/markdown-preview.jsx
@@ -56,6 +56,7 @@ type MarkdownProps = {
isMarkdownPost?: boolean,
disableTimestamps?: boolean,
stakedLevel?: number,
+ setUserMention?: (boolean) => void,
};
// ****************************************************************************
@@ -153,6 +154,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
isMarkdownPost,
disableTimestamps,
stakedLevel,
+ setUserMention,
} = props;
const strippedContent = content
@@ -187,6 +189,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
isMarkdownPost={isMarkdownPost}
simpleLinks={simpleLinks}
allowPreview={isStakeEnoughForPreview(stakedLevel)}
+ setUserMention={setUserMention}
/>
),
// Workaraund of remarkOptions.Fragment
diff --git a/ui/component/livestreamComment/view.jsx b/ui/component/livestreamComment/view.jsx
index 8e43e5345..3d9b1d175 100644
--- a/ui/component/livestreamComment/view.jsx
+++ b/ui/component/livestreamComment/view.jsx
@@ -45,6 +45,8 @@ function LivestreamComment(props: Props) {
isPinned,
} = props;
+ const [hasUserMention, setUserMention] = React.useState(false);
+
const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri;
const { claimName } = parseURI(authorUri);
const stickerFromMessage = parseSticker(message);
@@ -54,6 +56,7 @@ function LivestreamComment(props: Props) {
className={classnames('livestream-comment', {
'livestream-comment--superchat': supportAmount > 0,
'livestream-comment--sticker': Boolean(stickerFromMessage),
+ 'livestream-comment--mentioned': hasUserMention,
})}
>
{supportAmount > 0 && (
@@ -117,7 +120,13 @@ function LivestreamComment(props: Props) {
) : (
-
+
)}
diff --git a/ui/component/markdownLink/index.js b/ui/component/markdownLink/index.js
index 9eb0ce6c6..924c70c59 100644
--- a/ui/component/markdownLink/index.js
+++ b/ui/component/markdownLink/index.js
@@ -1,8 +1,12 @@
import { connect } from 'react-redux';
import { doOpenModal } from 'redux/actions/app';
+import { selectMyChannelUrls } from 'redux/selectors/claims';
import MarkdownLink from './view';
-const select = () => ({});
+const select = (state, props) => ({
+ myChannelUrls: selectMyChannelUrls(state),
+});
+
const perform = (dispatch) => ({
openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
});
diff --git a/ui/component/markdownLink/view.jsx b/ui/component/markdownLink/view.jsx
index d2d7ab6fd..a0e0edd21 100644
--- a/ui/component/markdownLink/view.jsx
+++ b/ui/component/markdownLink/view.jsx
@@ -15,6 +15,8 @@ type Props = {
parentCommentId?: string,
isMarkdownPost?: boolean,
simpleLinks?: boolean,
+ myChannelUrls: ?Array,
+ setUserMention?: (boolean) => void,
};
function MarkdownLink(props: Props) {
@@ -27,6 +29,8 @@ function MarkdownLink(props: Props) {
parentCommentId,
isMarkdownPost,
simpleLinks = false,
+ myChannelUrls,
+ setUserMention,
} = props;
let decodedUri;
@@ -34,15 +38,20 @@ function MarkdownLink(props: Props) {
decodedUri = decodeURI(href);
} catch (e) {}
- if (!href || !decodedUri) {
- return children || null;
- }
-
let element = {children};
// Regex for url protocol
const protocolRegex = new RegExp('^(https?|lbry|mailto)+:', 'i');
const protocol = href ? protocolRegex.exec(href) : null;
+ const isMention = href.startsWith('lbry://@');
+ const mentionedMyChannel =
+ isMention && (myChannelUrls ? myChannelUrls.some((url) => url.replace('#', ':') === href) : false);
+
+ React.useEffect(() => {
+ if (mentionedMyChannel && setUserMention) setUserMention(true);
+ }, [mentionedMyChannel, setUserMention]);
+
+ if (!href || !decodedUri) return children || null;
let linkUrlObject;
try {
diff --git a/ui/scss/component/_livestream.scss b/ui/scss/component/_livestream.scss
index c8b1cf4d7..a54cdab13 100644
--- a/ui/scss/component/_livestream.scss
+++ b/ui/scss/component/_livestream.scss
@@ -104,6 +104,10 @@ $recent-msg-button__height: 2rem;
}
}
+.livestream-comment--mentioned {
+ background-color: var(--color-card-background-highlighted);
+}
+
.livestream-comment__info {
overflow: hidden;
}