remove content jumping when loading image and video attachments

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

@@ -17,18 +17,26 @@
         margin-top: 4px;
     }
 
-    &.image {
-        cursor: pointer;
+    &.image, &.video > video {
+        cursor: pointer;   
         
-        max-height: 640px;
-        max-width: min(480px, 100%);
+        aspect-ratio: var(--width) / var(--height);
+        max-height: min(640px, var(--height-px));
+        max-width: min(480px, 100%, var(--width-px));
         
         object-fit: contain;
+    }
 
-        &.loaded {
-            width: auto;
+    &.image {
+        &.long {
+            width: min(100%, var(--width-px));
             height: auto;
         }
+
+        &.tall {
+            height: min(100%, var(--height-px));
+            width: auto;
+        }
     }
 
     &.video {
@@ -39,14 +47,14 @@
 
         video {
             border-radius: 0 0 6px 6px;
-            
-            max-height: 640px;
-            max-width: min(480px, 100%);
-        }
 
-        video.loaded {
-            width: auto;
-            height: auto;
+            &.long {
+                height: auto;
+            }
+    
+            &.tall {
+                width: auto;
+            }
         }
     }
 

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

@@ -24,7 +24,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
     const { openScreen } = useIntermediate();
     const { filename, metadata } = attachment;
     const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
-    const [loaded, setLoaded] = useState(false);
 
     const url = client.generateFileURL(
         attachment,
@@ -50,20 +49,28 @@ export default function Attachment({ attachment, hasContent }: Props) {
                         alt={filename}
                         width={metadata.width}
                         height={metadata.height}
+                        loading="lazy"
                         data-spoiler={spoiler}
                         data-has-content={hasContent}
                         className={classNames(
                             styles.attachment,
                             styles.image,
-                            loaded && styles.loaded,
+                            metadata.width > metadata.height
+                                ? styles.long
+                                : styles.tall,
                         )}
+                        style={{
+                            "--width": metadata.width,
+                            "--height": metadata.height,
+                            "--width-px": metadata.width + "px",
+                            "--height-px": metadata.height + "px",
+                        }}
                         onClick={() =>
                             openScreen({ id: "image_viewer", attachment })
                         }
                         onMouseDown={(ev) =>
                             ev.button === 1 && window.open(url, "_blank")
                         }
-                        onLoad={() => setLoaded(true)}
                     />
                 </div>
             );
@@ -99,12 +106,22 @@ export default function Attachment({ attachment, hasContent }: Props) {
                             src={url}
                             width={metadata.width}
                             height={metadata.height}
-                            className={classNames(loaded && styles.loaded)}
+                            loading="lazy"
+                            className={classNames(
+                                metadata.width > metadata.height
+                                    ? styles.long
+                                    : styles.tall,
+                            )}
+                            style={{
+                                "--width": metadata.width,
+                                "--height": metadata.height,
+                                "--width-px": metadata.width + "px",
+                                "--height-px": metadata.height + "px",
+                            }}
                             controls
                             onMouseDown={(ev) =>
                                 ev.button === 1 && window.open(url, "_blank")
                             }
-                            onLoadedMetadata={() => setLoaded(true)}
                         />
                     </div>
                 </div>