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

add media wrapper to catalogs

Browse Source
This commit is contained in:
plebeius.eth
2023-08-13 12:05:43 +02:00
parent 914b3a07ca
commit 8957dcf615
4 changed files with 106 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/SubscriptionsCatalog.jsx
+29 -12
View File
@@ -265,6 +265,17 @@ const CatalogPost = ({post}) => {
}, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
let displayWidth, displayHeight;
if (thread.linkWidth && thread.linkHeight) {
let scale = Math.min(1, 150 / Math.max(thread.linkWidth, thread.linkHeight));
displayWidth = `${thread.linkWidth * scale}px`;
displayHeight = `${thread.linkHeight * scale}px`;
} else {
displayWidth = '150px';
displayHeight = '150px';
}
return (
<div key={`thread-`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
@@ -274,26 +285,32 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<img className="card" key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
</span>
) : null
) : null}
{commentMediaInfo?.type === "image" ? (
<img className="card" key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
) : null}
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
</span>
) : null}
{commentMediaInfo?.type === "video" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<video className="card" key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio className="card" controls