Merge branch 'images' into 'master'

replace js image scaling with css for message attatchments

See merge request revolt/revite!3

src/components/common/messaging/attachments/Attachment.module.scss

@@ -2,6 +2,13 @@
     border-radius: 6px;
     margin: .125rem 0 .125rem;
     
+    height: auto;
+    
+    max-height: 640px;
+    max-width: min(480px, 100%);
+    
+    object-fit: contain;
+    
     &[data-spoiler="true"] {
         filter: blur(30px);
         pointer-events: none;

src/components/common/messaging/attachments/Attachment.tsx

@@ -15,60 +15,33 @@ 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
                         src={url}
                         alt={filename}
+                        width={metadata.width}
+                        height={metadata.height}
                         data-spoiler={spoiler}
                         data-has-content={hasContent}
                         className={classNames(styles.attachment, styles.image)}
@@ -79,7 +52,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
                             ev.button === 1 &&
                             window.open(url, "_blank")
                         }
-                        style={{ width, height }}
                     />
                 </div>
             );
@@ -102,13 +74,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 +86,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
                         <video
                             src={url}
                             controls
-                            style={{ width, height }}
                             onMouseDown={ev =>
                                 ev.button === 1 &&
                                 window.open(url, "_blank")

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;
     }