diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index 99222cb5..1dfa856d 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -153,6 +153,33 @@ text-decoration: var(--post-content-link-text-decoration-hover); } +.postDesktop .summary { + padding-top: 10px; + color: var(--post-mobile-abbr-text-color); +} + +.postDesktop .summary .expandButton { + background-image: var(--post-replies-expand-button-background-image); + background-repeat: no-repeat; + background-position: center; + width: 18px; + height: 18px; + display: inline-block; + image-rendering: pixelated; + margin: 0 3px -4px 2px; + cursor: pointer; +} + +.postDesktop .summary a { + color: var(--post-link-text-color); + text-decoration: var(--post-content-link-text-decoration); +} + +.postDesktop .summary a:hover { + color: var(--post-link-text-color-hover); + text-decoration: var(--post-content-link-text-decoration-hover); +} + .postMobile hr { padding-bottom: 30px; } diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 24119cb6..8d450319 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -4,13 +4,12 @@ import { useTranslation } from 'react-i18next'; import { Comment } from '@plebbit/plebbit-react-hooks'; import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils'; import { getFormattedDate } from '../../lib/utils/time-utils'; +import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; import useReplies from '../../hooks/use-replies'; import styles from './post.module.css'; import Markdown from '../markdown'; import Media from '../media'; -import { countLinksInCommentReplies } from '../../lib/utils/comment-utils'; - const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => { const { t } = useTranslation(); const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {}; @@ -95,7 +94,7 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => { const PostDesktop = ({ post }: Comment) => { const { t } = useTranslation(); - const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {}; + const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { displayName, shortAddress } = author || {}; const displayTitle = title && title.length > 75 ? title.slice(0, 75) + '...' : title; const displayContent = content && content.length > 1000 ? content.slice(0, 1000) + '(...)' : content; @@ -105,6 +104,10 @@ const PostDesktop = ({ post }: Comment) => { const [showThumbnail, setShowThumbnail] = useState(true); const replies = useReplies(post); + const visibleLinkCount = useCountLinksInReplies(post, 5); + const totalLinkCount = useCountLinksInReplies(post); + const repliesCount = pinned ? replyCount : replyCount - 5; + const linkCount = pinned ? totalLinkCount : totalLinkCount - visibleLinkCount; return (
@@ -193,6 +196,15 @@ const PostDesktop = ({ post }: Comment) => { )} )} + {(replies.length > 5 || pinned) && ( + + + + {repliesCount} replies {linkCount > 0 && `and ${linkCount} links`} omitted.{' '} + + Click here to view. + + )} {!pinned && replies.map((reply, index) => (
@@ -251,7 +263,7 @@ const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => { const PostMobile = ({ post }: Comment) => { const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; - const linkCount = countLinksInCommentReplies(post); + const linkCount = useCountLinksInReplies(post); const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title; const displayContent = content && content.length > 1000 ? content.slice(0, 1000) : content; diff --git a/src/hooks/use-count-links-in-replies.ts b/src/hooks/use-count-links-in-replies.ts new file mode 100644 index 00000000..bf092866 --- /dev/null +++ b/src/hooks/use-count-links-in-replies.ts @@ -0,0 +1,20 @@ +import { useMemo } from 'react'; +import { Comment } from '@plebbit/plebbit-react-hooks'; +import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'; + +const useCountLinksInReplies = (comment: Comment, firstXReplies?: number) => { + let linkCount = 0; + const flattenedReplies = useMemo(() => flattenCommentsPages(comment.replies), [comment.replies]); + + const repliesToConsider = firstXReplies !== undefined ? flattenedReplies.slice(0, firstXReplies) : flattenedReplies; + + for (let reply of repliesToConsider) { + if (reply.link) { + linkCount++; + } + } + + return linkCount; +}; + +export default useCountLinksInReplies; diff --git a/src/lib/utils/comment-utils.ts b/src/lib/utils/comment-utils.ts deleted file mode 100644 index 75b500e9..00000000 --- a/src/lib/utils/comment-utils.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Comment } from '@plebbit/plebbit-react-hooks'; - -export const countLinksInCommentReplies = (comment: Comment) => { - let linkCount = 0; - - if (comment.replyCount > 0) { - for (let reply of comment.replies.pages.topAll.comments) { - if (reply.link) { - linkCount++; - } - - if (reply.replyCount > 0) { - linkCount += countLinksInCommentReplies(reply); - } - } - } - - return linkCount; -}; diff --git a/src/themes.css b/src/themes.css index c2154100..b8b9910e 100644 --- a/src/themes.css +++ b/src/themes.css @@ -78,6 +78,7 @@ --post-menu-button-color: #000080; --post-menu-button-color-hover: red; --post-greentext-color: #789922; + --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png"); /* post mobile */ --post-mobile-background-color: #f5e9e1; @@ -189,6 +190,9 @@ --post-menu-button-color: #34345c; --post-menu-button-color-hover: #d00; --post-greentext-color: #789922; + --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png"); + + /* post mobile */ --post-mobile-background-color: #d6daf0; --post-mobile-info-border-bottom: 1px solid #b7c5d9; --post-mobile-info-background-color: #c9cde8; @@ -275,6 +279,9 @@ --post-menu-button-color: #000080; --post-menu-button-color-hover: red; --post-greentext-color: #789922; + --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png"); + + /* post mobile */ --post-mobile-background-color: #f5e9e1; --post-mobile-info-border-bottom: 1px solid #d9bfb7; --post-mobile-info-background-color: #ead6ca; @@ -374,6 +381,7 @@ --post-menu-button-color: #34345c; --post-menu-button-color-hover: #d00; --post-greentext-color: #789922; + --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png"); --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); @@ -455,6 +463,7 @@ --post-menu-button-color: #5F89AC; --post-menu-button-color-hover: #81a2be; --post-greentext-color: #b5bd68; + --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-dark.png"); --post-thumbnail-background-color: rgba(255, 255, 255, 0.01); @@ -531,6 +540,7 @@ --post-menu-button-color: #FF6600; --post-menu-button-color-hover: #FF3300; --post-greentext-color: #789922; + --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-photon.png"); --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);