EmoteCloner: Add Sticker cloning (#1118)

src/plugins/emoteCloner.tsx

@@ -21,17 +21,102 @@ import { CheckedTextInput } from "@components/CheckedTextInput";
 import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
-import { ModalContent, ModalHeader, ModalRoot, openModal } from "@utils/modal";
+import { ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal";
 import definePlugin from "@utils/types";
-import { findByCodeLazy, findByPropsLazy } from "@webpack";
+import { findByCodeLazy, findStoreLazy } from "@webpack";
-import { Forms, GuildStore, Menu, PermissionStore, React, Toasts, Tooltip, UserStore } from "@webpack/common";
+import { FluxDispatcher, Forms, GuildStore, Menu, PermissionStore, React, RestAPI, Toasts, Tooltip, UserStore } from "@webpack/common";
+import { Promisable } from "type-fest";
 
 const MANAGE_EMOJIS_AND_STICKERS = 1n << 30n;
 
-const GuildEmojiStore = findByPropsLazy("getGuilds", "getGuildEmoji");
+const GuildEmojiStore = findStoreLazy("EmojiStore");
+const StickersStore = findStoreLazy("StickersStore");
 const uploadEmoji = findByCodeLazy('"EMOJI_UPLOAD_START"', "GUILD_EMOJIS(");
 
-function getGuildCandidates(isAnimated: boolean) {
+interface Sticker {
+    t: "Sticker";
+    description: string;
+    format_type: number;
+    guild_id: string;
+    id: string;
+    name: string;
+    tags: string;
+    type: number;
+}
+
+interface Emoji {
+    t: "Emoji";
+    id: string;
+    name: string;
+    isAnimated: boolean;
+}
+
+type Data = Emoji | Sticker;
+
+const StickerExt = [, "png", "png", "json", "gif"] as const;
+
+function getUrl(data: Data) {
+    if (data.t === "Emoji")
+        return `${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/emojis/${data.id}.${data.isAnimated ? "gif" : "png"}`;
+
+    return `${location.origin}/stickers/${data.id}.${StickerExt[data.format_type]}`;
+}
+
+async function fetchSticker(id: string) {
+    const cached = StickersStore.getStickerById(id);
+    if (cached) return cached;
+
+    const { body } = await RestAPI.get({
+        url: `/stickers/${id}`
+    });
+
+    FluxDispatcher.dispatch({
+        type: "STICKER_FETCH_SUCCESS",
+        sticker: body
+    });
+
+    return body as Sticker;
+}
+
+async function cloneSticker(guildId: string, sticker: Sticker) {
+    const data = new FormData();
+    data.append("name", sticker.name);
+    data.append("tags", sticker.tags);
+    data.append("description", sticker.description);
+    data.append("file", await fetchBlob(getUrl(sticker)));
+
+    const { body } = await RestAPI.post({
+        url: `/guilds/${guildId}/stickers`,
+        body: data,
+    });
+
+    FluxDispatcher.dispatch({
+        type: "GUILD_STICKERS_CREATE_SUCCESS",
+        guildId,
+        sticker: {
+            ...body,
+            user: UserStore.getCurrentUser()
+        }
+    });
+}
+
+async function cloneEmoji(guildId: string, emoji: Emoji) {
+    const data = await fetchBlob(getUrl(emoji));
+
+    const dataUrl = await new Promise<string>(resolve => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result as string);
+        reader.readAsDataURL(data);
+    });
+
+    return uploadEmoji({
+        guildId,
+        name: emoji.name.split("~")[0],
+        image: dataUrl
+    });
+}
+
+function getGuildCandidates(data: Data) {
     const meId = UserStore.getCurrentUser().id;
 
     return Object.values(GuildStore.getGuilds()).filter(g => {
@@ -39,6 +124,10 @@ function getGuildCandidates(isAnimated: boolean) {
             BigInt(PermissionStore.getGuildPermissions({ id: g.id }) & MANAGE_EMOJIS_AND_STICKERS) === MANAGE_EMOJIS_AND_STICKERS;
         if (!canCreate) return false;
 
+        if (data.t === "Sticker") return true;
+
+        const { isAnimated } = data as Emoji;
+
         const emojiSlots = g.getMaxEmojiSlots();
         const { emojis } = GuildEmojiStore.getGuilds()[g.id];
 
@@ -49,33 +138,34 @@ function getGuildCandidates(isAnimated: boolean) {
     }).sort((a, b) => a.name.localeCompare(b.name));
 }
 
-async function doClone(guildId: string, id: string, name: string, isAnimated: boolean) {
+async function fetchBlob(url: string) {
-    const data = await fetch(`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/emojis/${id}.${isAnimated ? "gif" : "png"}`)
+    const res = await fetch(url);
-        .then(r => r.blob());
+    if (!res.ok)
-    const reader = new FileReader();
+        throw new Error(`Failed to fetch ${url} - ${res.status}`);
 
-    reader.onload = () => {
+    return res.blob();
-        uploadEmoji({
+}
-            guildId,
+
-            name: name.split("~")[0],
+async function doClone(guildId: string, data: Sticker | Emoji) {
-            image: reader.result
+    try {
-        }).then(() => {
+        if (data.t === "Sticker")
-            Toasts.show({
+            await cloneSticker(guildId, data);
-                message: `Successfully cloned ${name}!`,
+        else
-                type: Toasts.Type.SUCCESS,
+            await cloneEmoji(guildId, data);
-                id: Toasts.genId()
+
-            });
+        Toasts.show({
-        }).catch((e: any) => {
+            message: `Successfully cloned ${data.name} to ${GuildStore.getGuild(guildId)?.name ?? "your server"}!`,
-            new Logger("EmoteCloner").error("Failed to upload emoji", e);
+            type: Toasts.Type.SUCCESS,
-            Toasts.show({
+            id: Toasts.genId()
-                message: "Oopsie something went wrong :( Check console!!!",
-                type: Toasts.Type.FAILURE,
-                id: Toasts.genId()
-            });
         });
-    };
+    } catch (e) {
-
+        new Logger("EmoteCloner").error("Failed to clone", data.name, "to", guildId, e);
-    reader.readAsDataURL(data);
+        Toasts.show({
+            message: "Oopsie something went wrong :( Check console!!!",
+            type: Toasts.Type.FAILURE,
+            id: Toasts.genId()
+        });
+    }
 }
 
 const getFontSize = (s: string) => {
@@ -86,20 +176,23 @@ const getFontSize = (s: string) => {
 
 const nameValidator = /^\w+$/i;
 
-function CloneModal({ id, name: emojiName, isAnimated }: { id: string; name: string; isAnimated: boolean; }) {
+function CloneModal({ data }: { data: Sticker | Emoji; }) {
     const [isCloning, setIsCloning] = React.useState(false);
-    const [name, setName] = React.useState(emojiName);
+    const [name, setName] = React.useState(data.name);
 
     const [x, invalidateMemo] = React.useReducer(x => x + 1, 0);
 
-    const guilds = React.useMemo(() => getGuildCandidates(isAnimated), [isAnimated, x]);
+    const guilds = React.useMemo(() => getGuildCandidates(data), [data.id, x]);
 
     return (
         <>
             <Forms.FormTitle className={Margins.top20}>Custom Name</Forms.FormTitle>
             <CheckedTextInput
                 value={name}
-                onChange={setName}
+                onChange={v => {
+                    data.name = v;
+                    setName(v);
+                }}
                 validate={v =>
                     (v.length > 1 && v.length < 32 && nameValidator.test(v))
                     || "Name must be between 2 and 32 characters and only contain alphanumeric characters"
@@ -135,7 +228,7 @@ function CloneModal({ id, name: emojiName, isAnimated }: { id: string; name: str
                                 }}
                                 onClick={isCloning ? void 0 : async () => {
                                     setIsCloning(true);
-                                    doClone(g.id, id, name, isAnimated).finally(() => {
+                                    doClone(g.id, data).finally(() => {
                                         invalidateMemo();
                                         setIsCloning(false);
                                     });
@@ -175,32 +268,38 @@ function CloneModal({ id, name: emojiName, isAnimated }: { id: string; name: str
     );
 }
 
-function buildMenuItem(id: string, name: string, isAnimated: boolean) {
+function buildMenuItem(type: "Emoji" | "Sticker", fetchData: () => Promisable<Omit<Sticker | Emoji, "t">>) {
     return (
         <Menu.MenuItem
             id="emote-cloner"
             key="emote-cloner"
-            label="Clone Emote"
+            label={`Clone ${type}`}
             action={() =>
-                openModal(modalProps => (
+                openModalLazy(async () => {
-                    <ModalRoot {...modalProps}>
+                    const res = await fetchData();
-                        <ModalHeader>
+                    const data = { t: type, ...res } as Sticker | Emoji;
-                            <img
+                    const url = getUrl(data);
-                                role="presentation"
+
-                                aria-hidden
+                    return modalProps => (
-                                src={`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/emojis/${id}.${isAnimated ? "gif" : "png"}`}
+                        <ModalRoot {...modalProps}>
-                                alt=""
+                            <ModalHeader>
-                                height={24}
+                                <img
-                                width={24}
+                                    role="presentation"
-                                style={{ marginRight: "0.5em" }}
+                                    aria-hidden
-                            />
+                                    src={url}
-                            <Forms.FormText>Clone {name}</Forms.FormText>
+                                    alt=""
-                        </ModalHeader>
+                                    height={24}
-                        <ModalContent>
+                                    width={24}
-                            <CloneModal id={id} name={name} isAnimated={isAnimated} />
+                                    style={{ marginRight: "0.5em" }}
-                        </ModalContent>
+                                />
-                    </ModalRoot>
+                                <Forms.FormText>Clone {data.name}</Forms.FormText>
-                ))
+                            </ModalHeader>
+                            <ModalContent>
+                                <CloneModal data={data} />
+                            </ModalContent>
+                        </ModalRoot>
+                    );
+                })
             }
         />
     );
@@ -213,28 +312,53 @@ function isGifUrl(url: string) {
 const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
     const { favoriteableId, itemHref, itemSrc, favoriteableType } = props ?? {};
 
-    if (!favoriteableId || favoriteableType !== "emoji") return;
+    if (!favoriteableId) return;
 
-    const match = props.message.content.match(RegExp(`<a?:(\\w+)(?:~\\d+)?:${favoriteableId}>|https://cdn\\.discordapp\\.com/emojis/${favoriteableId}\\.`));
+    const menuItem = (() => {
-    if (!match) return;
+        switch (favoriteableType) {
-    const name = match[1] ?? "FakeNitroEmoji";
+            case "emoji":
+                const match = props.message.content.match(RegExp(`<a?:(\\w+)(?:~\\d+)?:${favoriteableId}>|https://cdn\\.discordapp\\.com/emojis/${favoriteableId}\\.`));
+                if (!match) return;
+                const name = match[1] ?? "FakeNitroEmoji";
 
-    const group = findGroupChildrenByChildId("copy-link", children);
+                return buildMenuItem("Emoji", () => ({
-    if (group) group.push(buildMenuItem(favoriteableId, name, isGifUrl(itemHref ?? itemSrc)));
+                    id: favoriteableId,
+                    name,
+                    isAnimated: isGifUrl(itemHref ?? itemSrc)
+                }));
+            case "sticker":
+                const sticker = props.message.stickerItems.find(s => s.id === favoriteableId);
+                if (sticker?.format_type === 3 /* LOTTIE */) return;
+
+                return buildMenuItem("Sticker", () => fetchSticker(favoriteableId));
+        }
+    })();
+
+    if (menuItem)
+        findGroupChildrenByChildId("copy-link", children)?.push(menuItem);
 };
 
 const expressionPickerPatch: NavContextMenuPatchCallback = (children, props: { target: HTMLElement; }) => () => {
     const { id, name, type } = props?.target?.dataset ?? {};
-    if (!id || !name || type !== "emoji") return;
+    if (!id) return;
 
-    const firstChild = props.target.firstChild as HTMLImageElement;
+    if (type === "emoji" && name) {
+        const firstChild = props.target.firstChild as HTMLImageElement;
 
-    children.push(buildMenuItem(id, name, firstChild && isGifUrl(firstChild.src)));
+        children.push(buildMenuItem("Emoji", () => ({
+            id,
+            name,
+            isAnimated: firstChild && isGifUrl(firstChild.src)
+        })));
+    } else if (type === "sticker" && !props.target.className?.includes("lottieCanvas")) {
+        children.push(buildMenuItem("Sticker", () => fetchSticker(id)));
+    }
 };
 
 export default definePlugin({
     name: "EmoteCloner",
-    description: "Adds a Clone context menu item to emotes to clone them your own server",
+    description: "Allows you to clone Emotes & Stickers to your own server (right click them)",
+    tags: ["StickerCloner"],
     authors: [Devs.Ven, Devs.Nuckyz],
 
     start() {