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

enabled media

Browse Source
This commit is contained in:
plebbitor
2023-03-26 14:39:09 +02:00
parent f1ac858534
commit cf0bd8e573
4 changed files with 16 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+3 -19
View File
@@ -413,20 +413,12 @@ const Board = () => {
) : null}
{commentMediaInfo?.type === "video" ? (
<span key={`fta-${thread.cid}`} className="file-thumb">
<VideoThumbnail
videoUrl={commentMediaInfo.url}
thumbnailHandler={(thumbnail) => {
const img = document.querySelector(`img[key="img-${thread.cid}"]`);
if (img) {
img.src = thumbnail;
}
}}
/>
<video controls width="" key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
<span key={`fta-${thread.cid}`} className="file-thumb">
<audio key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<audio controls key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
</div>
@@ -700,15 +692,7 @@ const Board = () => {
) : commentMediaInfo.type === "video" ? (
<div key={`mob-f-${thread.cid}`} className="file-mobile">
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<VideoThumbnail
videoUrl={commentMediaInfo.url}
thumbnailHandler={(thumbnail) => {
const img = document.querySelector(`img[key="img-${thread.cid}"]`);
if (img) {
img.src = thumbnail;
}
}}
/>
<video controls width="" key={`fti-${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>
src/components/views/Catalog.jsx
+1 -4
View File
@@ -370,10 +370,7 @@ const Catalog = () => {
/>
) : null}
{commentMediaInfo?.type === "audio" ? (
<img key={`img-${thread.cid}`} alt="thread" src={commentMediaInfo.url}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
<audio controls key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</Fragment>
) : null}
src/components/views/Thread.jsx
+2 -2
View File
@@ -423,7 +423,7 @@ const Thread = () => {
) : null}
{commentMediaInfo?.type === "video" ? (
<span key={`fta-${comment.cid}`} className="file-thumb">
<video key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
<video controls key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
@@ -666,7 +666,7 @@ const Thread = () => {
) : 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} />
<video controls 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>
src/components/views/styles/Board.styled.jsx
+10 -1
View File
@@ -2306,10 +2306,14 @@ export const BoardForm = styled.div`
.file-thumb img {
border: none;
float: left;
max-width: 250px;
max-height: 250px;
}
.file-thumb video {
max-width: 400px;
max-height: 400px;
}
}
.thread-mobile {
@@ -2389,6 +2393,11 @@ export const BoardForm = styled.div`
display: block !important;
clear: left !important;
}
video {
max-width: 100%;
max-height: 250px;
}
}
img {