This commit is contained in:
thororen1234 2024-10-19 11:40:39 -04:00
parent 28794c4d53
commit 6fc7fc9f97
8 changed files with 51 additions and 47 deletions

View file

@ -17,10 +17,10 @@
*/
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, 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 { MediaData, MediaModal, openModal } from "./modal";
/**
* Open the invite modal
@ -108,25 +108,22 @@ export function sendMessage(
return MessageActions.sendMessage(channelId, messageData, waitForChannelReady, extra);
}
export function openImageModal(url: string, props?: Partial<React.ComponentProps<ImageModal>>): string {
/**
*
* @param media The url of the media or its data
* @param mediaModalProps Additional props for the image modal
*/
export function openMediaModal(media: string | MediaData, mediaModalProps?: Partial<React.ComponentProps<MediaModal>>): string {
media = typeof media === "string" ? { url: media } : media;
media.original ??= media.url;
media.type ??= "IMAGE";
return openModal(modalProps => (
<ModalRoot
<MediaModal
{...modalProps}
className={ModalImageClasses.modal}
size={ModalSize.DYNAMIC}>
<ImageModal
className={ModalImageClasses.image}
original={url}
placeholder={url}
src={url}
renderLinkComponent={props => <MaskedLink {...props} />}
// Don't render forward message button
renderForwardComponent={() => null}
shouldHideMediaOptions={false}
shouldAnimate
{...props}
/>
</ModalRoot>
{...mediaModalProps}
shouldAnimateCarousel
items={[media]}
/>
));
}

View file

@ -101,25 +101,31 @@ export const Modals = findByPropsLazy("ModalRoot", "ModalCloseButton") as {
}>;
};
export type ImageModal = ComponentType<{
className?: string;
src: string;
placeholder: string;
original: string;
// @TODO Type this
export type MediaData = {
url: string;
original?: string;
type?: string;
alt?: string;
width?: number;
height?: number;
animated?: boolean;
responsive?: boolean;
renderLinkComponent(props: any): ReactNode;
renderForwardComponent(props: any): ReactNode;
maxWidth?: number;
maxHeight?: number;
shouldAnimate?: boolean;
onClose?(): void;
} & Record<PropertyKey, any>;
export type MediaModal = ComponentType<{
onClose?: () => void;
items: MediaData[];
startingIndex?: number;
onIndexChange?: (...args: any[]) => void;
fit?: any;
shouldRedactExplicitContent?: boolean;
shouldHideMediaOptions?: boolean;
shouldAnimateCarousel?: boolean;
className?: string;
}>;
export const ImageModal = findComponentByCodeLazy(".MEDIA_MODAL_CLOSE", "responsive") as ImageModal;
export const MediaModal = findComponentByCodeLazy(".MEDIA_MODAL_CLOSE") as MediaModal;
export const ModalRoot = LazyComponent(() => Modals.ModalRoot);
export const ModalHeader = LazyComponent(() => Modals.ModalHeader);