mirror of
https://github.com/Equicord/Equicord.git
synced 2025-06-09 06:33:03 -04:00
ImageModal Fixes from sadan4
This commit is contained in:
parent
2837028793
commit
91f88396c6
13 changed files with 61 additions and 36 deletions
24
src/plugins/_api/imageModal.ts
Normal file
24
src/plugins/_api/imageModal.ts
Normal 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}))`
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
|
@ -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,
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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}",`
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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
3
src/utils/discord.css
Normal file
|
@ -0,0 +1,3 @@
|
|||
.vc-imagemodal-fix {
|
||||
position: inherit;
|
||||
}
|
|
@ -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,
|
||||
}]}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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");
|
||||
|
|
5
src/webpack/common/types/classes.d.ts
vendored
5
src/webpack/common/types/classes.d.ts
vendored
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue