ImageModal Fixes from sadan4

src/plugins/_api/imageModal.ts

@@ -0,0 +1,24 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+
+export default definePlugin({
+    name: "ImageModalAPI",
+    authors: [Devs.sadan, Devs.Nuckyz],
+    description: "Allows you to open Image Modals",
+    patches: [
+        {
+            find: "SCALE_DOWN:",
+            replacement: {
+                match: /!\(null==(\i)\|\|0===\i\|\|null==(\i)\|\|0===\i\)/,
+                replace: (_, width, height) => `!((null == ${width} || 0 === ${width}) && (null == ${height} || 0 === ${height}))`
+            }
+        }
+    ]
+});

src/plugins/betterRoleContext/index.tsx

@@ -65,7 +65,7 @@ export default definePlugin({
     name: "BetterRoleContext",
     description: "Adds options to copy role color / edit role / view role icon when right clicking roles in the user profile",
     authors: [Devs.Ven, Devs.goodbee],
-    dependencies: ["UserSettingsAPI"],
+    dependencies: ["UserSettingsAPI", "ImageModalAPI"],
 
     settings,
 

src/plugins/biggerStreamPreview/index.tsx

@@ -89,6 +89,7 @@ export default definePlugin({
     name: "BiggerStreamPreview",
     description: "This plugin allows you to enlarge stream previews",
     authors: [Devs.phil],
+    dependencies: ["ImageModalAPI"],
     contextMenus: {
         "user-context": userContextPatch,
         "stream-context": streamContextPatch

src/plugins/imageZoom/index.tsx

@@ -156,14 +156,10 @@ 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.
+                match: /\.slide,\i\),/g,
-                // so thats why i added global flag.
+                replace: `$&id:"${ELEMENT_ID}",`
-                // 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,
-                replace: `$&id: '${ELEMENT_ID}',`
             }
         },
 

src/plugins/serverInfo/GuildInfoModal.tsx

@@ -89,7 +89,9 @@ function GuildInfoModal({ guild }: GuildProps) {
                     ? <img
                         src={iconUrl}
                         alt=""
-                        onClick={() => openImageModal(iconUrl)}
+                        onClick={() => openImageModal(iconUrl, {
+                            width: 256
+                        })}
                     />
                     : <div aria-hidden className={classes(IconClasses.childWrapper, IconClasses.acronym)}>{guild.acronym}</div>
                 }

src/plugins/serverInfo/index.tsx

@@ -31,6 +31,7 @@ export default definePlugin({
     description: "Allows you to view info about a server",
     authors: [Devs.Ven, Devs.Nuckyz],
     tags: ["guild", "info", "ServerProfile"],
+    dependencies: ["ImageModalAPI"],
     contextMenus: {
         "guild-context": Patch,
         "guild-header-popout": Patch

src/plugins/spotifyControls/index.tsx

@@ -33,6 +33,7 @@ export default definePlugin({
     name: "SpotifyControls",
     description: "Adds a Spotify player above the account panel",
     authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000],
+    dependencies: ["ImageModalAPI"],
     options: {
         hoverControls: {
             description: "Show controls on hover",

src/plugins/viewIcons/index.tsx

@@ -170,6 +170,7 @@ export default definePlugin({
     name: "ViewIcons",
     authors: [Devs.Ven, Devs.TheKodeToad, Devs.Nuckyz, Devs.nyx],
     description: "Makes avatars and banners in user profiles clickable, adds View Icon/Banner entries in the user, server and group channel context menu.",
+    dependencies: ["ImageModalAPI"],
     tags: ["ImageUtilities"],
 
     settings,

src/utils/discord.css

@@ -0,0 +1,3 @@
+.vc-imagemodal-fix {
+    position: inherit;
+}

src/utils/discord.tsx

@@ -16,11 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./discord.css";
+
 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, MaskedLink, 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 { ImageModal, openModal } from "./modal";
 
 /**
  * Open the invite modal
@@ -108,25 +110,24 @@ 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 {
     return openModal(modalProps => (
-        <ModalRoot
+        <ImageModal
             {...modalProps}
-            className={ModalImageClasses.modal}
+            renderLinkComponent={props => <MaskedLink {...props} />}
-            size={ModalSize.DYNAMIC}>
+            // Don't render forward message button scaleDown_f97a12 contain_f97a12
-            <ImageModal
+            renderForwardComponent={() => null}
-                className={ModalImageClasses.image}
+            shouldHideMediaOptions={false}
-                original={url}
+            shouldAnimate={true}
-                placeholder={url}
+            fit={FIX_CLASS_NAME}
-                src={url}
+            items={[{
-                renderLinkComponent={props => <MaskedLink {...props} />}
+                ...props,
-                // Don't render forward message button
+                type: "IMAGE",
-                renderForwardComponent={() => null}
+                url,
-                shouldHideMediaOptions={false}
+            }]}
-                shouldAnimate
+        />
-                {...props}
-            />
-        </ModalRoot>
     ));
 }
 

src/utils/modal.tsx

@@ -101,7 +101,8 @@ export const Modals = findByPropsLazy("ModalRoot", "ModalCloseButton") as {
     }>;
 };
 
-export type ImageModal = ComponentType<{
+// FIXME: type this
+export type ImageModal = any & ComponentType<{
     className?: string;
     src: string;
     placeholder: string;
@@ -119,7 +120,7 @@ export type ImageModal = ComponentType<{
     shouldHideMediaOptions?: boolean;
 }>;
 
-export const ImageModal = findComponentByCodeLazy(".MEDIA_MODAL_CLOSE", "responsive") as ImageModal;
+export const ImageModal = findComponentByCodeLazy(".MEDIA_MODAL_CLOSE") as ImageModal;
 
 export const ModalRoot = LazyComponent(() => Modals.ModalRoot);
 export const ModalHeader = LazyComponent(() => Modals.ModalHeader);

src/webpack/common/classes.ts

@@ -16,9 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { findByPropsLazy, findLazy } from "@webpack";
+import { findByPropsLazy } from "@webpack";
 
 import * as t from "./types/classes";
 
-export const ModalImageClasses: t.ImageModalClasses = findLazy(m => m.image && m.modal && !m.applicationIcon);
 export const ButtonWrapperClasses: t.ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent");

src/webpack/common/types/classes.d.ts

@@ -16,11 +16,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-export interface ImageModalClasses {
-    image: string,
-    modal: string,
-}
-
 export interface ButtonWrapperClasses {
     hoverScale: string;
     buttonWrapper: string;