Improve ImageViewer styles

This commit is contained in:
bree 2021-07-06 03:03:05 -04:00
parent de05fad9f4
commit 002d565b3f
No known key found for this signature in database
GPG key ID: 1B2E56B9EC985B96
2 changed files with 25 additions and 4 deletions

View file

@ -1,6 +1,16 @@
.viewer {
display: flex;
flex-direction: column;
border-end-end-radius: 4px;
border-end-start-radius: 4px;
overflow: hidden;
img {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
max-height: 75vh;
border-bottom: thin solid var(--tertiary-foreground);
object-fit: contain;
}
}

View file

@ -22,7 +22,10 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
}
if (attachment && attachment.metadata.type !== "Image") return null;
if (attachment?.metadata.type !== "Image") {
return null;
}
const client = useContext(AppContext);
return (
@ -30,13 +33,21 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
<div className={styles.viewer}>
{attachment && (
<>
<img src={client.generateFileURL(attachment)} />
<img
src={client.generateFileURL(attachment)}
width={attachment.metadata.width}
height={attachment.metadata.height}
/>
<AttachmentActions attachment={attachment} />
</>
)}
{embed && (
<>
<img src={proxyImage(embed.url)} />
<img
src={proxyImage(embed.url)}
width={attachment.metadata.width}
height={attachment.metadata.height}
/>
<EmbedMediaActions embed={embed} />
</>
)}