Fix: Image embeds were unable to be opened into the image view

- Image embeds actions now use a better styling that's the same as the other action stylings
This commit is contained in:
bree 2021-07-06 03:56:04 -04:00
parent 002d565b3f
commit d829deba98
No known key found for this signature in database
GPG key ID: 1B2E56B9EC985B96
3 changed files with 58 additions and 13 deletions

View file

@ -95,3 +95,39 @@
}
}
}
// TODO: unified actions css (see attachment.module.scss for other actions css)
.actions {
display: grid;
grid-template:
"name open" auto
"size open" auto
/ minmax(20px, 1fr) min-content;
align-items: center;
column-gap: 8px;
width: 100%;
padding: 8px;
overflow: none;
color: var(--foreground);
background: var(--secondary-background);
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.filesize {
grid-area: size;
font-size: 10px;
color: var(--secondary-foreground);
}
.openIcon {
grid-area: open;
}
}

View file

@ -14,13 +14,11 @@ export default function EmbedMediaActions({ embed }: Props) {
return (
<div className={styles.actions}>
<div className={styles.info}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{embed.width + "x" + embed.height}
</span>
</div>
<a href={embed.url} target="_blank">
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{embed.width + "x" + embed.height}
</span>
<a href={embed.url} class={styles.openIcon} target="_blank">
<IconButton>
<LinkExternal size={24} />
</IconButton>

View file

@ -1,4 +1,8 @@
import { Attachment, EmbedImage } from "revolt.js/dist/api/objects";
import {
Attachment,
AttachmentMetadata,
EmbedImage,
} from "revolt.js/dist/api/objects";
import styles from "./ImageViewer.module.scss";
import { useContext, useEffect } from "preact/hooks";
@ -15,6 +19,8 @@ interface Props {
attachment?: Attachment;
}
type ImageMetadata = AttachmentMetadata & { type: "Image" };
export function ImageViewer({ attachment, embed, onClose }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
@ -22,7 +28,10 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
}
if (attachment?.metadata.type !== "Image") {
if (attachment && attachment.metadata.type !== "Image") {
console.warn(
`Attempted to use a non valid attatchment type in the image viewer: ${attachment.metadata.type}`,
);
return null;
}
@ -35,8 +44,10 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
<>
<img
src={client.generateFileURL(attachment)}
width={attachment.metadata.width}
height={attachment.metadata.height}
width={(attachment.metadata as ImageMetadata).width}
height={
(attachment.metadata as ImageMetadata).height
}
/>
<AttachmentActions attachment={attachment} />
</>
@ -45,8 +56,8 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
<>
<img
src={proxyImage(embed.url)}
width={attachment.metadata.width}
height={attachment.metadata.height}
width={embed.width}
height={embed.height}
/>
<EmbedMediaActions embed={embed} />
</>