ImageModal Fixes from sadan4

This commit is contained in:
thororen1234 2024-10-22 14:56:38 -04:00
parent 2837028793
commit 91f88396c6
13 changed files with 61 additions and 36 deletions

View file

@ -0,0 +1,24 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2024 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { Devs } from "@utils/constants";
import definePlugin from "@utils/types";
export default definePlugin({
name: "ImageModalAPI",
authors: [Devs.sadan, Devs.Nuckyz],
description: "Allows you to open Image Modals",
patches: [
{
find: "SCALE_DOWN:",
replacement: {
match: /!\(null==(\i)\|\|0===\i\|\|null==(\i)\|\|0===\i\)/,
replace: (_, width, height) => `!((null == ${width} || 0 === ${width}) && (null == ${height} || 0 === ${height}))`
}
}
]
});

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"],
dependencies: ["UserSettingsAPI", "ImageModalAPI"],
settings,

View file

@ -89,6 +89,7 @@ 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

View file

@ -156,14 +156,10 @@ 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}",`
}
},

View file

@ -89,7 +89,9 @@ function GuildInfoModal({ guild }: GuildProps) {
? <img
src={iconUrl}
alt=""
onClick={() => openImageModal(iconUrl)}
onClick={() => openImageModal(iconUrl, {
width: 256
})}
/>
: <div aria-hidden className={classes(IconClasses.childWrapper, IconClasses.acronym)}>{guild.acronym}</div>
}

View file

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

View file

@ -33,6 +33,7 @@ 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",

View file

@ -170,6 +170,7 @@ 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"],
settings,

3
src/utils/discord.css Normal file
View file

@ -0,0 +1,3 @@
.vc-imagemodal-fix {
position: inherit;
}

View file

@ -16,11 +16,13 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./discord.css";
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, MaskedLink, 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 { ImageModal, openModal } from "./modal";
/**
* Open the invite modal
@ -108,25 +110,24 @@ 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 {
return openModal(modalProps => (
<ModalRoot
<ImageModal
{...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>
renderLinkComponent={props => <MaskedLink {...props} />}
// Don't render forward message button scaleDown_f97a12 contain_f97a12
renderForwardComponent={() => null}
shouldHideMediaOptions={false}
shouldAnimate={true}
fit={FIX_CLASS_NAME}
items={[{
...props,
type: "IMAGE",
url,
}]}
/>
));
}

View file

@ -101,7 +101,8 @@ export const Modals = findByPropsLazy("ModalRoot", "ModalCloseButton") as {
}>;
};
export type ImageModal = ComponentType<{
// FIXME: type this
export type ImageModal = any & ComponentType<{
className?: string;
src: string;
placeholder: string;
@ -119,7 +120,7 @@ export type ImageModal = ComponentType<{
shouldHideMediaOptions?: boolean;
}>;
export const ImageModal = findComponentByCodeLazy(".MEDIA_MODAL_CLOSE", "responsive") as ImageModal;
export const ImageModal = findComponentByCodeLazy(".MEDIA_MODAL_CLOSE") as ImageModal;
export const ModalRoot = LazyComponent(() => Modals.ModalRoot);
export const ModalHeader = LazyComponent(() => Modals.ModalHeader);

View file

@ -16,9 +16,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { findByPropsLazy, findLazy } from "@webpack";
import { findByPropsLazy } from "@webpack";
import * as t from "./types/classes";
export const ModalImageClasses: t.ImageModalClasses = findLazy(m => m.image && m.modal && !m.applicationIcon);
export const ButtonWrapperClasses: t.ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent");

View file

@ -16,11 +16,6 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
export interface ImageModalClasses {
image: string,
modal: string,
}
export interface ButtonWrapperClasses {
hoverScale: string;
buttonWrapper: string;