feat(plugin): add MessageLinkEmbeds (#264)
Co-authored-by: Ven <vendicated@riseup.net>
This commit is contained in:
ActuallyTheSun
GitHub
parent
fea8c60a40
commit
c8f2141114
@ -16,7 +16,7 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
export type AccessoryCallback = (props: Record<string, any>) => JSX.Element;
|
||||
export type AccessoryCallback = (props: Record<string, any>) => JSX.Element | null | Array<JSX.Element | null>;
|
||||
export type Accessory = {
|
||||
callback: AccessoryCallback;
|
||||
position?: number;
|
||||
@ -44,6 +44,15 @@ export function _modifyAccessories(
|
||||
props: Record<string, any>
|
||||
) {
|
||||
for (const accessory of accessories.values()) {
|
||||
let accessories = accessory.callback(props);
|
||||
if (accessories == null)
|
||||
continue;
|
||||
|
||||
if (!Array.isArray(accessories))
|
||||
accessories = [accessories];
|
||||
else if (accessories.length === 0)
|
||||
continue;
|
||||
|
||||
elements.splice(
|
||||
accessory.position != null
|
||||
? accessory.position < 0
|
||||
@ -51,7 +60,7 @@ export function _modifyAccessories(
|
||||
: accessory.position
|
||||
: elements.length,
|
||||
0,
|
||||
accessory.callback(props)
|
||||
...accessories.filter(e => e != null) as JSX.Element[]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
315
src/plugins/messageLinkEmbeds.tsx
Normal file
315
src/plugins/messageLinkEmbeds.tsx
Normal file
@ -0,0 +1,315 @@
|
||||
/*
|
||||
* Vencord, a modification for Discord's desktop app
|
||||
* Copyright (c) 2022 Vendicated and contributors
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { addAccessory } from "@api/MessageAccessories";
|
||||
import { Settings } from "@api/settings";
|
||||
import { Devs } from "@utils/constants.js";
|
||||
import { Queue } from "@utils/Queue";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { filters, findByPropsLazy, waitFor } from "@webpack";
|
||||
import {
|
||||
Button,
|
||||
ChannelStore,
|
||||
FluxDispatcher,
|
||||
GuildStore,
|
||||
MessageStore,
|
||||
Parser,
|
||||
PermissionStore,
|
||||
RestAPI,
|
||||
Text,
|
||||
UserStore
|
||||
} from "@webpack/common";
|
||||
import { Channel, Guild, Message } from "discord-types/general";
|
||||
|
||||
let messageCache: { [id: string]: { message?: Message, fetched: boolean; }; } = {};
|
||||
|
||||
let AutomodEmbed: React.ComponentType<any>,
|
||||
Embed: React.ComponentType<any>,
|
||||
ChannelMessage: React.ComponentType<any>,
|
||||
Endpoints: Record<string, any>;
|
||||
|
||||
waitFor(["mle_AutomodEmbed"], m => (AutomodEmbed = m.mle_AutomodEmbed));
|
||||
waitFor(filters.byCode("().inlineMediaEmbed"), m => Embed = m);
|
||||
waitFor(m => m.type?.toString()?.includes('["message","compact","className",'), m => ChannelMessage = m);
|
||||
waitFor(["MESSAGE_CREATE_ATTACHMENT_UPLOAD"], _ => Endpoints = _);
|
||||
const SearchResultClasses = findByPropsLazy("message", "searchResult");
|
||||
|
||||
const messageFetchQueue = new Queue();
|
||||
async function fetchMessage(channelID: string, messageID: string): Promise<Message | void> {
|
||||
if (messageID in messageCache && !messageCache[messageID].fetched) return Promise.resolve();
|
||||
if (messageCache[messageID]?.fetched) return Promise.resolve(messageCache[messageID].message);
|
||||
|
||||
messageCache[messageID] = { fetched: false };
|
||||
const res = await RestAPI.get({
|
||||
url: Endpoints.MESSAGES(channelID),
|
||||
query: {
|
||||
limit: 1,
|
||||
around: messageID
|
||||
},
|
||||
retries: 2
|
||||
}).catch(() => { });
|
||||
const apiMessage = res.body?.[0];
|
||||
const message: Message = MessageStore.getMessages(apiMessage.channel_id).receiveMessage(apiMessage).get(apiMessage.id);
|
||||
messageCache[message.id] = {
|
||||
message: message,
|
||||
fetched: true
|
||||
};
|
||||
return Promise.resolve(message);
|
||||
}
|
||||
|
||||
interface Attachment {
|
||||
height: number;
|
||||
width: number;
|
||||
url: string;
|
||||
proxyURL?: string;
|
||||
}
|
||||
|
||||
const isTenorGif = /https:\/\/(?:www.)?tenor\.com/;
|
||||
function getImages(message: Message): Attachment[] {
|
||||
const attachments: Attachment[] = [];
|
||||
message.attachments?.forEach(a => {
|
||||
if (a.content_type!.startsWith("image/")) attachments.push({
|
||||
height: a.height!,
|
||||
width: a.width!,
|
||||
url: a.url,
|
||||
proxyURL: a.proxy_url!
|
||||
});
|
||||
});
|
||||
message.embeds?.forEach(e => {
|
||||
if (e.type === "image") attachments.push(
|
||||
e.image ? { ...e.image } : { ...e.thumbnail! }
|
||||
);
|
||||
if (e.type === "gifv" && !isTenorGif.test(e.url!)) {
|
||||
attachments.push({
|
||||
height: e.thumbnail!.height,
|
||||
width: e.thumbnail!.width,
|
||||
url: e.url!
|
||||
});
|
||||
}
|
||||
});
|
||||
return attachments;
|
||||
}
|
||||
|
||||
const noContent = (attachments: number, embeds: number): string => {
|
||||
if (!attachments && !embeds) return "";
|
||||
if (!attachments) return `[no content, ${embeds} embed${embeds !== 1 ? "s" : ""}]`;
|
||||
if (!embeds) return `[no content, ${attachments} attachment${attachments !== 1 ? "s" : ""}]`;
|
||||
return `[no content, ${attachments} attachment${attachments !== 1 ? "s" : ""} and ${embeds} embed${embeds !== 1 ? "s" : ""}]`;
|
||||
};
|
||||
|
||||
function requiresRichEmbed(message: Message) {
|
||||
if (message.attachments.every(a => a.content_type?.startsWith("image/"))
|
||||
&& message.embeds.every(e => e.type === "image" || (e.type === "gifv" && !isTenorGif.test(e.url!)))
|
||||
&& !message.components.length
|
||||
) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
const computeWidthAndHeight = (width: number, height: number) => {
|
||||
const maxWidth = 400, maxHeight = 300;
|
||||
let newWidth: number, newHeight: number;
|
||||
if (width > height) {
|
||||
newWidth = Math.min(width, maxWidth);
|
||||
newHeight = Math.round(height / (width / newWidth));
|
||||
} else {
|
||||
newHeight = Math.min(height, maxHeight);
|
||||
newWidth = Math.round(width / (height / newHeight));
|
||||
}
|
||||
return { width: newWidth, height: newHeight };
|
||||
};
|
||||
|
||||
interface MessageEmbedProps {
|
||||
message: Message;
|
||||
channel: Channel;
|
||||
guildID: string;
|
||||
}
|
||||
|
||||
export default definePlugin({
|
||||
name: "MessageLinkEmbeds",
|
||||
description: "Adds a preview to messages that link another message",
|
||||
authors: [Devs.TheSun],
|
||||
dependencies: ["MessageAccessoriesAPI"],
|
||||
patches: [
|
||||
{
|
||||
find: "().embedCard",
|
||||
replacement: [{
|
||||
match: /{"use strict";(.{0,10})\(\)=>(.{1,2})}\);/,
|
||||
replace: '{"use strict";$1()=>$2,me:()=>messageEmbed});'
|
||||
}, {
|
||||
match: /function (.{1,2})\((.{1,2})\){var (.{1,2})=.{1,2}\.message,(.{1,2})=.{1,2}\.channel(.{0,300})\(\)\.embedCard(.{0,500})}\)}/,
|
||||
replace: "function $1($2){var $3=$2.message,$4=$2.channel$5().embedCard$6})}\
|
||||
var messageEmbed={mle_AutomodEmbed:$1};"
|
||||
}]
|
||||
}
|
||||
],
|
||||
options: {
|
||||
messageBackgroundColor: {
|
||||
description: "Background color for messages in rich embeds",
|
||||
type: OptionType.BOOLEAN
|
||||
},
|
||||
automodEmbeds: {
|
||||
description: "Use automod embeds instead of rich embeds (smaller but less info)",
|
||||
type: OptionType.SELECT,
|
||||
options: [{
|
||||
label: "Always use automod embeds",
|
||||
value: "always"
|
||||
}, {
|
||||
label: "Prefer automod embeds, but use rich embeds if some content can't be shown",
|
||||
value: "prefer"
|
||||
}, {
|
||||
label: "Never use automod embeds",
|
||||
value: "never",
|
||||
default: true
|
||||
}]
|
||||
},
|
||||
clearMessageCache: {
|
||||
type: OptionType.COMPONENT,
|
||||
description: "Clear the linked message cache",
|
||||
component: () =>
|
||||
<Button onClick={() => messageCache = {}}>
|
||||
Clear the linked message cache
|
||||
</Button>
|
||||
}
|
||||
},
|
||||
|
||||
start() {
|
||||
addAccessory("messageLinkEmbed", props => this.messageEmbedAccessory(props), 4 /* just above rich embeds*/);
|
||||
},
|
||||
|
||||
messageLinkRegex: /(?<!<)https?:\/\/(?:\w+\.)?discord(?:app)?\.com\/channels\/(\d{17,19}|@me)\/(\d{17,19})\/(\d{17,19})/g,
|
||||
|
||||
messageEmbedAccessory(props) {
|
||||
const { message }: { message: Message; } = props;
|
||||
|
||||
const accessories = [] as (JSX.Element | null)[];
|
||||
|
||||
let match = null as RegExpMatchArray | null;
|
||||
while ((match = this.messageLinkRegex.exec(message.content!)) !== null) {
|
||||
const [_, guildID, channelID, messageID] = match;
|
||||
|
||||
const linkedChannel = ChannelStore.getChannel(channelID);
|
||||
if (!linkedChannel || (guildID !== "@me" && !PermissionStore.can(1024n /* view channel */, linkedChannel))) {
|
||||
continue;
|
||||
}
|
||||
|
||||
let linkedMessage = messageCache[messageID]?.message as Message;
|
||||
if (!linkedMessage) {
|
||||
linkedMessage ??= MessageStore.getMessage(channelID, messageID);
|
||||
if (linkedMessage) messageCache[messageID] = { message: linkedMessage, fetched: true };
|
||||
else {
|
||||
const msg = { ...message } as any;
|
||||
delete msg.embeds;
|
||||
messageFetchQueue.push(() => fetchMessage(channelID, messageID)
|
||||
.then(m => m && FluxDispatcher.dispatch({
|
||||
type: "MESSAGE_UPDATE",
|
||||
message: msg
|
||||
}))
|
||||
);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
const messageProps: MessageEmbedProps = {
|
||||
message: linkedMessage,
|
||||
channel: linkedChannel,
|
||||
guildID
|
||||
};
|
||||
|
||||
const type = Settings.plugins[this.name].automodEmbeds;
|
||||
accessories.push(
|
||||
type === "always" || (type === "prefer" && !requiresRichEmbed(linkedMessage))
|
||||
? this.automodEmbedAccessory(messageProps)
|
||||
: this.channelMessageEmbedAccessory(messageProps)
|
||||
);
|
||||
}
|
||||
return accessories;
|
||||
},
|
||||
|
||||
channelMessageEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
|
||||
const { message, channel, guildID } = props;
|
||||
|
||||
const isDM = guildID === "@me";
|
||||
const guild = !isDM && GuildStore.getGuild(channel.guild_id);
|
||||
const dmReceiver = UserStore.getUser(ChannelStore.getChannel(channel.id).recipients?.[0]);
|
||||
const classNames = [SearchResultClasses.message];
|
||||
if (Settings.plugins[this.name].messageBackgroundColor) classNames.push(SearchResultClasses.searchResult);
|
||||
|
||||
return <Embed
|
||||
embed={{
|
||||
rawDescription: "",
|
||||
color: "var(--background-secondary)",
|
||||
author: {
|
||||
name: <Text variant="text-xs/medium" tag="span">
|
||||
{[
|
||||
<span>{isDM ? "Direct Message - " : (guild as Guild).name + " - "}</span>,
|
||||
...(isDM
|
||||
? Parser.parse(`<@${dmReceiver.id}>`)
|
||||
: Parser.parse(`<#${channel.id}>`)
|
||||
)
|
||||
]}
|
||||
</Text>,
|
||||
iconProxyURL: guild
|
||||
? `https://${window.GLOBAL_ENV.CDN_HOST}/icons/${guild.id}/${guild.icon}.png`
|
||||
: `https://${window.GLOBAL_ENV.CDN_HOST}/avatars/${dmReceiver.id}/${dmReceiver.avatar}`
|
||||
}
|
||||
}}
|
||||
renderDescription={() => {
|
||||
return <div key={message.id} className={classNames.join(" ")} >
|
||||
<ChannelMessage
|
||||
id={`message-link-embeds-${message.id}`}
|
||||
message={message}
|
||||
channel={channel}
|
||||
subscribeToComponentDispatch={false}
|
||||
/>
|
||||
</div >;
|
||||
}}
|
||||
/>;
|
||||
},
|
||||
|
||||
automodEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
|
||||
const { message, channel, guildID } = props;
|
||||
|
||||
const isDM = guildID === "@me";
|
||||
const images = getImages(message);
|
||||
const { parse } = Parser;
|
||||
|
||||
return <AutomodEmbed
|
||||
channel={channel}
|
||||
childrenAccessories={<Text color="text-muted" variant="text-xs/medium" tag="span">
|
||||
{[
|
||||
...(isDM ? parse(`<@${ChannelStore.getChannel(channel.id).recipients[0]}>`) : parse(`<#${channel.id}>`)),
|
||||
<span>{isDM ? " - Direct Message" : " - " + GuildStore.getGuild(channel.guild_id)?.name}</span>
|
||||
]}
|
||||
</Text>}
|
||||
compact={false}
|
||||
content={[
|
||||
...(message.content || !(message.attachments.length > images.length)
|
||||
? parse(message.content)
|
||||
: [noContent(message.attachments.length, message.embeds.length)]
|
||||
),
|
||||
...(images.map<JSX.Element>(a => {
|
||||
const { width, height } = computeWidthAndHeight(a.width, a.height);
|
||||
return <div><img src={a.url} width={width} height={height} /></div>;
|
||||
}
|
||||
))
|
||||
]}
|
||||
hideTimestamp={false}
|
||||
message={message}
|
||||
_messageEmbed="automod"
|
||||
/>;
|
||||
},
|
||||
});
|
||||
@ -169,4 +169,8 @@ export const Devs = Object.freeze({
|
||||
name: "Commandtechno",
|
||||
id: 296776625432035328n,
|
||||
},
|
||||
TheSun: {
|
||||
name: "ActuallyTheSun",
|
||||
id: 406028027768733696n
|
||||
},
|
||||
});
|
||||
|
||||
@ -52,6 +52,7 @@ export let UserStore: Stores.UserStore;
|
||||
export let SelectedChannelStore: Stores.SelectedChannelStore;
|
||||
export let SelectedGuildStore: any;
|
||||
export let ChannelStore: Stores.ChannelStore;
|
||||
export let GuildMemberStore: Stores.GuildMemberStore;
|
||||
export let RelationshipStore: Stores.RelationshipStore & {
|
||||
/** Get the date (as a string) that the relationship was created */
|
||||
getSince(userId: string): string;
|
||||
@ -163,6 +164,7 @@ waitFor("getSortedPrivateChannels", m => ChannelStore = m);
|
||||
waitFor("getCurrentlySelectedChannelId", m => SelectedChannelStore = m);
|
||||
waitFor("getLastSelectedGuildId", m => SelectedGuildStore = m);
|
||||
waitFor("getGuildCount", m => GuildStore = m);
|
||||
waitFor(["getMember", "initialize"], m => GuildMemberStore = m);
|
||||
waitFor("getRelationshipType", m => RelationshipStore = m);
|
||||
|
||||
waitFor(["Hovers", "Looks", "Sizes"], m => Button = m);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user