Merge pull request #209 from brecert/image-fixes

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

@@ -41,7 +41,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                         [styles.margin]: hasContent,
                         spoiler,
                     })}>
-                    <ImageFile attachment={attachment} />
+                    <ImageFile attachment={attachment} width={metadata.width} height={metadata.height} />
                     {spoiler && <Spoiler set={setSpoiler} />}
                 </SizedGrid>
             );

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

@@ -3,16 +3,14 @@ import styled from "styled-components";
 import { Children } from "../../../../types/Preact";
 
 const Grid = styled.div<{ width: number; height: number }>`
+    --width: ${props => props.width}px;
+    --height: ${props => props.height}px;
+
     display: grid;
     aspect-ratio: ${(props) => props.width} / ${(props) => props.height};
 
-    max-width: min(
+    max-width: min(var(--width), var(--attachment-max-width));
-        100%,
+    max-height: min(var(--height), var(--attachment-max-height));
-        ${(props) => props.width}px,
-        var(--attachment-max-width)
-    );
-
-    max-height: min(${(props) => props.height}px, var(--attachment-max-height));
 
     // This is a hack for browsers not supporting aspect-ratio.
     // Stolen from https://codepen.io/una/pen/BazyaOM.
@@ -44,6 +42,9 @@ const Grid = styled.div<{ width: number; height: number }>`
         overflow: hidden;
 
         object-fit: contain;
+        
+        // It's something
+        object-position: left;
     }
 
     video {

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

@@ -1,31 +1,30 @@
-import {Attachment} from "revolt-api/types/Autumn";
+import { Attachment } from "revolt-api/types/Autumn";
 
 import styles from "./Attachment.module.scss";
 import classNames from "classnames";
-import {useContext, useState} from "preact/hooks";
+import { useContext, useState } from "preact/hooks";
 
-import {useIntermediate} from "../../../../context/intermediate/Intermediate";
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
-import {AppContext} from "../../../../context/revoltjs/RevoltClient";
+import { AppContext } from "../../../../context/revoltjs/RevoltClient";
 
-enum ImageLoadingState
+enum ImageLoadingState {
-{
     Loading,
     Loaded,
     Error
 }
 
-interface Props {
+type Props = JSX.HTMLAttributes<HTMLImageElement> & {
     attachment: Attachment;
 }
 
-export default function ImageFile({ attachment }: Props)
+export default function ImageFile({ attachment, ...props }: Props) {
-{
     const [loading, setLoading] = useState(ImageLoadingState.Loading);
     const client = useContext(AppContext);
     const { openScreen } = useIntermediate();
     const url = client.generateFileURL(attachment)!;
 
     return <img
+        {...props}
         src={url}
         alt={attachment.filename}
         loading="lazy"
@@ -33,7 +32,7 @@ export default function ImageFile({ attachment }: Props)
             [styles.loading]: loading !== ImageLoadingState.Loaded
         })}
         onClick={() =>
-            openScreen({id: "image_viewer", attachment})
+            openScreen({ id: "image_viewer", attachment })
         }
         onMouseDown={(ev) =>
             ev.button === 1 && window.open(url, "_blank")
@@ -44,6 +43,5 @@ export default function ImageFile({ attachment }: Props)
         onError={() =>
             setLoading(ImageLoadingState.Error)
         }
-
     />
 }