From ee5e558e9f79cf58aa9714143c5fbb07872dd7fb Mon Sep 17 00:00:00 2001
From: bree <me@bree.dev>
Date: Fri, 2 Jul 2021 22:37:45 -0400
Subject: [PATCH 1/4] fix long width image previews to fit into view

---
 src/components/common/messaging/bars/FilePreview.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/common/messaging/bars/FilePreview.tsx b/src/components/common/messaging/bars/FilePreview.tsx
index 9f0a98c4..80f9fae5 100644
--- a/src/components/common/messaging/bars/FilePreview.tsx
+++ b/src/components/common/messaging/bars/FilePreview.tsx
@@ -101,6 +101,7 @@ const PreviewBox = styled.div`
 
     .icon {
         height: 100px;
+        width: 100%;
         margin-bottom: 4px;
         object-fit: contain;
     }

From 036e9a330ad52f569f1b133245d7b4e5cb6bd79a Mon Sep 17 00:00:00 2001
From: bree <me@bree.dev>
Date: Fri, 2 Jul 2021 22:40:53 -0400
Subject: [PATCH 2/4] replace js image scaling with css for message attachments

---
 .../attachments/Attachment.module.scss        |  8 ++++
 .../messaging/attachments/Attachment.tsx      | 38 +------------------
 2 files changed, 10 insertions(+), 36 deletions(-)

diff --git a/src/components/common/messaging/attachments/Attachment.module.scss b/src/components/common/messaging/attachments/Attachment.module.scss
index 4f23a898..92c3545b 100644
--- a/src/components/common/messaging/attachments/Attachment.module.scss
+++ b/src/components/common/messaging/attachments/Attachment.module.scss
@@ -2,6 +2,14 @@
     border-radius: 6px;
     margin: .125rem 0 .125rem;
     
+    width: auto;
+    height: auto;
+    
+    max-height: 640px;
+    max-width: min(480px, 100%);
+    
+    object-fit: contain;
+    
     &[data-spoiler="true"] {
         filter: blur(30px);
         pointer-events: none;
diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx
index eb144ebe..342a5984 100644
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -15,55 +15,26 @@ interface Props {
 }
 
 const MAX_ATTACHMENT_WIDTH = 480;
-const MAX_ATTACHMENT_HEIGHT = 640;
 
 export default function Attachment({ attachment, hasContent }: Props) {
     const client = useContext(AppContext);
     const { openScreen } = useIntermediate();
     const { filename, metadata } = attachment;
     const [ spoiler, setSpoiler ] = useState(filename.startsWith("SPOILER_"));
-    const maxWidth = Math.min(useContext(MessageAreaWidthContext), MAX_ATTACHMENT_WIDTH);
 
     const url = client.generateFileURL(attachment, { width: MAX_ATTACHMENT_WIDTH * 1.5 }, true);
-    let width  = 0,
-        height = 0;
-    
-    if (metadata.type === 'Image' || metadata.type === 'Video') {
-        let limitingWidth = Math.min(
-            maxWidth,
-            metadata.width
-        );
 
-        let limitingHeight = Math.min(
-            MAX_ATTACHMENT_HEIGHT,
-            metadata.height
-        );
-
-        // Calculate smallest possible WxH.
-        width = Math.min(
-            limitingWidth,
-            limitingHeight * (metadata.width / metadata.height)
-        );
-
-        height = Math.min(
-            limitingHeight,
-            limitingWidth * (metadata.height / metadata.width)
-        );
-    }
 
     switch (metadata.type) {
         case "Image": {
             return (
                 <div
-                    style={{ width }}
                     className={styles.container}
                     onClick={() => spoiler && setSpoiler(false)}
                 >
                     {spoiler && (
                         <div className={styles.overflow}>
-                            <div style={{ width, height }}>
-                                <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
-                            </div>
+                            <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
                         </div>
                     )}
                     <img
@@ -79,7 +50,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
                             ev.button === 1 &&
                             window.open(url, "_blank")
                         }
-                        style={{ width, height }}
                     />
                 </div>
             );
@@ -102,13 +72,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
                     onClick={() => spoiler && setSpoiler(false)}>
                     {spoiler && (
                         <div className={styles.overflow}>
-                            <div style={{ width, height }}>
-                                <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
-                            </div>
+                            <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
                         </div>
                     )}
                     <div
-                        style={{ width }}
                         data-spoiler={spoiler}
                         data-has-content={hasContent}
                         className={classNames(styles.attachment, styles.video)}
@@ -117,7 +84,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
                         <video
                             src={url}
                             controls
-                            style={{ width, height }}
                             onMouseDown={ev =>
                                 ev.button === 1 &&
                                 window.open(url, "_blank")

From b8216847334349c66f5c3199efc94f4d73447f9d Mon Sep 17 00:00:00 2001
From: bree <me@bree.dev>
Date: Sat, 3 Jul 2021 01:47:46 -0400
Subject: [PATCH 3/4] image attachments now have their width and height
 properly set

---
 src/components/common/messaging/attachments/Attachment.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx
index 342a5984..15c42536 100644
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -40,6 +40,8 @@ export default function Attachment({ attachment, hasContent }: Props) {
                     <img
                         src={url}
                         alt={filename}
+                        width={metadata.width}
+                        height={metadata.height}
                         data-spoiler={spoiler}
                         data-has-content={hasContent}
                         className={classNames(styles.attachment, styles.image)}

From b4294359a1580f277a92073ee2dd6e864b1373ac Mon Sep 17 00:00:00 2001
From: bree <me@bree.dev>
Date: Sun, 4 Jul 2021 00:48:24 -0400
Subject: [PATCH 4/4] Fix: Chrome support for css image scaling

---
 .../common/messaging/attachments/Attachment.module.scss          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/common/messaging/attachments/Attachment.module.scss b/src/components/common/messaging/attachments/Attachment.module.scss
index 92c3545b..6836ea31 100644
--- a/src/components/common/messaging/attachments/Attachment.module.scss
+++ b/src/components/common/messaging/attachments/Attachment.module.scss
@@ -2,7 +2,6 @@
     border-radius: 6px;
     margin: .125rem 0 .125rem;
     
-    width: auto;
     height: auto;
     
     max-height: 640px;