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 {attachment.filename} - 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) } - /> }