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

Merge branch 'master' of github.com:plebbit/plebchan

Browse Source
This commit is contained in:
Esteban Abaroa
2023-09-09 18:43:49 +00:00
parent f006f7018c d7a3e22c4c
commit c166266007
15 changed files with 1580 additions and 1121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/All.jsx
+16 -16
View File
@@ -718,7 +718,7 @@ const All = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
{isThreadThumbnailClicked[index] ? (
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span>
-[
<span className='reply-link'
@@ -927,7 +927,7 @@ const All = () => {
<ul className="post-menu-catalog">
<li onClick={() => {
handleOptionClick(thread.cid);
handleShareClick(selectedAddress, thread.cid);
handleShareClick(thread.subplebbitAddress, thread.cid);
}}>Share thread</li>
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
<>
@@ -1007,19 +1007,19 @@ const All = () => {
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick(thread.cid)}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
href={`https://plebbitapp.eth.limo/#/p/${thread.subplebbitAddress}/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}`}
href={`https://seedit.eth.limo/#/p/${thread.subplebbitAddress}/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}`}
href={`https://plebones.netlify.app/#/p/${thread.subplebbitAddress}/c/${thread.cid}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
@@ -1099,7 +1099,7 @@ const All = () => {
className="ttl ellipsis"/>
<br key={`ttl-s-br2${index}`} />
Post too long.&nbsp;
<Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
<Link key={`ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view.
</span>
</blockquote>
@@ -1262,7 +1262,7 @@ const All = () => {
<ul className="post-menu-catalog">
<li onClick={() => {
handleOptionClick(reply.cid);
handleShareClick(selectedAddress, thread.cid);
handleShareClick(thread.subplebbitAddress, thread.cid);
}}>Share thread</li>
<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
<>
@@ -1342,19 +1342,19 @@ const All = () => {
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick(reply.cid)}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
href={`https://plebbitapp.eth.limo/#/p/${thread.subplebbitAddress}/c/${reply.cid}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick(reply.cid)}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
href={`https://seedit.eth.limo/#/p/${thread.subplebbitAddress}/c/${reply.cid}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick(reply.cid)}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${reply.cid}`}
href={`https://plebones.netlify.app/#/p/${thread.subplebbitAddress}/c/${reply.cid}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
@@ -1430,7 +1430,7 @@ const All = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? (
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] ? (
<span>
-[
@@ -1608,7 +1608,7 @@ const All = () => {
className="ttl ellipsis"/>
<br key={`ttl-s-br2${index}`} />
Comment too long.&nbsp;
<Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
<Link key={`ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span>
</blockquote>
</Fragment>
@@ -1842,7 +1842,7 @@ const All = () => {
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -1899,7 +1899,7 @@ const All = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -1936,7 +1936,7 @@ const All = () => {
className="ttl ellipsis"/>
<br key={`mob-ttl-s-br2${thread.cid}`} />
Post too long.&nbsp;
<Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
<Link key={`mob-ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span>
</blockquote>
</Fragment>
@@ -2215,7 +2215,7 @@ const All = () => {
className="ttl ellipsis"/>
<br key={`mob-ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp;
<Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
<Link key={`mob-ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span>
</blockquote>
</Fragment>
src/components/views/AllCatalog.jsx
+332 -267
View File
@@ -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,41 +75,74 @@ 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 [isEnoughSpaceOnRight, setIsEnoughSpaceOnRight] = useState(null);
const [isEnoughSpaceOnLeft,setIsEnoughSpaceOnLeft] = useState(null);
const textRef = useRef(null);
const imageRef = useRef(null);
const [spaceOnRight, setSpaceOnRight] = useState(null);
const [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
const textRect = textRef.current?.getBoundingClientRect();
const imageRect = imageRef.current?.getBoundingClientRect();
const popupRect = popupRef.current?.getBoundingClientRect();
const isMediaShowed = (thread.link && commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail) ||
(commentMediaInfo.type === 'iframe' &&
commentMediaInfo.thumbnail))) ? true : false;
useLayoutEffect(() => {
const executeLayoutEffectLogic = () => {
let ref;
ref = threadRefs.current[isHoveringOnThread];
if (ref && popupRef.current) {
const threadRect = ref.getBoundingClientRect();
const popupRect = popupRef.current.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth;
const spaceOnRight = viewportWidth - (threadRect.left + threadRect.width);
const spaceOnLeft = threadRect.left;
const popupWidth = popupRect.width;
setIsEnoughSpaceOnLeft(spaceOnLeft >= popupWidth + 10);
setIsEnoughSpaceOnRight(spaceOnRight >= popupWidth + 10);
setIsCalculationDone(true);
const { left: textLeft, right: textRight, width: textWidth } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight, width: imageWidth } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => {
const executeLayoutEffectLogic = () => {
let ref;
if (isMediaShowed) {
ref = imageRef.current;
} else {
ref = textRef.current;
}
if (ref && popupRef.current) {
const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = rect.left;
if (spaceRight < 200 && spaceLeft > spaceRight && spaceLeft < 500) {
popupRef.current.style.maxWidth = `calc(
100vw -
${isMediaShowed ? imageWidth : textWidth}px
- ${spaceRight + 40}px
)`;
} else if (spaceRight < 200 && spaceLeft < spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageWidth : textWidth}px)`;
} else {
popupRef.current.style.maxWidth = `500px`;
}
setSpaceOnRight(spaceRight);
setIsCalculationDone(true);
}
};
if (isHoveringOnThread) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
return () => {
clearTimeout(timeoutId);
setIsCalculationDone(false);
};
}
};
if (isHoveringOnThread) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 500);
return () => clearTimeout(timeoutId);
}
}, [isHoveringOnThread]);
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight, textWidth, imageWidth]);
const handleMouseOnLeaveThread = () => {
if (hoverTimeoutId) {
@@ -117,7 +151,6 @@ const CatalogPost = ({post}) => {
setIsHoveringOnThread("")
} else if (isHoveringOnThread !== "") {
setIsHoveringOnThread("");
setIsEnoughSpaceOnRight(null);
setIsCalculationDone(false);
}
};
@@ -328,257 +361,289 @@ const CatalogPost = ({post}) => {
return (
<div key={`thread-`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
<>
{isHoveringOnThread === thread.cid ?
<div ref={popupRef}
onMouseOver={() => handleMouseOnLeaveThread()}
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight ? '100%' : 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight ? '100%' : 'auto',}}
className="thread_popup">
<p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
&& !isEnoughSpaceOnRight
?
{overflow:"visible",whiteSpace:"normal"}
: null
}
className="thread_popup_content">
<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)}>
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
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={() => {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" key={`img-`}
<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 === "image" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" 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" key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio className="card" controls
key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</Link>
) : null}
<div key={`ti-`} className="thread-icons" >
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<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}
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: isHoveringOnThread === 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:&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>
{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)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
</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>
</>
);
};
src/components/views/Board.jsx
+6 -6
View File
@@ -1414,7 +1414,7 @@ const Board = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
{isThreadThumbnailClicked[index] ? (
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span>
-[
<span className='reply-link'
@@ -2123,8 +2123,8 @@ const Board = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? (
isReplyThumbnailClicked[index] ? (
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span>
-[
<span className='reply-link'
@@ -2530,7 +2530,7 @@ const Board = () => {
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -2587,7 +2587,7 @@ const Board = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -2787,7 +2787,7 @@ const Board = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{replyMediaInfo?.type === "video" || "iframe" ? (
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isMobileReplyThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
src/components/views/Catalog.jsx
+505 -418
View File
File diff suppressed because it is too large Load Diff
src/components/views/Pending.jsx
+2 -2
View File
@@ -496,7 +496,7 @@ const Pending = () => {
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -553,7 +553,7 @@ const Pending = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
src/components/views/Subscriptions.jsx
+16 -16
View File
@@ -729,7 +729,7 @@ const Subscriptions = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
{isThreadThumbnailClicked[index] ? (
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
<span>
-[
<span className='reply-link'
@@ -938,7 +938,7 @@ const Subscriptions = () => {
<ul className="post-menu-catalog">
<li onClick={() => {
handleOptionClick(thread.cid);
handleShareClick(selectedAddress, thread.cid);
handleShareClick(thread.subplebbitAddress, thread.cid);
}}>Share thread</li>
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
<>
@@ -1018,19 +1018,19 @@ const Subscriptions = () => {
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick(thread.cid)}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
href={`https://plebbitapp.eth.limo/#/p/${thread.subplebbitAddress}/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}`}
href={`https://seedit.eth.limo/#/p/${thread.subplebbitAddress}/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}`}
href={`https://plebones.netlify.app/#/p/${thread.subplebbitAddress}/c/${thread.cid}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
@@ -1110,7 +1110,7 @@ const Subscriptions = () => {
className="ttl ellipsis"/>
<br key={`ttl-s-br2${index}`} />
Post too long.&nbsp;
<Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
<Link key={`ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view.
</span>
</blockquote>
@@ -1273,7 +1273,7 @@ const Subscriptions = () => {
<ul className="post-menu-catalog">
<li onClick={() => {
handleOptionClick(reply.cid);
handleShareClick(selectedAddress, thread.cid);
handleShareClick(thread.subplebbitAddress, thread.cid);
}}>Share thread</li>
<VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
<>
@@ -1353,19 +1353,19 @@ const Subscriptions = () => {
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick(reply.cid)}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
href={`https://plebbitapp.eth.limo/#/p/${thread.subplebbitAddress}/c/${reply.cid}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick(reply.cid)}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
href={`https://seedit.eth.limo/#/p/${thread.subplebbitAddress}/c/${reply.cid}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick(reply.cid)}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${reply.cid}`}
href={`https://plebones.netlify.app/#/p/${thread.subplebbitAddress}/c/${reply.cid}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
@@ -1441,7 +1441,7 @@ const Subscriptions = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? (
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] ? (
<span>
-[
@@ -1619,7 +1619,7 @@ const Subscriptions = () => {
className="ttl ellipsis"/>
<br key={`ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp;
<Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
<Link key={`ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span>
</blockquote>
</Fragment>
@@ -1853,7 +1853,7 @@ const Subscriptions = () => {
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -1910,7 +1910,7 @@ const Subscriptions = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -1947,7 +1947,7 @@ const Subscriptions = () => {
className="ttl ellipsis"/>
<br key={`mob-ttl-s-br2${thread.cid}`} />
Post too long.&nbsp;
<Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
<Link key={`mob-ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span>
</blockquote>
</Fragment>
@@ -2226,7 +2226,7 @@ const Subscriptions = () => {
className="ttl ellipsis"/>
<br key={`mob-ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp;
<Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
<Link key={`mob-ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span>
</blockquote>
</Fragment>
src/components/views/SubscriptionsCatalog.jsx
+331 -266
View File
@@ -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,40 +75,73 @@ 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 [isEnoughSpaceOnRight, setIsEnoughSpaceOnRight] = useState(null);
const [isEnoughSpaceOnLeft,setIsEnoughSpaceOnLeft] = useState(null);
const textRef = useRef(null);
const imageRef = useRef(null);
const [spaceOnRight, setSpaceOnRight] = useState(null);
const [isCalculationDone,setIsCalculationDone] = useState(false);
const [hoverTimeoutId, setHoverTimeoutId] = useState(null);
const [isHoveringForMenu, setIsHoveringForMenu] = useState(false);
const textRect = textRef.current?.getBoundingClientRect();
const imageRect = imageRef.current?.getBoundingClientRect();
const popupRect = popupRef.current?.getBoundingClientRect();
const isMediaShowed = (thread.link && commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail) ||
(commentMediaInfo.type === 'iframe' &&
commentMediaInfo.thumbnail))) ? true : false;
useLayoutEffect(() => {
const executeLayoutEffectLogic = () => {
let ref;
ref = threadRefs.current[isHoveringOnThread];
if (ref && popupRef.current) {
const threadRect = ref.getBoundingClientRect();
const popupRect = popupRef.current.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth;
const spaceOnRight = viewportWidth - (threadRect.left + threadRect.width);
const spaceOnLeft = threadRect.left;
const popupWidth = popupRect.width;
setIsEnoughSpaceOnLeft(spaceOnLeft >= popupWidth + 10);
setIsEnoughSpaceOnRight(spaceOnRight >= popupWidth + 10);
setIsCalculationDone(true);
const { left: textLeft, right: textRight, width: textWidth } = textRef.current?.getBoundingClientRect() || {};
const { left: imageLeft, right: imageRight, width: imageWidth } = imageRef.current?.getBoundingClientRect() || {};
useLayoutEffect(() => {
const executeLayoutEffectLogic = () => {
let ref;
if (isMediaShowed) {
ref = imageRef.current;
} else {
ref = textRef.current;
}
if (ref && popupRef.current) {
const rect = ref.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth;
const spaceRight = viewportWidth - (rect.left + rect.width);
const spaceLeft = rect.left;
if (spaceRight < 200 && spaceLeft > spaceRight && spaceLeft < 500) {
popupRef.current.style.maxWidth = `calc(
100vw -
${isMediaShowed ? imageWidth : textWidth}px
- ${spaceRight + 40}px
)`;
} else if (spaceRight < 200 && spaceLeft < spaceRight) {
popupRef.current.style.maxWidth = `calc(100vw - ${isMediaShowed ? imageWidth : textWidth}px)`;
} else {
popupRef.current.style.maxWidth = `500px`;
}
setSpaceOnRight(spaceRight);
setIsCalculationDone(true);
}
};
if (isHoveringOnThread) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 250);
return () => {
clearTimeout(timeoutId);
setIsCalculationDone(false);
};
}
};
if (isHoveringOnThread) {
const timeoutId = setTimeout(executeLayoutEffectLogic, 500);
return () => clearTimeout(timeoutId);
}
}, [isHoveringOnThread]);
}, [isHoveringOnThread, isMediaShowed, textLeft, textRight, imageLeft, imageRight, textWidth, imageWidth]);
const handleMouseOnLeaveThread = () => {
@@ -117,7 +151,6 @@ const CatalogPost = ({post}) => {
setIsHoveringOnThread("")
} else if (isHoveringOnThread !== "") {
setIsHoveringOnThread("");
setIsEnoughSpaceOnRight(null);
setIsCalculationDone(false);
}
};
@@ -328,257 +361,289 @@ const CatalogPost = ({post}) => {
return (
<div key={`thread-`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
onMouseLeave={() => {handleMouseOnLeaveThread()}}>
<>
{isHoveringOnThread === thread.cid ?
<div ref={popupRef}
onMouseOver={() => handleMouseOnLeaveThread()}
style={{
opacity: isCalculationDone && isEnoughSpaceOnRight !== null ? 1 : 0,
visibility: isCalculationDone && isEnoughSpaceOnRight !== null ? 'visible' : 'hidden',
left: isCalculationDone && isEnoughSpaceOnRight !== null && isEnoughSpaceOnRight ? '100%' : 'auto',
right: isCalculationDone && isEnoughSpaceOnRight !== null && !isEnoughSpaceOnRight ? '100%' : 'auto',}}
className="thread_popup">
<p
style={isEnoughSpaceOnLeft !== null && !isEnoughSpaceOnLeft
&& !isEnoughSpaceOnRight
?
{overflow:"visible",whiteSpace:"normal"}
: null
}
className="thread_popup_content">
<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)}>
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
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={() => {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" key={`img-`}
<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 === "image" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" 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" key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio className="card" controls
key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</Link>
) : null}
<div key={`ti-`} className="thread-icons" >
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
commentMediaInfo.type === 'video' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<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}
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: isHoveringOnThread === 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:&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>
{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)}>
<b key={`b2-`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
</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>
</>
);
};
src/components/views/Thread.jsx
+3 -3
View File
@@ -1531,7 +1531,7 @@ const Thread = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? (
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isReplyThumbnailClicked[index] ? (
<span>
-[
@@ -1816,7 +1816,7 @@ const Thread = () => {
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
@@ -1873,7 +1873,7 @@ const Thread = () => {
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}