diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx index 2ccd0606..29378895 100644 --- a/src/components/styled/views/Board.styled.jsx +++ b/src/components/styled/views/Board.styled.jsx @@ -3266,6 +3266,9 @@ export const BoardForm = styled.div` switch (selectedStyle) { case 'Yotsuba': return ` + .capcode { + color: purple !important; + } .op-container { background-color: #f5e9e1; border: 1px solid #d9bfb7 !important; @@ -3383,6 +3386,9 @@ export const BoardForm = styled.div` case 'Yotsuba-B': return ` + .capcode { + color: purple !important; + } .op-container { background-color: #d6daf0; border: 1px solid #b7c5d9 !important; @@ -3496,6 +3502,9 @@ export const BoardForm = styled.div` case 'Futaba': return ` + .capcode { + color: purple !important; + } .op-container { background-color: #f5e9e1; border: 1px solid #d9bfb7 !important; @@ -3612,6 +3621,9 @@ export const BoardForm = styled.div` case 'Burichan': return ` + .capcode { + color: purple !important; + } .op-container { background-color: #d6daf0; border: 1px solid #b7c5d9 !important; @@ -3724,6 +3736,10 @@ export const BoardForm = styled.div` case 'Tomorrow': return ` + .capcode { + color: #81a2be !important; + } + .op-container { background-color: #282A2E; border: 1px solid #2D2F33 !important; @@ -3846,6 +3862,9 @@ export const BoardForm = styled.div` case 'Photon': return ` + .capcode { + color: #f60 !important; + } .op-container { background-color: #eee; border: 1px solid #ccc !important; diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 06549823..292f9c4b 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -765,868 +765,930 @@ const Board = () => { ) : ( feed.length > 0 ? ( <> - {subplebbit.rules ? - <> -
-
-
-
-
- - Rules -   - ## Board Admins -   - {getDate(subplebbit.createdAt)} -   - Sticky -   - Closed -   - [ - {}} style={{textDecoration: "none"}} className="reply-link">Reply - ] - - { - threadMenuRefs.current[subplebbit.statsCid] = el; - }} - className='post-menu-button' - rotated={openMenuCid === subplebbit.statsCid} - onClick={(event) => { - event.stopPropagation(); - const rect = threadMenuRefs.current[subplebbit.statsCid].getBoundingClientRect(); - setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); - setOpenMenuCid(prevCid => (prevCid === subplebbit.statsCid ? null : subplebbit.statsCid)); - }} - > - ▶ - - {createPortal( - {postMenuCatalogRef.current = el}} - onClick={(event) => event.stopPropagation()} - style={{position: "absolute", - top: menuPosition.top + 7, - left: menuPosition.left}}> -
-
    -
  • handleOptionClick(subplebbit.statsCid)}>Hide thread
    • - {/* {isModerator ? ( - <> - change rules - - ) : null} */} -
-
- , document.body - )} - -
-
- {subplebbit.rules.map((rule, index) => ( - - {index + 1}. {rule} -
- - ))} -
-
-
-
-
-
-
-
-
-
-
- - - ## Board Admins -   - - Sticky -   - Closed - -
- Rules -   - - {getDate(subplebbit.createdAt)} -   -
-
-
- {subplebbit.rules.map((rule, index) => ( - - {index + 1}. {rule} -
- - ))} -
-
-
-
- {}} className="button-mobile">View Thread -
-
-
- - : null} - {subplebbit.description ? - <> -
-
-
-
-
- {subplebbit.suggested?.avatarUrl ? ( -
- -
- - board avatar + {subplebbit.rules ? + <> +
+
+
+
+
+ + Rules +   + ## Board Admins +   + {getDate(subplebbit.createdAt)} +   + Sticky +   + Closed +   + [ + {}} style={{textDecoration: "none"}} className="reply-link">Reply + ] -
-
- ) : null} - - Welcome to {subplebbit.title || subplebbit.address} -   - ## Board Admins -   - {getDate(subplebbit.createdAt)} -   - Sticky -   - Closed -   - [ - {}} style={{textDecoration: "none"}} className="reply-link">Reply - ] - - { - threadMenuRefs.current[subplebbit.pubsubTopic] = el; - }} - className='post-menu-button' - rotated={openMenuCid === subplebbit.pubsubTopic} - onClick={(event) => { - event.stopPropagation(); - const rect = threadMenuRefs.current[subplebbit.pubsubTopic].getBoundingClientRect(); - setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); - setOpenMenuCid(prevCid => (prevCid === subplebbit.pubsubTopic ? null : subplebbit.pubsubTopic)); - }} - > - ▶ - - {createPortal( - {postMenuCatalogRef.current = el}} - onClick={(event) => event.stopPropagation()} - style={{position: "absolute", - top: menuPosition.top + 7, - left: menuPosition.left}}> -
-
    -
  • handleOptionClick(subplebbit.pubsubTopic)}>Hide thread
    • - {/* {isModerator ? ( - <> - change description - - ) : null} */} -
-
- , document.body - )} - -
-
- {subplebbit.description} -
-
-
-
-
-
-
- {subplebbit.rules ? -
: -
- } -
-
-
- - - ## Board Admins -   - - Sticky -   - Closed - -
- Welcome to {subplebbit.title || subplebbit.address} -   - - {getDate(subplebbit.createdAt)} -   -
- {subplebbit.suggested?.avatarUrl ? ( -
-
- - board avatar -
image
+ { + threadMenuRefs.current["rules"] = el; + }} + className='post-menu-button' + rotated={openMenuCid === "rules"} + onClick={(event) => { + event.stopPropagation(); + const rect = threadMenuRefs.current["rules"].getBoundingClientRect(); + setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); + setOpenMenuCid(prevCid => (prevCid === "rules" ? null : "rules")); + }} + > + ▶ + + {createPortal( + {postMenuCatalogRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + top: menuPosition.top + 7, + left: menuPosition.left}}> +
+
    +
  • handleOptionClick("rules")}>Hide thread
    • + {/* {isModerator ? ( + <> + change rules + + ) : null} */} +
+
+ , document.body + )} +
+
+ {subplebbit.rules.map((rule, index) => ( + + {index + 1}. {rule} +
+ + ))} +
+
- ) : null} -
-
- {subplebbit.description} -
-
+
-
- {}} className="button-mobile">View Thread -
-
-
- - : null} - { - const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {}; - const commentMediaInfo = getCommentMediaInfo(thread); - const fallbackImgUrl = "assets/filedeleted-res.gif"; - return ( - -
-
-
-
-
- {commentMediaInfo?.url ? ( -
-
- Link:  - { - commentMediaInfo?.url.length > 30 ? - commentMediaInfo?.url.slice(0, 30) + "(...)" : - commentMediaInfo?.url - } ({commentMediaInfo?.type}) +
+
+
+
+
+ + + ## Board Admins +   + + Sticky +   + Closed + +
+ Rules +   + + {getDate(subplebbit.createdAt)} +  
- {commentMediaInfo?.type === "webpage" ? ( -
- - {thread.thumbnailUrl ? ( +
+
+ {subplebbit.rules.map((rule, index) => ( + + {index + 1}. {rule} +
+ + ))} +
+
+
+
+ {}} className="button-mobile">View Thread +
+
+
+ + : null} + {subplebbit.description ? + <> +
+
+
+
+
+ {subplebbit.suggested?.avatarUrl ? ( + + ) : null} + + Welcome to {subplebbit.title || subplebbit.address} +   + ## Board Admins +   + {getDate(subplebbit.createdAt)} +   + Sticky +   + Closed +   + [ + {}} style={{textDecoration: "none"}} className="reply-link">Reply + ] + + { + threadMenuRefs.current[subplebbit.pubsubTopic] = el; + }} + className='post-menu-button' + rotated={openMenuCid === subplebbit.pubsubTopic} + onClick={(event) => { + event.stopPropagation(); + const rect = threadMenuRefs.current[subplebbit.pubsubTopic].getBoundingClientRect(); + setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); + setOpenMenuCid(prevCid => (prevCid === subplebbit.pubsubTopic ? null : subplebbit.pubsubTopic)); + }} + > + ▶ + + {createPortal( + {postMenuCatalogRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + top: menuPosition.top + 7, + left: menuPosition.left}}> +
+
    +
  • handleOptionClick(subplebbit.pubsubTopic)}>Hide thread
    • + {/* {isModerator ? ( + <> + change description + + ) : null} */} +
+
+ , document.body + )} + +
+
+ {subplebbit.description} +
+
+
+
+
+
+
+ {subplebbit.rules ? +
: +
+ } +
+
+
+ + + ## Board Admins +   + + Sticky +   + Closed + +
+ Welcome to {subplebbit.title || subplebbit.address} +   + + {getDate(subplebbit.createdAt)} +   +
+ {subplebbit.suggested?.avatarUrl ? ( +
+
+ + board avatar +
image
+ +
+
+ ) : null} +
+
+ {subplebbit.description} +
+
+
+
+ {}} className="button-mobile">View Thread +
+
+
+ + : null} + { + const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {}; + const commentMediaInfo = getCommentMediaInfo(thread); + const fallbackImgUrl = "assets/filedeleted-res.gif"; + return ( + +
+
+
+
+
+ {commentMediaInfo?.url ? ( +
+ + {commentMediaInfo?.type === "webpage" ? ( +
+ + {thread.thumbnailUrl ? ( + {commentMediaInfo.type} e.target.src = fallbackImgUrl} /> + ) : null} + +
+ ) : null} + {commentMediaInfo?.type === "image" ? ( +
+ {commentMediaInfo.type} e.target.src = fallbackImgUrl} /> - ) : null} - -
- ) : null} - {commentMediaInfo?.type === "image" ? ( -
+ +
+ ) : null} + {commentMediaInfo?.type === "video" ? ( - {commentMediaInfo.type} e.target.src = fallbackImgUrl} /> -
- ) : null} - {commentMediaInfo?.type === "video" ? ( - - - ) : null} - {commentMediaInfo?.type === "audio" ? ( - - - ) : null} -
- ) : null} - - {thread.title ? ( - thread.title.length > 75 ? - - - {thread.title.slice(0, 75) + " (...)"} + ) : null} + {commentMediaInfo?.type === "audio" ? ( + + - - : - {thread.title} - ) - : null}  - {thread.author.displayName - ? thread.author.displayName.length > 20 - ? - - {thread.author.displayName.slice(0, 20) + " (...)"} - - - : - {thread.author.displayName} - : - Anonymous} -   - (u/ - handleAddressClick(thread.author.shortAddress)} - > - {thread.author.shortAddress} - ) -   - {getDate(thread.timestamp)} -   - - c/ - { - if (e.button === 2) return; - e.preventDefault(); - setIsReplyOpen(true); - setSelectedShortCid(thread.shortCid); - setSelectedParentCid(thread.cid); - }} title="Reply to this post">{thread.shortCid} -   - {thread.pinned ? ( - <> -   - Sticky - - ) : null} - {thread.locked ? ( - <> -   - Closed - - ) : null} -   - [ - setSelectedThread(thread.cid)} className="reply-link" >Reply - ] - - - { - threadMenuRefs.current[thread.cid] = el; - }} - className='post-menu-button' - rotated={openMenuCid === thread.cid} - onClick={(event) => { - event.stopPropagation(); - const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect(); - setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); - setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid)); - }} - > - ▶ - - {createPortal( - {postMenuCatalogRef.current = el}} - onClick={(event) => event.stopPropagation()} - style={{position: "absolute", - top: menuPosition.top + 7, - left: menuPosition.left}}> -
-
    -
  • handleOptionClick(thread.cid)}>Hide thread
    • - {thread.author.shortAddress === account?.author.shortAddress ? ( - <> -
  • handleAuthorEditClick(thread)}>Edit post
    • -
  • handleAuthorDeleteClick(thread)}>Delete post
    • - - ) : null} - {isModerator ? ( - <> - {thread.author.shortAddress === account?.author.shortAddress ? ( - null - ) : ( -
  • { - setModeratingCommentCid(thread.cid) - setIsModerationOpen(true); - handleOptionClick(thread.cid); - setDeletePost(true); - }}> - Delete post -
    • - )} -
  • { - setModeratingCommentCid(thread.cid) - setIsModerationOpen(true); - handleOptionClick(thread.cid); - }}> - Mod tools -
    • - - ) : null} - {(commentMediaInfo && ( - commentMediaInfo.type === 'image' || - (commentMediaInfo.type === 'webpage' && - commentMediaInfo.thumbnail))) ? ( -
  • {setIsImageSearchOpen(true)}} - onMouseLeave={() => {setIsImageSearchOpen(false)}}> - Image search » -
      -
    • handleOptionClick(thread.cid)}> - Google -
      • -
    • handleOptionClick(thread.cid)}> - Yandex -
      • -
    • handleOptionClick(thread.cid)}> - SauceNAO -
      • -
    -
    • - ) : null - } -
-
- , document.body - )} - - - {thread.content ? ( - thread.content?.length > 1000 ? - -
- - (...) -
- - -
- Post too long.  - setSelectedThread(thread.cid)} className="ttl-link">Click here -  to view. - -
- - :
- - - -
) - : null} -
-
-
- - {omittedCount > 0 ? ( - <> - {thread.content ? null :
} - - - {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click  - setSelectedThread(thread.cid)} className="ttl-link">here -  to view. - - - - ) : null} - - {displayedReplies?.map((reply, index) => { - const replyMediaInfo = getCommentMediaInfo(reply); - const fallbackImgUrl = "assets/filedeleted-res.gif"; - const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); - return ( -
-
{'>>'}
-
-
- - {reply.author.displayName - ? reply.author.displayName.length > 20 - ? - - {reply.author.displayName.slice(0, 20) + " (...)"} - - - : - {reply.author.displayName} - : - Anonymous} -   - handleAddressClick(reply.author.shortAddress)} - > - (u/ - {reply.author?.shortAddress ? - ( - - {reply.author?.shortAddress} - - ) : ( - - {account?.author?.shortAddress} - - ) - } - ) - - + ) : null} + + {thread.title ? ( + thread.title.length > 75 ? + + + {thread.title.slice(0, 75) + " (...)"} + + + : + {thread.title} + ) + : null}  + {thread.author.displayName + ? thread.author.displayName.length > 20 + ? + + {thread.author.displayName.slice(0, 20) + " (...)"} + + + : + {thread.author.displayName} + : + Anonymous}   - {getDate(reply.timestamp)} + (u/ + handleAddressClick(thread.author.shortAddress)} + > + {thread.author.shortAddress} + ) +   + {getDate(thread.timestamp)}   c/ - {reply.shortCid ? ( - { - if (e.button === 2) return; - e.preventDefault(); - setIsReplyOpen(true); - setSelectedShortCid(reply.shortCid); - setSelectedParentCid(reply.cid); - }} title="Reply to this post">{reply.shortCid} - ) : ( - - )} -   + { + if (e.button === 2) return; + e.preventDefault(); + setIsReplyOpen(true); + setSelectedShortCid(thread.shortCid); + setSelectedParentCid(thread.cid); + }} title="Reply to this post">{thread.shortCid} +   + {thread.pinned ? ( + <> +   + Sticky + + ) : null} + {thread.locked ? ( + <> +   + Closed + + ) : null} +   + [ + setSelectedThread(thread.cid)} className="reply-link" >Reply + ] + + { - replyMenuRefs.current[reply.cid] = el; - }} - className='post-menu-button' - rotated={openMenuCid === reply.cid} - onClick={(event) => { - event.stopPropagation(); - const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect(); - setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); - setOpenMenuCid(prevCid => (prevCid === reply.cid ? null : reply.cid)); - }} - > - ▶ - - {createPortal( - {postMenuCatalogRef.current = el}} - onClick={(event) => event.stopPropagation()} - style={{position: "absolute", - top: menuPosition.top + 7, - left: menuPosition.left}}> -
{ + threadMenuRefs.current[thread.cid] = el; + }} + className='post-menu-button' + rotated={openMenuCid === thread.cid} + onClick={(event) => { + event.stopPropagation(); + const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect(); + setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); + setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid)); + }} > -
    -
  • handleOptionClick(reply.cid)}>Hide post
    • - {reply.author.shortAddress === account?.author.shortAddress ? ( - <> -
  • handleAuthorEditClick(reply)}>Edit post
    • -
  • handleAuthorDeleteClick(reply)}>Delete post
    • - - ) : null} - {isModerator ? ( - <> - {reply.author.shortAddress === account?.author.shortAddress ? ( - null - ) : ( -
  • { - setModeratingCommentCid(reply.cid) + ▶ + + {createPortal( + {postMenuCatalogRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + top: menuPosition.top + 7, + left: menuPosition.left}}> +
    +
      +
    • handleOptionClick(thread.cid)}>Hide thread
      • + {thread.author.shortAddress === account?.author.shortAddress ? ( + <> +
    • handleAuthorEditClick(thread)}>Edit post
      • +
    • handleAuthorDeleteClick(thread)}>Delete post
      • + + ) : null} + {isModerator ? ( + <> + {thread.author.shortAddress === account?.author.shortAddress ? ( + null + ) : ( +
    • { + setModeratingCommentCid(thread.cid) + setIsModerationOpen(true); + handleOptionClick(thread.cid); + setDeletePost(true); + }}> + Delete post +
      • + )} +
    • { + setModeratingCommentCid(thread.cid) setIsModerationOpen(true); - handleOptionClick(reply.cid); - setDeletePost(true); + handleOptionClick(thread.cid); }}> - Delete post + Mod tools
      • - )} -
    • { - setModeratingCommentCid(reply.cid) - setIsModerationOpen(true); - handleOptionClick(reply.cid); - }}> - Mod tools -
      • - - ) : null} - {(replyMediaInfo && ( - replyMediaInfo.type === 'image' || - (replyMediaInfo.type === 'webpage' && - replyMediaInfo.thumbnail))) ? ( -
    • {setIsImageSearchOpen(true)}} - onMouseLeave={() => {setIsImageSearchOpen(false)}}> - Image search » -
        -
      • handleOptionClick(reply.cid)}> - Google -
        • -
      • handleOptionClick(reply.cid)}> - Yandex -
        • -
      • handleOptionClick(reply.cid)}> - SauceNAO -
        • -
      -
      • - ) : null - } -
    -
    -     , document.body - )} + + ) : null} + {(commentMediaInfo && ( + commentMediaInfo.type === 'image' || + (commentMediaInfo.type === 'webpage' && + commentMediaInfo.thumbnail))) ? ( +
  • {setIsImageSearchOpen(true)}} + onMouseLeave={() => {setIsImageSearchOpen(false)}}> + Image search » +
      +
    • handleOptionClick(thread.cid)}> + Google +
      • +
    • handleOptionClick(thread.cid)}> + Yandex +
      • +
    • handleOptionClick(thread.cid)}> + SauceNAO +
      • +
    +
    • + ) : null + } +
+
+ , document.body + )} -
- {replyMediaInfo?.url ? ( -
-
- Link:  - { - replyMediaInfo?.url.length > 30 ? - replyMediaInfo?.url.slice(0, 30) + "(...)" : - replyMediaInfo?.url - } ({replyMediaInfo?.type}) + + {thread.content ? ( + thread.content?.length > 1000 ? + +
+ + (...) +
+ + +
+ Post too long.  + setSelectedThread(thread.cid)} className="ttl-link">Click here +  to view. + +
+ + :
+ + + +
) + : null} +
+
+
+ + {omittedCount > 0 ? ( + <> + {thread.content ? null :
} + + + {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click  + setSelectedThread(thread.cid)} className="ttl-link">here +  to view. + + + + ) : null} + + {displayedReplies?.map((reply, index) => { + const replyMediaInfo = getCommentMediaInfo(reply); + const fallbackImgUrl = "assets/filedeleted-res.gif"; + const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); + return ( +
+
{'>>'}
+
+
+ + {reply.author.displayName + ? reply.author.displayName.length > 20 + ? + + {reply.author.displayName.slice(0, 20) + " (...)"} + + + : + {reply.author.displayName} + : + Anonymous} +   + handleAddressClick(reply.author.shortAddress)} + > + (u/ + {reply.author?.shortAddress ? + ( + + {reply.author?.shortAddress} + + ) : ( + + {account?.author?.shortAddress} + + ) + } + ) + + +   + {getDate(reply.timestamp)} +   + + c/ + {reply.shortCid ? ( + { + if (e.button === 2) return; + e.preventDefault(); + setIsReplyOpen(true); + setSelectedShortCid(reply.shortCid); + setSelectedParentCid(reply.cid); + }} title="Reply to this post">{reply.shortCid} + ) : ( + + )} +   + { + replyMenuRefs.current[reply.cid] = el; + }} + className='post-menu-button' + rotated={openMenuCid === reply.cid} + onClick={(event) => { + event.stopPropagation(); + const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect(); + setMenuPosition({top: rect.top + window.scrollY, left: rect.left}); + setOpenMenuCid(prevCid => (prevCid === reply.cid ? null : reply.cid)); + }} + > + ▶ + + {createPortal( + {postMenuCatalogRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + top: menuPosition.top + 7, + left: menuPosition.left}}> +
+
    +
  • handleOptionClick(reply.cid)}>Hide post
    • + {reply.author.shortAddress === account?.author.shortAddress ? ( + <> +
  • handleAuthorEditClick(reply)}>Edit post
    • +
  • handleAuthorDeleteClick(reply)}>Delete post
    • + + ) : null} + {isModerator ? ( + <> + {reply.author.shortAddress === account?.author.shortAddress ? ( + null + ) : ( +
  • { + setModeratingCommentCid(reply.cid) + setIsModerationOpen(true); + handleOptionClick(reply.cid); + setDeletePost(true); + }}> + Delete post +
    • + )} +
  • { + setModeratingCommentCid(reply.cid) + setIsModerationOpen(true); + handleOptionClick(reply.cid); + }}> + Mod tools +
    • + + ) : null} + {(replyMediaInfo && ( + replyMediaInfo.type === 'image' || + (replyMediaInfo.type === 'webpage' && + replyMediaInfo.thumbnail))) ? ( +
  • {setIsImageSearchOpen(true)}} + onMouseLeave={() => {setIsImageSearchOpen(false)}}> + Image search » +
      +
    • handleOptionClick(reply.cid)}> + Google +
      • +
    • handleOptionClick(reply.cid)}> + Yandex +
      • +
    • handleOptionClick(reply.cid)}> + SauceNAO +
      • +
    +
    • + ) : null + } +
- {replyMediaInfo?.type === "webpage" ? ( -
- - {reply.thumbnailUrl ? ( + , document.body + )} + +
+ {replyMediaInfo?.url ? ( +
+ + {replyMediaInfo?.type === "webpage" ? ( +
+ + {reply.thumbnailUrl ? ( + {replyMediaInfo.type} e.target.src = fallbackImgUrl} /> + ) : null} + +
+ ) : null} + {replyMediaInfo?.type === "image" ? ( +
+ {replyMediaInfo.type} e.target.src = fallbackImgUrl} /> - ) : null} - -
- ) : null} - {replyMediaInfo?.type === "image" ? ( -
+ +
+ ) : null} + {replyMediaInfo?.type === "video" ? ( - {replyMediaInfo.type} e.target.src = fallbackImgUrl} /> -
- ) : null} - {replyMediaInfo?.type === "video" ? ( - - - ) : null} - {replyMediaInfo?.type === "audio" ? ( - - - ) : null} -
- ) : null} - {reply.content ? ( - reply.content?.length > 500 ? - -
+ ) : null} + {replyMediaInfo?.type === "audio" ? ( + + + ) : null} +
+ ) : null} + {reply.content ? ( + reply.content?.length > 500 ? + +
+ {}} key={`r-pm-${index}`} className="quotelink" + ref={el => { + quoteRefs.current[reply.cid] = el; + }} + onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} + onMouseOver={(event) => { + event.stopPropagation(); + handleQuoteHover(reply, shortParentCid, () => { + setOutOfViewCid(reply.parentCid); + const rect = quoteRefs.current[reply.cid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; + + if (distanceToTop < postOnHoverHeight / 2) { + top = window.scrollY - 5; + } else if (distanceToBottom < postOnHoverHeight / 2) { + top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; + } else { + top = rect.top + window.scrollY - postOnHoverHeight / 2; + } + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + } else { + setOutOfViewPosition({ + top, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width - 5 + }); + } + }); + }} + onMouseLeave={() => { + removeHighlight(); + setOutOfViewCid(null); + }}> + {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} + + + (...) +
+ + +
+ Comment too long.  + setSelectedThread(thread.cid)} className="ttl-link">Click here +  to view. +
+ + :
{}} key={`r-pm-${index}`} className="quotelink" ref={el => { quoteRefs.current[reply.cid] = el; @@ -1663,7 +1725,7 @@ const Board = () => { maxWidth: window.innerWidth - rect.left - rect.width - 5 }); } - }); + }); }} onMouseLeave={() => { removeHighlight(); @@ -1671,360 +1733,360 @@ const Board = () => { }}> {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} - - (...) -
+ + commentCid={reply.cid} + className="ttl"/> -
- Comment too long.  - setSelectedThread(thread.cid)} className="ttl-link">Click here -  to view. -
- - :
- {}} key={`r-pm-${index}`} className="quotelink" - ref={el => { - quoteRefs.current[reply.cid] = el; - }} - onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} - onMouseOver={(event) => { - event.stopPropagation(); - handleQuoteHover(reply, shortParentCid, () => { - setOutOfViewCid(reply.parentCid); - const rect = quoteRefs.current[reply.cid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; - const distanceToTop = rect.top; - const distanceToBottom = window.innerHeight - rect.bottom; - let top; - - if (distanceToTop < postOnHoverHeight / 2) { - top = window.scrollY - 5; - } else if (distanceToBottom < postOnHoverHeight / 2) { - top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; - } else { - top = rect.top + window.scrollY - postOnHoverHeight / 2; - } - - if (distanceToRight < 200) { - setOutOfViewPosition({ - top, - right: window.innerWidth - rect.left - 10, - maxWidth: rect.left - 5 - }); - } else { - setOutOfViewPosition({ - top, - left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width - 5 - }); - } - }); - }} - onMouseLeave={() => { - removeHighlight(); - setOutOfViewCid(null); - }}> - {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} - - - - -
) - : null} + ) + : null} +
-
- ) - })} -
-
- {index === 0 && (!subplebbit.rules && !subplebbit.description) ? ( -
- ) : ( -
- )} -
-
-
- - - {thread.author.displayName - ? thread.author.displayName.length > 20 - ? - - {thread.author.displayName.slice(0, 20) + " (...)"} - - + ) + })} +
+
+ {index === 0 && (!subplebbit.rules && !subplebbit.description) ? ( +
+ ) : ( +
+ )} +
+
+
+ + + {thread.author.displayName + ? thread.author.displayName.length > 20 + ? + + {thread.author.displayName.slice(0, 20) + " (...)"} + + + : + {thread.author.displayName} : - {thread.author.displayName} - : - Anonymous} -   - handleAddressClick(thread.author.shortAddress)} - > - (u/ - - {thread.author.shortAddress} - - )  - - - {thread.pinned ? ( - Sticky - ) : null} - {thread.locked ? ( - Closed - ) : null} - -
- {thread.title ? ( - thread.title.length > 30 ? - - - {thread.title.slice(0, 30) + " (...)"} + Anonymous} +   + handleAddressClick(thread.author.shortAddress)} + > + (u/ + + {thread.author.shortAddress} - - : - {thread.title} - ) - : null} - - - {getDate(thread.timestamp)} -   - c/ - { - if (e.button === 2) return; - e.preventDefault(); - setIsReplyOpen(true); - setSelectedShortCid(thread.shortCid); - setSelectedParentCid(thread.cid); - }} title="Reply to this post">{thread.shortCid} - - -
- {thread.link ? ( -
- {commentMediaInfo?.url ? ( - commentMediaInfo.type === "webpage" ? ( -
- - {thread.thumbnailUrl ? ( + )  + + + {thread.pinned ? ( + Sticky + ) : null} + {thread.locked ? ( + Closed + ) : null} + +
+ {thread.title ? ( + thread.title.length > 30 ? + + + {thread.title.slice(0, 30) + " (...)"} + + + : + {thread.title} + ) + : null} + + + {getDate(thread.timestamp)} +   + c/ + { + if (e.button === 2) return; + e.preventDefault(); + setIsReplyOpen(true); + setSelectedShortCid(thread.shortCid); + setSelectedParentCid(thread.cid); + }} title="Reply to this post">{thread.shortCid} + + +
+ {thread.link ? ( +
+ {commentMediaInfo?.url ? ( + commentMediaInfo.type === "webpage" ? ( +
+ + {thread.thumbnailUrl ? ( + thumbnail e.target.src = fallbackImgUrl} /> + ) : null} +
{commentMediaInfo?.type}
+ +
+ ) : commentMediaInfo.type === "image" ? ( +
+ thumbnail e.target.src = fallbackImgUrl} /> - ) : null} -
{commentMediaInfo?.type}
- -
- ) : commentMediaInfo.type === "image" ? ( -
- - {commentMediaInfo.type} e.target.src = fallbackImgUrl} /> -
{commentMediaInfo?.type}
- -
- ) : commentMediaInfo.type === "video" ? ( - - - ) : commentMediaInfo.type === "audio" ? ( - - - ) : null - ) : null} -
- ) : null} - {thread.content ? ( - thread.content?.length > 500 ? - -
- - (...) -
+
{commentMediaInfo?.type}
+ +
+ ) : commentMediaInfo.type === "video" ? ( + + + ) : commentMediaInfo.type === "audio" ? ( + + + ) : null + ) : null} +
+ ) : null} + {thread.content ? ( + thread.content?.length > 500 ? + +
+ + (...) +
+ + +
+ Post too long.  + setSelectedThread(thread.cid)} className="ttl-link">Click here +  to view. +
+ + :
+ -
- Post too long.  - setSelectedThread(thread.cid)} className="ttl-link">Click here -  to view. -
- - :
- - - -
) - : null} + ) + : null} +
+
+ { + (thread.replyCount + pendingReplyCounts[thread.cid]) === 0 ? + ("No replies") + : (thread.replyCount + pendingReplyCounts[thread.cid]) === 1 ? + ("1 reply") + : (thread.replyCount + pendingReplyCounts[thread.cid]) > 1 ? + ((thread.replyCount + pendingReplyCounts[thread.cid]) + " replies") + : null + } + {setSelectedThread(thread.cid); window.scrollTo(0, 0);}} + className="button-mobile" >View Thread +
-
- { - (thread.replyCount + pendingReplyCounts[thread.cid]) === 0 ? - ("No replies") - : (thread.replyCount + pendingReplyCounts[thread.cid]) === 1 ? - ("1 reply") - : (thread.replyCount + pendingReplyCounts[thread.cid]) > 1 ? - ((thread.replyCount + pendingReplyCounts[thread.cid]) + " replies") - : null - } - {setSelectedThread(thread.cid); window.scrollTo(0, 0);}} - className="button-mobile" >View Thread -
-
- {displayedReplies?.map((reply, index) => { - const replyMediaInfo = getCommentMediaInfo(reply); - const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); - return ( -
-
-
- - - {reply.author.displayName - ? reply.author.displayName.length > 20 - ? - - {reply.author.displayName.slice(0, 20) + " (...)"} - - - : - {reply.author.displayName} - : - Anonymous} -   - handleAddressClick(reply.author.shortAddress)} - > - (u/ - {reply.author?.shortAddress ? - ( - - {reply.author?.shortAddress} + {displayedReplies?.map((reply, index) => { + const replyMediaInfo = getCommentMediaInfo(reply); + const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); + return ( +
+
+
+ + + {reply.author.displayName + ? reply.author.displayName.length > 20 + ? + + {reply.author.displayName.slice(0, 20) + " (...)"} - ) : ( - - {account?.author?.shortAddress} + + : + {reply.author.displayName} + : + Anonymous} +   + handleAddressClick(reply.author.shortAddress)} + > + (u/ + {reply.author?.shortAddress ? + ( + + {reply.author?.shortAddress} - ) - } - )  + ) : ( + + {account?.author?.shortAddress} + + ) + } + )  + +
-
- - - {getDate(reply.timestamp)}  - c/ - {reply.shortCid ? ( - { - if (e.button === 2) return; - e.preventDefault(); - setIsReplyOpen(true); - setSelectedShortCid(reply.shortCid); - setSelectedParentCid(reply.cid); - }} title="Reply to this post">{reply.shortCid} - - ) : ( - - )} - -
- {reply.link ? ( -
- {replyMediaInfo?.url ? ( - replyMediaInfo.type === "webpage" ? ( -
- - {reply.thumbnailUrl ? ( + + {getDate(reply.timestamp)}  + c/ + {reply.shortCid ? ( + { + if (e.button === 2) return; + e.preventDefault(); + setIsReplyOpen(true); + setSelectedShortCid(reply.shortCid); + setSelectedParentCid(reply.cid); + }} title="Reply to this post">{reply.shortCid} + + ) : ( + + )} + +
+ {reply.link ? ( +
+ {replyMediaInfo?.url ? ( + replyMediaInfo.type === "webpage" ? ( +
+ + {reply.thumbnailUrl ? ( + thumbnail e.target.src = fallbackImgUrl} /> + ) : null} +
{replyMediaInfo.type}
+ +
+ ) : replyMediaInfo.type === "image" ? ( +
+ thumbnail e.target.src = fallbackImgUrl} /> - ) : null} -
{replyMediaInfo.type}
- -
- ) : replyMediaInfo.type === "image" ? ( -
- - {replyMediaInfo.type} e.target.src = fallbackImgUrl} /> -
{replyMediaInfo.type}
- -
- ) : replyMediaInfo.type === "video" ? ( - -
+ +
+ ) : replyMediaInfo.type === "video" ? ( + + + ) : replyMediaInfo.type === "audio" ? ( + + - ) : replyMediaInfo.type === "audio" ? ( - - - ) : null - ) : null} -
- ) : null} - {reply.content ? ( - reply.content?.length > 500 ? - -
+
{replyMediaInfo.type}
+ + ) : null + ) : null} +
+ ) : null} + {reply.content ? ( + reply.content?.length > 500 ? + +
+ {}} key={`mob-r-pm-${index}`} className="quotelink" + ref={el => { + quoteRefsMobile.current[reply.cid] = el; + }} + onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} + onMouseOver={(event) => { + event.stopPropagation(); + handleQuoteHover(reply, shortParentCid, () => { + setOutOfViewCid(reply.parentCid); + const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; + + if (distanceToTop < postOnHoverHeight / 2) { + top = window.scrollY - 5; + } else if (distanceToBottom < postOnHoverHeight / 2) { + top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; + } else { + top = rect.top + window.scrollY - postOnHoverHeight / 2; + } + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + } else { + setOutOfViewPosition({ + top, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width - 5 + }); + } + }); + }} + onMouseLeave={() => { + removeHighlight(); + setOutOfViewCid(null); + }}> + {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} + + + (...) +
+ + +
+ Comment too long.  + setSelectedThread(thread.cid)} className="ttl-link">Click here +  to view. +
+ + :
{}} key={`mob-r-pm-${index}`} className="quotelink" ref={el => { quoteRefsMobile.current[reply.cid] = el; @@ -2069,141 +2131,81 @@ const Board = () => { }}> {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} - - (...) -
+ -
- Comment too long.  - setSelectedThread(thread.cid)} className="ttl-link">Click here -  to view. -
- - :
- {}} key={`mob-r-pm-${index}`} className="quotelink" - ref={el => { - quoteRefsMobile.current[reply.cid] = el; - }} - onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} - onMouseOver={(event) => { - event.stopPropagation(); - handleQuoteHover(reply, shortParentCid, () => { - setOutOfViewCid(reply.parentCid); - const rect = quoteRefsMobile.current[reply.cid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; - const distanceToTop = rect.top; - const distanceToBottom = window.innerHeight - rect.bottom; - let top; +
) + : null} + {reply.replyCount > 0 ? ( +
+ {reply.replies?.pages?.topAll.comments + .sort((a, b) => a.timestamp - b.timestamp) + .map((reply, index) => ( +
{ + backlinkRefsMobile.current[reply.cid] = el; + }}> + {}} + onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} + onMouseOver={(event) => { + event.stopPropagation(); + handleQuoteHover(reply, reply.shortCid, () => { + setOutOfViewCid(reply.cid) + const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + const distanceToTop = rect.top; + const distanceToBottom = window.innerHeight - rect.bottom; + let top; - if (distanceToTop < postOnHoverHeight / 2) { - top = window.scrollY - 5; - } else if (distanceToBottom < postOnHoverHeight / 2) { - top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; - } else { - top = rect.top + window.scrollY - postOnHoverHeight / 2; - } - - if (distanceToRight < 200) { - setOutOfViewPosition({ - top, - right: window.innerWidth - rect.left - 10, - maxWidth: rect.left - 5 + if (distanceToTop < postOnHoverHeight / 2) { + top = window.scrollY - 5; + } else if (distanceToBottom < postOnHoverHeight / 2) { + top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; + } else { + top = rect.top + window.scrollY - postOnHoverHeight / 2; + } + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + } else { + setOutOfViewPosition({ + top, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width - 5 + }); + } }); - } else { - setOutOfViewPosition({ - top, - left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width - 5 - }); - } - }); - }} - onMouseLeave={() => { - removeHighlight(); - setOutOfViewCid(null); - }}> - {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} - - - - - ) - : null} - {reply.replyCount > 0 ? ( -
- {reply.replies?.pages?.topAll.comments - .sort((a, b) => a.timestamp - b.timestamp) - .map((reply, index) => ( -
{ - backlinkRefsMobile.current[reply.cid] = el; - }}> - {}} - onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} - onMouseOver={(event) => { - event.stopPropagation(); - handleQuoteHover(reply, reply.shortCid, () => { - setOutOfViewCid(reply.cid) - const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect(); - const distanceToRight = window.innerWidth - rect.right; - const distanceToTop = rect.top; - const distanceToBottom = window.innerHeight - rect.bottom; - let top; - - if (distanceToTop < postOnHoverHeight / 2) { - top = window.scrollY - 5; - } else if (distanceToBottom < postOnHoverHeight / 2) { - top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; - } else { - top = rect.top + window.scrollY - postOnHoverHeight / 2; - } - - if (distanceToRight < 200) { - setOutOfViewPosition({ - top, - right: window.innerWidth - rect.left - 10, - maxWidth: rect.left - 5 - }); - } else { - setOutOfViewPosition({ - top, - left: rect.left + rect.width + 5, - maxWidth: window.innerWidth - rect.left - rect.width - 5 - }); - } - }); - }} - onMouseLeave={() => { - removeHighlight(); - setOutOfViewCid(null); - }} - className="quote-link"> - c/{reply.shortCid} -   + }} + onMouseLeave={() => { + removeHighlight(); + setOutOfViewCid(null); + }} + className="quote-link"> + c/{reply.shortCid} +   +
+ ))}
- ))} -
- ) : null} + ) : null} +
-
- )})} -
- - ); - }} - endReached={tryLoadMore} - useWindowScroll={true} - components={{ Footer: hasMore ? () => : null }} - /> + )})} +
+ + ); + }} + endReached={tryLoadMore} + useWindowScroll={true} + components={{ Footer: hasMore ? () => : null }} + /> ) : () )} diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index 7e70494f..7fded738 100755 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -666,88 +666,44 @@ const Catalog = () => { null ) : ( feed.length > 0 ? ( - - {feed.map((thread, index) => { - const commentMediaInfo = getCommentMediaInfo(thread); - const fallbackImgUrl = "assets/filedeleted-res.gif"; - return ( -
{setIsHoveringOnThread(thread.cid)}} - onMouseLeave={() => {setIsHoveringOnThread('')}}> - {commentMediaInfo?.url ? ( - setSelectedThread(thread.cid)}> - {commentMediaInfo?.type === "webpage" ? ( - thread.thumbnailUrl ? ( - {commentMediaInfo.type} { - e.target.src = fallbackImgUrl - e.target.onerror = null; - }} /> - ) : null - ) : null} - {commentMediaInfo?.type === "image" ? ( - {commentMediaInfo.type} { - e.target.src = fallbackImgUrl - e.target.onerror = null;}} /> - ) : null} - {commentMediaInfo?.type === "video" ? ( -