Fix plugins using ImageModals (again)

src/utils/discord.css

@@ -12,13 +12,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 0
+    border-radius: 0;
 }
 
 @media(width <= 485px) {
     .vc-image-modal {
         display: relative;
         overflow: visible;
-        overflow: initial
+        overflow: initial;
     }
 }

src/utils/discord.tsx

@@ -21,8 +21,9 @@ import "./discord.css";
 import { MessageObject } from "@api/MessageEvents";
 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 { Except } from "type-fest";
 
-import { ImageModal, ImageModalItem, openModal } from "./modal";
+import { MediaModalItem, MediaModalProps, openMediaModal } from "./modal";
 
 /**
  * Open the invite modal
@@ -111,24 +112,20 @@ export function sendMessage(
 }
 
 /**
- * You must specify either height or width
+ * You must specify either height or width in the item
  */
-export function openImageModal(props: Omit<ImageModalItem, "type">): string {
+export function openImageModal(item: Except<MediaModalItem, "type">, mediaModalProps?: Omit<MediaModalProps, "items">) {
-    return openModal(modalProps => (
+    return openMediaModal({
-        <ImageModal
+        className: "vc-image-modal",
-            {...modalProps}
+        fit: "vc-position-inherit",
-            className="vc-image-modal"
+        shouldAnimateCarousel: true,
-            fit="vc-position-inherit"
+        items: [{
-            items={[{
             type: "IMAGE",
-                original: props.url,
+            original: item.original ?? item.url,
-                ...props,
+            ...item,
-            }]}
+        }],
-            onClose={modalProps.onClose}
+        ...mediaModalProps
-            shouldHideMediaOptions={false}
+    });
-            shouldAnimate
-        />
-    ));
 }
 
 export async function openUserProfile(id: string) {

src/utils/modal.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
+import { findByPropsLazy, findModuleId, proxyLazyWebpack, wreq } from "@webpack";
 import type { ComponentType, PropsWithChildren, ReactNode, Ref } from "react";
 
 import { LazyComponent } from "./react";
@@ -101,24 +101,39 @@ export const Modals = findByPropsLazy("ModalRoot", "ModalCloseButton") as {
     }>;
 };
 
-export interface ImageModalItem {
+export type MediaModalItem = {
-    type: "IMAGE" | "VIDEO";
     url: string;
+    type: "IMAGE" | "VIDEO";
+    original?: string;
+    alt?: string;
     width?: number;
     height?: number;
-    original?: string;
+    animated?: boolean;
-}
+    maxWidth?: number;
+    maxHeight?: number;
+} & Record<PropertyKey, any>;
 
-export type ImageModal = ComponentType<{
+export type MediaModalProps = {
+    location?: string;
+    contextKey?: string;
+    onCloseCallback?: () => void;
     className?: string;
+    items: MediaModalItem[];
+    startingIndex?: number;
+    onIndexChange?: (...args: any[]) => void;
     fit?: string;
-    onClose?(): void;
+    shouldRedactExplicitContent?: boolean;
     shouldHideMediaOptions?: boolean;
-    shouldAnimate?: boolean;
+    shouldAnimateCarousel?: boolean;
-    items: ImageModalItem[];
+};
-}>;
 
-export const ImageModal = findComponentByCodeLazy(".MEDIA_MODAL_CLOSE") as ImageModal;
+export const openMediaModal: (props: MediaModalProps) => void = proxyLazyWebpack(() => {
+    const mediaModalKeyModuleId = findModuleId('"Zoomed Media Modal"');
+    if (mediaModalKeyModuleId == null) return;
+
+    const openMediaModalModule = wreq(findModuleId(mediaModalKeyModuleId, "modalKey:") as any);
+    return Object.values<any>(openMediaModalModule).find(v => String(v).includes("modalKey:"));
+});
 
 export const ModalRoot = LazyComponent(() => Modals.ModalRoot);
 export const ModalHeader = LazyComponent(() => Modals.ModalHeader);