MessageLinkEmbeds: fix group dm support, improve ui
This commit is contained in:
		
							parent
							
								
									bc0a55053d
								
							
						
					
					
						commit
						a501da692f
					
				
					 6 changed files with 107 additions and 57 deletions
				
			
		| 
						 | 
				
			
			@ -29,6 +29,7 @@ import {
 | 
			
		|||
    ChannelStore,
 | 
			
		||||
    FluxDispatcher,
 | 
			
		||||
    GuildStore,
 | 
			
		||||
    IconUtils,
 | 
			
		||||
    MessageStore,
 | 
			
		||||
    Parser,
 | 
			
		||||
    PermissionsBits,
 | 
			
		||||
| 
						 | 
				
			
			@ -50,6 +51,7 @@ const AutoModEmbed = findComponentByCodeLazy(".withFooter]:", "childrenMessageCo
 | 
			
		|||
const ChannelMessage = findComponentByCodeLazy("renderSimpleAccessories)");
 | 
			
		||||
 | 
			
		||||
const SearchResultClasses = findByPropsLazy("message", "searchResult");
 | 
			
		||||
const EmbedClasses = findByPropsLazy("embedAuthorIcon", "embedAuthor", "embedAuthor");
 | 
			
		||||
 | 
			
		||||
const messageLinkRegex = /(?<!<)https?:\/\/(?:\w+\.)?discord(?:app)?\.com\/channels\/(?:\d{17,20}|@me)\/(\d{17,20})\/(\d{17,20})/g;
 | 
			
		||||
const tenorRegex = /^https:\/\/(?:www\.)?tenor\.com\//;
 | 
			
		||||
| 
						 | 
				
			
			@ -232,7 +234,7 @@ function MessageEmbedAccessory({ message }: { message: Message; }) {
 | 
			
		|||
        }
 | 
			
		||||
 | 
			
		||||
        const linkedChannel = ChannelStore.getChannel(channelID);
 | 
			
		||||
        if (!linkedChannel || (!linkedChannel.isDM() && !PermissionStore.can(PermissionsBits.VIEW_CHANNEL, linkedChannel))) {
 | 
			
		||||
        if (!linkedChannel || (!linkedChannel.isPrivate() && !PermissionStore.can(PermissionsBits.VIEW_CHANNEL, linkedChannel))) {
 | 
			
		||||
            continue;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -279,23 +281,28 @@ function MessageEmbedAccessory({ message }: { message: Message; }) {
 | 
			
		|||
    return accessories.length ? <>{accessories}</> : null;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function getChannelLabelAndIconUrl(channel: Channel) {
 | 
			
		||||
    if (channel.isDM()) return ["Direct Message", IconUtils.getUserAvatarURL(UserStore.getUser(channel.recipients[0]))];
 | 
			
		||||
    if (channel.isGroupDM()) return ["Group DM", IconUtils.getChannelIconURL(channel)];
 | 
			
		||||
    return ["Server", IconUtils.getGuildIconURL(GuildStore.getGuild(channel.guild_id))];
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function ChannelMessageEmbedAccessory({ message, channel }: MessageEmbedProps): JSX.Element | null {
 | 
			
		||||
    const guild = !channel.isDM() && GuildStore.getGuild(channel.guild_id);
 | 
			
		||||
    const dmReceiver = UserStore.getUser(ChannelStore.getChannel(channel.id).recipients?.[0]);
 | 
			
		||||
 | 
			
		||||
    const [channelLabel, iconUrl] = getChannelLabelAndIconUrl(channel);
 | 
			
		||||
 | 
			
		||||
    return <Embed
 | 
			
		||||
    return (
 | 
			
		||||
        <Embed
 | 
			
		||||
            embed={{
 | 
			
		||||
                rawDescription: "",
 | 
			
		||||
                color: "var(--background-secondary)",
 | 
			
		||||
                author: {
 | 
			
		||||
                    name: <Text variant="text-xs/medium" tag="span">
 | 
			
		||||
                    {channel.isDM() && <span>Direct Message - </span>}
 | 
			
		||||
                        <span>{channelLabel} - </span>
 | 
			
		||||
                        {Parser.parse(channel.isDM() ? `<@${dmReceiver.id}>` : `<#${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}`
 | 
			
		||||
                    iconProxyURL: iconUrl
 | 
			
		||||
                }
 | 
			
		||||
            }}
 | 
			
		||||
            renderDescription={() => (
 | 
			
		||||
| 
						 | 
				
			
			@ -308,7 +315,8 @@ function ChannelMessageEmbedAccessory({ message, channel }: MessageEmbedProps):
 | 
			
		|||
                    />
 | 
			
		||||
                </div>
 | 
			
		||||
            )}
 | 
			
		||||
    />;
 | 
			
		||||
        />
 | 
			
		||||
    );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function AutomodEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
 | 
			
		||||
| 
						 | 
				
			
			@ -317,15 +325,20 @@ function AutomodEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
 | 
			
		|||
    const images = getImages(message);
 | 
			
		||||
    const { parse } = Parser;
 | 
			
		||||
 | 
			
		||||
    const [channelLabel, iconUrl] = getChannelLabelAndIconUrl(channel);
 | 
			
		||||
 | 
			
		||||
    return <AutoModEmbed
 | 
			
		||||
        channel={channel}
 | 
			
		||||
        childrenAccessories={
 | 
			
		||||
            <Text color="text-muted" variant="text-xs/medium" tag="span">
 | 
			
		||||
            <Text color="text-muted" variant="text-xs/medium" tag="span" className={`${EmbedClasses.embedAuthor} ${EmbedClasses.embedMargin}`}>
 | 
			
		||||
                {iconUrl && <img src={iconUrl} className={EmbedClasses.embedAuthorIcon} alt="" />}
 | 
			
		||||
                <span>
 | 
			
		||||
                    <span>{channelLabel} - </span>
 | 
			
		||||
                    {channel.isDM()
 | 
			
		||||
                    ? parse(`<@${ChannelStore.getChannel(channel.id).recipients[0]}>`)
 | 
			
		||||
                    : parse(`<#${channel.id}>`)
 | 
			
		||||
                        ? Parser.parse(`<@${ChannelStore.getChannel(channel.id).recipients[0]}>`)
 | 
			
		||||
                        : Parser.parse(`<#${channel.id}>`)
 | 
			
		||||
                    }
 | 
			
		||||
                {channel.isDM() && <span> - Direct Message</span>}
 | 
			
		||||
                </span>
 | 
			
		||||
            </Text>
 | 
			
		||||
        }
 | 
			
		||||
        compact={compact}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -20,11 +20,10 @@ import { Devs } from "@utils/constants";
 | 
			
		|||
import { isNonNullish } from "@utils/guards";
 | 
			
		||||
import definePlugin from "@utils/types";
 | 
			
		||||
import { findByPropsLazy } from "@webpack";
 | 
			
		||||
import { Avatar, ChannelStore, Clickable, RelationshipStore, ScrollerThin, UserStore } from "@webpack/common";
 | 
			
		||||
import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, UserStore } from "@webpack/common";
 | 
			
		||||
import { Channel, User } from "discord-types/general";
 | 
			
		||||
 | 
			
		||||
const SelectedChannelActionCreators = findByPropsLazy("selectPrivateChannel");
 | 
			
		||||
const AvatarUtils = findByPropsLazy("getChannelIconURL");
 | 
			
		||||
const UserUtils = findByPropsLazy("getGlobalName");
 | 
			
		||||
 | 
			
		||||
const ProfileListClasses = findByPropsLazy("emptyIconFriends", "emptyIconGuilds");
 | 
			
		||||
| 
						 | 
				
			
			@ -71,7 +70,7 @@ export default definePlugin({
 | 
			
		|||
                }}
 | 
			
		||||
            >
 | 
			
		||||
                <Avatar
 | 
			
		||||
                    src={AvatarUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
 | 
			
		||||
                    src={IconUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
 | 
			
		||||
                    size="SIZE_40"
 | 
			
		||||
                    className={ProfileListClasses.listAvatar}
 | 
			
		||||
                >
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -12,10 +12,9 @@ import { classes } from "@utils/misc";
 | 
			
		|||
import { ModalRoot, ModalSize, openModal } from "@utils/modal";
 | 
			
		||||
import { useAwaiter } from "@utils/react";
 | 
			
		||||
import { findByPropsLazy, findExportedComponentLazy } from "@webpack";
 | 
			
		||||
import { FluxDispatcher, Forms, GuildChannelStore, GuildMemberStore, Parser, PresenceStore, RelationshipStore, ScrollerThin, SnowflakeUtils, TabBar, Timestamp, useEffect, UserStore, UserUtils, useState, useStateFromStores } from "@webpack/common";
 | 
			
		||||
import { FluxDispatcher, Forms, GuildChannelStore, GuildMemberStore, IconUtils, Parser, PresenceStore, RelationshipStore, ScrollerThin, SnowflakeUtils, TabBar, Timestamp, useEffect, UserStore, UserUtils, useState, useStateFromStores } from "@webpack/common";
 | 
			
		||||
import { Guild, User } from "discord-types/general";
 | 
			
		||||
 | 
			
		||||
const IconUtils = findByPropsLazy("getGuildBannerURL");
 | 
			
		||||
const IconClasses = findByPropsLazy("icon", "acronym", "childWrapper");
 | 
			
		||||
const FriendRow = findExportedComponentLazy("FriendRow");
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -65,10 +64,7 @@ function GuildProfileModal({ guild }: GuildProps) {
 | 
			
		|||
 | 
			
		||||
    const [currentTab, setCurrentTab] = useState(Tabs.ServerInfo);
 | 
			
		||||
 | 
			
		||||
    const bannerUrl = guild.banner && IconUtils.getGuildBannerURL({
 | 
			
		||||
        id: guild.id,
 | 
			
		||||
        banner: guild.banner
 | 
			
		||||
    }, true).replace(/\?size=\d+$/, "?size=1024");
 | 
			
		||||
    const bannerUrl = guild.banner && IconUtils.getGuildBannerURL(guild, true)!.replace(/\?size=\d+$/, "?size=1024");
 | 
			
		||||
 | 
			
		||||
    const iconUrl = guild.icon && IconUtils.getGuildIconURL({
 | 
			
		||||
        id: guild.id,
 | 
			
		||||
| 
						 | 
				
			
			@ -89,7 +85,7 @@ function GuildProfileModal({ guild }: GuildProps) {
 | 
			
		|||
            )}
 | 
			
		||||
 | 
			
		||||
            <div className={cl("header")}>
 | 
			
		||||
                {guild.icon
 | 
			
		||||
                {iconUrl
 | 
			
		||||
                    ? <img
 | 
			
		||||
                        src={iconUrl}
 | 
			
		||||
                        alt=""
 | 
			
		||||
| 
						 | 
				
			
			@ -150,7 +146,7 @@ function Owner(guildId: string, owner: User) {
 | 
			
		|||
                avatar: guildAvatar,
 | 
			
		||||
                guildId,
 | 
			
		||||
                canAnimate: true
 | 
			
		||||
            }, true)
 | 
			
		||||
            })
 | 
			
		||||
            : IconUtils.getUserAvatarURL(owner, true);
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -22,11 +22,9 @@ import { ImageIcon } from "@components/Icons";
 | 
			
		|||
import { Devs } from "@utils/constants";
 | 
			
		||||
import { openImageModal } from "@utils/discord";
 | 
			
		||||
import definePlugin, { OptionType } from "@utils/types";
 | 
			
		||||
import { findByPropsLazy } from "@webpack";
 | 
			
		||||
import { GuildMemberStore, Menu } from "@webpack/common";
 | 
			
		||||
import { GuildMemberStore, IconUtils, Menu } from "@webpack/common";
 | 
			
		||||
import type { Channel, Guild, User } from "discord-types/general";
 | 
			
		||||
 | 
			
		||||
const BannerStore = findByPropsLazy("getGuildBannerURL");
 | 
			
		||||
 | 
			
		||||
interface UserContextProps {
 | 
			
		||||
    channel: Channel;
 | 
			
		||||
| 
						 | 
				
			
			@ -91,19 +89,19 @@ const UserContext: NavContextMenuPatchCallback = (children, { user, guildId }: U
 | 
			
		|||
            <Menu.MenuItem
 | 
			
		||||
                id="view-avatar"
 | 
			
		||||
                label="View Avatar"
 | 
			
		||||
                action={() => openImage(BannerStore.getUserAvatarURL(user, true))}
 | 
			
		||||
                action={() => openImage(IconUtils.getUserAvatarURL(user, true))}
 | 
			
		||||
                icon={ImageIcon}
 | 
			
		||||
            />
 | 
			
		||||
            {memberAvatar && (
 | 
			
		||||
                <Menu.MenuItem
 | 
			
		||||
                    id="view-server-avatar"
 | 
			
		||||
                    label="View Server Avatar"
 | 
			
		||||
                    action={() => openImage(BannerStore.getGuildMemberAvatarURLSimple({
 | 
			
		||||
                    action={() => openImage(IconUtils.getGuildMemberAvatarURLSimple({
 | 
			
		||||
                        userId: user.id,
 | 
			
		||||
                        avatar: memberAvatar,
 | 
			
		||||
                        guildId,
 | 
			
		||||
                        guildId: guildId!,
 | 
			
		||||
                        canAnimate: true
 | 
			
		||||
                    }, true))}
 | 
			
		||||
                    }))}
 | 
			
		||||
                    icon={ImageIcon}
 | 
			
		||||
                />
 | 
			
		||||
            )}
 | 
			
		||||
| 
						 | 
				
			
			@ -124,11 +122,11 @@ const GuildContext: NavContextMenuPatchCallback = (children, { guild }: GuildCon
 | 
			
		|||
                    id="view-icon"
 | 
			
		||||
                    label="View Icon"
 | 
			
		||||
                    action={() =>
 | 
			
		||||
                        openImage(BannerStore.getGuildIconURL({
 | 
			
		||||
                        openImage(IconUtils.getGuildIconURL({
 | 
			
		||||
                            id,
 | 
			
		||||
                            icon,
 | 
			
		||||
                            canAnimate: true
 | 
			
		||||
                        }))
 | 
			
		||||
                        })!)
 | 
			
		||||
                    }
 | 
			
		||||
                    icon={ImageIcon}
 | 
			
		||||
                />
 | 
			
		||||
| 
						 | 
				
			
			@ -138,10 +136,7 @@ const GuildContext: NavContextMenuPatchCallback = (children, { guild }: GuildCon
 | 
			
		|||
                    id="view-banner"
 | 
			
		||||
                    label="View Banner"
 | 
			
		||||
                    action={() =>
 | 
			
		||||
                        openImage(BannerStore.getGuildBannerURL({
 | 
			
		||||
                            id,
 | 
			
		||||
                            banner,
 | 
			
		||||
                        }, true))
 | 
			
		||||
                        openImage(IconUtils.getGuildBannerURL(guild, true)!)
 | 
			
		||||
                    }
 | 
			
		||||
                    icon={ImageIcon}
 | 
			
		||||
                />
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										45
									
								
								src/webpack/common/types/utils.d.ts
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										45
									
								
								src/webpack/common/types/utils.d.ts
									
									
									
									
										vendored
									
									
								
							| 
						 | 
				
			
			@ -16,6 +16,7 @@
 | 
			
		|||
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 | 
			
		||||
*/
 | 
			
		||||
 | 
			
		||||
import { Guild, GuildMember } from "discord-types/general";
 | 
			
		||||
import type { ReactNode } from "react";
 | 
			
		||||
 | 
			
		||||
import type { FluxEvents } from "./fluxEvents";
 | 
			
		||||
| 
						 | 
				
			
			@ -182,3 +183,47 @@ export interface NavigationRouter {
 | 
			
		|||
    getLastRouteChangeSource(): any;
 | 
			
		||||
    getLastRouteChangeSourceLocationStack(): any;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export interface IconUtils {
 | 
			
		||||
    getUserAvatarURL(user: User, canAnimate?: boolean, size?: number, format?: string): string;
 | 
			
		||||
    getDefaultAvatarURL(id: string, discriminator?: string): string;
 | 
			
		||||
    getUserBannerURL(data: { id: string, banner: string, canAnimate?: boolean, size: number; }): string | undefined;
 | 
			
		||||
    getAvatarDecorationURL(dara: { avatarDecoration: string, size: number; canCanimate?: boolean; }): string | undefined;
 | 
			
		||||
 | 
			
		||||
    getGuildMemberAvatarURL(member: GuildMember, canAnimate?: string): string | null;
 | 
			
		||||
    getGuildMemberAvatarURLSimple(data: { guildId: string, userId: string, avatar: string, canAnimate?: boolean; size?: number; }): string;
 | 
			
		||||
    getGuildMemberBannerURL(data: { id: string, guildId: string, banner: string, canAnimate?: boolean, size: number; }): string | undefined;
 | 
			
		||||
 | 
			
		||||
    getGuildIconURL(data: { id: string, icon?: string, size?: number, canAnimate?: boolean; }): string | undefined;
 | 
			
		||||
    getGuildBannerURL(guild: Guild, canAnimate?: boolean): string | null;
 | 
			
		||||
 | 
			
		||||
    getChannelIconURL(data: { id: string; icon?: string; applicationId?: string; size?: number; }): string | undefined;
 | 
			
		||||
    getEmojiURL(data: { id: string, animated: boolean, size: number, forcePNG?: boolean; }): string;
 | 
			
		||||
 | 
			
		||||
    hasAnimatedGuildIcon(guild: Guild): boolean;
 | 
			
		||||
    isAnimatedIconHash(hash: string): boolean;
 | 
			
		||||
 | 
			
		||||
    getGuildSplashURL: any;
 | 
			
		||||
    getGuildDiscoverySplashURL: any;
 | 
			
		||||
    getGuildHomeHeaderURL: any;
 | 
			
		||||
    getResourceChannelIconURL: any;
 | 
			
		||||
    getNewMemberActionIconURL: any;
 | 
			
		||||
    getGuildTemplateIconURL: any;
 | 
			
		||||
    getApplicationIconURL: any;
 | 
			
		||||
    getGameAssetURL: any;
 | 
			
		||||
    getVideoFilterAssetURL: any;
 | 
			
		||||
 | 
			
		||||
    getGuildMemberAvatarSource: any;
 | 
			
		||||
    getUserAvatarSource: any;
 | 
			
		||||
    getGuildSplashSource: any;
 | 
			
		||||
    getGuildDiscoverySplashSource: any;
 | 
			
		||||
    makeSource: any;
 | 
			
		||||
    getGameAssetSource: any;
 | 
			
		||||
    getGuildIconSource: any;
 | 
			
		||||
    getGuildTemplateIconSource: any;
 | 
			
		||||
    getGuildBannerSource: any;
 | 
			
		||||
    getGuildHomeHeaderSource: any;
 | 
			
		||||
    getChannelIconSource: any;
 | 
			
		||||
    getApplicationIconSource: any;
 | 
			
		||||
    getAnimatableSourceWithFallback: any;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -137,3 +137,5 @@ export const { persist: zustandPersist }: typeof import("zustand/middleware") =
 | 
			
		|||
export const MessageActions = findByPropsLazy("editMessage", "sendMessage");
 | 
			
		||||
export const UserProfileActions = findByPropsLazy("openUserProfileModal", "closeUserProfileModal");
 | 
			
		||||
export const InviteActions = findByPropsLazy("resolveInvite");
 | 
			
		||||
 | 
			
		||||
export const IconUtils: t.IconUtils = findByPropsLazy("getGuildBannerURL", "getUserAvatarURL");
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in a new issue