Skip to content
Snippets Groups Projects
Verified Commit 002d565b authored by bree's avatar bree
Browse files

Improve `ImageViewer` styles

parent de05fad9
No related merge requests found
.viewer { .viewer {
display: flex;
flex-direction: column;
border-end-end-radius: 4px;
border-end-start-radius: 4px;
overflow: hidden;
img { img {
width: auto;
height: auto;
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 75vh;
border-bottom: thin solid var(--tertiary-foreground);
object-fit: contain;
} }
} }
...@@ -22,7 +22,10 @@ export function ImageViewer({ attachment, embed, onClose }: Props) { ...@@ -22,7 +22,10 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url); 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); const client = useContext(AppContext);
return ( return (
...@@ -30,13 +33,21 @@ export function ImageViewer({ attachment, embed, onClose }: Props) { ...@@ -30,13 +33,21 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
<div className={styles.viewer}> <div className={styles.viewer}>
{attachment && ( {attachment && (
<> <>
<img src={client.generateFileURL(attachment)} /> <img
src={client.generateFileURL(attachment)}
width={attachment.metadata.width}
height={attachment.metadata.height}
/>
<AttachmentActions attachment={attachment} /> <AttachmentActions attachment={attachment} />
</> </>
)} )}
{embed && ( {embed && (
<> <>
<img src={proxyImage(embed.url)} /> <img
src={proxyImage(embed.url)}
width={attachment.metadata.width}
height={attachment.metadata.height}
/>
<EmbedMediaActions embed={embed} /> <EmbedMediaActions embed={embed} />
</> </>
)} )}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment