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; }