From 91f88396c6f1af72b3fd976f3d8e625644a7b2aa Mon Sep 17 00:00:00 2001 From: thororen1234 <78185467+thororen1234@users.noreply.github.com> Date: Tue, 22 Oct 2024 14:56:38 -0400 Subject: [PATCH] ImageModal Fixes from sadan4 --- src/plugins/_api/imageModal.ts | 24 +++++++++++++++ src/plugins/betterRoleContext/index.tsx | 2 +- src/plugins/biggerStreamPreview/index.tsx | 1 + src/plugins/imageZoom/index.tsx | 10 ++---- src/plugins/serverInfo/GuildInfoModal.tsx | 4 ++- src/plugins/serverInfo/index.tsx | 1 + src/plugins/spotifyControls/index.tsx | 1 + src/plugins/viewIcons/index.tsx | 1 + src/utils/discord.css | 3 ++ src/utils/discord.tsx | 37 ++++++++++++----------- src/utils/modal.tsx | 5 +-- src/webpack/common/classes.ts | 3 +- src/webpack/common/types/classes.d.ts | 5 --- 13 files changed, 61 insertions(+), 36 deletions(-) create mode 100644 src/plugins/_api/imageModal.ts create mode 100644 src/utils/discord.css diff --git a/src/plugins/_api/imageModal.ts b/src/plugins/_api/imageModal.ts new file mode 100644 index 00000000..c4163b31 --- /dev/null +++ b/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}))` + } + } + ] +}); diff --git a/src/plugins/betterRoleContext/index.tsx b/src/plugins/betterRoleContext/index.tsx index bf4cf0f3..dc4e68fe 100644 --- a/src/plugins/betterRoleContext/index.tsx +++ b/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, diff --git a/src/plugins/biggerStreamPreview/index.tsx b/src/plugins/biggerStreamPreview/index.tsx index 8cca912b..17296789 100644 --- a/src/plugins/biggerStreamPreview/index.tsx +++ b/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 diff --git a/src/plugins/imageZoom/index.tsx b/src/plugins/imageZoom/index.tsx index 59b2667c..c789157c 100644 --- a/src/plugins/imageZoom/index.tsx +++ b/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. - // 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, - replace: `$&id: '${ELEMENT_ID}',` + match: /\.slide,\i\),/g, + replace: `$&id:"${ELEMENT_ID}",` } }, diff --git a/src/plugins/serverInfo/GuildInfoModal.tsx b/src/plugins/serverInfo/GuildInfoModal.tsx index fb8df2ce..d0ede9c5 100644 --- a/src/plugins/serverInfo/GuildInfoModal.tsx +++ b/src/plugins/serverInfo/GuildInfoModal.tsx @@ -89,7 +89,9 @@ function GuildInfoModal({ guild }: GuildProps) { ? openImageModal(iconUrl)} + onClick={() => openImageModal(iconUrl, { + width: 256 + })} /> :
{guild.acronym}
} diff --git a/src/plugins/serverInfo/index.tsx b/src/plugins/serverInfo/index.tsx index be3172f0..7a6fa62c 100644 --- a/src/plugins/serverInfo/index.tsx +++ b/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 diff --git a/src/plugins/spotifyControls/index.tsx b/src/plugins/spotifyControls/index.tsx index 0b99f28a..b9880cc1 100644 --- a/src/plugins/spotifyControls/index.tsx +++ b/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", diff --git a/src/plugins/viewIcons/index.tsx b/src/plugins/viewIcons/index.tsx index c154de63..b0315f5a 100644 --- a/src/plugins/viewIcons/index.tsx +++ b/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, diff --git a/src/utils/discord.css b/src/utils/discord.css new file mode 100644 index 00000000..410e0c67 --- /dev/null +++ b/src/utils/discord.css @@ -0,0 +1,3 @@ +.vc-imagemodal-fix { + position: inherit; +} diff --git a/src/utils/discord.tsx b/src/utils/discord.tsx index 4c7cc38a..eae5e0e7 100644 --- a/src/utils/discord.tsx +++ b/src/utils/discord.tsx @@ -16,11 +16,13 @@ * along with this program. If not, see . */ +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>): string { return openModal(modalProps => ( - - } - // Don't render forward message button - renderForwardComponent={() => null} - shouldHideMediaOptions={false} - shouldAnimate - {...props} - /> - + renderLinkComponent={props => } + // Don't render forward message button scaleDown_f97a12 contain_f97a12 + renderForwardComponent={() => null} + shouldHideMediaOptions={false} + shouldAnimate={true} + fit={FIX_CLASS_NAME} + items={[{ + ...props, + type: "IMAGE", + url, + }]} + /> )); } diff --git a/src/utils/modal.tsx b/src/utils/modal.tsx index 79f77708..8c6a68ce 100644 --- a/src/utils/modal.tsx +++ b/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); diff --git a/src/webpack/common/classes.ts b/src/webpack/common/classes.ts index ca3d75f5..fd4f36ee 100644 --- a/src/webpack/common/classes.ts +++ b/src/webpack/common/classes.ts @@ -16,9 +16,8 @@ * along with this program. If not, see . */ -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"); diff --git a/src/webpack/common/types/classes.d.ts b/src/webpack/common/types/classes.d.ts index b6066177..e30e25af 100644 --- a/src/webpack/common/types/classes.d.ts +++ b/src/webpack/common/types/classes.d.ts @@ -16,11 +16,6 @@ * along with this program. If not, see . */ -export interface ImageModalClasses { - image: string, - modal: string, -} - export interface ButtonWrapperClasses { hoverScale: string; buttonWrapper: string;