add media wrapper to catalogs

2026-08-03 07:41:04 +02:00 · 2023-08-13 12:05:43 +02:00
parent 914b3a07ca
commit 8957dcf615
4 changed files with 106 additions and 38 deletions
@@ -23,6 +23,11 @@ export const Threads = styled.div`
    max-height: 150px;
  }

+  .file-thumb {
+    background-color: rgba(0, 0, 0, 0.05);
+    display: inline-block;
+  }
+
  .card {
    display: inline;
    margin: auto;
@@ -87,6 +92,19 @@ export const Threads = styled.div`
    display: block;
    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`
@@ -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;}}  />
+            <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 
@@ -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') {
    return (
@@ -452,26 +462,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;}}  />
+              <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" ? (
-              <video className="card" key={`fti-`} 
-              src={commentMediaInfo.url} 
-              alt={commentMediaInfo.type} 
-              onError={(e) => e.target.src = fallbackImgUrl} /> 
+              <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 
@@ -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