From fa325ac48c724a8d939e8b7d4125ddfc16f2e64e Mon Sep 17 00:00:00 2001 From: saltrafael Date: Fri, 8 Oct 2021 09:27:23 -0300 Subject: [PATCH 1/6] Fix CSS for live chat embeds --- ui/scss/component/_livestream.scss | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/ui/scss/component/_livestream.scss b/ui/scss/component/_livestream.scss index a2373f683..4e951d140 100644 --- a/ui/scss/component/_livestream.scss +++ b/ui/scss/component/_livestream.scss @@ -91,11 +91,22 @@ $recent-msg-button__height: 2rem; } } +.livestream-comment__info { + overflow: hidden; +} + .livestream-comment--superchat { + .livestream-comment--superchat { margin-bottom: var(--spacing-xxs); } + .livestream-comment__body { + display: flex; + align-items: flex-start; + flex-direction: unset; + flex: unset; + } + .livestream-comment__info { margin-top: calc(var(--spacing-xxs) / 2); } @@ -115,13 +126,10 @@ $recent-msg-button__height: 2rem; .livestream-comment__body { display: flex; - align-items: flex-start; -} - -.livestream-comment__body { - display: flex; - align-items: flex-start; + flex-direction: column; + flex: 2; margin-left: var(--spacing-s); + overflow: hidden; .channel-thumbnail { @include handleChannelGif(2rem); @@ -353,6 +361,7 @@ $recent-msg-button__height: 2rem; .livestream-comment__text { padding-right: var(--spacing-xl); padding-bottom: var(--spacing-xxs); + .markdown-preview { p { word-break: break-word; -- 2.45.3 From 57f9e857586930523b67c52de8f78734d11181ed Mon Sep 17 00:00:00 2001 From: saltrafael Date: Fri, 8 Oct 2021 09:30:55 -0300 Subject: [PATCH 2/6] Fix Markdown Lists in Comments --- ui/scss/component/_comments.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss index 68812eda2..fb164327e 100644 --- a/ui/scss/component/_comments.scss +++ b/ui/scss/component/_comments.scss @@ -268,9 +268,12 @@ $thumbnailWidthSmall: 1rem; max-width: 35rem; color: var(--color-text); - ul li, - ol li { - list-style-position: inside; + ul li { + list-style-type: disc; + + ul li { + list-style-type: circle; + } } p { -- 2.45.3 From b4f3e40a0bed4cad9d036f5948fa5c394de04332 Mon Sep 17 00:00:00 2001 From: saltrafael Date: Fri, 8 Oct 2021 09:33:48 -0300 Subject: [PATCH 3/6] Disable copy link menu option on livestream comments --- ui/component/commentMenuList/view.jsx | 4 +++- ui/component/livestreamComment/view.jsx | 5 +++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/ui/component/commentMenuList/view.jsx b/ui/component/commentMenuList/view.jsx index b938f1b16..c2ef10c29 100644 --- a/ui/component/commentMenuList/view.jsx +++ b/ui/component/commentMenuList/view.jsx @@ -20,6 +20,7 @@ type Props = { disableEdit?: boolean, disableRemove?: boolean, supportAmount?: any, + isLiveComment: boolean, // --- select --- claim: ?Claim, claimIsMine: boolean, @@ -54,6 +55,7 @@ function CommentMenuList(props: Props) { disableEdit, disableRemove, supportAmount, + isLiveComment, doToast, handleEditComment, openModal, @@ -229,7 +231,7 @@ function CommentMenuList(props: Props) { )} - {IS_WEB && ( + {IS_WEB && !isLiveComment && (
diff --git a/ui/component/livestreamComment/view.jsx b/ui/component/livestreamComment/view.jsx index cefdfc8ae..8fccfa43b 100644 --- a/ui/component/livestreamComment/view.jsx +++ b/ui/component/livestreamComment/view.jsx @@ -119,10 +119,11 @@ function LivestreamComment(props: Props) { commentId={commentId} authorUri={authorUri} commentIsMine={commentIsMine} - disableEdit - isTopLevel isPinned={isPinned} disableRemove={supportAmount > 0} + isTopLevel + disableEdit + isLiveComment />
-- 2.45.3 From bf6d42dee8dcaa651d06bf0d50f0dfe9229342c4 Mon Sep 17 00:00:00 2001 From: saltrafael Date: Fri, 8 Oct 2021 10:11:59 -0300 Subject: [PATCH 4/6] Fix nested indents in Live Chat --- ui/component/common/markdown-preview.jsx | 27 +++++++++++++++++++----- ui/scss/component/_markdown-preview.scss | 2 ++ ui/util/remark-lbry.js | 2 +- 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/ui/component/common/markdown-preview.jsx b/ui/component/common/markdown-preview.jsx index fba66eea5..da487dee5 100644 --- a/ui/component/common/markdown-preview.jsx +++ b/ui/component/common/markdown-preview.jsx @@ -10,7 +10,7 @@ import remarkFrontMatter from 'remark-frontmatter'; import reactRenderer from 'remark-react'; import MarkdownLink from 'component/markdownLink'; import defaultSchema from 'hast-util-sanitize/lib/github.json'; -import { formatedLinks, inlineLinks } from 'util/remark-lbry'; +import { formattedLinks, inlineLinks } from 'util/remark-lbry'; import { formattedTimestamp, inlineTimestamp } from 'util/remark-timestamp'; import ZoomableImage from 'component/zoomableImage'; import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config'; @@ -133,8 +133,9 @@ function isStakeEnoughForPreview(stakedLevel) { const MarkdownPreview = (props: MarkdownProps) => { const { content, strip, simpleLinks, noDataStore, className, parentCommentId, isMarkdownPost, stakedLevel } = props; + const strippedContent = content - ? content.replace(REPLACE_REGEX, (iframeHtml, y, iframeSrc) => { + ? content.replace(REPLACE_REGEX, (iframeHtml) => { // Let the browser try to create an iframe to see if the markup is valid const outer = document.createElement('div'); outer.innerHTML = iframeHtml; @@ -152,6 +153,10 @@ const MarkdownPreview = (props: MarkdownProps) => { }) : ''; + const initialQuote = strippedContent.split(' ').find((word) => word.length > 0 || word.charAt(0) === '>'); + let stripQuote; + if (initialQuote && initialQuote.charAt(0) === '>') stripQuote = true; + const remarkOptions: Object = { sanitize: schema, fragment: React.Fragment, @@ -192,10 +197,22 @@ const MarkdownPreview = (props: MarkdownProps) => { }; // Strip all content and just render text - if (strip) { + if (strip || stripQuote) { // Remove new lines and extra space remarkOptions.remarkReactComponents.p = SimpleText; - return ( + return stripQuote ? ( + +
+ { + remark() + .use(remarkStrip) + .use(remarkFrontMatter, ['yaml']) + .use(reactRenderer, remarkOptions) + .processSync(content).contents + } +
+ + ) : ( { remark() @@ -215,7 +232,7 @@ const MarkdownPreview = (props: MarkdownProps) => { .use(remarkAttr, remarkAttrOpts) // Remark plugins for lbry urls // Note: The order is important - .use(formatedLinks) + .use(formattedLinks) .use(inlineLinks) .use(isMarkdownPost ? null : inlineTimestamp) .use(isMarkdownPost ? null : formattedTimestamp) diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss index ae39627d0..2af7c40d4 100644 --- a/ui/scss/component/_markdown-preview.scss +++ b/ui/scss/component/_markdown-preview.scss @@ -1,4 +1,6 @@ .markdown-preview { + word-break: break-all; + > :first-child { margin-top: 0; } diff --git a/ui/util/remark-lbry.js b/ui/util/remark-lbry.js index ad0ea9145..7f3d9460e 100644 --- a/ui/util/remark-lbry.js +++ b/ui/util/remark-lbry.js @@ -149,7 +149,7 @@ const transform = (tree) => { visit(tree, ['link'], visitor); }; -export const formatedLinks = () => transform; +export const formattedLinks = () => transform; // Main module export function inlineLinks() { -- 2.45.3 From 5b29107d082e8792f78a5a5120a2830d699ce4cf Mon Sep 17 00:00:00 2001 From: saltrafael Date: Fri, 8 Oct 2021 09:34:36 -0300 Subject: [PATCH 5/6] Fix mentions and timestamps not parsed in bullet lists --- ui/util/remark-lbry.js | 8 ++++---- ui/util/remark-timestamp.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/ui/util/remark-lbry.js b/ui/util/remark-lbry.js index 7f3d9460e..99c1601cb 100644 --- a/ui/util/remark-lbry.js +++ b/ui/util/remark-lbry.js @@ -108,15 +108,15 @@ function tokenizeURI(eat, value, silent) { // Configure tokenizer for lbry urls tokenizeURI.locator = locateURI; -tokenizeURI.notInList = true; +tokenizeURI.notInList = false; tokenizeURI.notInLink = true; -tokenizeURI.notInBlock = true; +tokenizeURI.notInBlock = false; // Configure tokenizer for lbry channels tokenizeMention.locator = locateMention; -tokenizeMention.notInList = true; +tokenizeMention.notInList = false; tokenizeMention.notInLink = true; -tokenizeMention.notInBlock = true; +tokenizeMention.notInBlock = false; const visitor = (node, index, parent) => { if (node.type === 'link' && parent && parent.type === 'paragraph') { diff --git a/ui/util/remark-timestamp.js b/ui/util/remark-timestamp.js index 288047667..0f410619e 100644 --- a/ui/util/remark-timestamp.js +++ b/ui/util/remark-timestamp.js @@ -108,9 +108,9 @@ function tokenizeTimestamp(eat, value, silent) { } tokenizeTimestamp.locator = locateTimestamp; -tokenizeTimestamp.notInList = true; // Flag doesn't work? It'll always tokenizes in List and never in Bullet. +tokenizeTimestamp.notInList = false; // Flag doesn't work? It'll always tokenizes in List and never in Bullet. tokenizeTimestamp.notInLink = true; -tokenizeTimestamp.notInBlock = true; +tokenizeTimestamp.notInBlock = false; export function inlineTimestamp() { const Parser = this.Parser; -- 2.45.3 From 763b118a40969057babe5309dfda8a7fee6957ca Mon Sep 17 00:00:00 2001 From: saltrafael Date: Fri, 8 Oct 2021 09:38:08 -0300 Subject: [PATCH 6/6] Highlight livestream comment and menu button on hover --- ui/component/livestreamComment/view.jsx | 11 ++++++++--- ui/scss/component/_livestream.scss | 12 ++++++++++++ 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/ui/component/livestreamComment/view.jsx b/ui/component/livestreamComment/view.jsx index 8fccfa43b..ba926dc6e 100644 --- a/ui/component/livestreamComment/view.jsx +++ b/ui/component/livestreamComment/view.jsx @@ -11,6 +11,7 @@ import classnames from 'classnames'; import CommentMenuList from 'component/commentMenuList'; import Button from 'component/button'; import CreditAmount from 'component/common/credit-amount'; +import useHover from 'effects/use-hover'; type Props = { uri: string, @@ -43,14 +44,18 @@ function LivestreamComment(props: Props) { isPinned, } = props; - const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri; + const commentRef = React.useRef(); + const isHovering = useHover(commentRef); + const commentByContentOwner = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri; const { claimName } = parseURI(authorUri); return (
  • 0, + 'livestream-comment--hover': isHovering, })} + ref={commentRef} > {supportAmount > 0 && (
    @@ -78,7 +83,7 @@ function LivestreamComment(props: Props) { )} - {commentByOwnerOfContent && ( + {commentByContentOwner && ( @@ -88,7 +93,7 @@ function LivestreamComment(props: Props) {