From a6ea03bacc53af38ddeeaec167621d976074deb6 Mon Sep 17 00:00:00 2001 From: sadan4 <117494111+sadan4@users.noreply.github.com> Date: Thu, 24 Oct 2024 07:08:02 -0400 Subject: [PATCH 1/3] ImageZoom: Fix when multiple images with carrousel (#2966) Co-authored-by: Nuckyz <61953774+Nuckyz@users.noreply.github.com> --- src/plugins/imageZoom/index.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/plugins/imageZoom/index.tsx b/src/plugins/imageZoom/index.tsx index adb0ab22..0cd63f05 100644 --- a/src/plugins/imageZoom/index.tsx +++ b/src/plugins/imageZoom/index.tsx @@ -179,6 +179,11 @@ export default definePlugin({ { match: /componentWillUnmount\(\){/, replace: "$&$self.unMountMagnifier();" + }, + + { + match: /componentDidUpdate\(\i\){/, + replace: "$&$self.updateMagnifier(this);" } ] } @@ -215,6 +220,11 @@ export default definePlugin({ } }, + updateMagnifier(instance) { + this.unMountMagnifier(); + this.renderMagnifier(instance); + }, + unMountMagnifier() { this.root?.unmount(); this.currentMagnifierElement = null; From 534ab3eb5f0b8180ce5f48c1252cdfc44e3e660a Mon Sep 17 00:00:00 2001 From: sadan4 <117494111+sadan4@users.noreply.github.com> Date: Thu, 24 Oct 2024 07:09:12 -0400 Subject: [PATCH 2/3] ConsoleJanitor: Brush react-spring deprecation (#2973) --- src/plugins/consoleJanitor/index.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/plugins/consoleJanitor/index.ts b/src/plugins/consoleJanitor/index.ts index b0c8905f..2d5d60ec 100644 --- a/src/plugins/consoleJanitor/index.ts +++ b/src/plugins/consoleJanitor/index.ts @@ -66,6 +66,13 @@ export default definePlugin({ }, patches: [ + { + find: 'react-spring: The "interpolate" function', + replacement: { + match: /,console.warn\('react-spring: The "interpolate" function is deprecated in v10 \(use "to" instead\)'\)/, + replace: "" + } + }, { find: 'console.warn("Window state not initialized"', replacement: { From f5f59be1b665b35a1b07ae094c43abde27df8c0d Mon Sep 17 00:00:00 2001 From: Nuckyz <61953774+Nuckyz@users.noreply.github.com> Date: Thu, 24 Oct 2024 08:10:29 -0300 Subject: [PATCH 3/3] Fix plugins using ImageModals (again) --- src/utils/discord.css | 10 +++++----- src/utils/discord.tsx | 33 +++++++++++++++------------------ src/utils/modal.tsx | 37 ++++++++++++++++++++++++++----------- 3 files changed, 46 insertions(+), 34 deletions(-) diff --git a/src/utils/discord.css b/src/utils/discord.css index a7f95fbe..12d15694 100644 --- a/src/utils/discord.css +++ b/src/utils/discord.css @@ -7,18 +7,18 @@ **/ .vc-image-modal { - background: transparent!important; - box-shadow: none!important; + background: transparent !important; + box-shadow: none !important; display: flex; justify-content: center; align-items: center; - border-radius: 0 + border-radius: 0; } @media(width <= 485px) { .vc-image-modal { - display:relative; + display: relative; overflow: visible; - overflow: initial + overflow: initial; } } diff --git a/src/utils/discord.tsx b/src/utils/discord.tsx index 08de22cc..fed5a5d8 100644 --- a/src/utils/discord.tsx +++ b/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): string { - return openModal(modalProps => ( - - )); +export function openImageModal(item: Except, mediaModalProps?: Omit) { + return openMediaModal({ + className: "vc-image-modal", + fit: "vc-position-inherit", + shouldAnimateCarousel: true, + items: [{ + type: "IMAGE", + original: item.original ?? item.url, + ...item, + }], + ...mediaModalProps + }); } export async function openUserProfile(id: string) { diff --git a/src/utils/modal.tsx b/src/utils/modal.tsx index 7459379e..a11cb3cc 100644 --- a/src/utils/modal.tsx +++ b/src/utils/modal.tsx @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -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 { - type: "IMAGE" | "VIDEO"; +export type MediaModalItem = { url: string; + type: "IMAGE" | "VIDEO"; + original?: string; + alt?: string; width?: number; height?: number; - original?: string; -} + animated?: boolean; + maxWidth?: number; + maxHeight?: number; +} & Record; -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; - items: ImageModalItem[]; -}>; + shouldAnimateCarousel?: boolean; +}; -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(openMediaModalModule).find(v => String(v).includes("modalKey:")); +}); export const ModalRoot = LazyComponent(() => Modals.ModalRoot); export const ModalHeader = LazyComponent(() => Modals.ModalHeader);