Fix plugins using ImageModals (again)

This commit is contained in:
Nuckyz 2024-10-24 08:10:29 -03:00
parent 534ab3eb5f
commit f5f59be1b6
No known key found for this signature in database
GPG key ID: 440BF8296E1C4AD9
3 changed files with 46 additions and 34 deletions

View file

@ -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;
}
}

View file

@ -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 {
return openModal(modalProps => (
<ImageModal
{...modalProps}
className="vc-image-modal"
fit="vc-position-inherit"
items={[{
type: "IMAGE",
original: props.url,
...props,
}]}
onClose={modalProps.onClose}
shouldHideMediaOptions={false}
shouldAnimate
/>
));
export function openImageModal(item: Except<MediaModalItem, "type">, mediaModalProps?: Omit<MediaModalProps, "items">) {
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) {

View file

@ -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 {
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<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;
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<any>(openMediaModalModule).find(v => String(v).includes("modalKey:"));
});
export const ModalRoot = LazyComponent(() => Modals.ModalRoot);
export const ModalHeader = LazyComponent(() => Modals.ModalHeader);