mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
implement portal for catalog popups
This commit is contained in:
plebeius.eth
+292
-287
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
|
||||
import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
|
||||
import { debounce } from 'lodash';
|
||||
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 { AlertModal } from '../styled/modals/AlertModal.styled';
|
||||
import CatalogLoader from '../CatalogLoader';
|
||||
@@ -61,6 +61,7 @@ const CatalogPost = ({post}) => {
|
||||
const fallbackImgUrl = "assets/filedeleted-res.gif";
|
||||
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
|
||||
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
|
||||
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
|
||||
const [openMenuCid, setOpenMenuCid] = useState(null);
|
||||
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
|
||||
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
|
||||
@@ -74,16 +75,13 @@ const CatalogPost = ({post}) => {
|
||||
const account = useAccount();
|
||||
const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
|
||||
const threadMenuRefs = useRef({});
|
||||
const threadRefs = useRef({});
|
||||
const postMenuRef = useRef(null);
|
||||
const postMenuCatalogRef = useRef(null);
|
||||
const popupRef = useRef(null);
|
||||
const threadRefs = useRef([]);
|
||||
const textRef = useRef(null);
|
||||
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 [spaceOnRight, setSpaceOnRight] = useState(null);
|
||||
const [isCalculationDone,setIsCalculationDone] = useState(false);
|
||||
const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
|
||||
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
|
||||
@@ -99,6 +97,9 @@ const CatalogPost = ({post}) => {
|
||||
commentMediaInfo.thumbnail))) ? true : false;
|
||||
|
||||
|
||||
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
|
||||
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const executeLayoutEffectLogic = () => {
|
||||
let ref;
|
||||
@@ -107,20 +108,27 @@ const CatalogPost = ({post}) => {
|
||||
} else {
|
||||
ref = textRef.current;
|
||||
}
|
||||
|
||||
|
||||
if (ref && popupRef.current) {
|
||||
const threadRect = ref.getBoundingClientRect();
|
||||
const rect = ref.getBoundingClientRect();
|
||||
const viewportWidth = document.documentElement.clientWidth;
|
||||
const spaceRight = viewportWidth - (threadRect.left + threadRect.width);
|
||||
const spaceLeft = threadRect.left;
|
||||
setIsEnoughSpaceOnLeft(spaceLeft > 500);
|
||||
setIsEnoughSpaceOnRight(spaceRight > 500);
|
||||
const spaceRight = viewportWidth - (rect.left + rect.width);
|
||||
const spaceLeft = rect.left;
|
||||
const popupWidth = popupRef.current.getBoundingClientRect().width;
|
||||
|
||||
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);
|
||||
setSpaceOnLeft(spaceLeft);
|
||||
setIsCalculationDone(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
if (isHoveringOnThread) {
|
||||
const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
|
||||
return () => {
|
||||
@@ -128,8 +136,8 @@ const CatalogPost = ({post}) => {
|
||||
setIsCalculationDone(false);
|
||||
};
|
||||
}
|
||||
|
||||
}, [isHoveringOnThread, isMediaShowed]);
|
||||
|
||||
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
|
||||
|
||||
|
||||
const handleMouseOnLeaveThread = () => {
|
||||
@@ -139,7 +147,6 @@ const CatalogPost = ({post}) => {
|
||||
setIsHoveringOnThread("")
|
||||
} else if (isHoveringOnThread !== "") {
|
||||
setIsHoveringOnThread("");
|
||||
setIsEnoughSpaceOnRight(null);
|
||||
setIsCalculationDone(false);
|
||||
}
|
||||
};
|
||||
@@ -350,291 +357,289 @@ const CatalogPost = ({post}) => {
|
||||
|
||||
|
||||
return (
|
||||
<div key={`thread-`} className="thread"
|
||||
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
|
||||
<>
|
||||
{isHoveringOnThread === thread.cid ?
|
||||
<div ref={popupRef}
|
||||
className="thread_popup"
|
||||
onMouseOver={() => handleMouseOnLeaveThread()}
|
||||
style={{
|
||||
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
|
||||
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
|
||||
left:
|
||||
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight
|
||||
? isMediaShowed
|
||||
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
|
||||
: `calc(50% + ${textRect.width}px / 2 + 5px)`
|
||||
: 'auto',
|
||||
right:
|
||||
isCalculationDone && isEnoughSpaceOnRight !== null &&
|
||||
(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" >
|
||||
{thread.title ? `${thread.title} ` : "Posted "}
|
||||
</span>
|
||||
by
|
||||
<span className="thread_popup_author">
|
||||
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
|
||||
</span>
|
||||
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}
|
||||
</p>
|
||||
<div>
|
||||
{thread.replyCount > 0 ?
|
||||
<p className="thread_popup_lastReply">
|
||||
Last reply by
|
||||
<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);
|
||||
createPortal(
|
||||
<PostPreview selectedStyle={selectedStyle}>
|
||||
<div ref={popupRef}
|
||||
className="post-preview"
|
||||
onMouseOver={() => handleMouseOnLeaveThread()}
|
||||
style={{
|
||||
visibility: isCalculationDone ? 'visible' : 'hidden',
|
||||
left:
|
||||
isCalculationDone && spaceOnRight > 250
|
||||
? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
|
||||
isCalculationDone && spaceOnRight < 250
|
||||
? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
|
||||
: 'auto',
|
||||
top: popupPosition.top + 5,
|
||||
}}>
|
||||
<span className="post-subject" >
|
||||
{thread.title ? `${thread.title} ` : "Posted "}
|
||||
</span>
|
||||
by
|
||||
<span className="post-author">
|
||||
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
|
||||
</span>
|
||||
<span className='post-ago'>
|
||||
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}
|
||||
</span>
|
||||
{thread.replyCount > 0 ?
|
||||
<div className='post-last'>
|
||||
Last reply by
|
||||
<span className="post-author"> Anonymous </span>
|
||||
<span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
|
||||
</div>
|
||||
: null}
|
||||
</div>
|
||||
</PostPreview>, document.body
|
||||
)
|
||||
: null }
|
||||
<div key={`thread-`} className="thread"
|
||||
ref={el => {
|
||||
threadRefs.current[thread.cid] = el;
|
||||
}}
|
||||
onMouseLeave={() => setIsHoveringForMenu(false)}>
|
||||
{commentMediaInfo?.type === "webpage" ? (
|
||||
thread.thumbnailUrl ? (
|
||||
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
|
||||
{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);
|
||||
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}}>
|
||||
<img className="card" ref={imageRef} key={`img-`}
|
||||
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) => {
|
||||
e.target.src = fallbackImgUrl
|
||||
e.target.onerror = null;
|
||||
}} />
|
||||
e.target.onerror = null;}} />
|
||||
</span>
|
||||
) : null
|
||||
) : null}
|
||||
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
|
||||
<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 }} />
|
||||
</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) => {
|
||||
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}
|
||||
alt={commentMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
) : null}
|
||||
{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}
|
||||
<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: <b key={`b-`}>{thread.replyCount}</b>
|
||||
{linkCount > 0 ? (
|
||||
<>
|
||||
/
|
||||
L: <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>
|
||||
) : null}
|
||||
{commentMediaInfo?.type === "video" ? (
|
||||
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
|
||||
<video className="card" ref={imageRef} key={`fti-`}
|
||||
src={commentMediaInfo.url}
|
||||
alt={commentMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
) : null}
|
||||
{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}
|
||||
<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>
|
||||
{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={() => {
|
||||
<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: <b key={`b-`}>{thread.replyCount}</b>
|
||||
{linkCount > 0 ? (
|
||||
<>
|
||||
/
|
||||
L: <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>
|
||||
{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);
|
||||
setModeratingCommentCid(thread.cid)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(thread.cid);
|
||||
setDeletePost(true);
|
||||
}}>
|
||||
Delete post
|
||||
Mod tools
|
||||
</li>
|
||||
)}
|
||||
<li
|
||||
onClick={() => {
|
||||
setSelectedAddress(thread.subplebbitAddress);
|
||||
setModeratingCommentCid(thread.cid)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(thread.cid);
|
||||
}}>
|
||||
Mod tools
|
||||
</li>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
)}</VerifiedAuthor>
|
||||
{(commentMediaInfo && (
|
||||
commentMediaInfo.type === 'image' ||
|
||||
(commentMediaInfo.type === 'webpage' &&
|
||||
commentMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
<li
|
||||
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
|
||||
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
|
||||
View on »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebbit</a>
|
||||
</li>
|
||||
{/* <li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Seedit</a>
|
||||
</li> */}
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebones</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</PostMenuCatalog>, document.body
|
||||
)}
|
||||
</BoardForm>
|
||||
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
|
||||
onClick={() => setSelectedThread(thread.cid)}>
|
||||
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}
|
||||
ref={(el) => (threadRefs.current[thread.cid] = el)}>
|
||||
<span key={`teaser-width${thread.cid}`} ref={textRef}
|
||||
onMouseOver={() => {
|
||||
setIsHoveringOnThread(thread.cid);
|
||||
setIsHoveringForMenu(thread.cid);
|
||||
}}
|
||||
onMouseLeave={() => setIsHoveringForMenu(false)}>
|
||||
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
|
||||
{thread.content ? `: ${thread.content}` : null}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
)}</VerifiedAuthor>
|
||||
{(commentMediaInfo && (
|
||||
commentMediaInfo.type === 'image' ||
|
||||
(commentMediaInfo.type === 'webpage' &&
|
||||
commentMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
<li
|
||||
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
|
||||
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
|
||||
View on »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebbit</a>
|
||||
</li>
|
||||
{/* <li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Seedit</a>
|
||||
</li> */}
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebones</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</PostMenuCatalog>, document.body
|
||||
)}
|
||||
</BoardForm>
|
||||
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
|
||||
onClick={() => setSelectedThread(thread.cid)}>
|
||||
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
|
||||
<span key={`teaser-width${thread.cid}`} ref={textRef}
|
||||
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)}>
|
||||
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
|
||||
{thread.content ? `: ${thread.content}` : null}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
+300
-294
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
|
||||
import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
|
||||
import { debounce } from 'lodash';
|
||||
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 { AlertModal } from '../styled/modals/AlertModal.styled';
|
||||
import EditModal from '../modals/EditModal';
|
||||
@@ -67,6 +67,7 @@ const CatalogPost = ({post}) => {
|
||||
const fallbackImgUrl = "assets/filedeleted-res.gif";
|
||||
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
|
||||
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
|
||||
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
|
||||
const [openMenuCid, setOpenMenuCid] = useState(null);
|
||||
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
|
||||
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
|
||||
@@ -74,7 +75,10 @@ const CatalogPost = ({post}) => {
|
||||
const [commentCid, setCommentCid] = useState(null);
|
||||
|
||||
const threadMenuRefs = useRef({});
|
||||
const threadRefs = useRef({});
|
||||
const postMenuRef = useRef(null);
|
||||
const popupRef = useRef(null);
|
||||
const imageRef = useRef(null);
|
||||
const postMenuCatalogRef = useRef(null);
|
||||
const textRef = useRef(null);
|
||||
const { subplebbitAddress } = useParams();
|
||||
@@ -85,13 +89,7 @@ const CatalogPost = ({post}) => {
|
||||
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
|
||||
|
||||
const account = useAccount();
|
||||
const popupRef = useRef(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 [spaceOnRight, setSpaceOnRight] = useState(null);
|
||||
const [isCalculationDone,setIsCalculationDone] = useState(false);
|
||||
const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
|
||||
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
|
||||
@@ -106,6 +104,9 @@ const CatalogPost = ({post}) => {
|
||||
(commentMediaInfo.type === 'iframe' &&
|
||||
commentMediaInfo.thumbnail))) ? true : false;
|
||||
|
||||
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
|
||||
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const executeLayoutEffectLogic = () => {
|
||||
let ref;
|
||||
@@ -114,20 +115,27 @@ const CatalogPost = ({post}) => {
|
||||
} else {
|
||||
ref = textRef.current;
|
||||
}
|
||||
|
||||
|
||||
if (ref && popupRef.current) {
|
||||
const threadRect = ref.getBoundingClientRect();
|
||||
const rect = ref.getBoundingClientRect();
|
||||
const viewportWidth = document.documentElement.clientWidth;
|
||||
const spaceRight = viewportWidth - (threadRect.left + threadRect.width);
|
||||
const spaceLeft = threadRect.left;
|
||||
setIsEnoughSpaceOnLeft(spaceLeft > 500);
|
||||
setIsEnoughSpaceOnRight(spaceRight > 500);
|
||||
const spaceRight = viewportWidth - (rect.left + rect.width);
|
||||
const spaceLeft = rect.left;
|
||||
const popupWidth = popupRef.current.getBoundingClientRect().width;
|
||||
|
||||
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);
|
||||
setSpaceOnLeft(spaceLeft);
|
||||
setIsCalculationDone(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
if (isHoveringOnThread) {
|
||||
const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
|
||||
return () => {
|
||||
@@ -135,8 +143,9 @@ const CatalogPost = ({post}) => {
|
||||
setIsCalculationDone(false);
|
||||
};
|
||||
}
|
||||
|
||||
}, [isHoveringOnThread, isMediaShowed]);
|
||||
|
||||
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
|
||||
|
||||
|
||||
|
||||
const handleMouseOnLeaveThread = () => {
|
||||
@@ -146,7 +155,6 @@ const CatalogPost = ({post}) => {
|
||||
setIsHoveringOnThread("")
|
||||
} else if (isHoveringOnThread !== "") {
|
||||
setIsHoveringOnThread("");
|
||||
setIsEnoughSpaceOnRight(null);
|
||||
setIsCalculationDone(false);
|
||||
}
|
||||
};
|
||||
@@ -590,304 +598,302 @@ const CatalogPost = ({post}) => {
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div key={`thread-`} className="thread"
|
||||
onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
|
||||
<>
|
||||
{isHoveringOnThread === thread.cid ?
|
||||
<div ref={popupRef}
|
||||
className="thread_popup"
|
||||
onMouseOver={() => handleMouseOnLeaveThread()}
|
||||
style={{
|
||||
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
|
||||
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
|
||||
left:
|
||||
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight
|
||||
? isMediaShowed
|
||||
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
|
||||
: `calc(50% + ${textRect.width}px / 2 + 5px)`
|
||||
: 'auto',
|
||||
right:
|
||||
isCalculationDone && isEnoughSpaceOnRight !== null &&
|
||||
(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'
|
||||
createPortal(
|
||||
<PostPreview selectedStyle={selectedStyle}>
|
||||
<div ref={popupRef}
|
||||
className="post-preview"
|
||||
onMouseOver={() => handleMouseOnLeaveThread()}
|
||||
style={{
|
||||
visibility: isCalculationDone ? 'visible' : 'hidden',
|
||||
left:
|
||||
isCalculationDone && spaceOnRight > 250
|
||||
? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
|
||||
isCalculationDone && spaceOnRight < 250
|
||||
? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
|
||||
: 'auto',
|
||||
top: popupPosition.top + 5,
|
||||
}}>
|
||||
<span className="thread_popup_title" >
|
||||
{thread.title ? `${thread.title} ` : "Posted "}
|
||||
</span>
|
||||
by
|
||||
<span className="thread_popup_author">
|
||||
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
|
||||
</span>
|
||||
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}
|
||||
</p>
|
||||
<div>
|
||||
<span className="post-subject" >
|
||||
{thread.title ? `${thread.title} ` : "Posted "}
|
||||
</span>
|
||||
by
|
||||
<span className="post-author">
|
||||
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
|
||||
</span>
|
||||
<span className='post-ago'>
|
||||
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}
|
||||
</span>
|
||||
{thread.replyCount > 0 ?
|
||||
<p className="thread_popup_lastReply">
|
||||
<div className='post-last'>
|
||||
Last reply by
|
||||
<span className="thread_popup_author"> Anonymous </span>
|
||||
{getFormattedTime(thread.lastReplyTimestamp)}
|
||||
</p>
|
||||
<span className="post-author"> Anonymous </span>
|
||||
<span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
|
||||
</div>
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
</PostPreview>, document.body
|
||||
)
|
||||
: null }
|
||||
{commentMediaInfo?.url ? (
|
||||
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/c/${thread.cid}`}
|
||||
onClick={() => setSelectedThread(thread.cid)}
|
||||
onMouseOver={() => {
|
||||
setIsHoveringOnThread(thread.cid);
|
||||
setIsHoveringForMenu(thread.cid);
|
||||
}}
|
||||
onMouseLeave={() => setIsHoveringForMenu(false)}>
|
||||
{commentMediaInfo?.type === "webpage" ? (
|
||||
thread.thumbnailUrl ? (
|
||||
<div key={`thread-`} className="thread"
|
||||
ref={el => {
|
||||
threadRefs.current[thread.cid] = el;
|
||||
}}
|
||||
onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
|
||||
{commentMediaInfo?.url ? (
|
||||
<Link style={{all: "unset", cursor: "pointer"}} key={`link-`} to={`/p/${selectedAddress}/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}}>
|
||||
<img className="card" ref={imageRef} key={`img-`}
|
||||
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) => {
|
||||
e.target.src = fallbackImgUrl
|
||||
e.target.onerror = null;
|
||||
}} />
|
||||
e.target.onerror = null;}} />
|
||||
</span>
|
||||
) : null
|
||||
) : null}
|
||||
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
|
||||
<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 }} />
|
||||
</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) => {
|
||||
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-`}
|
||||
) : null}
|
||||
{commentMediaInfo?.type === "video" ? (
|
||||
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
|
||||
<video className="card" ref={imageRef} key={`fti-`}
|
||||
src={commentMediaInfo.url}
|
||||
alt={commentMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
) : null}
|
||||
{commentMediaInfo?.type === "audio" ? (
|
||||
<audio className="card" ref={imageRef} controls
|
||||
key={`fti-`}
|
||||
src={commentMediaInfo.url}
|
||||
alt={commentMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
) : null}
|
||||
{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",}} />
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
) : null}
|
||||
</Link>
|
||||
) : null}
|
||||
{thread.locked ? (
|
||||
<span key={`li-`} className="thread-icon closed-icon" title="Closed"
|
||||
style={{
|
||||
imageRendering: "pixelated",}} />
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<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: <b key={`b-`}>{thread.replyCount}</b>
|
||||
{linkCount > 0 ? (
|
||||
<>
|
||||
/
|
||||
L: <b key={`i-`}>{linkCount}</b>
|
||||
</>
|
||||
{isMediaShowed ? (
|
||||
<div key={`ti-`} className="thread-icons" >
|
||||
{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}
|
||||
{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>
|
||||
{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={() => {
|
||||
) : null}
|
||||
<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: <b key={`b-`}>{thread.replyCount}</b>
|
||||
{linkCount > 0 ? (
|
||||
<>
|
||||
/
|
||||
L: <b key={`i-`}>{linkCount}</b>
|
||||
</>
|
||||
) : 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>
|
||||
{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)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(thread.cid);
|
||||
setDeletePost(true);
|
||||
}}>
|
||||
Delete post
|
||||
Mod tools
|
||||
</li>
|
||||
)}
|
||||
<li
|
||||
onClick={() => {
|
||||
setModeratingCommentCid(thread.cid)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(thread.cid);
|
||||
}}>
|
||||
Mod tools
|
||||
</li>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
)}</VerifiedAuthor>
|
||||
{isMediaShowed ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
<li
|
||||
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
|
||||
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
|
||||
View on »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebbit</a>
|
||||
</li>
|
||||
{/* <li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Seedit</a>
|
||||
</li> */}
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebones</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</PostMenuCatalog>, document.body
|
||||
)}
|
||||
</BoardForm>
|
||||
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`}
|
||||
onClick={() => setSelectedThread(thread.cid)}>
|
||||
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
|
||||
<div style={{cursor:"text"}}
|
||||
ref={(el) => (threadRefs.current[thread.cid] = el)}>
|
||||
<span key={`teaser-width${thread.cid}`} ref={textRef}
|
||||
onMouseOver={() => {
|
||||
setIsHoveringOnThread(thread.cid);
|
||||
setIsHoveringForMenu(thread.cid);
|
||||
}}
|
||||
onMouseLeave={() => setIsHoveringForMenu(false)}>
|
||||
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
|
||||
{thread.content ? `: ${thread.content}` : null}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
)}</VerifiedAuthor>
|
||||
{isMediaShowed ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
<li
|
||||
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
|
||||
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
|
||||
View on »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebbit</a>
|
||||
</li>
|
||||
{/* <li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Seedit</a>
|
||||
</li> */}
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebones</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</PostMenuCatalog>, document.body
|
||||
)}
|
||||
</BoardForm>
|
||||
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`}
|
||||
onClick={() => setSelectedThread(thread.cid)}>
|
||||
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
|
||||
<div style={{cursor:"text"}}>
|
||||
<span key={`teaser-width${thread.cid}`} ref={textRef}
|
||||
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)}>
|
||||
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
|
||||
{thread.content ? `: ${thread.content}` : null}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
};
|
||||
|
||||
@@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso';
|
||||
import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
|
||||
import { debounce } from 'lodash';
|
||||
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 { AlertModal } from '../styled/modals/AlertModal.styled';
|
||||
import CatalogLoader from '../CatalogLoader';
|
||||
@@ -61,6 +61,7 @@ const CatalogPost = ({post}) => {
|
||||
const fallbackImgUrl = "assets/filedeleted-res.gif";
|
||||
const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
|
||||
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
|
||||
const [popupPosition, setPopupPosition] = useState({top: 0, left: 0});
|
||||
const [openMenuCid, setOpenMenuCid] = useState(null);
|
||||
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
|
||||
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
|
||||
@@ -74,16 +75,13 @@ const CatalogPost = ({post}) => {
|
||||
const account = useAccount();
|
||||
const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
|
||||
const threadMenuRefs = useRef({});
|
||||
const threadRefs = useRef({});
|
||||
const postMenuRef = useRef(null);
|
||||
const postMenuCatalogRef = useRef(null);
|
||||
const popupRef = useRef(null);
|
||||
const threadRefs = useRef([]);
|
||||
const textRef = useRef(null);
|
||||
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 [spaceOnRight, setSpaceOnRight] = useState(null);
|
||||
const [isCalculationDone,setIsCalculationDone] = useState(false);
|
||||
const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
|
||||
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
|
||||
@@ -99,6 +97,9 @@ const CatalogPost = ({post}) => {
|
||||
commentMediaInfo.thumbnail))) ? true : false;
|
||||
|
||||
|
||||
const { left: textLeft, right: textRight } = textRef.current?.getBoundingClientRect() || {};
|
||||
const { left: imageLeft, right: imageRight } = imageRef.current?.getBoundingClientRect() || {};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const executeLayoutEffectLogic = () => {
|
||||
let ref;
|
||||
@@ -107,20 +108,27 @@ const CatalogPost = ({post}) => {
|
||||
} else {
|
||||
ref = textRef.current;
|
||||
}
|
||||
|
||||
|
||||
if (ref && popupRef.current) {
|
||||
const threadRect = ref.getBoundingClientRect();
|
||||
const rect = ref.getBoundingClientRect();
|
||||
const viewportWidth = document.documentElement.clientWidth;
|
||||
const spaceRight = viewportWidth - (threadRect.left + threadRect.width);
|
||||
const spaceLeft = threadRect.left;
|
||||
setIsEnoughSpaceOnLeft(spaceLeft > 500);
|
||||
setIsEnoughSpaceOnRight(spaceRight > 500);
|
||||
const spaceRight = viewportWidth - (rect.left + rect.width);
|
||||
const spaceLeft = rect.left;
|
||||
const popupWidth = popupRef.current.getBoundingClientRect().width;
|
||||
|
||||
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);
|
||||
setSpaceOnLeft(spaceLeft);
|
||||
setIsCalculationDone(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
if (isHoveringOnThread) {
|
||||
const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
|
||||
return () => {
|
||||
@@ -128,8 +136,8 @@ const CatalogPost = ({post}) => {
|
||||
setIsCalculationDone(false);
|
||||
};
|
||||
}
|
||||
|
||||
}, [isHoveringOnThread, isMediaShowed]);
|
||||
|
||||
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight]);
|
||||
|
||||
|
||||
const handleMouseOnLeaveThread = () => {
|
||||
@@ -139,7 +147,6 @@ const CatalogPost = ({post}) => {
|
||||
setIsHoveringOnThread("")
|
||||
} else if (isHoveringOnThread !== "") {
|
||||
setIsHoveringOnThread("");
|
||||
setIsEnoughSpaceOnRight(null);
|
||||
setIsCalculationDone(false);
|
||||
}
|
||||
};
|
||||
@@ -350,291 +357,289 @@ const CatalogPost = ({post}) => {
|
||||
|
||||
|
||||
return (
|
||||
<div key={`thread-`} className="thread"
|
||||
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
|
||||
<>
|
||||
{isHoveringOnThread === thread.cid ?
|
||||
<div ref={popupRef}
|
||||
className="thread_popup"
|
||||
onMouseOver={() => handleMouseOnLeaveThread()}
|
||||
style={{
|
||||
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
|
||||
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
|
||||
left:
|
||||
isCalculationDone && isEnoughSpaceOnRight !== null && popupRect.width < spaceOnRight
|
||||
? isMediaShowed
|
||||
? `calc(50% + ${imageRect.width}px / 2 + 5px)`
|
||||
: `calc(50% + ${textRect.width}px / 2 + 5px)`
|
||||
: 'auto',
|
||||
right:
|
||||
isCalculationDone && isEnoughSpaceOnRight !== null &&
|
||||
(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" >
|
||||
{thread.title ? `${thread.title} ` : "Posted "}
|
||||
</span>
|
||||
by
|
||||
<span className="thread_popup_author">
|
||||
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
|
||||
</span>
|
||||
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}
|
||||
</p>
|
||||
<div>
|
||||
{thread.replyCount > 0 ?
|
||||
<p className="thread_popup_lastReply">
|
||||
Last reply by
|
||||
<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);
|
||||
createPortal(
|
||||
<PostPreview selectedStyle={selectedStyle}>
|
||||
<div ref={popupRef}
|
||||
className="post-preview"
|
||||
onMouseOver={() => handleMouseOnLeaveThread()}
|
||||
style={{
|
||||
visibility: isCalculationDone ? 'visible' : 'hidden',
|
||||
left:
|
||||
isCalculationDone && spaceOnRight > 250
|
||||
? isMediaShowed ? imageRect.right + 5 : textRect.right + 5 :
|
||||
isCalculationDone && spaceOnRight < 250
|
||||
? isMediaShowed ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
|
||||
: 'auto',
|
||||
top: popupPosition.top + 5,
|
||||
}}>
|
||||
<span className="post-subject" >
|
||||
{thread.title ? `${thread.title} ` : "Posted "}
|
||||
</span>
|
||||
by
|
||||
<span className="post-author">
|
||||
{thread.author.displayName ?` ${thread.author.displayName} ` : " Anonymous "}
|
||||
</span>
|
||||
<span className='post-ago'>
|
||||
{thread.timestamp ? getFormattedTime(thread.timestamp) : null}
|
||||
</span>
|
||||
{thread.replyCount > 0 ?
|
||||
<div className='post-last'>
|
||||
Last reply by
|
||||
<span className="post-author"> Anonymous </span>
|
||||
<span className='post-ago'>{getFormattedTime(thread.lastReplyTimestamp)}</span>
|
||||
</div>
|
||||
: null}
|
||||
</div>
|
||||
</PostPreview>, document.body
|
||||
)
|
||||
: null }
|
||||
<div key={`thread-`} className="thread"
|
||||
ref={el => {
|
||||
threadRefs.current[thread.cid] = el;
|
||||
}}
|
||||
onMouseLeave={() => setIsHoveringForMenu(false)}>
|
||||
{commentMediaInfo?.type === "webpage" ? (
|
||||
thread.thumbnailUrl ? (
|
||||
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
|
||||
{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);
|
||||
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}}>
|
||||
<img className="card" ref={imageRef} key={`img-`}
|
||||
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) => {
|
||||
e.target.src = fallbackImgUrl
|
||||
e.target.onerror = null;
|
||||
}} />
|
||||
e.target.onerror = null;}} />
|
||||
</span>
|
||||
) : null
|
||||
) : null}
|
||||
{commentMediaInfo?.type === "iframe" && (thread.thumbnailUrl || commentMediaInfo.thumbnail) ? (
|
||||
<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 }} />
|
||||
</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) => {
|
||||
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}
|
||||
alt={commentMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
) : null}
|
||||
{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}
|
||||
<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: <b key={`b-`}>{thread.replyCount}</b>
|
||||
{linkCount > 0 ? (
|
||||
<>
|
||||
/
|
||||
L: <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>
|
||||
) : null}
|
||||
{commentMediaInfo?.type === "video" ? (
|
||||
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
|
||||
<video className="card" ref={imageRef} key={`fti-`}
|
||||
src={commentMediaInfo.url}
|
||||
alt={commentMediaInfo.type}
|
||||
onError={(e) => e.target.src = fallbackImgUrl} />
|
||||
</span>
|
||||
) : null}
|
||||
{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}
|
||||
<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>
|
||||
{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={() => {
|
||||
<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: <b key={`b-`}>{thread.replyCount}</b>
|
||||
{linkCount > 0 ? (
|
||||
<>
|
||||
/
|
||||
L: <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>
|
||||
{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);
|
||||
setModeratingCommentCid(thread.cid)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(thread.cid);
|
||||
setDeletePost(true);
|
||||
}}>
|
||||
Delete post
|
||||
Mod tools
|
||||
</li>
|
||||
)}
|
||||
<li
|
||||
onClick={() => {
|
||||
setSelectedAddress(thread.subplebbitAddress);
|
||||
setModeratingCommentCid(thread.cid)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(thread.cid);
|
||||
}}>
|
||||
Mod tools
|
||||
</li>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
)}</VerifiedAuthor>
|
||||
{(commentMediaInfo && (
|
||||
commentMediaInfo.type === 'image' ||
|
||||
(commentMediaInfo.type === 'webpage' &&
|
||||
commentMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
<li
|
||||
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
|
||||
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
|
||||
View on »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebbit</a>
|
||||
</li>
|
||||
{/* <li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Seedit</a>
|
||||
</li> */}
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebones</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</PostMenuCatalog>, document.body
|
||||
)}
|
||||
</BoardForm>
|
||||
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
|
||||
onClick={() => setSelectedThread(thread.cid)}>
|
||||
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}
|
||||
ref={(el) => (threadRefs.current[thread.cid] = el)}>
|
||||
<span key={`teaser-width${thread.cid}`} ref={textRef}
|
||||
onMouseOver={() => {
|
||||
setIsHoveringOnThread(thread.cid);
|
||||
setIsHoveringForMenu(thread.cid);
|
||||
}}
|
||||
onMouseLeave={() => setIsHoveringForMenu(false)}>
|
||||
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
|
||||
{thread.content ? `: ${thread.content}` : null}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
)}</VerifiedAuthor>
|
||||
{(commentMediaInfo && (
|
||||
commentMediaInfo.type === 'image' ||
|
||||
(commentMediaInfo.type === 'webpage' &&
|
||||
commentMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
<li
|
||||
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
|
||||
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
|
||||
View on »
|
||||
<ul className="dropdown-menu post-menu-catalog"
|
||||
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebbit</a>
|
||||
</li>
|
||||
{/* <li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Seedit</a>
|
||||
</li> */}
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||
<a
|
||||
href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Plebones</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</PostMenuCatalog>, document.body
|
||||
)}
|
||||
</BoardForm>
|
||||
<Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`}
|
||||
onClick={() => setSelectedThread(thread.cid)}>
|
||||
<div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
|
||||
<span key={`teaser-width${thread.cid}`} ref={textRef}
|
||||
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)}>
|
||||
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
|
||||
{thread.content ? `: ${thread.content}` : null}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user