Fix plugins using ImageModals (again)
This commit is contained in:
parent
534ab3eb5f
commit
f5f59be1b6
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue