diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx
index 5f0e062c..9175fc16 100644
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -41,7 +41,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
[styles.margin]: hasContent,
spoiler,
})}>
-
+
{spoiler && }
);
diff --git a/src/components/common/messaging/attachments/Grid.tsx b/src/components/common/messaging/attachments/Grid.tsx
index 8d87007f..c8435a13 100644
--- a/src/components/common/messaging/attachments/Grid.tsx
+++ b/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(
- 100%,
- ${(props) => props.width}px,
- var(--attachment-max-width)
- );
-
- max-height: min(${(props) => props.height}px, var(--attachment-max-height));
+ max-width: min(var(--width), var(--attachment-max-width));
+ max-height: min(var(--height), 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 {
diff --git a/src/components/common/messaging/attachments/ImageFile.tsx b/src/components/common/messaging/attachments/ImageFile.tsx
index 8dae6a0c..3108ff00 100644
--- a/src/components/common/messaging/attachments/ImageFile.tsx
+++ b/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 {AppContext} from "../../../../context/revoltjs/RevoltClient";
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { AppContext } from "../../../../context/revoltjs/RevoltClient";
-enum ImageLoadingState
-{
+enum ImageLoadingState {
Loading,
Loaded,
Error
}
-interface Props {
+type Props = JSX.HTMLAttributes & {
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
- 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)
}
-
/>
}