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/styled/views/Catalog.styled.jsx
+18
View File
@@ -23,6 +23,11 @@ export const Threads = styled.div`
max-height: 150px; max-height: 150px;
} }
.file-thumb {
background-color: rgba(0, 0, 0, 0.05);
display: inline-block;
}
.card { .card {
display: inline; display: inline;
margin: auto; margin: auto;
@@ -87,6 +92,19 @@ export const Threads = styled.div`
display: block; display: block;
padding: 0 15px; padding: 0 15px;
} }
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Tomorrow':
return `
.file-thumb {
background-color: rgba(255, 255, 255, 0.01) !important;
}
`;
default:
return '';
}
}}
`; `;
export const PostMenuCatalog = styled.div` export const PostMenuCatalog = styled.div`
src/components/views/AllCatalog.jsx
+28 -11
View File
@@ -265,6 +265,17 @@ const CatalogPost = ({post}) => {
}, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]); }, [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 ( return (
<div key={`thread-`} className="thread" <div key={`thread-`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
@@ -274,26 +285,32 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
<img className="card" key={`img-`} <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} <img className="card" key={`img-`}
onError={(e) => { src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
e.target.src = fallbackImgUrl onError={(e) => {
e.target.onerror = null; e.target.src = fallbackImgUrl
}} /> e.target.onerror = null;
}} />
</span>
) : null ) : null
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<img className="card" key={`img-`} <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
src={commentMediaInfo.url} alt={commentMediaInfo.type} <img className="card" key={`img-`}
onError={(e) => { src={commentMediaInfo.url} alt={commentMediaInfo.type}
e.target.src = fallbackImgUrl onError={(e) => {
e.target.onerror = null;}} /> e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
</span>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<video className="card" key={`fti-`} <video className="card" key={`fti-`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt={commentMediaInfo.type} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<audio className="card" controls <audio className="card" controls
src/components/views/Catalog.jsx
+31 -15
View File
@@ -254,6 +254,16 @@ const CatalogPost = ({post}) => {
}; };
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';
}
if (post.type === 'rules') { if (post.type === 'rules') {
return ( return (
@@ -452,26 +462,32 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
<img className="card" key={`img-`} <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} <img className="card" key={`img-`}
onError={(e) => { src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
e.target.src = fallbackImgUrl onError={(e) => {
e.target.onerror = null; e.target.src = fallbackImgUrl
}} /> e.target.onerror = null;
}} />
</span>
) : null ) : null
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<img className="card" key={`img-`} <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
src={commentMediaInfo.url} alt={commentMediaInfo.type} <img className="card" key={`img-`}
onError={(e) => { src={commentMediaInfo.url} alt={commentMediaInfo.type}
e.target.src = fallbackImgUrl onError={(e) => {
e.target.onerror = null;}} /> e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
</span>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<video className="card" key={`fti-`} <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
src={commentMediaInfo.url} <video className="card" key={`fti-`}
alt={commentMediaInfo.type} src={commentMediaInfo.url}
onError={(e) => e.target.src = fallbackImgUrl} /> alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<audio className="card" controls <audio className="card" controls
src/components/views/SubscriptionsCatalog.jsx
+28 -11
View File
@@ -265,6 +265,17 @@ const CatalogPost = ({post}) => {
}, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]); }, [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 ( return (
<div key={`thread-`} className="thread" <div key={`thread-`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
@@ -274,26 +285,32 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}> onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? ( thread.thumbnailUrl ? (
<img className="card" key={`img-`} <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} <img className="card" key={`img-`}
onError={(e) => { src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
e.target.src = fallbackImgUrl onError={(e) => {
e.target.onerror = null; e.target.src = fallbackImgUrl
}} /> e.target.onerror = null;
}} />
</span>
) : null ) : null
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<img className="card" key={`img-`} <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
src={commentMediaInfo.url} alt={commentMediaInfo.type} <img className="card" key={`img-`}
onError={(e) => { src={commentMediaInfo.url} alt={commentMediaInfo.type}
e.target.src = fallbackImgUrl onError={(e) => {
e.target.onerror = null;}} /> e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
</span>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<video className="card" key={`fti-`} <video className="card" key={`fti-`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt={commentMediaInfo.type} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<audio className="card" controls <audio className="card" controls