From 6fc7fc9f97ab108b5e0ae01a3ad7251f98a2c275 Mon Sep 17 00:00:00 2001 From: thororen1234 <78185467+thororen1234@users.noreply.github.com> Date: Sat, 19 Oct 2024 11:40:39 -0400 Subject: [PATCH] Fixes --- src/plugins/betterRoleContext/index.tsx | 4 +-- src/plugins/biggerStreamPreview/index.tsx | 4 +-- src/plugins/imageZoom/index.tsx | 6 ++-- src/plugins/serverInfo/GuildInfoModal.tsx | 8 ++--- .../spotifyControls/PlayerComponent.tsx | 4 +-- src/plugins/viewIcons/index.tsx | 7 ++-- src/utils/discord.tsx | 35 +++++++++---------- src/utils/modal.tsx | 30 +++++++++------- 8 files changed, 51 insertions(+), 47 deletions(-) diff --git a/src/plugins/betterRoleContext/index.tsx b/src/plugins/betterRoleContext/index.tsx index bf4cf0f37..f9c06110b 100644 --- a/src/plugins/betterRoleContext/index.tsx +++ b/src/plugins/betterRoleContext/index.tsx @@ -8,7 +8,7 @@ import { definePluginSettings } from "@api/Settings"; import { getUserSettingLazy } from "@api/UserSettings"; import { ImageIcon } from "@components/Icons"; import { Devs } from "@utils/constants"; -import { getCurrentGuild, openImageModal } from "@utils/discord"; +import { getCurrentGuild, openMediaModal } from "@utils/discord"; import definePlugin, { OptionType } from "@utils/types"; import { findByPropsLazy } from "@webpack"; import { Clipboard, GuildStore, Menu, PermissionStore } from "@webpack/common"; @@ -99,7 +99,7 @@ export default definePlugin({ id="vc-view-role-icon" label="View Role Icon" action={() => { - openImageModal(`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${role.id}/${role.icon}.${settings.store.roleIconFileFormat}`); + openMediaModal(`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${role.id}/${role.icon}.${settings.store.roleIconFileFormat}`); }} icon={ImageIcon} /> diff --git a/src/plugins/biggerStreamPreview/index.tsx b/src/plugins/biggerStreamPreview/index.tsx index 8cca912bc..de0ca55ed 100644 --- a/src/plugins/biggerStreamPreview/index.tsx +++ b/src/plugins/biggerStreamPreview/index.tsx @@ -19,7 +19,7 @@ import { NavContextMenuPatchCallback } from "@api/ContextMenu"; import { ScreenshareIcon } from "@components/Icons"; import { Devs } from "@utils/constants"; -import { openImageModal } from "@utils/discord"; +import { openMediaModal } from "@utils/discord"; import definePlugin from "@utils/types"; import { Menu } from "@webpack/common"; import { Channel, User } from "discord-types/general"; @@ -57,7 +57,7 @@ export const handleViewPreview = async ({ guildId, channelId, ownerId }: Applica const previewUrl = await ApplicationStreamPreviewStore.getPreviewURL(guildId, channelId, ownerId); if (!previewUrl) return; - openImageModal(previewUrl); + openMediaModal(previewUrl); }; export const addViewStreamContext: NavContextMenuPatchCallback = (children, { userId }: { userId: string | bigint; }) => { diff --git a/src/plugins/imageZoom/index.tsx b/src/plugins/imageZoom/index.tsx index 59b2667c9..273d022e4 100644 --- a/src/plugins/imageZoom/index.tsx +++ b/src/plugins/imageZoom/index.tsx @@ -156,14 +156,14 @@ export default definePlugin({ patches: [ { - find: "Messages.OPEN_IN_BROWSER", + find: ".contain,SCALE_DOWN:", replacement: { // there are 2 image thingies. one for carosuel and one for the single image. // so thats why i added global flag. // also idk if this patch is good, should it be more specific? // https://regex101.com/r/xfvNvV/1 - match: /return.{1,200}\.wrapper.{1,200}src:\i,/g, - replace: `$&id: '${ELEMENT_ID}',` + match: /\.slide,\i\),/g, + replace: `$&id:"${ELEMENT_ID}",` } }, diff --git a/src/plugins/serverInfo/GuildInfoModal.tsx b/src/plugins/serverInfo/GuildInfoModal.tsx index fb8df2ce1..e2007dfe4 100644 --- a/src/plugins/serverInfo/GuildInfoModal.tsx +++ b/src/plugins/serverInfo/GuildInfoModal.tsx @@ -7,7 +7,7 @@ import "./styles.css"; import { classNameFactory } from "@api/Styles"; -import { openImageModal, openUserProfile } from "@utils/discord"; +import { openMediaModal, openUserProfile } from "@utils/discord"; import { classes } from "@utils/misc"; import { ModalRoot, ModalSize, openModal } from "@utils/modal"; import { useAwaiter } from "@utils/react"; @@ -80,7 +80,7 @@ function GuildInfoModal({ guild }: GuildProps) { className={cl("banner")} src={bannerUrl} alt="" - onClick={() => openImageModal(bannerUrl)} + onClick={() => openMediaModal(bannerUrl)} /> )} @@ -89,7 +89,7 @@ function GuildInfoModal({ guild }: GuildProps) { ? openImageModal(iconUrl)} + onClick={() => openMediaModal(iconUrl)} /> :
{guild.acronym}
} @@ -151,7 +151,7 @@ function Owner(guildId: string, owner: User) { return (
- openImageModal(ownerAvatarUrl)} /> + openMediaModal(ownerAvatarUrl)} /> {Parser.parse(`<@${owner.id}>`)}
); diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx index aef0c7362..72b637337 100644 --- a/src/plugins/spotifyControls/PlayerComponent.tsx +++ b/src/plugins/spotifyControls/PlayerComponent.tsx @@ -21,7 +21,7 @@ import "./spotifyStyles.css"; import { Flex } from "@components/Flex"; import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons"; import { debounce } from "@shared/debounce"; -import { openImageModal } from "@utils/discord"; +import { openMediaModal } from "@utils/discord"; import { classes, copyWithToast } from "@utils/misc"; import { ContextMenuApi, FluxDispatcher, Forms, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common"; @@ -229,7 +229,7 @@ function AlbumContextMenu({ track }: { track: Track; }) { id="view-cover" label="View Album Cover" // trolley - action={() => openImageModal(track.album.image.url)} + action={() => openMediaModal(track.album.image.url)} icon={ImageIcon} /> >): 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>): string { + media = typeof media === "string" ? { url: media } : media; + media.original ??= media.url; + media.type ??= "IMAGE"; return openModal(modalProps => ( - - } - // Don't render forward message button - renderForwardComponent={() => null} - shouldHideMediaOptions={false} - shouldAnimate - {...props} - /> - + {...mediaModalProps} + shouldAnimateCarousel + items={[media]} + /> )); } diff --git a/src/utils/modal.tsx b/src/utils/modal.tsx index 79f777088..78e86be22 100644 --- a/src/utils/modal.tsx +++ b/src/utils/modal.tsx @@ -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; + +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);