From d829deba98785e1cafba2580e4bbfbf29b84f679 Mon Sep 17 00:00:00 2001
From: bree <me@bree.dev>
Date: Tue, 6 Jul 2021 03:56:04 -0400
Subject: [PATCH] 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
---
.../common/messaging/embed/Embed.module.scss | 36 +++++++++++++++++++
.../messaging/embed/EmbedMediaActions.tsx | 12 +++----
.../intermediate/popovers/ImageViewer.tsx | 23 ++++++++----
3 files changed, 58 insertions(+), 13 deletions(-)
diff --git a/src/components/common/messaging/embed/Embed.module.scss b/src/components/common/messaging/embed/Embed.module.scss
index 209117b..12fd474 100644
--- a/src/components/common/messaging/embed/Embed.module.scss
+++ b/src/components/common/messaging/embed/Embed.module.scss
@@ -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;
+ }
+}
diff --git a/src/components/common/messaging/embed/EmbedMediaActions.tsx b/src/components/common/messaging/embed/EmbedMediaActions.tsx
index bc8f41a..654ede4 100644
--- a/src/components/common/messaging/embed/EmbedMediaActions.tsx
+++ b/src/components/common/messaging/embed/EmbedMediaActions.tsx
@@ -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>
diff --git a/src/context/intermediate/popovers/ImageViewer.tsx b/src/context/intermediate/popovers/ImageViewer.tsx
index 4518abc..bf644e3 100644
--- a/src/context/intermediate/popovers/ImageViewer.tsx
+++ b/src/context/intermediate/popovers/ImageViewer.tsx
@@ -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} />
</>
--
GitLab