diff --git a/src/components/PostOnHover.jsx b/src/components/PostOnHover.jsx index 5683234a..fb3ee59a 100644 --- a/src/components/PostOnHover.jsx +++ b/src/components/PostOnHover.jsx @@ -36,154 +36,278 @@ const PostOnHover = ({ cid, feed }) => {
{reply.state === 'succeeded' ? ( -
-
-
- - {reply.author?.displayName - ? reply.author?.displayName.length > 20 - ? - - {reply.author?.displayName.slice(0, 20) + " (...)"} - - +
+
+
+ + {reply.author?.displayName + ? reply.author?.displayName.length > 20 + ? + + {reply.author?.displayName.slice(0, 20) + " (...)"} + + + : + {reply.author?.displayName} : - {reply.author?.displayName} - : - Anonymous} -   - - (u/ - {reply.author?.shortAddress ? - ( - - {reply.author?.shortAddress} - - ) : ( - - {account?.author?.shortAddress} - - ) - } - ) + Anonymous} +   + + (u/ + {reply.author?.shortAddress ? + ( + + {reply.author?.shortAddress} + + ) : ( + + {account?.author?.shortAddress} + + ) + } + ) + - -   - {getDate(reply.timestamp)} -   - - c/ - {reply.shortCid ? ( - {}} id="reply-button" - title="Reply to this post">{reply.shortCid} - ) : ( - Pending - )} -   - -
- {replyMediaInfo?.url ? ( -
-
- Link:  - { - replyMediaInfo?.url.length > 30 ? - replyMediaInfo?.url.slice(0, 30) + "(...)" : - replyMediaInfo?.url - } ({replyMediaInfo?.type}) +   + {getDate(reply.timestamp)} +   + + c/ + {reply.shortCid ? ( + {}} id="reply-button" + title="Reply to this post">{reply.shortCid} + ) : ( + Pending + )} +   + - {replyMediaInfo?.type === "webpage" ? ( -
- - {reply.thumbnailUrl ? ( +
+ {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 ? + +
+ {}} className="quotelink"> + {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} + + + (...) +

+ Comment too long. Click the link to view. +
+ + :
{}} className="quotelink"> {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} - - (...) -

- Comment too long. Click the link to view. -
- - :
- {}} className="quotelink"> - {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} - - - -
) - : null} + + + ) + : null} +
-
) : (
{stateString}
)}
+
+ {reply.state === 'succeeded' ? ( +
+
+
+ + {reply.author.displayName + ? reply.author.displayName.length > 20 + ? + + {reply.author.displayName.slice(0, 20) + " (...)"} + + + : + {reply.author.displayName} + : + Anonymous} +   + + (u/ + {reply.author?.shortAddress ? + ( + + {reply.author?.shortAddress} + + ) : ( + + {account?.author?.shortAddress} + + ) + } + )  + +
+ + + {getDate(reply.timestamp)}  + c/ + {}} id="reply-button" + >{reply.shortCid} + + +
+ {reply.link ? ( +
+ {replyMediaInfo?.url ? ( + replyMediaInfo.type === "webpage" ? ( +
+ + {reply.thumbnailUrl ? ( + thumbnail e.target.src = fallbackImgUrl} /> + ) : null} +
{replyMediaInfo.type}
+ +
+ ) : replyMediaInfo.type === "image" ? ( +
+ + {replyMediaInfo.type} e.target.src = fallbackImgUrl} /> +
{replyMediaInfo.type}
+ +
+ ) : replyMediaInfo.type === "video" ? ( + + + ) : replyMediaInfo.type === "audio" ? ( + + + ) : null + ) : null} +
+ ) : null} + {reply.content ? ( + reply.content?.length > 500 ? + +
+ {}} className="quotelink"> + {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} + + + (...) +
+ +
+ Comment too long. Click the link to view. +
+ + :
+ {}} className="quotelink" > + {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} + + + +
) + : null} +
+
+ ) : ( +
+ {stateString} +
+ )} +
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 78a48391..69175490 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -81,9 +81,11 @@ const Board = () => { const postMenuCatalogRef = useRef(null); const backlinkRefs = useRef({}); const quoteRefs = useRef({}); + const backlinkRefsMobile = useRef({}); + const quoteRefsMobile = useRef({}); const postOnHoverRef = useRef(null); - const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'}); + const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'}); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress}); const stateString = useStateString(subplebbit); @@ -1716,8 +1718,37 @@ const Board = () => {
{}} key={`mob-r-pm-${index}`} className="quotelink" + ref={el => { + quoteRefsMobile.current[shortParentCid] = el; + }} onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} - onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))} + onMouseOver={(event) => { + event.stopPropagation(); + handleQuoteHover(reply, shortParentCid, () => { + if (shortParentCid === thread.shortCid) { + return; + } else { + setOutOfViewCid(reply.parentCid); + const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + + } else { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 + }); + } + } + }); + }} onMouseLeave={() => { removeHighlight(); setOutOfViewCid(null); @@ -1741,8 +1772,37 @@ const Board = () => { :
{}} key={`mob-r-pm-${index}`} className="quotelink" + ref={el => { + quoteRefsMobile.current[shortParentCid] = el; + }} onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} - onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))} + onMouseOver={(event) => { + event.stopPropagation(); + handleQuoteHover(reply, shortParentCid, () => { + if (shortParentCid === thread.shortCid) { + return; + } else { + setOutOfViewCid(reply.parentCid); + const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + + } else { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 + }); + } + } + }); + }} onMouseLeave={() => { removeHighlight(); setOutOfViewCid(null); @@ -1763,10 +1823,35 @@ const Board = () => { {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={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))} + onMouseOver={(event) => { + event.stopPropagation(); + handleQuoteHover(reply, reply.shortCid, () => { + setOutOfViewCid(reply.cid) + const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + + } else { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 + }); + } + }); + }} onMouseLeave={() => { removeHighlight(); setOutOfViewCid(null); diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index 768f33c5..ce27cc83 100755 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -78,7 +78,7 @@ const Catalog = () => { const [openMenuCid, setOpenMenuCid] = useState(null); - const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'}); + const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'}); const { subplebbitAddress } = useParams(); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const account = useAccount(); diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 4c05f48b..de8af6d3 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -98,6 +98,8 @@ const Thread = () => { const [outOfViewCid, setOutOfViewCid] = useState(null); const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0}); const [postOnHoverHeight, setPostOnHoverHeight] = useState(0); + const backlinkRefsMobile = useRef({}); + const quoteRefsMobile = useRef({}); const comment = useComment({commentCid: selectedThread}); @@ -1519,12 +1521,41 @@ const Thread = () => { ) : null}
handleQuoteClick(reply, shortParentCid, event)} - onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))} - onMouseLeave={() => { - removeHighlight(); - setOutOfViewCid(null); - }}> + ref={el => { + quoteRefsMobile.current[shortParentCid] = el; + }} + onClick={(event) => handleQuoteClick(reply, shortParentCid, event)} + onMouseOver={(event) => { + event.stopPropagation(); + handleQuoteHover(reply, shortParentCid, () => { + if (shortParentCid === comment.shortCid) { + return; + } else { + setOutOfViewCid(reply.parentCid); + const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + + } else { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 + }); + } + } + }); + }} + onMouseLeave={() => { + removeHighlight(); + setOutOfViewCid(null); + }}> {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null} @@ -1540,14 +1571,39 @@ const Thread = () => { {reply.replies?.pages?.topAll.comments .sort((a, b) => a.timestamp - b.timestamp) .map((reply, index) => ( -
+
{ + backlinkRefsMobile.current[reply.cid] = el; + }}> handleQuoteClick(reply, reply.shortCid, event)} - onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))} + onMouseOver={(event) => { + event.stopPropagation(); + handleQuoteHover(reply, reply.shortCid, () => { + setOutOfViewCid(reply.cid) + const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect(); + const distanceToRight = window.innerWidth - rect.right; + + if (distanceToRight < 200) { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + right: window.innerWidth - rect.left - 10, + maxWidth: rect.left - 5 + }); + + } else { + setOutOfViewPosition({ + top: rect.top + window.scrollY - rect.height / 2, + left: rect.left + rect.width + 5, + maxWidth: window.innerWidth - rect.left - rect.width + 5 + }); + } + }); + }} onMouseLeave={() => { removeHighlight(); setOutOfViewCid(null); - }}> + }} > c/{reply.shortCid}