diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx index 21f6f4c2..77a503ef 100644 --- a/src/components/common/messaging/Message.tsx +++ b/src/components/common/messaging/Message.tsx @@ -5,6 +5,8 @@ import { attachContextMenu } from "preact-context-menu"; import { memo } from "preact/compat"; import { useState } from "preact/hooks"; +import { internalEmit } from "../../../lib/eventEmitter"; + import { QueuedMessage } from "../../../redux/reducers/queue"; import { useIntermediate } from "../../../context/intermediate/Intermediate"; @@ -25,7 +27,6 @@ import Attachment from "./attachments/Attachment"; import { MessageReply } from "./attachments/MessageReply"; import Embed from "./embed/Embed"; import InviteList from "./embed/EmbedInvite"; -import { internalEmit } from "../../../lib/eventEmitter"; interface Props { attachContext?: boolean; @@ -62,10 +63,10 @@ const Message = observer( // bree: Fatal please... const userContext = attachContext ? (attachContextMenu("Menu", { - user: message.author_id, - contextualChannel: message.channel_id, - // eslint-disable-next-line - }) as any) + user: message.author_id, + contextualChannel: message.channel_id, + // eslint-disable-next-line + }) as any) : undefined; const openProfile = () => @@ -80,9 +81,9 @@ const Message = observer( "mention", ); } else { - openProfile() + openProfile(); } - } + }; // ! FIXME(?): animate on hover const [animate, setAnimate] = useState(false); @@ -105,11 +106,11 @@ const Message = observer( hideReply ? false : (head && - !( - message.reply_ids && - message.reply_ids.length > 0 - )) ?? - false + !( + message.reply_ids && + message.reply_ids.length > 0 + )) ?? + false } contrast={contrast} sending={typeof queued !== "undefined"} @@ -118,10 +119,10 @@ const Message = observer( onContextMenu={ attachContext ? attachContextMenu("Menu", { - message, - contextualChannel: message.channel_id, - queued, - }) + message, + contextualChannel: message.channel_id, + queued, + }) : undefined } onMouseEnter={() => setAnimate(true)} diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx index 9175fc16..ce1945d3 100644 --- a/src/components/common/messaging/attachments/Attachment.tsx +++ b/src/components/common/messaging/attachments/Attachment.tsx @@ -2,6 +2,7 @@ import { Attachment as AttachmentI } from "revolt-api/types/Autumn"; import styles from "./Attachment.module.scss"; import classNames from "classnames"; +import { attachContextMenu } from "preact-context-menu"; import { useContext, useState } from "preact/hooks"; import { useIntermediate } from "../../../../context/intermediate/Intermediate"; @@ -9,9 +10,9 @@ import { AppContext } from "../../../../context/revoltjs/RevoltClient"; import AttachmentActions from "./AttachmentActions"; import { SizedGrid } from "./Grid"; +import ImageFile from "./ImageFile"; import Spoiler from "./Spoiler"; import TextFile from "./TextFile"; -import ImageFile from "./ImageFile"; interface Props { attachment: AttachmentI; @@ -37,11 +38,18 @@ export default function Attachment({ attachment, hasContent }: Props) { - + {spoiler && } ); diff --git a/src/lib/ContextMenus.tsx b/src/lib/ContextMenus.tsx index 1f76c53a..cb42b013 100644 --- a/src/lib/ContextMenus.tsx +++ b/src/lib/ContextMenus.tsx @@ -63,6 +63,7 @@ interface ContextMenuData { server_list?: string; channel?: string; message?: Message; + attachment?: Attachment; unread?: boolean; queued?: QueuedMessage; @@ -468,6 +469,7 @@ function ContextMenus(props: Props) { channel: cid, server: sid, message, + attachment, server_list, queued, unread, @@ -747,7 +749,10 @@ function ContextMenus(props: Props) { }); } - if (message.attachments) { + if ( + message.attachments && + message.attachments.length == 1 // if there are multiple attachments, the individual ones have to be clicked + ) { pushDivider(); const { metadata } = message.attachments[0]; const { type } = metadata; @@ -796,6 +801,44 @@ function ContextMenus(props: Props) { } } + if (attachment) { + pushDivider(); + const { metadata } = attachment; + const { type } = metadata; + + generateAction( + { + action: "open_file", + attachment, + }, + type === "Image" + ? "open_image" + : type === "Video" + ? "open_video" + : "open_file", + ); + + generateAction( + { + action: "save_file", + attachment, + }, + type === "Image" + ? "save_image" + : type === "Video" + ? "save_video" + : "save_file", + ); + + generateAction( + { + action: "copy_file_link", + attachment, + }, + "copy_link", + ); + } + const id = sid ?? cid ?? uid ?? message?._id; if (id) { pushDivider();