mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
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:
parent
002d565b3f
commit
d829deba98
3 changed files with 58 additions and 13 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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} />
|
||||
</>
|
||||
|
|
Loading…
Reference in a new issue