Update

src/utils/constants.ts

@@ -928,6 +928,10 @@ export const EquicordDevs = Object.freeze({
         name: "Leko",
         id: 108153734541942784n
     },
+        SomeAspy: {
+        name: "SomeAspy",
+        id: 516750892372852754n,
+    },
 } satisfies Record<string, Dev>);
 
 // iife so #__PURE__ works correctly

src/utils/discord.css

@@ -1,3 +1,25 @@
-.vc-imagemodal-fix {
+
+.vc-position-inherit {
     position: inherit;
 }
+
+/**
+ * copy pasted from discord css. not really webpack-findable since it's the only class in the module
+**/
+
+.vc-image-modal {
+    background: transparent!important;
+    box-shadow: none!important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0
+}
+
+@media(width <= 485px) {
+    .vc-image-modal {
+        display:relative;
+        overflow: visible;
+        overflow: initial
+    }
+}

src/utils/discord.tsx

@@ -19,10 +19,10 @@
 import "./discord.css";
 
 import { MessageObject } from "@api/MessageEvents";
-import { ChannelStore, ComponentDispatch, Constants, FluxDispatcher, GuildStore, InviteActions, MaskedLink, MessageActions, PrivateChannelsStore, RestAPI, SelectedChannelStore, SelectedGuildStore, UserProfileActions, UserProfileStore, UserSettingsActionCreators, UserUtils } from "@webpack/common";
+import { ChannelStore, ComponentDispatch, Constants, FluxDispatcher, GuildStore, InviteActions, MessageActions, PrivateChannelsStore, RestAPI, SelectedChannelStore, SelectedGuildStore, UserProfileActions, UserProfileStore, UserSettingsActionCreators, UserUtils } from "@webpack/common";
 import { Channel, Guild, Message, User } from "discord-types/general";
 
-import { ImageModal, openModal } from "./modal";
+import { ImageModal, ImageModalItem, openModal } from "./modal";
 
 /**
  * Open the invite modal
@@ -110,23 +110,23 @@ export function sendMessage(
     return MessageActions.sendMessage(channelId, messageData, waitForChannelReady, extra);
 }
 
-const FIX_CLASS_NAME = "vc-imagemodal-fix";
-
-export function openImageModal(url: string, props?: Partial<React.ComponentProps<ImageModal>>): string {
+/**
+ * You must specify either height or width
+ */
+export function openImageModal(props: Omit<ImageModalItem, "type">): string {
     return openModal(modalProps => (
         <ImageModal
             {...modalProps}
-            renderLinkComponent={props => <MaskedLink {...props} />}
-            // Don't render forward message button scaleDown_f97a12 contain_f97a12
-            renderForwardComponent={() => null}
-            shouldHideMediaOptions={false}
-            shouldAnimate={true}
-            fit={FIX_CLASS_NAME}
+            className="vc-image-modal"
+            fit="vc-position-inherit"
             items={[{
-                ...props,
                 type: "IMAGE",
-                url,
+                original: props.url,
+                ...props,
             }]}
+            onClose={modalProps.onClose}
+            shouldHideMediaOptions={false}
+            shouldAnimate
         />
     ));
 }

src/utils/modal.tsx

@@ -101,23 +101,21 @@ export const Modals = findByPropsLazy("ModalRoot", "ModalCloseButton") as {
     }>;
 };
 
-// FIXME: type this
-export type ImageModal = any & ComponentType<{
-    className?: string;
-    src: string;
-    placeholder: string;
-    original: string;
+export interface ImageModalItem {
+    type: "IMAGE" | "VIDEO";
+    url: string;
     width?: number;
     height?: number;
-    animated?: boolean;
-    responsive?: boolean;
-    renderLinkComponent(props: any): ReactNode;
-    renderForwardComponent(props: any): ReactNode;
-    maxWidth?: number;
-    maxHeight?: number;
-    shouldAnimate?: boolean;
+    original?: string;
+}
+
+export type ImageModal = ComponentType<{
+    className?: string;
+    fit?: string;
     onClose?(): void;
     shouldHideMediaOptions?: boolean;
+    shouldAnimate?: boolean;
+    items: ImageModalItem[];
 }>;
 
 export const ImageModal = findComponentByCodeLazy(".MEDIA_MODAL_CLOSE") as ImageModal;