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 mobile views

Browse Source
This commit is contained in:
plebbitor
2023-03-23 16:23:59 +01:00
parent dc2c2ccccd
commit 1b34241d8f
2 changed files with 62 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+31 -6
View File
@@ -693,12 +693,37 @@ const Board = () => {
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no2-${thread.cid}`} onClick={handleReplyOpen} title="Reply to this post">{thread.cid.slice(0, 8)}</button> <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no2-${thread.cid}`} onClick={handleReplyOpen} title="Reply to this post">{thread.cid.slice(0, 8)}</button>
</span> </span>
</div> </div>
<div key={`mob-f-${thread.cid}`} className="file-mobile"> {commentMediaInfo?.url ? (
<Link to="" key={`mob-ft${thread.cid}`} className="file-thumb-mobile" onClick={handleVoidClick} target="_blank"> commentMediaInfo.type === "webpage" ? (
<img key={`mob-img-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="" /> <div key={`mob-f-${thread.cid}`} className="file-mobile">
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">58 KB JPG</div> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
</Link> <img key={`mob-img-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
</div> <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "image" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "video" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<video key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "audio" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<audio key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : null
) : null}
{thread.content ? ( {thread.content ? (
thread.content.length > 1500 ? thread.content.length > 1500 ?
<Fragment key={`fragment12-${thread.cid}`}> <Fragment key={`fragment12-${thread.cid}`}>
src/components/views/Thread.jsx
+31 -6
View File
@@ -651,12 +651,37 @@ const Thread = () => {
<Link to="" key={`mob-no2-${comment.cid}`} onClick={handleVoidClick} title="Reply to this post">{comment.cid?.slice(0, 8)}</Link> <Link to="" key={`mob-no2-${comment.cid}`} onClick={handleVoidClick} title="Reply to this post">{comment.cid?.slice(0, 8)}</Link>
</span> </span>
</div> </div>
<div key={`mob-f-${comment.cid}`} className="file-mobile"> {commentMediaInfo?.url ? (
<Link to="" key={`mob-ft${comment.cid}`} className="file-thumb-mobile" onClick={handleVoidClick}> commentMediaInfo.type === "webpage" ? (
<img key={`mob-img-${comment.cid}`} src="/assets/plebchan-psycho.png" alt="" /> <div key={`mob-f-${comment.cid}`} className="file-mobile">
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">58 KB JPG</div> <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
</Link> <img key={`mob-img-${comment.cid}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
</div> <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "image" ? (
<div key={`mob-f-${comment.cid}`} className="file-mobile">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "video" ? (
<div key={`mob-f-${comment.cid}`} className="file-mobile">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<video key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : commentMediaInfo.type === "audio" ? (
<div key={`mob-f-${comment.cid}`} className="file-mobile">
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<audio key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
) : null
) : null}
<blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile"> <blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile">
{comment.content ? ( {comment.content ? (
<> <>