Merge remote-tracking branch 'upstream/main'

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: {

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;

src/utils/discord.css

@@ -8,18 +8,18 @@
 **/
 
 .vc-image-modal {
-    background: transparent!important;
+    background: transparent !important;
-    box-shadow: none!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;
     }
 }

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",
-                type: "IMAGE",
+            original: item.original ?? item.url,
-                original: props.url,
+            ...item,
-                ...props,
+        }],
-            }]}
+        ...mediaModalProps
-            onClose={modalProps.onClose}
+    });
-            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);