From 8957dcf615786857969e17fc9cac27a896337328 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 13 Aug 2023 12:05:43 +0200
Subject: [PATCH] add media wrapper to catalogs

---
 .../styled/views/Catalog.styled.jsx           | 18 ++++++++
 src/components/views/AllCatalog.jsx           | 39 +++++++++++-----
 src/components/views/Catalog.jsx              | 46 +++++++++++++------
 src/components/views/SubscriptionsCatalog.jsx | 41 ++++++++++++-----
 4 files changed, 106 insertions(+), 38 deletions(-)

diff --git a/src/components/styled/views/Catalog.styled.jsx b/src/components/styled/views/Catalog.styled.jsx
index 4d5cfa96..588b01fd 100644
--- a/src/components/styled/views/Catalog.styled.jsx
+++ b/src/components/styled/views/Catalog.styled.jsx
@@ -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`
diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx
index 526eb6f3..1f393443 100755
--- a/src/components/views/AllCatalog.jsx
+++ b/src/components/views/AllCatalog.jsx
@@ -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 
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index 2dc9a08a..3ece40a4 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -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 
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index 85bef845..ac5a2e82 100755
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -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