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

added media to replies

Browse Source
This commit is contained in:
plebbitor
2023-03-29 16:38:54 +02:00
parent 9b571657de
commit 25045b31ca
3 changed files with 121 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+50 -3
View File
@@ -49,9 +49,9 @@ const Board = () => {
const { subplebbitAddress } = useParams();
const handleClickForm = useClickForm();
useEffect(() => {
console.log(selectedFeed);
}, [selectedFeed]);
// useEffect(() => {
// console.log(selectedFeed);
// }, [selectedFeed]);
// temporary title from JSON, gets subplebbitAddress from URL
@@ -520,6 +520,8 @@ const Board = () => {
</span>) : null}
</span>
{renderedComments.map((reply) => {
const replyMediaInfo = getCommentMediaInfo(reply);
const fallbackImgUrl = "/assets/filedeleted-res.gif";
return (
<div key={`rc-${reply.cid}`} className="reply-container">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
@@ -572,6 +574,51 @@ const Board = () => {
}
</div>
</div>
{replyMediaInfo?.url ? (
<div key={`f-${reply.cid}`} className="file"
style={{marginBottom: "5px"}}>
<div key={`ft-${reply.cid}`} className="reply-file-text">
Link:&nbsp;
<a key={`fa-${reply.cid}`} href={replyMediaInfo.url} target="_blank">{
replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
</div>
{replyMediaInfo?.type === "webpage" ? (
<span key={`fta-${reply.cid}`} className="file-thumb-reply">
<img key={`fti-${reply.cid}`}
src={reply.thumbnailUrl}
alt="thumbnail"
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{replyMediaInfo?.type === "image" ? (
<span key={`fta-${reply.cid}`} className="file-thumb-reply">
<img key={`fti-${reply.cid}`}
src={replyMediaInfo.url}
alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{replyMediaInfo?.type === "video" ? (
<span key={`fta-${reply.cid}`} className="file-thumb-reply">
<video controls
key={`fti-${reply.cid}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{replyMediaInfo?.type === "audio" ? (
<span key={`fta-${reply.cid}`} className="file-thumb-reply">
<audio controls
key={`fti-${reply.cid}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
</div>
) : null}
{reply.content ? (
reply.content.length > 500 ?
<Fragment key={`fragment8-${reply.cid}`}>
src/components/views/Thread.jsx
+47
View File
@@ -506,6 +506,8 @@ const Thread = () => {
Object.keys(comment.replies.pages.topAll.comments).map(() => {
const renderedComments = renderThreadComments(comment.replies.pages.topAll.comments);
return renderedComments.map(reply => {
const replyMediaInfo = getCommentMediaInfo(reply);
const fallbackImgUrl = "/assets/filedeleted-res.gif";
return (
<div key={`pc-${reply.cid}-${Math.random()}`} className="reply-container">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
@@ -558,6 +560,51 @@ const Thread = () => {
}
</div>
</div>
{replyMediaInfo?.url ? (
<div key={`f-${reply.cid}`} className="file"
style={{marginBottom: "5px"}}>
<div key={`ft-${reply.cid}`} className="reply-file-text">
Link:&nbsp;
<a key={`fa-${reply.cid}`} href={replyMediaInfo.url} target="_blank">{
replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
</div>
{replyMediaInfo?.type === "webpage" ? (
<span key={`fta-${reply.cid}`} className="file-thumb-reply">
<img key={`fti-${reply.cid}`}
src={reply.thumbnailUrl}
alt="thumbnail"
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{replyMediaInfo?.type === "image" ? (
<span key={`fta-${reply.cid}`} className="file-thumb-reply">
<img key={`fti-${reply.cid}`}
src={replyMediaInfo.url}
alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{replyMediaInfo?.type === "video" ? (
<span key={`fta-${reply.cid}`} className="file-thumb-reply">
<video controls
key={`fti-${reply.cid}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{replyMediaInfo?.type === "audio" ? (
<span key={`fta-${reply.cid}`} className="file-thumb-reply">
<audio controls
key={`fti-${reply.cid}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
</div>
) : null}
<blockquote key={`pm-${reply.cid}`} className="post-message">
<Link to={handleVoidClick} className="quote-link"
onClick={(event) => handleQuoteClick(reply, event)}>
src/components/views/styles/Board.styled.jsx
+24 -3
View File
@@ -1540,7 +1540,7 @@ export const BoardForm = styled.div`
}
.post-info {
margin: 5px;
margin: 3px 3px 0 5px;
display: block;
width: 100%;
}
@@ -2297,12 +2297,33 @@ export const BoardForm = styled.div`
float: left;
margin: 3px 20px 5px 20px;
}
.file-thumb img, video, audio {
.reply-file-text {
max-width: 600px;
white-space: nowrap;
margin-left: 5px;
}
.file-thumb-reply {
float: left;
margin: 3px 20px 5px 20px;
}
.file-thumb img,
.file-thumb video,
.file-thumb audio {
border: none;
max-width: 250px;
max-height: 250px;
}
.file-thumb-reply img,
.file-thumb-reply video,
.file-thumb-reply audio {
max-width: 125px;
max-height: 125px;
}
}
.thread-mobile {