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

Browse Source
This commit is contained in:
plebbitor
2023-03-29 18:55:29 +02:00
parent 25045b31ca
commit 15f4a200b0
2 changed files with 83 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+46 -4
View File
@@ -318,20 +318,20 @@ const Board = () => {
<tr data-type="Name">
<td id="td-name">Name</td>
<td>
<input name="name" type="text" tabIndex={1} placeholder="Anonymous" value={name} onChange={(event) => setName(event.target.value)} />
<input name="name" type="text" tabIndex={1} placeholder="Anonymous" />
</td>
</tr>
<tr data-type="Subject">
<td>Subject</td>
<td>
<input name="sub" type="text" tabIndex={3} value={subject} onChange={(event) => setSubject(event.target.value)} />
<input name="sub" type="text" tabIndex={3} />
<input id="post-button" type="submit" value="Post" tabIndex={6} onClick={handlePublishComment} />
</td>
</tr>
<tr data-type="Comment">
<td>Comment</td>
<td>
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" value={comment} onChange={(event) => setComment(event.target.value)}></textarea>
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" />
</td>
</tr>
<tr data-type="File">
@@ -716,7 +716,11 @@ const Board = () => {
) : commentMediaInfo.type === "video" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<video controls width="" key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<video key={`fti-${thread.cid}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
style={{ pointerEvents: "none" }}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
</span>
</div>
@@ -752,6 +756,7 @@ const Board = () => {
</div>
</div>
{renderedComments.map((reply) => {
const replyMediaInfo = getCommentMediaInfo(reply);
return (
<div key={`mob-rc-${reply.cid}`} className="reply-container">
<div key={`mob-pr-${reply.cid}`} className="post-reply">
@@ -788,6 +793,43 @@ const Board = () => {
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.cid.slice(0, 8)}</button>
</span>
</div>
{replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? (
<div key={`mob-f-${reply.cid}`} className="file-mobile">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${reply.cid}`} src={reply.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : replyMediaInfo.type === "image" ? (
<div key={`mob-f-${reply.cid}`} className="file-mobile">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : replyMediaInfo.type === "video" ? (
<div key={`mob-f-${reply.cid}`} className="file-mobile">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<a href={replyMediaInfo.url} target="_blank" rel="noopener noreferrer">
<video key={`fti-${reply.cid}`}
src={replyMediaInfo.url}
alt={replyMediaInfo.type}
style={{ pointerEvents: "none" }}
onError={(e) => e.target.src = fallbackImgUrl} />
</a>
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : replyMediaInfo.type === "audio" ? (
<div key={`mob-f-${reply.cid}`} className="file-mobile">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<audio key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : null
) : null}
{reply.content ? (
reply.content.length > 500 ?
<Fragment key={`fragment15-${reply.cid}`}>
src/components/views/styles/Board.styled.jsx
+37 -4
View File
@@ -2404,10 +2404,10 @@ export const BoardForm = styled.div`
clear: left !important;
}
video {
max-width: 100%;
max-height: 250px;
}
}
video {
width: 100px;
}
img {
@@ -2458,6 +2458,39 @@ export const BoardForm = styled.div`
overflow: hidden;
}
.file-mobile {
display: block;
.file-thumb-mobile {
margin-left: 10px !important;
margin-right: 10px !important;
text-decoration: none;
float: left;
margin-bottom: 5px;
margin-top: 15px;
}
.file-info-mobile {
padding-top: 5px;
text-align: center;
text-decoration: none;
display: block !important;
clear: left !important;
}
}
video {
max-width: 100px;
}
img {
border: none;
float: left;
max-width: 100px;
max-height: 100px;
object-fit: scale-down;
}
.post-info-mobile {
margin: 0;
overflow: hidden;