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 209117be..12fd474e 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 bc8f41a7..654ede44 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 4518abcc..bf644e31 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} />
                     </>