fix: only show catalog post preview on mouse over thumbnail

This commit is contained in:
Tom (plebeius.eth)
2024-06-08 12:03:12 +02:00
parent 0c2de0ea71
commit a8e3ce8429
+12 -16
View File
@@ -144,20 +144,6 @@ const CatalogPost = ({ post }: { post: Comment }) => {
}; };
}, [update]); }, [update]);
const handleMouseOver = () => {
setHoveredCid(cid);
timeoutRef.current = setTimeout(() => setShowPortal(true), 250);
};
const handleMouseLeave = () => {
setHoveredCid(null);
setShowPortal(false);
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
timeoutRef.current = null;
}
};
const lastReply = useComment({ commentCid: lastChildCid }); const lastReply = useComment({ commentCid: lastChildCid });
const { isCommentAuthorMod: isCatalogPostAuthorMod, commentAuthorRole: catalogPostAuthorRole } = useEditCommentPrivileges({ const { isCommentAuthorMod: isCatalogPostAuthorMod, commentAuthorRole: catalogPostAuthorRole } = useEditCommentPrivileges({
@@ -172,9 +158,19 @@ const CatalogPost = ({ post }: { post: Comment }) => {
return ( return (
<> <>
<div className={styles.post} ref={refs.setReference}> <div className={styles.post} ref={refs.setReference}>
<div onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}> <div onMouseOver={() => setHoveredCid(cid)} onMouseLeave={() => setHoveredCid(null)}>
{hasThumbnail ? ( {hasThumbnail ? (
<Link to={postLink}> <Link
to={postLink}
onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
onMouseLeave={() => {
setShowPortal(false);
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
timeoutRef.current = null;
}
}}
>
<div className={styles.mediaPaddingWrapper}> <div className={styles.mediaPaddingWrapper}>
{threadIcons} {threadIcons}
<CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} /> <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />