Fixes

src/plugins/betterRoleContext/index.tsx

@@ -8,7 +8,7 @@ import { definePluginSettings } from "@api/Settings";
 import { getUserSettingLazy } from "@api/UserSettings";
 import { ImageIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
-import { getCurrentGuild, openImageModal } from "@utils/discord";
+import { getCurrentGuild, openMediaModal } from "@utils/discord";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 import { Clipboard, GuildStore, Menu, PermissionStore } from "@webpack/common";
@@ -99,7 +99,7 @@ export default definePlugin({
                         id="vc-view-role-icon"
                         label="View Role Icon"
                         action={() => {
-                            openImageModal(`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${role.id}/${role.icon}.${settings.store.roleIconFileFormat}`);
+                            openMediaModal(`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${role.id}/${role.icon}.${settings.store.roleIconFileFormat}`);
                         }}
                         icon={ImageIcon}
                     />

src/plugins/biggerStreamPreview/index.tsx

@@ -19,7 +19,7 @@
 import { NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { ScreenshareIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
-import { openImageModal } from "@utils/discord";
+import { openMediaModal } from "@utils/discord";
 import definePlugin from "@utils/types";
 import { Menu } from "@webpack/common";
 import { Channel, User } from "discord-types/general";
@@ -57,7 +57,7 @@ export const handleViewPreview = async ({ guildId, channelId, ownerId }: Applica
     const previewUrl = await ApplicationStreamPreviewStore.getPreviewURL(guildId, channelId, ownerId);
     if (!previewUrl) return;
 
-    openImageModal(previewUrl);
+    openMediaModal(previewUrl);
 };
 
 export const addViewStreamContext: NavContextMenuPatchCallback = (children, { userId }: { userId: string | bigint; }) => {

src/plugins/imageZoom/index.tsx

@@ -156,14 +156,14 @@ export default definePlugin({
 
     patches: [
         {
-            find: "Messages.OPEN_IN_BROWSER",
+            find: ".contain,SCALE_DOWN:",
             replacement: {
                 // there are 2 image thingies. one for carosuel and one for the single image.
                 // so thats why i added global flag.
                 // also idk if this patch is good, should it be more specific?
                 // https://regex101.com/r/xfvNvV/1
-                match: /return.{1,200}\.wrapper.{1,200}src:\i,/g,
+                match: /\.slide,\i\),/g,
-                replace: `$&id: '${ELEMENT_ID}',`
+                replace: `$&id:"${ELEMENT_ID}",`
             }
         },
 

src/plugins/serverInfo/GuildInfoModal.tsx

@@ -7,7 +7,7 @@
 import "./styles.css";
 
 import { classNameFactory } from "@api/Styles";
-import { openImageModal, openUserProfile } from "@utils/discord";
+import { openMediaModal, openUserProfile } from "@utils/discord";
 import { classes } from "@utils/misc";
 import { ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
@@ -80,7 +80,7 @@ function GuildInfoModal({ guild }: GuildProps) {
                     className={cl("banner")}
                     src={bannerUrl}
                     alt=""
-                    onClick={() => openImageModal(bannerUrl)}
+                    onClick={() => openMediaModal(bannerUrl)}
                 />
             )}
 
@@ -89,7 +89,7 @@ function GuildInfoModal({ guild }: GuildProps) {
                     ? <img
                         src={iconUrl}
                         alt=""
-                        onClick={() => openImageModal(iconUrl)}
+                        onClick={() => openMediaModal(iconUrl)}
                     />
                     : <div aria-hidden className={classes(IconClasses.childWrapper, IconClasses.acronym)}>{guild.acronym}</div>
                 }
@@ -151,7 +151,7 @@ function Owner(guildId: string, owner: User) {
 
     return (
         <div className={cl("owner")}>
-            <img src={ownerAvatarUrl} alt="" onClick={() => openImageModal(ownerAvatarUrl)} />
+            <img src={ownerAvatarUrl} alt="" onClick={() => openMediaModal(ownerAvatarUrl)} />
             {Parser.parse(`<@${owner.id}>`)}
         </div>
     );

src/plugins/spotifyControls/PlayerComponent.tsx

@@ -21,7 +21,7 @@ import "./spotifyStyles.css";
 import { Flex } from "@components/Flex";
 import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
 import { debounce } from "@shared/debounce";
-import { openImageModal } from "@utils/discord";
+import { openMediaModal } from "@utils/discord";
 import { classes, copyWithToast } from "@utils/misc";
 import { ContextMenuApi, FluxDispatcher, Forms, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common";
 
@@ -229,7 +229,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
                 id="view-cover"
                 label="View Album Cover"
                 // trolley
-                action={() => openImageModal(track.album.image.url)}
+                action={() => openMediaModal(track.album.image.url)}
                 icon={ImageIcon}
             />
             <Menu.MenuControlItem

src/plugins/viewIcons/index.tsx

@@ -20,7 +20,7 @@ import { NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { definePluginSettings } from "@api/Settings";
 import { ImageIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
-import { openImageModal } from "@utils/discord";
+import { openMediaModal } from "@utils/discord";
 import definePlugin, { OptionType } from "@utils/types";
 import { GuildMemberStore, IconUtils, Menu } from "@webpack/common";
 import type { Channel, Guild, User } from "discord-types/general";
@@ -78,9 +78,10 @@ function openImage(url: string) {
     u.searchParams.set("size", "4096");
     const originalUrl = u.toString();
 
-    openImageModal(url, {
+    openMediaModal({
+        url,
         original: originalUrl,
-        height: 256
+        maxHeight: 256
     });
 }
 

src/utils/discord.tsx

@@ -17,10 +17,10 @@
 */
 
 import { MessageObject } from "@api/MessageEvents";
-import { ChannelStore, ComponentDispatch, Constants, FluxDispatcher, GuildStore, InviteActions, MaskedLink, MessageActions, ModalImageClasses, 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, ModalRoot, ModalSize, openModal } from "./modal";
+import { MediaData, MediaModal, openModal } from "./modal";
 
 /**
  * Open the invite modal
@@ -108,25 +108,22 @@ export function sendMessage(
     return MessageActions.sendMessage(channelId, messageData, waitForChannelReady, extra);
 }
 
-export function openImageModal(url: string, props?: Partial<React.ComponentProps<ImageModal>>): string {
+/**
+ *
+ * @param media The url of the media or its data
+ * @param mediaModalProps Additional props for the image modal
+ */
+export function openMediaModal(media: string | MediaData, mediaModalProps?: Partial<React.ComponentProps<MediaModal>>): string {
+    media = typeof media === "string" ? { url: media } : media;
+    media.original ??= media.url;
+    media.type ??= "IMAGE";
     return openModal(modalProps => (
-        <ModalRoot
+        <MediaModal
             {...modalProps}
-            className={ModalImageClasses.modal}
+            {...mediaModalProps}
-            size={ModalSize.DYNAMIC}>
+            shouldAnimateCarousel
-            <ImageModal
+            items={[media]}
-                className={ModalImageClasses.image}
+        />
-                original={url}
-                placeholder={url}
-                src={url}
-                renderLinkComponent={props => <MaskedLink {...props} />}
-                // Don't render forward message button
-                renderForwardComponent={() => null}
-                shouldHideMediaOptions={false}
-                shouldAnimate
-                {...props}
-            />
-        </ModalRoot>
     ));
 }
 

src/utils/modal.tsx

@@ -101,25 +101,31 @@ export const Modals = findByPropsLazy("ModalRoot", "ModalCloseButton") as {
     }>;
 };
 
-export type ImageModal = ComponentType<{
+// @TODO Type this
-    className?: string;
+export type MediaData = {
-    src: string;
+    url: string;
-    placeholder: string;
+    original?: string;
-    original: string;
+    type?: string;
+    alt?: string;
     width?: number;
     height?: number;
-    animated?: boolean;
-    responsive?: boolean;
-    renderLinkComponent(props: any): ReactNode;
-    renderForwardComponent(props: any): ReactNode;
     maxWidth?: number;
     maxHeight?: number;
-    shouldAnimate?: boolean;
+} & Record<PropertyKey, any>;
-    onClose?(): void;
+
+export type MediaModal = ComponentType<{
+    onClose?: () => void;
+    items: MediaData[];
+    startingIndex?: number;
+    onIndexChange?: (...args: any[]) => void;
+    fit?: any;
+    shouldRedactExplicitContent?: boolean;
     shouldHideMediaOptions?: boolean;
+    shouldAnimateCarousel?: boolean;
+    className?: string;
 }>;
 
-export const ImageModal = findComponentByCodeLazy(".MEDIA_MODAL_CLOSE", "responsive") as ImageModal;
+export const MediaModal = findComponentByCodeLazy(".MEDIA_MODAL_CLOSE") as MediaModal;
 
 export const ModalRoot = LazyComponent(() => Modals.ModalRoot);
 export const ModalHeader = LazyComponent(() => Modals.ModalHeader);