mirrors/Equicord
1
1
Fork 0
mirror of https://github.com/Equicord/Equicord.git synced 2025-06-09 06:33:03 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge branch 'dev'

Browse source
This commit is contained in:
thororen1234 2024-10-22 23:01:57 -04:00
commit a8ae13ec08
26 changed files with 269 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -1,7 +1,7 @@
{
"name": "equicord",
"private": "true",
"version": "1.10.4",
"version": "1.10.5",
"description": "The other cutest Discord client mod",
"homepage": "https://github.com/Equicord/Equicord#readme",
"bugs": {
@ -119,4 +119,4 @@
"node": ">=18",
"pnpm": ">=9"
}
}
}

70
src/components/PluginSettings/PluginModal.css
View file

@ -4,4 +4,74 @@
.vc-plugin-modal-description {
flex-grow: 1;
}
/* warning modal */
.vc-text-selectable {
user-select: none;
}
.vc-warning-info {
gap: 15px;
flex-direction: column;
user-select: none;
}
.vc-warning-info img {
width: 70%;
height: auto;
display: block;
margin: auto auto 10px;
}
.vc-warning-info strong {
font-weight: bold;
}
.vc-warning-info button.disable-warning {
font-size: 0.8rem;
background-color: transparent;
color: red;
cursor: pointer;
margin: 0 auto;
width: fit-content;
text-decoration: underline;
}
.vc-warning-info button.disable-warning:hover {
background-color: transparent;
color: var(--text-danger);
}
.vc-warning-info button.disable-warning:active {
background-color: transparent;
}
.text-danger {
color: var(--text-danger);
font-size: 1.4rem;
font-weight: bold;
}
.text-normal {
color: var(--text-normal);
font-size: 1.2rem;
}
.text-normal.margin-bottom {
margin-bottom: 10px;
}
.button-danger-background {
background-color: var(--button-danger-background);
}
.button-danger-background-no-margin {
background-color: var(--button-danger-background) !important;
color: var(--header-primary);
}
.vc-modal-close-button {
margin-left: auto !important;
}

25
src/components/PluginSettings/PluginModal.tsx
View file

@ -407,36 +407,27 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
transitionState={warningModalProps.transitionState}
>
<ModalHeader separator={false}>
<Text style={{ flexGrow: 1, color: "var(--text-danger)", fontSize: "1.4rem", fontWeight: "bold" }}>Warning: Dangerous Action</Text>
<ModalCloseButton onClick={warningModalProps.onClose} />
<Text className="text-danger">Warning: Dangerous Action</Text>
<ModalCloseButton onClick={warningModalProps.onClose} className="vc-modal-close-button" />
</ModalHeader>
<ModalContent>
<Forms.FormSection>
<Flex className="vc-warning-info" style={{ gap: "15px", flexDirection: "column", userSelect: "none" }}>
<Flex className="vc-warning-info">
<img
src="https://media.tenor.com/Y6DXKZiBCs8AAAAi/stavario-josefbenes.gif"
alt="Warning"
style={{ width: "60%", height: "auto", marginBottom: "10px", display: "block", margin: "auto" }}
/>
<Text style={{ fontSize: "1.2rem", color: "var(--text-normal)" }}>
<Text className="text-normal">
You are about to reset all settings for <strong>{plugin.name}</strong> to their default values.
</Text>
<Text style={{ fontSize: "1.2rem", color: "var(--text-danger)", fontWeight: "bold" }}>
<Text className="text-danger">
This action is irreversible.
</Text>
<Text style={{ fontSize: "1.2rem", color: "var(--text-normal)", marginBottom: "10px" }}>
<Text className="text-normal margin-bottom">
If you are certain you want to proceed, click <strong>Confirm Reset</strong>. Otherwise, click <strong>Cancel</strong>.
</Text>
{!Settings.ignoreResetWarning && (
<Button style={{
fontSize: "0.8rem",
backgroundColor: "transparent",
color: "red",
cursor: "pointer",
margin: "0 auto",
width: "fit-content",
textDecoration: "underline"
}} onClick={() => {
<Button className="disable-warning" onClick={() => {
Settings.ignoreResetWarning = true;
}}>
Disable this warning forever
@ -466,7 +457,7 @@ export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, o
}}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
style={{ marginLeft: "10px", backgroundColor: "var(--button-danger-background)" }}
className="button-danger-background-no-margin"
>
Confirm Reset
</Button>

22
src/components/PluginSettings/index.tsx
View file

@ -429,35 +429,26 @@ export default function PluginSettings() {
{enabledPlugins.length > 0 && (
<Button
size={Button.Sizes.SMALL}
style={{ backgroundColor: "var(--button-danger-background)", margin: "20px 0" }}
className="button-danger-background"
onClick={() => {
if (Settings.ignoreResetWarning) return resetCheckAndDo();
return Alerts.show({
title: "Disable All Plugins",
body: (
<div style={{ textAlign: "center" }}>
<div className="alert-body">
<img
src="https://media.tenor.com/Y6DXKZiBCs8AAAAi/stavario-josefbenes.gif"
alt="Warning"
style={{ width: "60%", height: "auto", marginBottom: "10px", display: "block", margin: "auto" }}
/>
<p style={{ fontSize: "1.2rem", color: "var(--text-danger)", fontWeight: "bold" }}>
WARNING: You are about to disable <span style={{ textDecoration: "underline" }}>{enabledPlugins.length}</span> plugins!
<p className="warning-text">
WARNING: You are about to disable <span>{enabledPlugins.length}</span> plugins!
</p>
<p style={{ fontSize: "1rem" }}>
<p>
Are you absolutely sure you want to proceed? You can always enable them back later.
</p>
{!Settings.ignoreResetWarning && (
<Button style={{
fontSize: "0.8rem",
backgroundColor: "transparent",
color: "red",
cursor: "pointer",
margin: "0 auto",
width: "fit-content",
textDecoration: "underline"
}} onClick={() => {
<Button className="disable-warning" onClick={() => {
Settings.ignoreResetWarning = true;
}}>
Disable this warning forever
@ -466,6 +457,7 @@ export default function PluginSettings() {
</div>
),
confirmText: "Disable All",
confirmColor: "button-danger-background-no-margin",
cancelText: "Cancel",
onConfirm: () => {
resetCheckAndDo();

63
src/components/PluginSettings/styles.css
View file

@ -124,3 +124,66 @@
height: 100%;
margin: 0 10px;
}
/* disable all modal */
.button-danger-background {
background-color: var(--button-danger-background) !important;
margin: 20px 0;
}
.button-danger-background-no-margin {
background-color: var(--button-danger-background) !important;
color: var(--header-primary);
}
.button-danger-background:hover {
background-color: var(--button-danger-background-hover);
}
.alert-body {
text-align: center;
}
.alert-body img {
width: 60%;
height: auto;
display: block;
margin: auto auto 10px;
border-radius: 8px;
}
.alert-body p.warning-text {
font-size: 1.2rem;
color: var(--text-danger);
font-weight: bold;
}
.alert-body p {
font-size: 1rem;
}
.alert-body span {
text-decoration: underline;
}
.disable-warning {
font-size: 0.8rem;
background-color: transparent !important;
color: var(--text-danger) !important;
cursor: pointer;
margin: 0 auto;
width: fit-content;
text-decoration: underline;
transition: color 0.2s ease;
}
.disable-warning:hover {
color: var(--text-danger);
background-color: transparent;
opacity: 0.8;
}
.disable-warning:active {
background-color: transparent;
}

5
src/equicordplugins/moreStickers/upload.ts
View file

@ -134,8 +134,9 @@ export async function sendSticker({
file = await toGIF(sticker.image, ffmpegState.ffmpeg);
}
else {
const response = await fetch(sticker.image, { cache: "force-cache" });
// const blob = await response.blob();
const url = new URL(sticker.image);
url.searchParams.set("t", Date.now().toString()); // To prevent caching, in order to avoid CORS bug in Chrome
const response = await fetch(sticker.image);
const orgImageUrl = URL.createObjectURL(await response.blob());
const processedImage = await resizeImage(orgImageUrl);

4
src/plugins/_api/imageModal.ts → src/plugins/_api/dynamicImageModalApi.ts
View file

@ -9,9 +9,9 @@ import definePlugin from "@utils/types";
export default definePlugin({
name: "ImageModalAPI",
name: "DynamicImageModalAPI",
authors: [Devs.sadan, Devs.Nuckyz],
description: "Allows you to open Image Modals",
description: "Allows you to omit either width or height when opening an image modal",
patches: [
{
find: "SCALE_DOWN:",

2
src/plugins/_core/settings.tsx
View file

@ -209,7 +209,7 @@ export default definePlugin({
},
get electronVersion() {
return VencordNative.native.getVersions().electron || window.armcord?.electron || null;
return VencordNative.native.getVersions().electron || window.legcord?.electron || null;
},
get chromiumVersion() {

2
src/plugins/_core/supportHelper.tsx
View file

@ -75,7 +75,7 @@ async function generateDebugInfoMessage() {
if (IS_DISCORD_DESKTOP) return `Discord Desktop v${DiscordNative.app.getVersion()}`;
if (IS_VESKTOP) return `Vesktop v${VesktopNative.app.getVersion()}`;
if (IS_EQUIBOP) return `Equibop v${VesktopNative.app.getVersion()}`;
if ("armcord" in window) return `ArmCord v${window.armcord.version}`;
if ("legcord" in window) return `LegCord v${window.armcord.version}`;
// @ts-expect-error
const name = typeof unsafeWindow !== "undefined" ? "UserScript" : "Web";

4
src/plugins/arRPC.web/index.tsx
View file

@ -73,8 +73,8 @@ export default definePlugin({
},
async start() {
// ArmCord comes with its own arRPC implementation, so this plugin just confuses users
if ("armcord" in window) return;
// Legcord comes with its own arRPC implementation, so this plugin just confuses users
if ("legcord" in window) return;
if (ws) ws.close();
ws = new WebSocket("ws://127.0.0.1:1337"); // try to open WebSocket

8
src/plugins/betterRoleContext/index.tsx
View file

@ -65,7 +65,7 @@ export default definePlugin({
name: "BetterRoleContext",
description: "Adds options to copy role color / edit role / view role icon when right clicking roles in the user profile",
authors: [Devs.Ven, Devs.goodbee],
dependencies: ["UserSettingsAPI", "ImageModalAPI"],
dependencies: ["UserSettingsAPI"],
settings,
@ -99,7 +99,11 @@ 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}`);
openImageModal({
url: `${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${role.id}/${role.icon}.${settings.store.roleIconFileFormat}`,
height: 128,
width: 128
});
}}
icon={ImageIcon}
/>

7
src/plugins/biggerStreamPreview/index.tsx
View file

@ -57,7 +57,11 @@ export const handleViewPreview = async ({ guildId, channelId, ownerId }: Applica
const previewUrl = await ApplicationStreamPreviewStore.getPreviewURL(guildId, channelId, ownerId);
if (!previewUrl) return;
openImageModal(previewUrl);
openImageModal({
url: previewUrl,
height: 720,
width: 1280
});
};
export const addViewStreamContext: NavContextMenuPatchCallback = (children, { userId }: { userId: string | bigint; }) => {
@ -89,7 +93,6 @@ export default definePlugin({
name: "BiggerStreamPreview",
description: "This plugin allows you to enlarge stream previews",
authors: [Devs.phil],
dependencies: ["ImageModalAPI"],
contextMenus: {
"user-context": userContextPatch,
"stream-context": streamContextPatch

7
src/plugins/imageZoom/index.tsx
View file

@ -181,13 +181,6 @@ export default definePlugin({
replace: "$&$self.unMountMagnifier();"
}
]
},
{
find: ".carouselModal",
replacement: {
match: /(?<=\.carouselModal.{0,100}onClick:)\i,/,
replace: "()=>{},"
}
}
],

9
src/plugins/imageZoom/styles.css
View file

@ -21,12 +21,3 @@
/* https://googlechrome.github.io/samples/image-rendering-pixelated/index.html */
}
/* make the carousel take up less space so we can click the backdrop and exit out of it */
[class*="modalCarouselWrapper_"] {
top: 0 !important;
}
[class*="carouselModal_"] {
height: 0 !important;
}

11
src/plugins/mutualGroupDMs/index.tsx
View file

@ -28,7 +28,7 @@ const SelectedChannelActionCreators = findByPropsLazy("selectPrivateChannel");
const UserUtils = findByPropsLazy("getGlobalName");
const ProfileListClasses = findByPropsLazy("emptyIconFriends", "emptyIconGuilds");
const ExpandableList = findComponentByCodeLazy(".mutualFriendItem]");
const ExpandableList = findComponentByCodeLazy('"PRESS_SECTION"');
const GuildLabelClasses = findByPropsLazy("guildNick", "guildAvatarWithoutIcon");
function getGroupDMName(channel: Channel) {
@ -142,16 +142,15 @@ export default definePlugin({
const mutualGDms = getMutualGroupDms(user.id);
if (mutualGDms.length === 0) return null;
const header = getMutualGDMCountText(user);
return (
<>
{Divider}
<ExpandableList
className={listStyle}
header={header}
isLoadingHeader={false}
children={renderClickableGDMs(mutualGDms, () => { })}
listClassName={listStyle}
header={"Mutual Groups"}
isLoading={false}
items={renderClickableGDMs(mutualGDms, () => { })}
/>
</>
);

9
src/plugins/openInApp/index.ts
View file

@ -91,15 +91,6 @@ export default definePlugin({
replace: "async function $1 if(await $self.handleLink(...arguments)) return;"
}
},
// Make Spotify profile activity links open in app on web
{
find: "WEB_OPEN(",
predicate: () => !IS_DISCORD_DESKTOP && pluginSettings.store.spotify,
replacement: {
match: /\i\.\i\.isProtocolRegistered\(\)(.{0,100})window.open/g,
replace: "true$1VencordNative.native.openExternal"
}
},
{
find: "no artist ids in metadata",
predicate: () => !IS_DISCORD_DESKTOP && pluginSettings.store.spotify,

21
src/plugins/serverInfo/GuildInfoModal.tsx
View file

@ -80,7 +80,10 @@ function GuildInfoModal({ guild }: GuildProps) {
className={cl("banner")}
src={bannerUrl}
alt=""
onClick={() => openImageModal(bannerUrl)}
onClick={() => openImageModal({
url: bannerUrl,
width: 1024
})}
/>
)}
@ -89,8 +92,10 @@ function GuildInfoModal({ guild }: GuildProps) {
? <img
src={iconUrl}
alt=""
onClick={() => openImageModal(iconUrl, {
width: 256
onClick={() => openImageModal({
url: iconUrl,
height: 512,
width: 512,
})}
/>
: <div aria-hidden className={classes(IconClasses.childWrapper, IconClasses.acronym)}>{guild.acronym}</div>
@ -153,7 +158,15 @@ function Owner(guildId: string, owner: User) {
return (
<div className={cl("owner")}>
<img src={ownerAvatarUrl} alt="" onClick={() => openImageModal(ownerAvatarUrl)} />
<img
src={ownerAvatarUrl}
alt=""
onClick={() => openImageModal({
url: ownerAvatarUrl,
height: 512,
width: 512
})}
/>
{Parser.parse(`<@${owner.id}>`)}
</div>
);

2
src/plugins/serverInfo/index.tsx
View file

@ -30,8 +30,8 @@ export default definePlugin({
name: "ServerInfo",
description: "Allows you to view info about a server",
authors: [Devs.Ven, Devs.Nuckyz],
dependencies: ["DynamicImageModalAPI"],
tags: ["guild", "info", "ServerProfile"],
dependencies: ["ImageModalAPI"],
contextMenus: {
"guild-context": Patch,
"guild-header-popout": Patch

2
src/plugins/spotifyControls/PlayerComponent.tsx
View file

@ -229,7 +229,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
id="view-cover"
label="View Album Cover"
// trolley
action={() => openImageModal(track.album.image.url)}
action={() => openImageModal(track.album.image)}
icon={ImageIcon}
/>
<Menu.MenuControlItem

1
src/plugins/spotifyControls/index.tsx
View file

@ -33,7 +33,6 @@ export default definePlugin({
name: "SpotifyControls",
description: "Adds a Spotify player above the account panel",
authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000],
dependencies: ["ImageModalAPI"],
options: {
hoverControls: {
description: "Show controls on hover",

40
src/plugins/viewIcons/index.tsx
View file

@ -67,7 +67,10 @@ const settings = definePluginSettings({
}
});
function openImage(url: string) {
const openAvatar = (url: string) => openImage(url, 512, 512);
const openBanner = (url: string) => openImage(url, 1024);
function openImage(url: string, width: number, height?: number) {
const format = url.startsWith("/") ? "png" : settings.store.format;
const u = new URL(url, window.location.href);
@ -76,11 +79,13 @@ function openImage(url: string) {
url = u.toString();
u.searchParams.set("size", "4096");
const originalUrl = u.toString();
const original = u.toString();
openImageModal(url, {
original: originalUrl,
height: 256
openImageModal({
url,
original,
width,
height
});
}
@ -93,14 +98,14 @@ const UserContext: NavContextMenuPatchCallback = (children, { user, guildId }: U
<Menu.MenuItem
id="view-avatar"
label="View Avatar"
action={() => openImage(IconUtils.getUserAvatarURL(user, true))}
action={() => openAvatar(IconUtils.getUserAvatarURL(user, true))}
icon={ImageIcon}
/>
{memberAvatar && (
<Menu.MenuItem
id="view-server-avatar"
label="View Server Avatar"
action={() => openImage(IconUtils.getGuildMemberAvatarURLSimple({
action={() => openAvatar(IconUtils.getGuildMemberAvatarURLSimple({
userId: user.id,
avatar: memberAvatar,
guildId: guildId!,
@ -126,7 +131,7 @@ const GuildContext: NavContextMenuPatchCallback = (children, { guild }: GuildCon
id="view-icon"
label="View Icon"
action={() =>
openImage(IconUtils.getGuildIconURL({
openAvatar(IconUtils.getGuildIconURL({
id,
icon,
canAnimate: true
@ -140,7 +145,7 @@ const GuildContext: NavContextMenuPatchCallback = (children, { guild }: GuildCon
id="view-banner"
label="View Banner"
action={() =>
openImage(IconUtils.getGuildBannerURL(guild, true)!)
openBanner(IconUtils.getGuildBannerURL(guild, true)!)
}
icon={ImageIcon}
/>
@ -158,7 +163,7 @@ const GroupDMContext: NavContextMenuPatchCallback = (children, { channel }: Grou
id="view-group-channel-icon"
label="View Icon"
action={() =>
openImage(IconUtils.getChannelIconURL(channel)!)
openAvatar(IconUtils.getChannelIconURL(channel)!)
}
icon={ImageIcon}
/>
@ -170,12 +175,13 @@ export default definePlugin({
name: "ViewIcons",
authors: [Devs.Ven, Devs.TheKodeToad, Devs.Nuckyz, Devs.nyx],
description: "Makes avatars and banners in user profiles clickable, adds View Icon/Banner entries in the user, server and group channel context menu.",
dependencies: ["ImageModalAPI"],
tags: ["ImageUtilities"],
dependencies: ["DynamicImageModalAPI"],
settings,
openImage,
openAvatar,
openBanner,
contextMenus: {
"user-context": UserContext,
@ -189,7 +195,7 @@ export default definePlugin({
find: ".overlay:void 0,status:",
replacement: {
match: /avatarSrc:(\i),eventHandlers:(\i).+?"div",{...\2,/,
replace: "$&style:{cursor:\"pointer\"},onClick:()=>{$self.openImage($1)},"
replace: "$&style:{cursor:\"pointer\"},onClick:()=>{$self.openAvatar($1)},"
},
all: true
},
@ -198,7 +204,7 @@ export default definePlugin({
find: 'backgroundColor:"COMPLETE"',
replacement: {
match: /(\.banner,.+?),style:{(?=.+?backgroundImage:null!=(\i)\?"url\("\.concat\(\2,)/,
replace: (_, rest, bannerSrc) => `${rest},onClick:()=>${bannerSrc}!=null&&$self.openImage(${bannerSrc}),style:{cursor:${bannerSrc}!=null?"pointer":void 0,`
replace: (_, rest, bannerSrc) => `${rest},onClick:()=>${bannerSrc}!=null&&$self.openBanner(${bannerSrc}),style:{cursor:${bannerSrc}!=null?"pointer":void 0,`
}
},
// Group DMs top small & large icon
@ -206,7 +212,7 @@ export default definePlugin({
find: /\.recipients\.length>=2(?!<isMultiUserDM.{0,50})/,
replacement: {
match: /null==\i\.icon\?.+?src:(\(0,\i\.\i\).+?\))(?=[,}])/,
replace: (m, iconUrl) => `${m},onClick:()=>$self.openImage(${iconUrl})`
replace: (m, iconUrl) => `${m},onClick:()=>$self.openAvatar(${iconUrl})`
}
},
// User DMs top small icon
@ -214,7 +220,7 @@ export default definePlugin({
find: ".cursorPointer:null,children",
replacement: {
match: /.Avatar,.+?src:(.+?\))(?=[,}])/,
replace: (m, avatarUrl) => `${m},onClick:()=>$self.openImage(${avatarUrl})`
replace: (m, avatarUrl) => `${m},onClick:()=>$self.openAvatar(${avatarUrl})`
}
},
// User Dms top large icon
@ -222,7 +228,7 @@ export default definePlugin({
find: 'experimentLocation:"empty_messages"',
replacement: {
match: /.Avatar,.+?src:(.+?\))(?=[,}])/,
replace: (m, avatarUrl) => `${m},onClick:()=>$self.openImage(${avatarUrl})`
replace: (m, avatarUrl) => `${m},onClick:()=>$self.openAvatar(${avatarUrl})`
}
}
]

2
src/plugins/webKeybinds.web/index.ts
View file

@ -25,7 +25,7 @@ const KeyBinds = findByPropsLazy("JUMP_TO_GUILD", "SERVER_NEXT");
export default definePlugin({
name: "WebKeybinds",
description: "Re-adds keybinds missing in the web version of Discord: ctrl+t, ctrl+shift+t, ctrl+tab, ctrl+shift+tab, ctrl+1-9, ctrl+,. Only works fully on Vesktop/ArmCord, not inside your browser",
description: "Re-adds keybinds missing in the web version of Discord: ctrl+t, ctrl+shift+t, ctrl+tab, ctrl+shift+tab, ctrl+1-9, ctrl+,. Only works fully on Vesktop/Legcord, not inside your browser",
authors: [Devs.Ven],
enabledByDefault: true,

4
src/utils/constants.ts
View file

@ -928,6 +928,10 @@ export const EquicordDevs = Object.freeze({
name: "Leko",
id: 108153734541942784n
},
SomeAspy: {
name: "SomeAspy",
id: 516750892372852754n,
},
} satisfies Record<string, Dev>);
// iife so #__PURE__ works correctly

24
src/utils/discord.css
View file

@ -1,3 +1,25 @@
.vc-imagemodal-fix {
.vc-position-inherit {
position: inherit;
}
/**
* copy pasted from discord css. not really webpack-findable since it's the only class in the module
**/
.vc-image-modal {
background: transparent!important;
box-shadow: none!important;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0
}
@media(width <= 485px) {
.vc-image-modal {
display:relative;
overflow: visible;
overflow: initial
}
}

26
src/utils/discord.tsx
View file

@ -19,10 +19,10 @@
import "./discord.css";
import { MessageObject } from "@api/MessageEvents";
import { ChannelStore, ComponentDispatch, Constants, FluxDispatcher, GuildStore, InviteActions, MaskedLink, MessageActions, 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, openModal } from "./modal";
import { ImageModal, ImageModalItem, openModal } from "./modal";
/**
* Open the invite modal
@ -110,23 +110,23 @@ export function sendMessage(
return MessageActions.sendMessage(channelId, messageData, waitForChannelReady, extra);
}
const FIX_CLASS_NAME = "vc-imagemodal-fix";
export function openImageModal(url: string, props?: Partial<React.ComponentProps<ImageModal>>): string {
/**
* You must specify either height or width
*/
export function openImageModal(props: Omit<ImageModalItem, "type">): string {
return openModal(modalProps => (
<ImageModal
{...modalProps}
renderLinkComponent={props => <MaskedLink {...props} />}
// Don't render forward message button scaleDown_f97a12 contain_f97a12
renderForwardComponent={() => null}
shouldHideMediaOptions={false}
shouldAnimate={true}
fit={FIX_CLASS_NAME}
className="vc-image-modal"
fit="vc-position-inherit"
items={[{
...props,
type: "IMAGE",
url,
original: props.url,
...props,
}]}
onClose={modalProps.onClose}
shouldHideMediaOptions={false}
shouldAnimate
/>
));
}

24
src/utils/modal.tsx
View file

@ -101,23 +101,21 @@ export const Modals = findByPropsLazy("ModalRoot", "ModalCloseButton") as {
}>;
};
// FIXME: type this
export type ImageModal = any & ComponentType<{
className?: string;
src: string;
placeholder: string;
original: string;
export interface ImageModalItem {
type: "IMAGE" | "VIDEO";
url: string;
width?: number;
height?: number;
animated?: boolean;
responsive?: boolean;
renderLinkComponent(props: any): ReactNode;
renderForwardComponent(props: any): ReactNode;
maxWidth?: number;
maxHeight?: number;
shouldAnimate?: boolean;
original?: string;
}
export type ImageModal = ComponentType<{
className?: string;
fit?: string;
onClose?(): void;
shouldHideMediaOptions?: boolean;
shouldAnimate?: boolean;
items: ImageModalItem[];
}>;
export const ImageModal = findComponentByCodeLazy(".MEDIA_MODAL_CLOSE") as ImageModal;