External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

implement portal for catalog popups

Browse Source
This commit is contained in:
plebeius.eth
2023-09-08 14:49:30 +02:00
parent 7ef7b1e17a
commit 876b866348
4 changed files with 1028 additions and 978 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/views/Catalog.styled.jsx
+144 -110
View File
@@ -12,57 +12,11 @@ export const Threads = styled.div`
max-height: 320px; max-height: 320px;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
word-wrap: break-word;
margin-top: 5px; margin-top: 5px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 5px 0 3px; padding: 5px 0 3px;
} }
.thread_popup {
display: inline-block;
background-color: black;
position: absolute;
margin-top: 0px;
text-align: left;
z-index: 10;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
/* overflow-wrap: break-word; */
}
.thread_popup_content {
max-width: 500px;
margin: 5px 3px 2px 3px !important;
color: #dedede;
display: inline-block;
overflow: hidden;
font-size: 13px;
white-space: normal;
}
.thread_popup_lastReply {
margin: 0px 4px 5px 4px !important;
color: #bbbfbd;
display: block;
min-width: 250px;
font-size: 90%;
}
.thread_popup_title {
color:#a89baa
}
.thread_popup_author {
color:#519860;
font-weight: bold
}
.thread_popup_authorAdmin {
color: purple;
font-weight: 700;
}
video, audio, img { video, audio, img {
max-width: 150px; max-width: 150px;
max-height: 150px; max-height: 150px;
@@ -137,82 +91,162 @@ export const Threads = styled.div`
display: block; display: block;
padding: 0 15px; padding: 0 15px;
overflow: hidden; overflow: hidden;
word-wrap: break-word;
} }
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return ``;
case 'Yotsuba-B':
return ``;
case 'Futaba':
return ``;
case 'Burichan':
return ``;
case 'Tomorrow':
return `
.file-thumb {
background-color: rgba(255, 255, 255, 0.01) !important;
}`;
case 'Photon':
return ``;
default:
return '';
}
}}
`;
export const PostPreview = styled.div`
.post-preview {
position: absolute;
background-color: #000;
border-radius: 3px;
padding: 5px 8px 4px;
z-index: 100000;
word-wrap: break-word;
white-space: normal;
max-width: 500px;
width: fit-content;
color: #bbbfbd;
font-size: 10pt;
text-align: left;
}
.post-author {
font-weight: 700;
}
.post-last {
margin-top: 3px;
color: #bbbfbd;
font-size: 90%;
}
.post-authorAdmin {
color: purple;
font-weight: 700;
}
${({ selectedStyle }) => { ${({ selectedStyle }) => {
switch (selectedStyle) { switch (selectedStyle) {
case 'Yotsuba': case 'Yotsuba':
return ` return `
.thread_popup_title{ .post-subject{
color:#cc1105; color:#cc1105;
font-weight:700; font-weight:700;
}; };
.thread_popup_author{
.post-author{
color:#00a550;font-weight:bold color:#00a550;font-weight:bold
}`; }`;
case 'Yotsuba-B':
return ` case 'Yotsuba-B':
.thread_popup_title{ return `
color:#dedede; .post-subject{
font-weight:700; color:#dedede;
}; font-weight:700;
.thread_popup_author{ };
color:#00a550;font-weight:bold
}`; .post-author{
case 'Futaba': color:#00a550;font-weight:bold
return ` }`;
.thread_popup{
font-family: arial,helvetica,sans-serif; case 'Futaba':
} return `
.thread_popup_title{ .post-preview{
color:#cc1105; font-family: arial,helvetica,sans-serif;
font-weight:700; }
};
.thread_popup_author{ .post-subject{
color:#00a550;font-weight:700; color:#cc1105;
}`; font-weight:700;
case 'Burichan': };
return `
.thread_popup{ .post-author{
font-family: arial,helvetica,sans-serif; color:#00a550;font-weight:700;
} }`;
.thread_popup_title{
color:#dedede; case 'Burichan':
font-weight:700; return `
}; .post-preview{
.thread_popup_author{ font-family: arial,helvetica,sans-serif;
color:#00a550;font-weight:700; }
}`;
case 'Tomorrow': .post-subject{
return ` color:#dedede;
.thread_popup{ font-weight:700;
font-family: arial,helvetica,sans-serif; };
}
.file-thumb { .post-author{
background-color: rgba(255, 255, 255, 0.01) !important; color:#00a550;font-weight:700;
} }`;
.thread_popup_title{
color:#b294bb; case 'Tomorrow':
font-weight:700; return `
}; .post-preview{
.thread_popup_author{ font-family: arial,helvetica,sans-serif;
color:#00a550;font-weight:700; }
}`;
case 'Photon': .file-thumb {
return ` background-color: rgba(255, 255, 255, 0.01) !important;
.thread_popup{ }
font-family: arial,helvetica,sans-serif;
} .post-subject{
.thread_popup_title{ color:#b294bb;
color:#dedede; font-weight:700;
font-weight:700; };
};
.thread_popup_author{ .post-author{
color:#dedede;font-weight:700; color:#00a550;font-weight:700;
}`; }`;
case 'Photon':
return `
.post-preview{
font-family: arial,helvetica,sans-serif;
}
.post-subject{
color:#dedede;
font-weight:700;
};
.post-author{
color:#dedede;font-weight:700;
}`;
default: default:
return ''; return '';
}}} }
}}
`; `;
export const PostMenuCatalog = styled.div` export const PostMenuCatalog = styled.div`
@@ -250,7 +284,7 @@ export const PostMenuCatalog = styled.div`
${({ selectedStyle }) => { ${({ selectedStyle }) => {
switch (selectedStyle) { switch (selectedStyle) {
case 'Yotsuba': case 'Yotsuba':
return `.thread_popup_title{ return `.post-subject{
color:red; color:red;
}`; }`;
src/components/views/AllCatalog.jsx
+292 -287
View File
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled'; import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled'; import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader'; import CatalogLoader from '../CatalogLoader';
@@ -61,6 +61,7 @@ const CatalogPost = ({post}) => {
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false); const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null); const [openMenuCid, setOpenMenuCid] = useState(null);
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false); const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,16 +75,13 @@ const CatalogPost = ({post}) => {
const account = useAccount(); const account = useAccount();
const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress}); const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const threadRefs = useRef({});
const postMenuRef = useRef(null); const postMenuRef = useRef(null);
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const popupRef = useRef(null); const popupRef = useRef(null);
const threadRefs = useRef([]);
const textRef = useRef(null); const textRef = useRef(null);
const imageRef = useRef(null); const imageRef = useRef(null);
const [isEnoughSpaceOnRight, setIsEnoughSpaceOnRight] = useState(null); const [spaceOnRight, setSpaceOnRight] = useState(null);
const [isEnoughSpaceOnLeft,setIsEnoughSpaceOnLeft] = useState(null);
const [spaceOnLeft,setSpaceOnLeft] = useState(null);
const [spaceOnRight,setSpaceOnRight] = useState(null);
const [isCalculationDone,setIsCalculationDone] = useState(false); const [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null); const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false); const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
@@ -99,6 +97,9 @@ const CatalogPost = ({post}) => {
commentMediaInfo.thumbnail))) ? true : false; commentMediaInfo.thumbnail))) ? true : false;
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => { useLayoutEffect(() => {
const executeLayoutEffectLogic = () => { const executeLayoutEffectLogic = () => {
let ref; let ref;
@@ -107,20 +108,27 @@ const CatalogPost = ({post}) => {
} else { } else {
ref = textRef.current; ref = textRef.current;
} }
if (ref && popupRef.current) { if (ref && popupRef.current) {
const threadRect = ref.getBoundingClientRect(); const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (threadRect.left + threadRect.width); const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = threadRect.left; const spaceLeft = rect.left;
setIsEnoughSpaceOnLeft(spaceLeft > 500); const popupWidth = popupRef.current.getBoundingClientRect().width;
setIsEnoughSpaceOnRight(spaceRight > 500);
if (spaceRight < 200 && spaceLeft > spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageLeft : textLeft}px)`;
} else if (spaceRight < 200 && spaceLeft < spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageRight : textRight}px)`;
} else {
popupRef.current.style.maxWidth = `${popupWidth}px`;
}
setSpaceOnRight(spaceRight); setSpaceOnRight(spaceRight);
setSpaceOnLeft(spaceLeft);
setIsCalculationDone(true); setIsCalculationDone(true);
} }
}; };
if (isHoveringOnThread) { if (isHoveringOnThread) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 250); const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
return () => { return () => {
@@ -128,8 +136,8 @@ const CatalogPost = ({post}) => {
setIsCalculationDone(false); setIsCalculationDone(false);
}; };
} }
}, [isHoveringOnThread, isMediaShowed]); }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
const handleMouseOnLeaveThread = () => { const handleMouseOnLeaveThread = () => {
@@ -139,7 +147,6 @@ const CatalogPost = ({post}) => {
setIsHoveringOnThread("") setIsHoveringOnThread("")
} else if (isHoveringOnThread !== "") { } else if (isHoveringOnThread !== "") {
setIsHoveringOnThread(""); setIsHoveringOnThread("");
setIsEnoughSpaceOnRight(null);
setIsCalculationDone(false); setIsCalculationDone(false);
} }
}; };
@@ -350,291 +357,289 @@ const CatalogPost = ({post}) => {
return ( return (
<div key={`thread-`} className="thread" <>
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ? {isHoveringOnThread === thread.cid ?
<div ref={popupRef} createPortal(
className="thread_popup" <PostPreview selectedStyle={selectedStyle}>
onMouseOver={() => handleMouseOnLeaveThread()} <div ref={popupRef}
style={{ className="post-preview"
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0, onMouseOver={() => handleMouseOnLeaveThread()}
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden', style={{
left: visibility: isCalculationDone ? 'visible' : 'hidden',
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight left:
? isMediaShowed isCalculationDone && spaceOnRight > 250
? `calc(50% + ${imageRect.width}px / 2 + 5px)` ? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
: `calc(50% + ${textRect.width}px / 2 + 5px)` isCalculationDone && spaceOnRight < 250
: 'auto', ? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
right: : 'auto',
isCalculationDone && isEnoughSpaceOnRight !== null && top: popupPosition.top + 5,
(popupRect.width > spaceOnRight && spaceOnLeft > spaceOnRight) }}>
? isMediaShowed <span className="post-subject" >
? `calc(50% + ${imageRect.width}px / 2 + 5px)` {thread.title ? `${thread.title} ` : "Posted "}
: `calc(50% + ${textRect.width}px / 2 + 5px)` </span>
: 'auto', by
}}> <span className="post-author">
<p {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
className="thread_popup_content" </span>
style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? ( <span className='post-ago'>
spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` : {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto' </span>
}}> {thread.replyCount > 0 ?
<span className="thread_popup_title" > <div className='post-last'>
{thread.title ? `${thread.title} ` : "Posted "} Last reply by
</span> <span className="post-author"> Anonymous </span>
by <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
<span className="thread_popup_author"> </div>
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} : null}
</span> </div>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null} </PostPreview>, document.body
</p> )
<div> : null }
{thread.replyCount > 0 ? <div key={`thread-`} className="thread"
<p className="thread_popup_lastReply"> ref={el => {
Last reply by threadRefs.current[thread.cid] = el;
<span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}
</p>
: null}
</div>
</div>
: null }
{commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
}} }}
onMouseLeave={() => setIsHoveringForMenu(false)}> onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.url ? (
thread.thumbnailUrl ? ( <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
</span>
) : null
) : null}
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`} <img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => { e.target.src = fallbackImgUrl }} />
</span>
) : null}
{commentMediaInfo?.type === "image" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => { onError={(e) => {
e.target.src = fallbackImgUrl e.target.src = fallbackImgUrl
e.target.onerror = null; e.target.onerror = null;}} />
}} />
</span> </span>
) : null ) : null}
) : null} {commentMediaInfo?.type === "video" ? (
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? ( <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <video className="card" ref={imageRef} key={`fti-`}
<img className="card" ref={imageRef} key={`img-`} src={commentMediaInfo.url}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} alt={commentMediaInfo.type}
onError={(e) => { e.target.src = fallbackImgUrl }} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "audio" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <audio className="card" ref={imageRef} controls
<img className="card" ref={imageRef} key={`img-`} key={`fti-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url}
onError={(e) => { alt={commentMediaInfo.type}
e.target.src = fallbackImgUrl onError={(e) => e.target.src = fallbackImgUrl} />
e.target.onerror = null;}} /> ) : null}
</span> </Link>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( <div key={`ti-`} className="thread-icons" >
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> {isMediaShowed ? (
<video className="card" ref={imageRef} key={`fti-`} <OfflineIndicator
src={commentMediaInfo.url} address={thread.subplebbitAddress}
alt={commentMediaInfo.type} className="thread-icon offline-icon"
onError={(e) => e.target.src = fallbackImgUrl} /> tooltipPlace="top" />
</span> ) : (
) : null} <OfflineIndicator
{commentMediaInfo?.type === "audio" ? ( address={thread.subplebbitAddress}
<audio className="card" ref={imageRef} controls className={`thread-icon ${linkCount > 0 ? "offline-icon-no-link-shifted" : "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
key={`fti-`} tooltipPlace="top" />
src={commentMediaInfo.url} )}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</Link>
) : null}
<div key={`ti-`} className="thread-icons" >
{isMediaShowed ? (
<OfflineIndicator
address={thread.subplebbitAddress}
className="thread-icon offline-icon"
tooltipPlace="top" />
) : (
<OfflineIndicator
address={thread.subplebbitAddress}
className={`thread-icon ${linkCount > 0 ? "offline-icon-no-link-shifted" : "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
tooltipPlace="top" />
)}
</div>
<BoardForm selectedStyle={selectedStyle}
onMouseOver={() => {
setIsHoveringForMenu(thread.cid);
handleMouseOnLeaveThread();
}}
onMouseLeave={() => setIsHoveringForMenu(false)}
style={{ all: "unset"}}>
<div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
{linkCount > 0 ? (
<>
&nbsp;/
L:&nbsp;<b key={`i-`}>{linkCount}</b>
</>
) : null}
<PostMenu
style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
zIndex: '999'}}
key={`pmb-`}
title="Post menu"
ref={el => {
threadMenuRefs.current[thread.cid] = el;
postMenuRef.current = el;
}}
className='post-menu-button'
id='post-menu-button-catalog'
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));
}}
>
▶
</PostMenu>
</div> </div>
{createPortal( <BoardForm selectedStyle={selectedStyle}
<PostMenuCatalog selectedStyle={selectedStyle} onMouseOver={() => {
ref={el => {postMenuCatalogRef.current = el}} setIsHoveringForMenu(thread.cid);
onClick={(event) => event.stopPropagation()} handleMouseOnLeaveThread();
style={{position: "absolute", }}
top: menuPosition.top + 7, onMouseLeave={() => setIsHoveringForMenu(false)}
left: menuPosition.left}}> style={{ all: "unset"}}>
<div className={`post-menu-thread post-menu-thread-${thread.cid}`} <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }} R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
> {linkCount > 0 ? (
<ul className="post-menu-catalog"> <>
<li onClick={() => { &nbsp;/
handleOptionClick(thread.cid); L:&nbsp;<b key={`i-`}>{linkCount}</b>
handleShareClick(selectedAddress, thread.cid); </>
}}>Share thread</li> ) : null}
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => ( <PostMenu
<> style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
{authorAddress === account?.author.address || position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
authorAddress === account?.signer.address ? ( zIndex: '999'}}
<> key={`pmb-`}
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li> title="Post menu"
<li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li> ref={el => {
</> threadMenuRefs.current[thread.cid] = el;
) : null} postMenuRef.current = el;
{isModerator ? ( }}
<> className='post-menu-button'
{authorAddress === account?.author.address || id='post-menu-button-catalog'
authorAddress === account?.signer.address ? ( rotated={openMenuCid === thread.cid}
null onClick={(event) => {
) : ( event.stopPropagation();
<li onClick={() => { const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
}}
>
▶
</PostMenu>
</div>
{createPortal(
<PostMenuCatalog selectedStyle={selectedStyle}
ref={el => {postMenuCatalogRef.current = el}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
top: menuPosition.top + 7,
left: menuPosition.left}}>
<div className={`post-menu-thread post-menu-thread-${thread.cid}`}
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
>
<ul className="post-menu-catalog">
<li onClick={() => {
handleOptionClick(thread.cid);
handleShareClick(selectedAddress, thread.cid);
}}>Share thread</li>
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
<>
{authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? (
<>
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
<li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
</>
) : null}
{isModerator ? (
<>
{authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? (
null
) : (
<li onClick={() => {
setSelectedAddress(thread.subplebbitAddress);
setModeratingCommentCid(thread.cid)
setIsModerationOpen(true);
handleOptionClick(thread.cid);
setDeletePost(true);
}}>
Delete post
</li>
)}
<li
onClick={() => {
setSelectedAddress(thread.subplebbitAddress); setSelectedAddress(thread.subplebbitAddress);
setModeratingCommentCid(thread.cid) setModeratingCommentCid(thread.cid)
setIsModerationOpen(true); setIsModerationOpen(true);
handleOptionClick(thread.cid); handleOptionClick(thread.cid);
setDeletePost(true);
}}> }}>
Delete post Mod tools
</li> </li>
)} </>
<li ) : null}
onClick={() => { </>
setSelectedAddress(thread.subplebbitAddress); )}</VerifiedAuthor>
setModeratingCommentCid(thread.cid) {(commentMediaInfo && (
setIsModerationOpen(true); commentMediaInfo.type === 'image' ||
handleOptionClick(thread.cid); (commentMediaInfo.type === 'webpage' &&
}}> commentMediaInfo.thumbnail))) ? (
Mod tools <li
</li> onMouseOver={() => {setIsImageSearchOpen(true)}}
</> onMouseLeave={() => {setIsImageSearchOpen(false)}}>
) : null} Image search »
</> <ul className="dropdown-menu post-menu-catalog"
)}</VerifiedAuthor> style={{display: isImageSearchOpen ? 'block': 'none'}}>
{(commentMediaInfo && ( <li onClick={() => handleOptionClick(thread.cid)}>
commentMediaInfo.type === 'image' || <a
(commentMediaInfo.type === 'webpage' && href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
commentMediaInfo.thumbnail))) ? ( target="_blank" rel="noreferrer"
<li >Google</a>
onMouseOver={() => {setIsImageSearchOpen(true)}} </li>
onMouseLeave={() => {setIsImageSearchOpen(false)}}> <li onClick={() => handleOptionClick(thread.cid)}>
Image search » <a
<ul className="dropdown-menu post-menu-catalog" href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
style={{display: isImageSearchOpen ? 'block': 'none'}}> target="_blank" rel="noreferrer"
<li onClick={() => handleOptionClick(thread.cid)}> >Yandex</a>
<a </li>
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`} <li onClick={() => handleOptionClick(thread.cid)}>
target="_blank" rel="noreferrer" <a
>Google</a> href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
</li> target="_blank" rel="noreferrer"
<li onClick={() => handleOptionClick(thread.cid)}> >SauceNAO</a>
<a </li>
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`} </ul>
target="_blank" rel="noreferrer" </li>
>Yandex</a> ) : null
</li> }
<li onClick={() => handleOptionClick(thread.cid)}> <li
<a onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`} onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
target="_blank" rel="noreferrer" View on »
>SauceNAO</a> <ul className="dropdown-menu post-menu-catalog"
</li> style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
</ul> <li onClick={() => handleOptionClick(thread.cid)}>
</li> <a
) : null href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
} target="_blank" rel="noreferrer"
<li >Plebbit</a>
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}} </li>
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> {/* <li onClick={() => handleOptionClick(thread.cid)}>
View on » <a
<ul className="dropdown-menu post-menu-catalog" href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}> target="_blank" rel="noreferrer"
<li onClick={() => handleOptionClick(thread.cid)}> >Seedit</a>
<a </li> */}
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`} <li onClick={() => handleOptionClick(thread.cid)}>
target="_blank" rel="noreferrer" <a
>Plebbit</a> href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
</li> target="_blank" rel="noreferrer"
{/* <li onClick={() => handleOptionClick(thread.cid)}> >Plebones</a>
<a </li>
href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`} </ul>
target="_blank" rel="noreferrer" </li>
>Seedit</a> </ul>
</li> */} </div>
<li onClick={() => handleOptionClick(thread.cid)}> </PostMenuCatalog>, document.body
<a )}
href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`} </BoardForm>
target="_blank" rel="noreferrer" <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
>Plebones</a> onClick={() => setSelectedThread(thread.cid)}>
</li> <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
</ul> <span key={`teaser-width${thread.cid}`} ref={textRef}
</li> onMouseOver={() => {
</ul> setIsHoveringOnThread(thread.cid);
</div> setIsHoveringForMenu(thread.cid);
</PostMenuCatalog>, document.body const rect = threadRefs.current[thread.cid].getBoundingClientRect();
)} setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
</BoardForm> }}
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onMouseLeave={() => setIsHoveringForMenu(false)}>
onClick={() => setSelectedThread(thread.cid)}> <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}} {thread.content ? `: ${thread.content}` : null}
ref={(el) => (threadRefs.current[thread.cid] = el)}> </span>
<span key={`teaser-width${thread.cid}`} ref={textRef} </div>
onMouseOver={() => { </Link>
setIsHoveringOnThread(thread.cid); </div>
setIsHoveringForMenu(thread.cid); </>
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
</span>
</div>
</Link>
</div>
); );
}; };
src/components/views/Catalog.jsx
+300 -294
View File
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled'; import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled'; import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled';
import EditModal from '../modals/EditModal'; import EditModal from '../modals/EditModal';
@@ -67,6 +67,7 @@ const CatalogPost = ({post}) => {
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false); const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null); const [openMenuCid, setOpenMenuCid] = useState(null);
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false); const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,7 +75,10 @@ const CatalogPost = ({post}) => {
const [commentCid, setCommentCid] = useState(null); const [commentCid, setCommentCid] = useState(null);
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const threadRefs = useRef({});
const postMenuRef = useRef(null); const postMenuRef = useRef(null);
const popupRef = useRef(null);
const imageRef = useRef(null);
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const textRef = useRef(null); const textRef = useRef(null);
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
@@ -85,13 +89,7 @@ const CatalogPost = ({post}) => {
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
const account = useAccount(); const account = useAccount();
const popupRef = useRef(null); const [spaceOnRight, setSpaceOnRight] = useState(null);
const threadRefs = useRef([]);
const imageRef = useRef(null);
const [isEnoughSpaceOnRight, setIsEnoughSpaceOnRight] = useState(null);
const [isEnoughSpaceOnLeft,setIsEnoughSpaceOnLeft] = useState(null);
const [spaceOnLeft,setSpaceOnLeft] = useState(null);
const [spaceOnRight,setSpaceOnRight] = useState(null);
const [isCalculationDone,setIsCalculationDone] = useState(false); const [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null); const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false); const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
@@ -106,6 +104,9 @@ const CatalogPost = ({post}) => {
(commentMediaInfo.type === 'iframe' && (commentMediaInfo.type === 'iframe' &&
commentMediaInfo.thumbnail))) ? true : false; commentMediaInfo.thumbnail))) ? true : false;
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => { useLayoutEffect(() => {
const executeLayoutEffectLogic = () => { const executeLayoutEffectLogic = () => {
let ref; let ref;
@@ -114,20 +115,27 @@ const CatalogPost = ({post}) => {
} else { } else {
ref = textRef.current; ref = textRef.current;
} }
if (ref && popupRef.current) { if (ref && popupRef.current) {
const threadRect = ref.getBoundingClientRect(); const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (threadRect.left + threadRect.width); const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = threadRect.left; const spaceLeft = rect.left;
setIsEnoughSpaceOnLeft(spaceLeft > 500); const popupWidth = popupRef.current.getBoundingClientRect().width;
setIsEnoughSpaceOnRight(spaceRight > 500);
if (spaceRight < 200 && spaceLeft > spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageLeft : textLeft}px)`;
} else if (spaceRight < 200 && spaceLeft < spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageRight : textRight}px)`;
} else {
popupRef.current.style.maxWidth = `${popupWidth}px`;
}
setSpaceOnRight(spaceRight); setSpaceOnRight(spaceRight);
setSpaceOnLeft(spaceLeft);
setIsCalculationDone(true); setIsCalculationDone(true);
} }
}; };
if (isHoveringOnThread) { if (isHoveringOnThread) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 250); const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
return () => { return () => {
@@ -135,8 +143,9 @@ const CatalogPost = ({post}) => {
setIsCalculationDone(false); setIsCalculationDone(false);
}; };
} }
}, [isHoveringOnThread, isMediaShowed]); }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
const handleMouseOnLeaveThread = () => { const handleMouseOnLeaveThread = () => {
@@ -146,7 +155,6 @@ const CatalogPost = ({post}) => {
setIsHoveringOnThread("") setIsHoveringOnThread("")
} else if (isHoveringOnThread !== "") { } else if (isHoveringOnThread !== "") {
setIsHoveringOnThread(""); setIsHoveringOnThread("");
setIsEnoughSpaceOnRight(null);
setIsCalculationDone(false); setIsCalculationDone(false);
} }
}; };
@@ -590,304 +598,302 @@ const CatalogPost = ({post}) => {
) )
} else { } else {
return ( return (
<div key={`thread-`} className="thread" <>
onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ? {isHoveringOnThread === thread.cid ?
<div ref={popupRef} createPortal(
className="thread_popup" <PostPreview selectedStyle={selectedStyle}>
onMouseOver={() => handleMouseOnLeaveThread()} <div ref={popupRef}
style={{ className="post-preview"
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0, onMouseOver={() => handleMouseOnLeaveThread()}
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden', style={{
left: visibility: isCalculationDone ? 'visible' : 'hidden',
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight left:
? isMediaShowed isCalculationDone && spaceOnRight > 250
? `calc(50% + ${imageRect.width}px / 2 + 5px)` ? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
: `calc(50% + ${textRect.width}px / 2 + 5px)` isCalculationDone && spaceOnRight < 250
: 'auto', ? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
right: : 'auto',
isCalculationDone && isEnoughSpaceOnRight !== null && top: popupPosition.top + 5,
(popupRect.width > spaceOnRight && spaceOnLeft > spaceOnRight)
? isMediaShowed
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
: `calc(50% + ${textRect.width}px / 2 + 5px)`
: 'auto',
}}>
<p
className="thread_popup_content"
style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? (
spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` :
spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto'
}}> }}>
<span className="thread_popup_title" > <span className="post-subject" >
{thread.title ? `${thread.title} ` : "Posted "} {thread.title ? `${thread.title} ` : "Posted "}
</span> </span>
by by
<span className="thread_popup_author"> <span className="post-author">
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
</span> </span>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null} <span className='post-ago'>
</p> {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
<div> </span>
{thread.replyCount > 0 ? {thread.replyCount > 0 ?
<p className="thread_popup_lastReply"> <div className='post-last'>
Last reply by Last reply by
<span className="thread_popup_author"> Anonymous </span> <span className="post-author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)} <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
</p> </div>
: null} : null}
</div> </div>
</div> </PostPreview>, document.body
)
: null } : null }
{commentMediaInfo?.url ? ( <div key={`thread-`} className="thread"
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`} ref={el => {
onClick={() => setSelectedThread(thread.cid)} threadRefs.current[thread.cid] = el;
onMouseOver={() => { }}
setIsHoveringOnThread(thread.cid); onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
setIsHoveringForMenu(thread.cid); {commentMediaInfo?.url ? (
}} <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`}
onMouseLeave={() => setIsHoveringForMenu(false)}> onClick={() => setSelectedThread(thread.cid)}
{commentMediaInfo?.type === "webpage" ? ( onMouseOver={() => {
thread.thumbnailUrl ? ( setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
</span>
) : null
) : null}
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`} <img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => { e.target.src = fallbackImgUrl }} />
</span>
) : null}
{commentMediaInfo?.type === "image" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => { onError={(e) => {
e.target.src = fallbackImgUrl e.target.src = fallbackImgUrl
e.target.onerror = null; e.target.onerror = null;}} />
}} />
</span> </span>
) : null ) : null}
) : null} {commentMediaInfo?.type === "video" ? (
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? ( <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <video className="card" ref={imageRef} key={`fti-`}
<img className="card" ref={imageRef} key={`img-`} src={commentMediaInfo.url}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} alt={commentMediaInfo.type}
onError={(e) => { e.target.src = fallbackImgUrl }} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "audio" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <audio className="card" ref={imageRef} controls
<img className="card" ref={imageRef} key={`img-`} key={`fti-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
</span>
) : null}
{commentMediaInfo?.type === "video" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<video className="card" ref={imageRef} key={`fti-`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt={commentMediaInfo.type} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> ) : null}
) : null} </Link>
{commentMediaInfo?.type === "audio" ? (
<audio className="card" ref={imageRef} controls
key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</Link>
) : null}
{isMediaShowed ? (
<div key={`ti-`} className="thread-icons" >
{thread.pinned ? (
<span key={`si-`} className="thread-icon sticky-icon" title="Sticky"
style={{
imageRendering: "pixelated",}} />
) : null} ) : null}
{thread.locked ? ( {isMediaShowed ? (
<span key={`li-`} className="thread-icon closed-icon" title="Closed" <div key={`ti-`} className="thread-icons" >
style={{ {thread.pinned ? (
imageRendering: "pixelated",}} /> <span key={`si-`} className="thread-icon sticky-icon" title="Sticky"
) : null} style={{
</div> imageRendering: "pixelated",}} />
) : null} ) : null}
<BoardForm selectedStyle={selectedStyle} {thread.locked ? (
onMouseOver={() => { <span key={`li-`} className="thread-icon closed-icon" title="Closed"
setIsHoveringForMenu(thread.cid); style={{
handleMouseOnLeaveThread(); imageRendering: "pixelated",}} />
}}
onMouseLeave={() => setIsHoveringForMenu(false)}
style={{ all: "unset"}}>
<div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
{linkCount > 0 ? (
<>
&nbsp;/
L:&nbsp;<b key={`i-`}>{linkCount}</b>
</>
) : null} ) : null}
{isMediaShowed ? null : (
<div className='thread-icons'
style={{position: 'absolute', top: '-2px', right: '15px'}}>
{thread.pinned ? (
<span key={`si-`} className="thread-icon sticky-icon" title="Sticky"
style={{
imageRendering: "pixelated",}} />
) : null}
{thread.locked ? (
<span key={`li-`} className="thread-icon closed-icon" title="Closed"
style={{
imageRendering: "pixelated",}} />
) : null}
</div>
)}
<PostMenu
style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
zIndex: '999'}}
key={`pmb-`}
title="Post menu"
ref={el => {
threadMenuRefs.current[thread.cid] = el;
postMenuRef.current = el;
}}
className='post-menu-button'
id='post-menu-button-catalog'
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));
}}
>
▶
</PostMenu>
</div> </div>
{createPortal( ) : null}
<PostMenuCatalog selectedStyle={selectedStyle} <BoardForm selectedStyle={selectedStyle}
ref={el => {postMenuCatalogRef.current = el}} onMouseOver={() => {
onClick={(event) => event.stopPropagation()} setIsHoveringForMenu(thread.cid);
style={{position: "absolute", handleMouseOnLeaveThread();
top: menuPosition.top + 7, }}
left: menuPosition.left}}> onMouseLeave={() => setIsHoveringForMenu(false)}
<div className={`post-menu-thread post-menu-thread-${thread.cid}`} style={{ all: "unset"}}>
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }} <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
> R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
<ul className="post-menu-catalog"> {linkCount > 0 ? (
<li onClick={() => { <>
handleOptionClick(thread.cid); &nbsp;/
handleShareClick(selectedAddress, thread.cid); L:&nbsp;<b key={`i-`}>{linkCount}</b>
}}>Share thread</li> </>
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => ( ) : null}
<> {isMediaShowed ? null : (
{authorAddress === account?.author.address || <div className='thread-icons'
authorAddress === account?.signer.address ? ( style={{position: 'absolute', top: '-2px', right: '15px'}}>
<> {thread.pinned ? (
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li> <span key={`si-`} className="thread-icon sticky-icon" title="Sticky"
<li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li> style={{
</> imageRendering: "pixelated",}} />
) : null} ) : null}
{isModerator ? ( {thread.locked ? (
<> <span key={`li-`} className="thread-icon closed-icon" title="Closed"
{authorAddress === account?.author.address || style={{
authorAddress === account?.signer.address ? ( imageRendering: "pixelated",}} />
null ) : null}
) : ( </div>
<li onClick={() => { )}
<PostMenu
style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
zIndex: '999'}}
key={`pmb-`}
title="Post menu"
ref={el => {
threadMenuRefs.current[thread.cid] = el;
postMenuRef.current = el;
}}
className='post-menu-button'
id='post-menu-button-catalog'
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));
}}
>
▶
</PostMenu>
</div>
{createPortal(
<PostMenuCatalog selectedStyle={selectedStyle}
ref={el => {postMenuCatalogRef.current = el}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
top: menuPosition.top + 7,
left: menuPosition.left}}>
<div className={`post-menu-thread post-menu-thread-${thread.cid}`}
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
>
<ul className="post-menu-catalog">
<li onClick={() => {
handleOptionClick(thread.cid);
handleShareClick(selectedAddress, thread.cid);
}}>Share thread</li>
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
<>
{authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? (
<>
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
<li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
</>
) : null}
{isModerator ? (
<>
{authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? (
null
) : (
<li onClick={() => {
setModeratingCommentCid(thread.cid)
setIsModerationOpen(true);
handleOptionClick(thread.cid);
setDeletePost(true);
}}>
Delete post
</li>
)}
<li
onClick={() => {
setModeratingCommentCid(thread.cid) setModeratingCommentCid(thread.cid)
setIsModerationOpen(true); setIsModerationOpen(true);
handleOptionClick(thread.cid); handleOptionClick(thread.cid);
setDeletePost(true);
}}> }}>
Delete post Mod tools
</li> </li>
)} </>
<li ) : null}
onClick={() => { </>
setModeratingCommentCid(thread.cid) )}</VerifiedAuthor>
setIsModerationOpen(true); {isMediaShowed ? (
handleOptionClick(thread.cid); <li
}}> onMouseOver={() => {setIsImageSearchOpen(true)}}
Mod tools onMouseLeave={() => {setIsImageSearchOpen(false)}}>
</li> Image search »
</> <ul className="dropdown-menu post-menu-catalog"
) : null} style={{display: isImageSearchOpen ? 'block': 'none'}}>
</> <li onClick={() => handleOptionClick(thread.cid)}>
)}</VerifiedAuthor> <a
{isMediaShowed ? ( href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
<li target="_blank" rel="noreferrer"
onMouseOver={() => {setIsImageSearchOpen(true)}} >Google</a>
onMouseLeave={() => {setIsImageSearchOpen(false)}}> </li>
Image search » <li onClick={() => handleOptionClick(thread.cid)}>
<ul className="dropdown-menu post-menu-catalog" <a
style={{display: isImageSearchOpen ? 'block': 'none'}}> href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
<li onClick={() => handleOptionClick(thread.cid)}> target="_blank" rel="noreferrer"
<a >Yandex</a>
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`} </li>
target="_blank" rel="noreferrer" <li onClick={() => handleOptionClick(thread.cid)}>
>Google</a> <a
</li> href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
<li onClick={() => handleOptionClick(thread.cid)}> target="_blank" rel="noreferrer"
<a >SauceNAO</a>
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`} </li>
target="_blank" rel="noreferrer" </ul>
>Yandex</a> </li>
</li> ) : null
<li onClick={() => handleOptionClick(thread.cid)}> }
<a <li
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`} onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
target="_blank" rel="noreferrer" onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
>SauceNAO</a> View on »
</li> <ul className="dropdown-menu post-menu-catalog"
</ul> style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
</li> <li onClick={() => handleOptionClick(thread.cid)}>
) : null <a
} href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
<li target="_blank" rel="noreferrer"
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}} >Plebbit</a>
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> </li>
View on » {/* <li onClick={() => handleOptionClick(thread.cid)}>
<ul className="dropdown-menu post-menu-catalog" <a
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}> href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
<li onClick={() => handleOptionClick(thread.cid)}> target="_blank" rel="noreferrer"
<a >Seedit</a>
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`} </li> */}
target="_blank" rel="noreferrer" <li onClick={() => handleOptionClick(thread.cid)}>
>Plebbit</a> <a
</li> href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
{/* <li onClick={() => handleOptionClick(thread.cid)}> target="_blank" rel="noreferrer"
<a >Plebones</a>
href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`} </li>
target="_blank" rel="noreferrer" </ul>
>Seedit</a> </li>
</li> */} </ul>
<li onClick={() => handleOptionClick(thread.cid)}> </div>
<a </PostMenuCatalog>, document.body
href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`} )}
target="_blank" rel="noreferrer" </BoardForm>
>Plebones</a> <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`}
</li> onClick={() => setSelectedThread(thread.cid)}>
</ul> <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
</li> <div style={{cursor:"text"}}>
</ul> <span key={`teaser-width${thread.cid}`} ref={textRef}
</div> onMouseOver={() => {
</PostMenuCatalog>, document.body setIsHoveringOnThread(thread.cid);
)} setIsHoveringForMenu(thread.cid);
</BoardForm> const rect = threadRefs.current[thread.cid].getBoundingClientRect();
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`} setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
onClick={() => setSelectedThread(thread.cid)}> }}
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}> onMouseLeave={() => setIsHoveringForMenu(false)}>
<div style={{cursor:"text"}} <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
ref={(el) => (threadRefs.current[thread.cid] = el)}> {thread.content ? `: ${thread.content}` : null}
<span key={`teaser-width${thread.cid}`} ref={textRef} </span>
onMouseOver={() => { </div>
setIsHoveringOnThread(thread.cid); </div>
setIsHoveringForMenu(thread.cid); </Link>
}} </div>
onMouseLeave={() => setIsHoveringForMenu(false)}> </>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
</span>
</div>
</div>
</Link>
</div>
) )
} }
}; };
src/components/views/SubscriptionsCatalog.jsx
+292 -287
View File
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled'; import { Threads, PostPreview, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled'; import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader'; import CatalogLoader from '../CatalogLoader';
@@ -61,6 +61,7 @@ const CatalogPost = ({post}) => {
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false); const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null); const [openMenuCid, setOpenMenuCid] = useState(null);
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false); const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
@@ -74,16 +75,13 @@ const CatalogPost = ({post}) => {
const account = useAccount(); const account = useAccount();
const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress}); const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const threadRefs = useRef({});
const postMenuRef = useRef(null); const postMenuRef = useRef(null);
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const popupRef = useRef(null); const popupRef = useRef(null);
const threadRefs = useRef([]);
const textRef = useRef(null); const textRef = useRef(null);
const imageRef = useRef(null); const imageRef = useRef(null);
const [isEnoughSpaceOnRight, setIsEnoughSpaceOnRight] = useState(null); const [spaceOnRight, setSpaceOnRight] = useState(null);
const [isEnoughSpaceOnLeft,setIsEnoughSpaceOnLeft] = useState(null);
const [spaceOnLeft,setSpaceOnLeft] = useState(null);
const [spaceOnRight,setSpaceOnRight] = useState(null);
const [isCalculationDone,setIsCalculationDone] = useState(false); const [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null); const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false); const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
@@ -99,6 +97,9 @@ const CatalogPost = ({post}) => {
commentMediaInfo.thumbnail))) ? true : false; commentMediaInfo.thumbnail))) ? true : false;
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => { useLayoutEffect(() => {
const executeLayoutEffectLogic = () => { const executeLayoutEffectLogic = () => {
let ref; let ref;
@@ -107,20 +108,27 @@ const CatalogPost = ({post}) => {
} else { } else {
ref = textRef.current; ref = textRef.current;
} }
if (ref && popupRef.current) { if (ref && popupRef.current) {
const threadRect = ref.getBoundingClientRect(); const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (threadRect.left + threadRect.width); const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = threadRect.left; const spaceLeft = rect.left;
setIsEnoughSpaceOnLeft(spaceLeft > 500); const popupWidth = popupRef.current.getBoundingClientRect().width;
setIsEnoughSpaceOnRight(spaceRight > 500);
if (spaceRight < 200 && spaceLeft > spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageLeft : textLeft}px)`;
} else if (spaceRight < 200 && spaceLeft < spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageRight : textRight}px)`;
} else {
popupRef.current.style.maxWidth = `${popupWidth}px`;
}
setSpaceOnRight(spaceRight); setSpaceOnRight(spaceRight);
setSpaceOnLeft(spaceLeft);
setIsCalculationDone(true); setIsCalculationDone(true);
} }
}; };
if (isHoveringOnThread) { if (isHoveringOnThread) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 250); const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
return () => { return () => {
@@ -128,8 +136,8 @@ const CatalogPost = ({post}) => {
setIsCalculationDone(false); setIsCalculationDone(false);
}; };
} }
}, [isHoveringOnThread, isMediaShowed]); }, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
const handleMouseOnLeaveThread = () => { const handleMouseOnLeaveThread = () => {
@@ -139,7 +147,6 @@ const CatalogPost = ({post}) => {
setIsHoveringOnThread("") setIsHoveringOnThread("")
} else if (isHoveringOnThread !== "") { } else if (isHoveringOnThread !== "") {
setIsHoveringOnThread(""); setIsHoveringOnThread("");
setIsEnoughSpaceOnRight(null);
setIsCalculationDone(false); setIsCalculationDone(false);
} }
}; };
@@ -350,291 +357,289 @@ const CatalogPost = ({post}) => {
return ( return (
<div key={`thread-`} className="thread" <>
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{isHoveringOnThread === thread.cid ? {isHoveringOnThread === thread.cid ?
<div ref={popupRef} createPortal(
className="thread_popup" <PostPreview selectedStyle={selectedStyle}>
onMouseOver={() => handleMouseOnLeaveThread()} <div ref={popupRef}
style={{ className="post-preview"
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0, onMouseOver={() => handleMouseOnLeaveThread()}
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden', style={{
left: visibility: isCalculationDone ? 'visible' : 'hidden',
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight left:
? isMediaShowed isCalculationDone && spaceOnRight > 250
? `calc(50% + ${imageRect.width}px / 2 + 5px)` ? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
: `calc(50% + ${textRect.width}px / 2 + 5px)` isCalculationDone && spaceOnRight < 250
: 'auto', ? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
right: : 'auto',
isCalculationDone && isEnoughSpaceOnRight !== null && top: popupPosition.top + 5,
(popupRect.width > spaceOnRight && spaceOnLeft > spaceOnRight) }}>
? isMediaShowed <span className="post-subject" >
? `calc(50% + ${imageRect.width}px / 2 + 5px)` {thread.title ? `${thread.title} ` : "Posted "}
: `calc(50% + ${textRect.width}px / 2 + 5px)` </span>
: 'auto', by
}}> <span className="post-author">
<p {thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
className="thread_popup_content" </span>
style={{ width: !isEnoughSpaceOnLeft && !isEnoughSpaceOnRight ? ( <span className='post-ago'>
spaceOnLeft > spaceOnRight ? `${spaceOnLeft}px` : {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
spaceOnLeft < spaceOnRight ? `${spaceOnRight}px` : 'auto') : 'auto' </span>
}}> {thread.replyCount > 0 ?
<span className="thread_popup_title" > <div className='post-last'>
{thread.title ? `${thread.title} ` : "Posted "} Last reply by
</span> <span className="post-author"> Anonymous </span>
by <span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
<span className="thread_popup_author"> </div>
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "} : null}
</span> </div>
{thread.timestamp ? getFormattedTime(thread.timestamp) : null} </PostPreview>, document.body
</p> )
<div> : null }
{thread.replyCount > 0 ? <div key={`thread-`} className="thread"
<p className="thread_popup_lastReply"> ref={el => {
Last reply by threadRefs.current[thread.cid] = el;
<span className="thread_popup_author"> Anonymous </span>
{getFormattedTime(thread.lastReplyTimestamp)}
</p>
: null}
</div>
</div>
: null }
{commentMediaInfo?.url ? (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
}} }}
onMouseLeave={() => setIsHoveringForMenu(false)}> onMouseLeave={() => {handleMouseOnLeaveThread()}}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.url ? (
thread.thumbnailUrl ? ( <Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
onClick={() => setSelectedThread(thread.cid)}
onMouseOver={() => {
setIsHoveringOnThread(thread.cid);
setIsHoveringForMenu(thread.cid);
const rect = threadRefs.current[thread.cid].getBoundingClientRect();
setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
</span>
) : null
) : null}
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`} <img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => { e.target.src = fallbackImgUrl }} />
</span>
) : null}
{commentMediaInfo?.type === "image" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" ref={imageRef} key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => { onError={(e) => {
e.target.src = fallbackImgUrl e.target.src = fallbackImgUrl
e.target.onerror = null; e.target.onerror = null;}} />
}} />
</span> </span>
) : null ) : null}
) : null} {commentMediaInfo?.type === "video" ? (
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? ( <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <video className="card" ref={imageRef} key={`fti-`}
<img className="card" ref={imageRef} key={`img-`} src={commentMediaInfo.url}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} alt={commentMediaInfo.type}
onError={(e) => { e.target.src = fallbackImgUrl }} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "audio" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> <audio className="card" ref={imageRef} controls
<img className="card" ref={imageRef} key={`img-`} key={`fti-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url}
onError={(e) => { alt={commentMediaInfo.type}
e.target.src = fallbackImgUrl onError={(e) => e.target.src = fallbackImgUrl} />
e.target.onerror = null;}} /> ) : null}
</span> </Link>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( <div key={`ti-`} className="thread-icons" >
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}> {isMediaShowed ? (
<video className="card" ref={imageRef} key={`fti-`} <OfflineIndicator
src={commentMediaInfo.url} address={thread.subplebbitAddress}
alt={commentMediaInfo.type} className="thread-icon offline-icon"
onError={(e) => e.target.src = fallbackImgUrl} /> tooltipPlace="top" />
</span> ) : (
) : null} <OfflineIndicator
{commentMediaInfo?.type === "audio" ? ( address={thread.subplebbitAddress}
<audio className="card" ref={imageRef} controls className={`thread-icon ${linkCount> 0?"offline-icon-no-link-shifted": "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
key={`fti-`} tooltipPlace="top" />
src={commentMediaInfo.url} )}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</Link>
) : null}
<div key={`ti-`} className="thread-icons" >
{isMediaShowed ? (
<OfflineIndicator
address={thread.subplebbitAddress}
className="thread-icon offline-icon"
tooltipPlace="top" />
) : (
<OfflineIndicator
address={thread.subplebbitAddress}
className={`thread-icon ${linkCount> 0?"offline-icon-no-link-shifted": "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
tooltipPlace="top" />
)}
</div>
<BoardForm selectedStyle={selectedStyle}
onMouseOver={() => {
setIsHoveringForMenu(thread.cid);
handleMouseOnLeaveThread();
}}
onMouseLeave={() => setIsHoveringForMenu(false)}
style={{ all: "unset"}}>
<div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
{linkCount > 0 ? (
<>
&nbsp;/
L:&nbsp;<b key={`i-`}>{linkCount}</b>
</>
) : null}
<PostMenu
style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
zIndex: '999'}}
key={`pmb-`}
title="Post menu"
ref={el => {
threadMenuRefs.current[thread.cid] = el;
postMenuRef.current = el;
}}
className='post-menu-button'
id='post-menu-button-catalog'
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));
}}
>
▶
</PostMenu>
</div> </div>
{createPortal( <BoardForm selectedStyle={selectedStyle}
<PostMenuCatalog selectedStyle={selectedStyle} onMouseOver={() => {
ref={el => {postMenuCatalogRef.current = el}} setIsHoveringForMenu(thread.cid);
onClick={(event) => event.stopPropagation()} handleMouseOnLeaveThread();
style={{position: "absolute", }}
top: menuPosition.top + 7, onMouseLeave={() => setIsHoveringForMenu(false)}
left: menuPosition.left}}> style={{ all: "unset"}}>
<div className={`post-menu-thread post-menu-thread-${thread.cid}`} <div key={`meta-`} className="meta" title="(R)eplies / (L)ink Replies" >
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }} R:&nbsp;<b key={`b-`}>{thread.replyCount}</b>
> {linkCount > 0 ? (
<ul className="post-menu-catalog"> <>
<li onClick={() => { &nbsp;/
handleOptionClick(thread.cid); L:&nbsp;<b key={`i-`}>{linkCount}</b>
handleShareClick(selectedAddress, thread.cid); </>
}}>Share thread</li> ) : null}
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => ( <PostMenu
<> style={{ display: isHoveringForMenu === thread.cid ? 'inline-block' : 'none',
{authorAddress === account?.author.address || position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
authorAddress === account?.signer.address ? ( zIndex: '999'}}
<> key={`pmb-`}
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li> title="Post menu"
<li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li> ref={el => {
</> threadMenuRefs.current[thread.cid] = el;
) : null} postMenuRef.current = el;
{isModerator ? ( }}
<> className='post-menu-button'
{authorAddress === account?.author.address || id='post-menu-button-catalog'
authorAddress === account?.signer.address ? ( rotated={openMenuCid === thread.cid}
null onClick={(event) => {
) : ( event.stopPropagation();
<li onClick={() => { const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
}}
>
▶
</PostMenu>
</div>
{createPortal(
<PostMenuCatalog selectedStyle={selectedStyle}
ref={el => {postMenuCatalogRef.current = el}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
top: menuPosition.top + 7,
left: menuPosition.left}}>
<div className={`post-menu-thread post-menu-thread-${thread.cid}`}
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
>
<ul className="post-menu-catalog">
<li onClick={() => {
handleOptionClick(thread.cid);
handleShareClick(selectedAddress, thread.cid);
}}>Share thread</li>
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
<>
{authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? (
<>
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
<li onClick={() => handleAuthorDeleteClick(thread)}>Delete post</li>
</>
) : null}
{isModerator ? (
<>
{authorAddress === account?.author.address ||
authorAddress === account?.signer.address ? (
null
) : (
<li onClick={() => {
setSelectedAddress(thread.subplebbitAddress);
setModeratingCommentCid(thread.cid)
setIsModerationOpen(true);
handleOptionClick(thread.cid);
setDeletePost(true);
}}>
Delete post
</li>
)}
<li
onClick={() => {
setSelectedAddress(thread.subplebbitAddress); setSelectedAddress(thread.subplebbitAddress);
setModeratingCommentCid(thread.cid) setModeratingCommentCid(thread.cid)
setIsModerationOpen(true); setIsModerationOpen(true);
handleOptionClick(thread.cid); handleOptionClick(thread.cid);
setDeletePost(true);
}}> }}>
Delete post Mod tools
</li> </li>
)} </>
<li ) : null}
onClick={() => { </>
setSelectedAddress(thread.subplebbitAddress); )}</VerifiedAuthor>
setModeratingCommentCid(thread.cid) {(commentMediaInfo && (
setIsModerationOpen(true); commentMediaInfo.type === 'image' ||
handleOptionClick(thread.cid); (commentMediaInfo.type === 'webpage' &&
}}> commentMediaInfo.thumbnail))) ? (
Mod tools <li
</li> onMouseOver={() => {setIsImageSearchOpen(true)}}
</> onMouseLeave={() => {setIsImageSearchOpen(false)}}>
) : null} Image search »
</> <ul className="dropdown-menu post-menu-catalog"
)}</VerifiedAuthor> style={{display: isImageSearchOpen ? 'block': 'none'}}>
{(commentMediaInfo && ( <li onClick={() => handleOptionClick(thread.cid)}>
commentMediaInfo.type === 'image' || <a
(commentMediaInfo.type === 'webpage' && href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
commentMediaInfo.thumbnail))) ? ( target="_blank" rel="noreferrer"
<li >Google</a>
onMouseOver={() => {setIsImageSearchOpen(true)}} </li>
onMouseLeave={() => {setIsImageSearchOpen(false)}}> <li onClick={() => handleOptionClick(thread.cid)}>
Image search » <a
<ul className="dropdown-menu post-menu-catalog" href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
style={{display: isImageSearchOpen ? 'block': 'none'}}> target="_blank" rel="noreferrer"
<li onClick={() => handleOptionClick(thread.cid)}> >Yandex</a>
<a </li>
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`} <li onClick={() => handleOptionClick(thread.cid)}>
target="_blank" rel="noreferrer" <a
>Google</a> href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
</li> target="_blank" rel="noreferrer"
<li onClick={() => handleOptionClick(thread.cid)}> >SauceNAO</a>
<a </li>
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`} </ul>
target="_blank" rel="noreferrer" </li>
>Yandex</a> ) : null
</li> }
<li onClick={() => handleOptionClick(thread.cid)}> <li
<a onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`} onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
target="_blank" rel="noreferrer" View on »
>SauceNAO</a> <ul className="dropdown-menu post-menu-catalog"
</li> style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
</ul> <li onClick={() => handleOptionClick(thread.cid)}>
</li> <a
) : null href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
} target="_blank" rel="noreferrer"
<li >Plebbit</a>
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}} </li>
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> {/* <li onClick={() => handleOptionClick(thread.cid)}>
View on » <a
<ul className="dropdown-menu post-menu-catalog" href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}> target="_blank" rel="noreferrer"
<li onClick={() => handleOptionClick(thread.cid)}> >Seedit</a>
<a </li> */}
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`} <li onClick={() => handleOptionClick(thread.cid)}>
target="_blank" rel="noreferrer" <a
>Plebbit</a> href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
</li> target="_blank" rel="noreferrer"
{/* <li onClick={() => handleOptionClick(thread.cid)}> >Plebones</a>
<a </li>
href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`} </ul>
target="_blank" rel="noreferrer" </li>
>Seedit</a> </ul>
</li> */} </div>
<li onClick={() => handleOptionClick(thread.cid)}> </PostMenuCatalog>, document.body
<a )}
href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`} </BoardForm>
target="_blank" rel="noreferrer" <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
>Plebones</a> onClick={() => setSelectedThread(thread.cid)}>
</li> <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
</ul> <span key={`teaser-width${thread.cid}`} ref={textRef}
</li> onMouseOver={() => {
</ul> setIsHoveringOnThread(thread.cid);
</div> setIsHoveringForMenu(thread.cid);
</PostMenuCatalog>, document.body const rect = threadRefs.current[thread.cid].getBoundingClientRect();
)} setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
</BoardForm> }}
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onMouseLeave={() => setIsHoveringForMenu(false)}>
onClick={() => setSelectedThread(thread.cid)}> <b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}} {thread.content ? `: ${thread.content}` : null}
ref={(el) => (threadRefs.current[thread.cid] = el)}> </span>
<span key={`teaser-width${thread.cid}`} ref={textRef} </div>
onMouseOver={() => { </Link>
setIsHoveringOnThread(thread.cid); </div>
setIsHoveringForMenu(thread.cid); </>
}}
onMouseLeave={() => setIsHoveringForMenu(false)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
</span>
</div>
</Link>
</div>
); );
}; };