From cd9dc5cf96a9b89352a39e6218b5fd485d3dcb37 Mon Sep 17 00:00:00 2001
From: Rafael <rafael.saes@odysee.com>
Date: Wed, 29 Dec 2021 17:04:02 -0300
Subject: [PATCH] Highlight chat message if your channel is mentioned

---
 ui/component/common/markdown-preview.jsx |  3 +++
 ui/component/livestreamComment/view.jsx  | 11 ++++++++++-
 ui/component/markdownLink/index.js       |  6 +++++-
 ui/component/markdownLink/view.jsx       | 17 +++++++++++++----
 ui/scss/component/_livestream.scss       |  4 ++++
 5 files changed, 35 insertions(+), 6 deletions(-)

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) {
             </div>
           ) : (
             <div className="livestream-comment__text">
-              <MarkdownPreview content={message} promptLinks stakedLevel={stakedLevel} disableTimestamps />
+              <MarkdownPreview
+                content={message}
+                promptLinks
+                stakedLevel={stakedLevel}
+                disableTimestamps
+                setUserMention={setUserMention}
+              />
             </div>
           )}
         </div>
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<string>,
+  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 = <span>{children}</span>;
 
   // 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;
 }