mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
321 lines
15 KiB
React
321 lines
15 KiB
React
import React, { Fragment } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { useAccount, useComment } from "@plebbit/plebbit-react-hooks";
|
|
import getDate from "../utils/getDate";
|
|
import getCommentMediaInfo from "../utils/getCommentMediaInfo";
|
|
import findShortParentCid from "../utils/findShortParentCid";
|
|
import Post from "./Post";
|
|
import EditLabel from "./EditLabel";
|
|
import useStateString from "../hooks/useStateString";
|
|
import { BoardForm, Container } from "./styled/views/Board.styled";
|
|
import useGeneralStore from "../hooks/stores/useGeneralStore";
|
|
|
|
const PostOnHover = ({ cid, feed }) => {
|
|
const selectedStyle = useGeneralStore(state => state.selectedStyle);
|
|
const account = useAccount();
|
|
const reply = useComment({commentCid: cid});
|
|
const replyMediaInfo = getCommentMediaInfo(reply);
|
|
const fallbackImgUrl = "assets/filedeleted-res.gif";
|
|
const selectedFeed = feed;
|
|
const thread = useComment({commentCid: reply.parentCid});
|
|
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
|
|
const stateString = useStateString(reply);
|
|
|
|
return (
|
|
<Container selectedStyle={selectedStyle} style={{
|
|
margin: '0',
|
|
padding: '0',
|
|
whiteSpace: 'normal',
|
|
maxWidth: '100vw',
|
|
overflowWrap: 'break-word',
|
|
wordWrap: 'break-word',
|
|
wordBreak: 'break-all',
|
|
boxSizing: 'border-box',
|
|
}}>
|
|
<BoardForm selectedStyle={selectedStyle} style={{margin: '0', padding: '0'}}>
|
|
<div className="board" style={{margin: '0', padding: '0'}}>
|
|
<div className="thread" style={{margin: '0', padding: '0'}}>
|
|
{reply.state === 'succeeded' ? (
|
|
<div className="reply-container">
|
|
<div className="post-reply post-reply-desktop">
|
|
<div className="post-info">
|
|
<span className="nameblock">
|
|
{reply.author?.displayName
|
|
? reply.author?.displayName.length > 20
|
|
? <Fragment >
|
|
<span className="name"
|
|
data-tooltip-id="tooltip"
|
|
data-tooltip-content={reply.author?.displayName}
|
|
data-tooltip-place="top">
|
|
{reply.author?.displayName.slice(0, 20) + " (...)"}
|
|
</span>
|
|
</Fragment>
|
|
: <span className="name">
|
|
{reply.author?.displayName}</span>
|
|
: <span className="name">
|
|
Anonymous</span>}
|
|
|
|
<span className="poster-address address-desktop"
|
|
id="reply-button" style={{cursor: "pointer"}}
|
|
>
|
|
(u/
|
|
{reply.author?.shortAddress ?
|
|
(
|
|
<span >
|
|
{reply.author?.shortAddress}
|
|
</span>
|
|
) : (
|
|
<span >
|
|
{account?.author?.shortAddress}
|
|
</span>
|
|
)
|
|
}
|
|
)
|
|
</span>
|
|
</span>
|
|
|
|
<span className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
|
|
|
|
<span className="post-number post-number-desktop">
|
|
<span >c/</span>
|
|
<Link to={() => {}} id="reply-button"
|
|
title="Reply to this post">{reply.shortCid}</Link>
|
|
</span>
|
|
<div id="backlink-id" className="backlink">
|
|
{reply.replies?.pages?.topAll.comments
|
|
.sort((a, b) => a.timestamp - b.timestamp)
|
|
.map((reply, index) => (
|
|
<div style={{display: 'inline-block'}}>
|
|
<Link to={() => {}}
|
|
className="quote-link">
|
|
c/{reply.shortCid}</Link>
|
|
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
{replyMediaInfo?.url ? (
|
|
<div className="file"
|
|
style={{marginBottom: "5px"}}>
|
|
<div className="reply-file-text">
|
|
Link:
|
|
<a href={replyMediaInfo.url} target="_blank"
|
|
rel="noopener noreferrer">{
|
|
replyMediaInfo?.url.length > 30 ?
|
|
replyMediaInfo?.url.slice(0, 30) + "(...)" :
|
|
replyMediaInfo?.url
|
|
}</a> ({replyMediaInfo?.type})
|
|
</div>
|
|
{replyMediaInfo?.type === "webpage" ? (
|
|
<div className="img-container">
|
|
<span className="file-thumb-reply">
|
|
{reply.thumbnailUrl ? (
|
|
<img
|
|
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
|
|
style={{cursor: "pointer"}}
|
|
onError={(e) => e.target.src = fallbackImgUrl} />
|
|
) : null}
|
|
</span>
|
|
</div>
|
|
) : null}
|
|
{replyMediaInfo?.type === "image" ? (
|
|
<div className="img-container">
|
|
<span className="file-thumb-reply">
|
|
<img
|
|
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
|
style={{cursor: "pointer"}}
|
|
onError={(e) => e.target.src = fallbackImgUrl} />
|
|
</span>
|
|
</div>
|
|
) : null}
|
|
{replyMediaInfo?.type === "video" ? (
|
|
<span className="file-thumb-reply">
|
|
<video controls
|
|
|
|
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
|
onError={(e) => e.target.src = fallbackImgUrl} />
|
|
</span>
|
|
) : null}
|
|
{replyMediaInfo?.type === "audio" ? (
|
|
<span className="file-thumb-reply">
|
|
<audio controls
|
|
|
|
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
|
onError={(e) => e.target.src = fallbackImgUrl} />
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
{reply.content ? (
|
|
reply.content?.length > 500 ?
|
|
<Fragment >
|
|
<blockquote comment={reply} className="post-message">
|
|
{shortParentCid ? (
|
|
<Link to={() => {}} className="quotelink">
|
|
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
|
|
</Link>
|
|
) : null}
|
|
<Post content={reply.content?.slice(0, 500)} />
|
|
<span className="ttl"> (...)
|
|
<br /> <EditLabel
|
|
commentCid={reply.cid}
|
|
className="ttl"/><br />
|
|
Comment too long. Click the link to view.</span>
|
|
</blockquote>
|
|
</Fragment>
|
|
: <blockquote className="post-message">
|
|
{shortParentCid ? (
|
|
<Link to={() => {}} className="quotelink">
|
|
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
|
|
</Link>
|
|
) : null}
|
|
<Post content={reply.content} comment={reply} />
|
|
<EditLabel
|
|
commentCid={reply.cid}
|
|
className="ttl"/>
|
|
</blockquote>)
|
|
: null}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="reply-container">
|
|
<span className="ellipsis">{stateString}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="thread-mobile">
|
|
{reply.state === 'succeeded' ? (
|
|
<div className="reply-container">
|
|
<div className="post-reply post-reply-mobile">
|
|
<div className="post-info-mobile">
|
|
<span className="name-block-mobile">
|
|
{reply.author?.displayName
|
|
? reply.author?.displayName.length > 20
|
|
? <Fragment>
|
|
<span className="name-mobile">
|
|
{reply.author?.displayName.slice(0, 20) + " (...)"}
|
|
</span>
|
|
</Fragment>
|
|
: <span className="name-mobile">
|
|
{reply.author?.displayName}</span>
|
|
: <span className="name-mobile">
|
|
Anonymous</span>}
|
|
|
|
<span className="poster-address-mobile address-mobile"
|
|
id="reply-button" style={{cursor: "pointer"}}
|
|
>
|
|
(u/
|
|
{reply.author?.shortAddress ?
|
|
(
|
|
<span className="highlight-address-mobile">
|
|
{reply.author?.shortAddress}
|
|
</span>
|
|
) : (
|
|
<span>
|
|
{account?.author?.shortAddress}
|
|
</span>
|
|
)
|
|
}
|
|
)
|
|
</span>
|
|
<br />
|
|
</span>
|
|
<span className="date-time-mobile post-number-mobile">
|
|
{getDate(reply.timestamp)}
|
|
<span>c/</span>
|
|
<Link to={() => {}} id="reply-button"
|
|
>{reply.shortCid}
|
|
</Link>
|
|
</span>
|
|
</div>
|
|
{reply.link ? (
|
|
<div className="file-mobile">
|
|
{replyMediaInfo?.url ? (
|
|
replyMediaInfo.type === "webpage" ? (
|
|
<div className="img-container">
|
|
<span className="file-thumb-mobile">
|
|
{reply.thumbnailUrl ? (
|
|
<img
|
|
src={replyMediaInfo.thumbnail} alt="thumbnail"
|
|
style={{cursor: "pointer"}}
|
|
onError={(e) => e.target.src = fallbackImgUrl} />
|
|
) : null}
|
|
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
|
</span>
|
|
</div>
|
|
) : replyMediaInfo.type === "image" ? (
|
|
<div className="img-container">
|
|
<span className="file-thumb-mobile">
|
|
<img
|
|
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
|
style={{cursor: "pointer"}}
|
|
onError={(e) => e.target.src = fallbackImgUrl} />
|
|
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
|
</span>
|
|
</div>
|
|
) : replyMediaInfo.type === "video" ? (
|
|
<span className="file-thumb-mobile">
|
|
<video
|
|
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
|
style={{ pointerEvents: "none" }}
|
|
onError={(e) => e.target.src = fallbackImgUrl} />
|
|
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
|
</span>
|
|
) : replyMediaInfo.type === "audio" ? (
|
|
<span className="file-thumb-mobile">
|
|
<audio
|
|
src={replyMediaInfo.url} alt={replyMediaInfo.type}
|
|
onError={(e) => e.target.src = fallbackImgUrl} />
|
|
<div className="file-info-mobile">{replyMediaInfo.type}</div>
|
|
</span>
|
|
) : null
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
{reply.content ? (
|
|
reply.content?.length > 500 ?
|
|
<Fragment>
|
|
<blockquote className="post-message">
|
|
{shortParentCid ? (
|
|
<Link to={() => {}} className="quotelink">
|
|
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
|
|
</Link>
|
|
) : null}
|
|
<Post content={reply.content?.slice(0, 500)} comment={reply} />
|
|
<span className="ttl"> (...)
|
|
<br />
|
|
<EditLabel
|
|
commentCid={reply.cid}
|
|
className="ttl"/>
|
|
<br />
|
|
Comment too long. Click the link to view. </span>
|
|
</blockquote>
|
|
</Fragment>
|
|
: <blockquote className="post-message">
|
|
{shortParentCid ? (
|
|
<Link to={() => {}} className="quotelink" >
|
|
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
|
|
</Link>
|
|
) : null}
|
|
<Post content={reply.content} comment={reply} />
|
|
<EditLabel
|
|
commentCid={reply.cid}
|
|
className="ttl"/>
|
|
</blockquote>)
|
|
: null}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="reply-container">
|
|
<span className="ellipsis">{stateString}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</BoardForm>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export default PostOnHover; |