MemberCount: fix family center crash (#1486)

Co-authored-by: V <vendicated@riseup.net>

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.3.4",
+    "version": "1.4.0",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {

src/VencordNative.ts

@@ -63,5 +63,8 @@ export default {
         OpenInApp: {
             resolveRedirect: (url: string) => invoke<string>(IpcEvents.OPEN_IN_APP__RESOLVE_REDIRECT, url),
         },
+        VoiceMessages: {
+            readRecording: () => invoke<Uint8Array | null>(IpcEvents.VOICE_MESSAGES_READ_RECORDING),
+        }
     }
 };

src/api/Styles.ts

@@ -141,7 +141,7 @@ export const compileStyle = (style: Style) => {
  */
 export const classNameToSelector = (name: string, prefix = "") => name.split(" ").map(n => `.${prefix}${n}`).join("");
 
-type ClassNameFactoryArg = string | string[] | Record<string, unknown>;
+type ClassNameFactoryArg = string | string[] | Record<string, unknown> | false | null | undefined | 0 | "";
 /**
  * @param prefix The prefix to add to each class, defaults to `""`
  * @returns A classname generator function
@@ -154,9 +154,9 @@ type ClassNameFactoryArg = string | string[] | Record<string, unknown>;
 export const classNameFactory = (prefix: string = "") => (...args: ClassNameFactoryArg[]) => {
     const classNames = new Set<string>();
     for (const arg of args) {
-        if (typeof arg === "string") classNames.add(arg);
+        if (arg && typeof arg === "string") classNames.add(arg);
         else if (Array.isArray(arg)) arg.forEach(name => classNames.add(name));
-        else if (typeof arg === "object") Object.entries(arg).forEach(([name, value]) => value && classNames.add(name));
+        else if (arg && typeof arg === "object") Object.entries(arg).forEach(([name, value]) => value && classNames.add(name));
     }
     return Array.from(classNames, name => prefix + name).join(" ");
 };

src/components/Icons.tsx

@@ -190,3 +190,16 @@ export function ImageInvisible(props: IconProps) {
         </Icon>
     );
 }
+
+export function Microphone(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-microphone")}
+            viewBox="0 0 24 24"
+        >
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.99 11C14.99 12.66 13.66 14 12 14C10.34 14 9 12.66 9 11V5C9 3.34 10.34 2 12 2C13.66 2 15 3.34 15 5L14.99 11ZM12 16.1C14.76 16.1 17.3 14 17.3 11H19C19 14.42 16.28 17.24 13 17.72V21H11V17.72C7.72 17.23 5 14.41 5 11H6.7C6.7 14 9.24 16.1 12 16.1ZM12 4C11.2 4 11 4.66667 11 5V11C11 11.3333 11.2 12 12 12C12.8 12 13 11.3333 13 11V5C13 4.66667 12.8 4 12 4Z" fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.99 11C14.99 12.66 13.66 14 12 14C10.34 14 9 12.66 9 11V5C9 3.34 10.34 2 12 2C13.66 2 15 3.34 15 5L14.99 11ZM12 16.1C14.76 16.1 17.3 14 17.3 11H19C19 14.42 16.28 17.24 13 17.72V22H11V17.72C7.72 17.23 5 14.41 5 11H6.7C6.7 14 9.24 16.1 12 16.1Z" fill="currentColor" />
+        </Icon >
+    );
+}

src/components/PluginSettings/index.tsx

@@ -176,7 +176,8 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
 const enum SearchStatus {
     ALL,
     ENABLED,
-    DISABLED
+    DISABLED,
+    NEW
 }
 
 export default function PluginSettings() {
@@ -229,6 +230,7 @@ export default function PluginSettings() {
         const enabled = settings.plugins[plugin.name]?.enabled;
         if (enabled && searchValue.status === SearchStatus.DISABLED) return false;
         if (!enabled && searchValue.status === SearchStatus.ENABLED) return false;
+        if (searchValue.status === SearchStatus.NEW && !newPlugins?.includes(plugin.name)) return false;
         if (!searchValue.value.length) return true;
 
         const v = searchValue.value.toLowerCase();
@@ -321,7 +323,8 @@ export default function PluginSettings() {
                         options={[
                             { label: "Show All", value: SearchStatus.ALL, default: true },
                             { label: "Show Enabled", value: SearchStatus.ENABLED },
-                            { label: "Show Disabled", value: SearchStatus.DISABLED }
+                            { label: "Show Disabled", value: SearchStatus.DISABLED },
+                            { label: "Show New", value: SearchStatus.NEW }
                         ]}
                         serialize={String}
                         select={onStatusChange}

src/components/VencordSettings/ThemesTab.tsx

@@ -21,7 +21,7 @@ import { Link } from "@components/Link";
 import { Margins } from "@utils/margins";
 import { useAwaiter } from "@utils/react";
 import { findLazy } from "@webpack";
-import { Card, Forms, React, TextArea } from "@webpack/common";
+import { Button, Card, Forms, React, TextArea } from "@webpack/common";
 
 import { SettingsTab, wrapTab } from "./shared";
 
@@ -112,7 +112,16 @@ function ThemesTab() {
                         <li>• Click the fork button on the top right</li>
                         <li>• Edit the file</li>
                         <li>• Use the link to your own repository instead</li>
+                        <li>• Use the link to your own repository instead </li>
+                        <li>OR</li>
+                        <li>• Paste the contents of the edited theme file into the QuickCSS editor</li>
                     </ul>
+                    <Forms.FormDivider className={Margins.top8 + " " + Margins.bottom16} />
+                    <Button
+                        onClick={() => VencordNative.quickCss.openEditor()}
+                        size={Button.Sizes.SMALL}>
+                        Open QuickCSS File
+                    </Button>
                 </Forms.FormText>
             </Card>
             <Forms.FormTitle tag="h5">Themes</Forms.FormTitle>

src/components/monacoWin.html

@@ -5,8 +5,8 @@
         <title>Vencord QuickCSS Editor</title>
         <link
             rel="stylesheet"
-            href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/editor/editor.main.min.css"
+            href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/editor/editor.main.min.css"
-            integrity="sha512-wB3xfL98hWg1bpkVYSyL0js/Jx9s7FsDg9aYO6nOMSJTgPuk/PFqxXQJKKSUjteZjeYrfgo9NFBOA1r9HwDuZw=="
+            integrity="sha512-MOoQ02h80hklccfLrXFYkCzG+WVjORflOp9Zp8dltiaRP+35LYnO4LKOklR64oMGfGgJDLO8WJpkM1o5gZXYZQ=="
             crossorigin="anonymous"
             referrerpolicy="no-referrer"
         />
@@ -29,8 +29,8 @@
     <body>
         <div id="container"></div>
         <script
-            src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/loader.min.js"
+            src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/loader.min.js"
-            integrity="sha512-A+6SvPGkIN9Rf0mUXmW4xh7rDvALXf/f0VtOUiHlDUSPknu2kcfz1KzLpOJyL2pO+nZS13hhIjLqVgiQExLJrw=="
+            integrity="sha512-QzMpXeCPciAHP4wbYlV2PYgrQcaEkDQUjzkPU4xnjyVSD9T36/udamxtNBqb4qK4/bMQMPZ8ayrBe9hrGdBFjQ=="
             crossorigin="anonymous"
             referrerpolicy="no-referrer"
         ></script>
@@ -38,7 +38,7 @@
         <script>
             require.config({
                 paths: {
-                    vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs",
+                    vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs",
                 },
             });
 

src/main/ipcPlugins.ts

@@ -17,8 +17,10 @@
 */
 
 import { IpcEvents } from "@utils/IpcEvents";
-import { ipcMain } from "electron";
+import { app, ipcMain } from "electron";
+import { readFile } from "fs/promises";
 import { request } from "https";
+import { join } from "path";
 
 // #region OpenInApp
 // These links don't support CORS, so this has to be native
@@ -44,3 +46,17 @@ ipcMain.handle(IpcEvents.OPEN_IN_APP__RESOLVE_REDIRECT, async (_, url: string) =
     return getRedirect(url);
 });
 // #endregion
+
+
+// #region VoiceMessages
+ipcMain.handle(IpcEvents.VOICE_MESSAGES_READ_RECORDING, async () => {
+    const path = join(app.getPath("userData"), "module_data/discord_voice/recording.ogg");
+    try {
+        const buf = await readFile(path);
+        return new Uint8Array(buf.buffer);
+    } catch {
+        return null;
+    }
+});
+
+// #endregion

src/plugins/callTimer.tsx

@@ -19,6 +19,7 @@
 import { Settings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
+import { useTimer } from "@utils/react";
 import definePlugin, { OptionType } from "@utils/types";
 import { React } from "@webpack/common";
 
@@ -85,17 +86,10 @@ export default definePlugin({
     },
 
     Timer({ channelId }: { channelId: string; }) {
-        const [time, setTime] = React.useState(0);
+        const time = useTimer({
-        const startTime = React.useMemo(() => Date.now(), [channelId]);
+            deps: [channelId]
+        });
 
-        React.useEffect(() => {
+        return <p style={{ margin: 0 }}>Connected for <span style={{ fontFamily: "var(--font-code)" }}>{formatDuration(time)}</span></p>;
-            const interval = setInterval(() => setTime(Date.now() - startTime), 1000);
-            return () => {
-                clearInterval(interval);
-                setTime(0);
-            };
-        }, [channelId]);
-
-        return <p style={{ margin: 0 }}>Connected for {formatDuration(time)}</p>;
     }
 });

src/plugins/disableDMCallIdle.ts

@@ -21,7 +21,7 @@ import definePlugin from "@utils/types";
 
 export default definePlugin({
     name: "DisableDMCallIdle",
-    description: "Disables automatically getting kicked from a DM voice call after 5 minutes.",
+    description: "Disables automatically getting kicked from a DM voice call after 3 minutes.",
     authors: [Devs.Nuckyz],
     patches: [
         {

src/plugins/fakeNitro.ts

@@ -565,7 +565,11 @@ export default definePlugin({
 
         switch (embed.type) {
             case "image": {
-                if (!settings.store.transformCompoundSentence && !contentItems.includes(embed.url!) && !contentItems.includes(embed.image!.proxyURL)) return false;
+                if (
+                    !settings.store.transformCompoundSentence
+                    && !contentItems.includes(embed.url!)
+                    && !contentItems.includes(embed.image?.proxyURL!)
+                ) return false;
 
                 if (settings.store.transformEmojis) {
                     if (fakeNitroEmojiRegex.test(embed.url!)) return true;

src/plugins/favGifSearch.tsx

@@ -0,0 +1,241 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 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 { definePluginSettings } from "@api/Settings";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { findByPropsLazy } from "@webpack";
+import { useCallback, useEffect, useRef, useState } from "@webpack/common";
+
+interface SearchBarComponentProps {
+    ref?: React.MutableRefObject<any>;
+    autoFocus: boolean;
+    className: string;
+    size: string;
+    onChange: (query: string) => void;
+    onClear: () => void;
+    query: string;
+    placeholder: string;
+}
+
+type TSearchBarComponent =
+    React.FC<SearchBarComponentProps> & { Sizes: Record<"SMALL" | "MEDIUM" | "LARGE", string>; };
+
+interface Gif {
+    format: number;
+    src: string;
+    width: number;
+    height: number;
+    order: number;
+    url: string;
+}
+
+interface Instance {
+    dead?: boolean;
+    state: {
+        resultType?: string;
+    };
+    props: {
+        favCopy: Gif[],
+
+        favorites: Gif[],
+    },
+    forceUpdate: () => void;
+}
+
+
+const containerClasses: { searchBar: string; } = findByPropsLazy("searchBar", "searchHeader", "gutterSize");
+
+export const settings = definePluginSettings({
+    searchOption: {
+        type: OptionType.SELECT,
+        description: "The part of the url you want to search",
+        options: [
+            {
+                label: "Entire Url",
+                value: "url"
+            },
+            {
+                label: "Path Only (/somegif.gif)",
+                value: "path"
+            },
+            {
+                label: "Host & Path (tenor.com somgif.gif)",
+                value: "hostandpath",
+                default: true
+            }
+        ] as const
+    }
+});
+
+export default definePlugin({
+    name: "FavoriteGifSearch",
+    authors: [Devs.Aria],
+    description: "Adds a search bar for favorite gifs",
+
+    patches: [
+        {
+            find: "renderCategoryExtras",
+            replacement: [
+                {
+                    // https://regex101.com/r/4uHtTE/1
+                    // ($1 renderHeaderContent=function { ... switch (x) ... case FAVORITES:return) ($2) ($3 case default:return r.jsx(($<searchComp>), {...props}))
+                    match: /(renderHeaderContent=function.{1,150}FAVORITES:return)(.{1,150};)(case.{1,200}default:return\(0,\i\.jsx\)\((?<searchComp>\i\.\i))/,
+                    replace: "$1 this.state.resultType === \"Favorites\" ? $self.renderSearchBar(this, $<searchComp>) : $2; $3"
+                },
+                {
+                    // to persist filtered favorites when component re-renders.
+                    // when resizing the window the component rerenders and we loose the filtered favorites and have to type in the search bar to get them again
+                    match: /(,suggestions:\i,favorites:)(\i),/,
+                    replace: "$1$self.getFav($2),favCopy:$2,"
+                }
+
+            ]
+        }
+    ],
+
+    settings,
+
+    getTargetString,
+
+    instance: null as Instance | null,
+    renderSearchBar(instance: Instance, SearchBarComponent: TSearchBarComponent) {
+        this.instance = instance;
+        return (
+            <ErrorBoundary noop={true}>
+                <SearchBar instance={instance} SearchBarComponent={SearchBarComponent} />
+            </ErrorBoundary>
+        );
+    },
+
+    getFav(favorites: Gif[]) {
+        if (!this.instance || this.instance.dead) return favorites;
+        const { favorites: filteredFavorites } = this.instance.props;
+
+        return filteredFavorites != null && filteredFavorites?.length !== favorites.length ? filteredFavorites : favorites;
+
+    }
+});
+
+
+function SearchBar({ instance, SearchBarComponent }: { instance: Instance; SearchBarComponent: TSearchBarComponent; }) {
+    const [query, setQuery] = useState("");
+    const ref = useRef<{ containerRef?: React.MutableRefObject<HTMLDivElement>; } | null>(null);
+
+    const onChange = useCallback((searchQuery: string) => {
+        setQuery(searchQuery);
+        const { props } = instance;
+
+        // return early
+        if (searchQuery === "") {
+            props.favorites = props.favCopy;
+            instance.forceUpdate();
+            return;
+        }
+
+
+        // scroll back to top
+        ref.current?.containerRef?.current
+            .closest("#gif-picker-tab-panel")
+            ?.querySelector("[class|=\"content\"]")
+            ?.firstElementChild?.scrollTo(0, 0);
+
+
+        const result =
+            props.favCopy
+                .map(gif => ({
+                    score: fuzzySearch(searchQuery.toLowerCase(), getTargetString(gif.url ?? gif.src).replace(/(%20|[_-])/g, " ").toLowerCase()),
+                    gif,
+                }))
+                .filter(m => m.score != null) as { score: number; gif: Gif; }[];
+
+        result.sort((a, b) => b.score - a.score);
+        props.favorites = result.map(e => e.gif);
+
+        instance.forceUpdate();
+    }, [instance.state]);
+
+    useEffect(() => {
+        return () => {
+            instance.dead = true;
+        };
+    }, []);
+
+    return (
+        <SearchBarComponent
+            ref={ref}
+            autoFocus={true}
+            className={containerClasses.searchBar}
+            size={SearchBarComponent.Sizes.MEDIUM}
+            onChange={onChange}
+            onClear={() => {
+                setQuery("");
+                if (instance.props.favCopy != null) {
+                    instance.props.favorites = instance.props.favCopy;
+                    instance.forceUpdate();
+                }
+            }}
+            query={query}
+            placeholder="Search Favorite Gifs"
+        />
+    );
+}
+
+
+
+export function getTargetString(urlStr: string) {
+    const url = new URL(urlStr);
+    switch (settings.store.searchOption) {
+        case "url":
+            return url.href;
+        case "path":
+            if (url.host === "media.discordapp.net" || url.host === "tenor.com")
+                // /attachments/899763415290097664/1095711736461537381/attachment-1.gif -> attachment-1.gif
+                // /view/some-gif-hi-24248063 -> some-gif-hi-24248063
+                return url.pathname.split("/").at(-1) ?? url.pathname;
+            return url.pathname;
+        case "hostandpath":
+            if (url.host === "media.discordapp.net" || url.host === "tenor.com")
+                return `${url.host} ${url.pathname.split("/").at(-1) ?? url.pathname}`;
+            return `${url.host} ${url.pathname}`;
+
+        default:
+            return "";
+    }
+}
+
+function fuzzySearch(searchQuery: string, searchString: string) {
+    let searchIndex = 0;
+    let score = 0;
+
+    for (let i = 0; i < searchString.length; i++) {
+        if (searchString[i] === searchQuery[searchIndex]) {
+            score++;
+            searchIndex++;
+        } else {
+            score--;
+        }
+
+        if (searchIndex === searchQuery.length) {
+            return score;
+        }
+    }
+
+    return null;
+}

src/plugins/memberCount.tsx

@@ -106,7 +106,7 @@ export default definePlugin({
         find: ".isSidebarVisible,",
         replacement: {
             match: /(var (\i)=\i\.className.+?children):\[(\i\.useMemo[^}]+"aria-multiselectable")/,
-            replace: "$1:[$2.startsWith('members')?$self.render():null,$3"
+            replace: "$1:[$2?.startsWith('members')?$self.render():null,$3"
         }
     }],
 

src/plugins/messageLinkEmbeds.tsx

@@ -93,6 +93,26 @@ const settings = definePluginSettings({
             }
         ]
     },
+    listMode: {
+        description: "Whether to use ID list as blacklist or whitelist",
+        type: OptionType.SELECT,
+        options: [
+            {
+                label: "Blacklist",
+                value: "blacklist",
+                default: true
+            },
+            {
+                label: "Whitelist",
+                value: "whitelist"
+            }
+        ]
+    },
+    idList: {
+        description: "Guild/channel/user IDs to blacklist or whitelist (separate with comma)",
+        type: OptionType.STRING,
+        default: ""
+    },
     clearMessageCache: {
         type: OptionType.COMPONENT,
         description: "Clear the linked message cache",
@@ -217,6 +237,13 @@ function MessageEmbedAccessory({ message }: { message: Message; }) {
             continue;
         }
 
+        const { listMode, idList } = settings.store;
+
+        const isListed = [guildID, channelID, message.author.id].some(id => id && idList.includes(id));
+
+        if (listMode === "blacklist" && isListed) continue;
+        if (listMode === "whitelist" && !isListed) continue;
+
         let linkedMessage = messageCache.get(messageID)?.message;
         if (!linkedMessage) {
             linkedMessage ??= MessageStore.getMessage(channelID, messageID);
@@ -335,7 +362,7 @@ function AutomodEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
 export default definePlugin({
     name: "MessageLinkEmbeds",
     description: "Adds a preview to messages that link another message",
-    authors: [Devs.TheSun, Devs.Ven],
+    authors: [Devs.TheSun, Devs.Ven, Devs.RyanCaoDev],
     dependencies: ["MessageAccessoriesAPI"],
     patches: [
         {
@@ -363,7 +390,9 @@ export default definePlugin({
 
             return (
                 <ErrorBoundary>
-                    <MessageEmbedAccessory message={props.message} />
+                    <MessageEmbedAccessory
+                        message={props.message}
+                    />
                 </ErrorBoundary>
             );
         }, 4 /* just above rich embeds */);

src/plugins/messageLogger/index.tsx

@@ -152,14 +152,24 @@ export default definePlugin({
             type: OptionType.STRING,
             description: "Comma-separated list of user IDs to ignore",
             default: ""
-        }
+        },
+        ignoreChannels: {
+            type: OptionType.STRING,
+            description: "Comma-separated list of channel IDs to ignore",
+            default: ""
+        },
+        ignoreGuilds: {
+            type: OptionType.STRING,
+            description: "Comma-separated list of guild IDs to ignore",
+            default: ""
+        },
     },
 
     handleDelete(cache: any, data: { ids: string[], id: string; mlDeleted?: boolean; }, isBulk: boolean) {
         try {
             if (cache == null || (!isBulk && !cache.has(data.id))) return cache;
 
-            const { ignoreBots, ignoreSelf, ignoreUsers } = Settings.plugins.MessageLogger;
+            const { ignoreBots, ignoreSelf, ignoreUsers, ignoreChannels, ignoreGuilds } = Settings.plugins.MessageLogger;
             const myId = UserStore.getCurrentUser().id;
 
             function mutate(id: string) {
@@ -171,7 +181,9 @@ export default definePlugin({
                     (msg.flags & EPHEMERAL) === EPHEMERAL ||
                     ignoreBots && msg.author?.bot ||
                     ignoreSelf && msg.author?.id === myId ||
-                    ignoreUsers.includes(msg.author?.id);
+                    ignoreUsers.includes(msg.author?.id) ||
+                    ignoreChannels.includes(msg.channel_id) ||
+                    ignoreGuilds.includes(msg.guild_id);
 
                 if (shouldIgnore) {
                     cache = cache.remove(id);

src/plugins/openInApp.ts

@@ -71,7 +71,7 @@ export default definePlugin({
         {
             find: ".CONNECTED_ACCOUNT_VIEWED,",
             replacement: {
-                match: /(?<=href:\i,onClick:function\(\)\{)(?=return \i=(\i)\.type,.{0,50}CONNECTED_ACCOUNT_VIEWED)/,
+                match: /(?<=href:\i,onClick:function\(\i\)\{)(?=\i=(\i)\.type,.{0,50}CONNECTED_ACCOUNT_VIEWED)/,
                 replace: "$self.handleAccountView(arguments[0],$1.type,$1.id);"
             }
         }

src/plugins/pronoundb/index.ts

@@ -69,7 +69,7 @@ export default definePlugin({
             replacement: [
                 {
                     match: /getGlobalName\(\i\);(?<=displayProfile.{0,200})/,
-                    replace: "$&const [vcPronounce,vcPronounSource]=$self.useProfilePronouns(arguments[0].user.id);if(arguments[0].displayProfile&&vcPronounce)arguments[0].displayProfile.pronouns=vcPronounce;"
+                    replace: "$&const [vcPronounce,vcPronounSource]=$self.useProfilePronouns(arguments[0].user.id,true);if(arguments[0].displayProfile&&vcPronounce)arguments[0].displayProfile.pronouns=vcPronounce;"
                 },
                 PRONOUN_TOOLTIP_PATCH
             ]

src/plugins/pronoundb/pronoundbUtils.ts

@@ -58,16 +58,20 @@ const bulkFetch = debounce(async () => {
     }
 });
 
-function getDiscordPronouns(id: string) {
+function getDiscordPronouns(id: string, useGlobalProfile: boolean = false) {
+    const globalPronouns = UserProfileStore.getUserProfile(id)?.pronouns;
+
+    if (useGlobalProfile) return globalPronouns;
+
     return (
         UserProfileStore.getGuildMemberProfile(id, getCurrentChannel()?.guild_id)?.pronouns
-        || UserProfileStore.getUserProfile(id)?.pronouns
+        || globalPronouns
     );
 }
 
-export function useFormattedPronouns(id: string): PronounsWithSource {
+export function useFormattedPronouns(id: string, useGlobalProfile: boolean = false): PronounsWithSource {
     // Discord is so stupid you can put tons of newlines in pronouns
-    const discordPronouns = getDiscordPronouns(id)?.trim().replace(NewLineRe, " ");
+    const discordPronouns = getDiscordPronouns(id, useGlobalProfile)?.trim().replace(NewLineRe, " ");
 
     const [result] = useAwaiter(() => fetchPronouns(id), {
         fallbackValue: getCachedPronouns(id),
@@ -83,8 +87,8 @@ export function useFormattedPronouns(id: string): PronounsWithSource {
     return [discordPronouns, "Discord"];
 }
 
-export function useProfilePronouns(id: string): PronounsWithSource {
+export function useProfilePronouns(id: string, useGlobalProfile: boolean = false): PronounsWithSource {
-    const pronouns = useFormattedPronouns(id);
+    const pronouns = useFormattedPronouns(id, useGlobalProfile);
 
     if (!settings.store.showInProfile) return EmptyPronouns;
     if (!settings.store.showSelf && id === UserStore.getCurrentUser().id) return EmptyPronouns;

src/plugins/uwuify.ts

@@ -1,143 +0,0 @@
-/*
- * 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 { findOption, RequiredMessageOption } from "@api/Commands";
-import { addPreEditListener, addPreSendListener, MessageObject, removePreEditListener, removePreSendListener } from "@api/MessageEvents";
-import { definePluginSettings } from "@api/Settings";
-import { Devs } from "@utils/constants";
-import definePlugin, { OptionType } from "@utils/types";
-
-const endings = [
-    "rawr x3",
-    "OwO",
-    "UwU",
-    "o.O",
-    "-.-",
-    ">w<",
-    "(⑅˘꒳˘)",
-    "(ꈍᴗꈍ)",
-    "(˘ω˘)",
-    "(U ᵕ U❁)",
-    "σωσ",
-    "òωó",
-    "(///ˬ///✿)",
-    "(U ﹏ U)",
-    "( ͡o ω ͡o )",
-    "ʘwʘ",
-    ":3",
-    ":3", // important enough to have twice
-    "XD",
-    "nyaa~~",
-    "mya",
-    ">_<",
-    "😳",
-    "🥺",
-    "😳😳😳",
-    "rawr",
-    "^^",
-    "^^;;",
-    "(ˆ ﻌ ˆ)♡",
-    "^•ﻌ•^",
-    "/(^•ω•^)",
-    "(✿oωo)"
-];
-
-const replacements = [
-    ["small", "smol"],
-    ["cute", "kawaii~"],
-    ["fluff", "floof"],
-    ["love", "luv"],
-    ["stupid", "baka"],
-    ["what", "nani"],
-    ["meow", "nya~"],
-    ["hello", "hewwo"],
-];
-
-const settings = definePluginSettings({
-    uwuEveryMessage: {
-        description: "Make every single message uwuified",
-        type: OptionType.BOOLEAN,
-        default: false,
-        restartNeeded: false
-    }
-});
-
-function selectRandomElement(arr) {
-    // generate a random index based on the length of the array
-    const randomIndex = Math.floor(Math.random() * arr.length);
-
-    // return the element at the randomly generated index
-    return arr[randomIndex];
-}
-
-
-function uwuify(message: string): string {
-    message = message.toLowerCase();
-    // words
-    for (const pair of replacements) {
-        message = message.replaceAll(pair[0], pair[1]);
-    }
-    message = message
-        .replaceAll(/([ \t\n])n/g, "$1ny") // nyaify
-        .replaceAll(/[lr]/g, "w") // [lr] > w
-        .replaceAll(/([ \t\n])([a-z])/g, (_, p1, p2) => Math.random() < .5 ? `${p1}${p2}-${p2}` : `${p1}${p2}`) // stutter
-        .replaceAll(/([^.,!][.,!])([ \t\n])/g, (_, p1, p2) => `${p1} ${selectRandomElement(endings)}${p2}`); // endings
-    return message;
-}
-
-
-
-// actual command declaration
-export default definePlugin({
-    name: "UwUifier",
-    description: "Simply uwuify commands",
-    authors: [Devs.echo, Devs.skyevg, Devs.PandaNinjas],
-    dependencies: ["CommandsAPI", "MessageEventsAPI"],
-    settings,
-
-    commands: [
-        {
-            name: "uwuify",
-            description: "uwuifies your messages",
-            options: [RequiredMessageOption],
-
-            execute: opts => ({
-                content: uwuify(findOption(opts, "message", "")),
-            }),
-        },
-    ],
-
-    onSend(msg: MessageObject) {
-        // Only run when it's enabled
-        if (settings.store.uwuEveryMessage) {
-            msg.content = uwuify(msg.content);
-        }
-    },
-
-    start() {
-        this.preSend = addPreSendListener((_, msg) => this.onSend(msg));
-        this.preEdit = addPreEditListener((_cid, _mid, msg) =>
-            this.onSend(msg)
-        );
-    },
-
-    stop() {
-        removePreSendListener(this.preSend);
-        removePreEditListener(this.preEdit);
-    },
-});

src/plugins/vencordToolbox/index.css

@@ -1,3 +1,8 @@
+.vc-toolbox-btn,
+.vc-toolbox-btn svg {
+    -webkit-app-region: no-drag;
+}
+
 .vc-toolbox-btn svg {
     color: var(--interactive-normal);
 }

src/plugins/voiceMessages/DesktopRecorder.tsx

@@ -0,0 +1,68 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 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 { Button, showToast, Toasts, useState } from "@webpack/common";
+
+import type { VoiceRecorder } from ".";
+import { settings } from "./settings";
+
+export const VoiceRecorderDesktop: VoiceRecorder = ({ setAudioBlob, onRecordingChange }) => {
+    const [recording, setRecording] = useState(false);
+
+    const changeRecording = (recording: boolean) => {
+        setRecording(recording);
+        onRecordingChange?.(recording);
+    };
+
+    function toggleRecording() {
+        const discordVoice = DiscordNative.nativeModules.requireModule("discord_voice");
+        const nowRecording = !recording;
+
+        if (nowRecording) {
+            discordVoice.startLocalAudioRecording(
+                {
+                    echoCancellation: settings.store.echoCancellation,
+                    noiseCancellation: settings.store.noiseSuppression,
+                },
+                (success: boolean) => {
+                    if (success)
+                        changeRecording(true);
+                    else
+                        showToast("Failed to start recording", Toasts.Type.FAILURE);
+                }
+            );
+        } else {
+            discordVoice.stopLocalAudioRecording(async (filePath: string) => {
+                if (filePath) {
+                    const buf = await VencordNative.pluginHelpers.VoiceMessages.readRecording();
+                    if (buf)
+                        setAudioBlob(new Blob([buf], { type: "audio/ogg; codecs=opus" }));
+                    else
+                        showToast("Failed to finish recording", Toasts.Type.FAILURE);
+                }
+                changeRecording(false);
+            });
+        }
+    }
+
+    return (
+        <Button onClick={toggleRecording}>
+            {recording ? "Stop" : "Start"} recording
+        </Button>
+    );
+};

src/plugins/voiceMessages/VoicePreview.tsx

@@ -0,0 +1,57 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 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 { LazyComponent, useTimer } from "@utils/react";
+import { findByCode } from "@webpack";
+
+import { cl } from "./utils";
+
+interface VoiceMessageProps {
+    src: string;
+    waveform: string;
+}
+const VoiceMessage = LazyComponent<VoiceMessageProps>(() => findByCode('["onVolumeChange","volume","onMute"]'));
+
+export type VoicePreviewOptions = {
+    src?: string;
+    waveform: string;
+    recording?: boolean;
+};
+export const VoicePreview = ({
+    src,
+    waveform,
+    recording,
+}: VoicePreviewOptions) => {
+    const durationMs = useTimer({
+        deps: [recording]
+    });
+
+    const durationSeconds = recording ? Math.floor(durationMs / 1000) : 0;
+    const durationDisplay = Math.floor(durationSeconds / 60) + ":" + (durationSeconds % 60).toString().padStart(2, "0");
+
+    if (src && !recording)
+        return <VoiceMessage key={src} src={src} waveform={waveform} />;
+
+    return (
+        <div className={cl("preview", recording ? "preview-recording" : [])}>
+            <div className={cl("preview-indicator")} />
+            <div className={cl("preview-time")}>{durationDisplay}</div>
+            <div className={cl("preview-label")}>{recording ? "RECORDING" : "----"}</div>
+        </div>
+    );
+};

src/plugins/voiceMessages/WebRecorder.tsx

@@ -0,0 +1,87 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 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 { Button, useState } from "@webpack/common";
+
+import type { VoiceRecorder } from ".";
+import { settings } from "./settings";
+
+export const VoiceRecorderWeb: VoiceRecorder = ({ setAudioBlob, onRecordingChange }) => {
+    const [recording, setRecording] = useState(false);
+    const [paused, setPaused] = useState(false);
+    const [recorder, setRecorder] = useState<MediaRecorder>();
+    const [chunks, setChunks] = useState<Blob[]>([]);
+
+    const changeRecording = (recording: boolean) => {
+        setRecording(recording);
+        onRecordingChange?.(recording);
+    };
+
+    function toggleRecording() {
+        const nowRecording = !recording;
+
+        if (nowRecording) {
+            navigator.mediaDevices.getUserMedia({
+                audio: {
+                    echoCancellation: settings.store.echoCancellation,
+                    noiseSuppression: settings.store.noiseSuppression,
+                }
+            }).then(stream => {
+                const chunks = [] as Blob[];
+                setChunks(chunks);
+
+                const recorder = new MediaRecorder(stream);
+                setRecorder(recorder);
+                recorder.addEventListener("dataavailable", e => {
+                    chunks.push(e.data);
+                });
+                recorder.start();
+
+                changeRecording(true);
+            });
+        } else {
+            if (recorder) {
+                recorder.addEventListener("stop", () => {
+                    setAudioBlob(new Blob(chunks, { type: "audio/ogg; codecs=opus" }));
+
+                    changeRecording(false);
+                });
+                recorder.stop();
+            }
+        }
+    }
+
+    return (
+        <>
+            <Button onClick={toggleRecording}>
+                {recording ? "Stop" : "Start"} recording
+            </Button>
+
+            <Button
+                disabled={!recording}
+                onClick={() => {
+                    setPaused(!paused);
+                    if (paused) recorder?.resume();
+                    else recorder?.pause();
+                }}
+            >
+                {paused ? "Resume" : "Pause"} recording
+            </Button>
+        </>
+    );
+};

src/plugins/voiceMessages/index.tsx

@@ -0,0 +1,235 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 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 "./styles.css";
+
+import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { Flex } from "@components/Flex";
+import { Microphone } from "@components/Icons";
+import { Devs } from "@utils/constants";
+import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
+import { useAwaiter } from "@utils/react";
+import definePlugin from "@utils/types";
+import { chooseFile } from "@utils/web";
+import { findLazy } from "@webpack";
+import { Button, Forms, Menu, PermissionsBits, PermissionStore, RestAPI, SelectedChannelStore, showToast, SnowflakeUtils, Toasts, useEffect, useState } from "@webpack/common";
+import { ComponentType } from "react";
+
+import { VoiceRecorderDesktop } from "./DesktopRecorder";
+import { settings } from "./settings";
+import { cl } from "./utils";
+import { VoicePreview } from "./VoicePreview";
+import { VoiceRecorderWeb } from "./WebRecorder";
+
+const CloudUpload = findLazy(m => m.prototype?.uploadFileToCloud);
+
+export type VoiceRecorder = ComponentType<{
+    setAudioBlob(blob: Blob): void;
+    onRecordingChange?(recording: boolean): void;
+}>;
+
+const VoiceRecorder = IS_DISCORD_DESKTOP ? VoiceRecorderDesktop : VoiceRecorderWeb;
+
+export default definePlugin({
+    name: "VoiceMessages",
+    description: "Allows you to send voice messages like on mobile. To do so, right click the upload button and click Send Voice Message",
+    authors: [Devs.Ven, Devs.Vap],
+    settings,
+
+    start() {
+        addContextMenuPatch("channel-attach", ctxMenuPatch);
+    },
+
+    stop() {
+        removeContextMenuPatch("channel-attach", ctxMenuPatch);
+    }
+});
+
+type AudioMetadata = {
+    waveform: string,
+    duration: number,
+};
+const EMPTY_META: AudioMetadata = {
+    waveform: "AAAAAAAAAAAA",
+    duration: 1,
+};
+
+function sendAudio(blob: Blob, meta: AudioMetadata) {
+    const channelId = SelectedChannelStore.getChannelId();
+
+    const upload = new CloudUpload({
+        file: new File([blob], "voice-message.ogg", { type: "audio/ogg; codecs=opus" }),
+        isClip: false,
+        isThumbnail: false,
+        platform: 1,
+    }, channelId, false, 0);
+
+    upload.on("complete", () => {
+        RestAPI.post({
+            url: `/channels/${channelId}/messages`,
+            body: {
+                flags: 1 << 13,
+                channel_id: channelId,
+                content: "",
+                nonce: SnowflakeUtils.fromTimestamp(Date.now()),
+                sticker_ids: [],
+                type: 0,
+                attachments: [{
+                    id: "0",
+                    filename: upload.filename,
+                    uploaded_filename: upload.uploadedFilename,
+                    waveform: meta.waveform,
+                    duration_secs: meta.duration,
+                }]
+            }
+        });
+    });
+    upload.on("error", () => showToast("Failed to upload voice message", Toasts.Type.FAILURE));
+
+    upload.upload();
+}
+
+function useObjectUrl() {
+    const [url, setUrl] = useState<string>();
+    const setWithFree = (blob: Blob) => {
+        if (url)
+            URL.revokeObjectURL(url);
+        setUrl(URL.createObjectURL(blob));
+    };
+
+    return [url, setWithFree] as const;
+}
+
+function Modal({ modalProps }: { modalProps: ModalProps; }) {
+    const [isRecording, setRecording] = useState(false);
+    const [blob, setBlob] = useState<Blob>();
+    const [blobUrl, setBlobUrl] = useObjectUrl();
+
+    useEffect(() => () => {
+        if (blobUrl)
+            URL.revokeObjectURL(blobUrl);
+    }, [blobUrl]);
+
+    const [meta] = useAwaiter(async () => {
+        if (!blob) return EMPTY_META;
+
+        const audioContext = new AudioContext();
+        const audioBuffer = await audioContext.decodeAudioData(await blob.arrayBuffer());
+        const channelData = audioBuffer.getChannelData(0);
+
+        // average the samples into much lower resolution bins, maximum of 256 total bins
+        const bins = new Uint8Array(window._.clamp(Math.floor(audioBuffer.duration * 10), Math.min(32, channelData.length), 256));
+        const samplesPerBin = Math.floor(channelData.length / bins.length);
+
+        // Get root mean square of each bin
+        for (let binIdx = 0; binIdx < bins.length; binIdx++) {
+            let squares = 0;
+            for (let sampleOffset = 0; sampleOffset < samplesPerBin; sampleOffset++) {
+                const sampleIdx = binIdx * samplesPerBin + sampleOffset;
+                squares += channelData[sampleIdx] ** 2;
+            }
+            bins[binIdx] = ~~(Math.sqrt(squares / samplesPerBin) * 0xFF);
+        }
+
+        // Normalize bins with easing
+        const maxBin = Math.max(...bins);
+        const ratio = 1 + (0xFF / maxBin - 1) * Math.min(1, 100 * (maxBin / 0xFF) ** 3);
+        for (let i = 0; i < bins.length; i++) bins[i] = Math.min(0xFF, ~~(bins[i] * ratio));
+
+        return {
+            waveform: window.btoa(String.fromCharCode(...bins)),
+            duration: audioBuffer.duration,
+        };
+    }, {
+        deps: [blob],
+        fallbackValue: EMPTY_META,
+    });
+
+    return (
+        <ModalRoot {...modalProps}>
+            <ModalHeader>
+                <Forms.FormTitle>Record Voice Message</Forms.FormTitle>
+            </ModalHeader>
+
+            <ModalContent className={cl("modal")}>
+                <div className={cl("buttons")}>
+                    <VoiceRecorder
+                        setAudioBlob={blob => {
+                            setBlob(blob);
+                            setBlobUrl(blob);
+                        }}
+                        onRecordingChange={setRecording}
+                    />
+
+                    <Button
+                        onClick={async () => {
+                            const file = await chooseFile("audio/*");
+                            if (file) {
+                                setBlob(file);
+                                setBlobUrl(file);
+                            }
+                        }}
+                    >
+                        Upload File
+                    </Button>
+                </div>
+
+                <Forms.FormTitle>Preview</Forms.FormTitle>
+                <VoicePreview
+                    src={blobUrl}
+                    waveform={meta.waveform}
+                    recording={isRecording}
+                />
+
+            </ModalContent>
+
+            <ModalFooter>
+                <Button
+                    disabled={!blob}
+                    onClick={() => {
+                        sendAudio(blob!, meta);
+                        modalProps.onClose();
+                        showToast("Now sending voice message... Please be patient", Toasts.Type.MESSAGE);
+                    }}
+                >
+                    Send
+                </Button>
+            </ModalFooter>
+        </ModalRoot>
+    );
+}
+
+const ctxMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
+    if (props.channel.guild_id && !PermissionStore.can(PermissionsBits.SEND_VOICE_MESSAGES, props.channel)) return;
+
+    children.push(
+        <Menu.MenuItem
+            id="vc-send-vmsg"
+            label={
+                <>
+                    <Flex flexDirection="row" style={{ alignItems: "center", gap: 8 }}>
+                        <Microphone height={24} width={24} />
+                        Send voice message
+                    </Flex>
+                </>
+            }
+            action={() => openModal(modalProps => <Modal modalProps={modalProps} />)}
+        />
+    );
+};
+

src/plugins/voiceMessages/settings.ts

@@ -0,0 +1,33 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 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 { definePluginSettings } from "@api/Settings";
+import { OptionType } from "@utils/types";
+
+export const settings = definePluginSettings({
+    noiseSuppression: {
+        type: OptionType.BOOLEAN,
+        description: "Noise Suppression",
+        default: true,
+    },
+    echoCancellation: {
+        type: OptionType.BOOLEAN,
+        description: "Echo Cancellation",
+        default: true,
+    },
+});

src/plugins/voiceMessages/styles.css

@@ -0,0 +1,54 @@
+.vc-vmsg-modal {
+    padding: 1em;
+}
+
+.vc-vmsg-buttons {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.5em;
+    margin-bottom: 1em;
+}
+
+.vc-vmsg-modal audio {
+    width: 100%;
+}
+
+.vc-vmsg-preview {
+    color: var(--text-normal);
+    border-radius: 24px;
+    background-color: var(--background-secondary);
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    height: 48px;
+}
+
+.vc-vmsg-preview-indicator {
+    background: var(--button-secondary-background);
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    transition: background 0.2s ease-in-out;
+}
+
+.vc-vmsg-preview-recording .vc-vmsg-preview-indicator {
+    background: var(--status-danger);
+}
+
+.vc-vmsg-preview-time {
+    opacity: 0.8;
+    margin: 0 0.5em;
+    font-size: 80%;
+
+    /* monospace so different digits have same size */
+    font-family: var(--font-code);
+}
+
+.vc-vmsg-preview-label {
+    opacity: 0.5;
+    letter-spacing: 0.125em;
+    font-weight: 600;
+    flex: 1;
+    text-align: center;
+}

src/plugins/voiceMessages/utils.ts

@@ -0,0 +1,21 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 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 { classNameFactory } from "@api/Styles";
+
+export const cl = classNameFactory("vc-vmsg-");

src/utils/IpcEvents.ts

@@ -32,4 +32,5 @@ export const enum IpcEvents {
     OPEN_MONACO_EDITOR = "VencordOpenMonacoEditor",
 
     OPEN_IN_APP__RESOLVE_REDIRECT = "VencordOIAResolveRedirect",
+    VOICE_MESSAGES_READ_RECORDING = "VencordVMReadRecording",
 }

src/utils/constants.ts

@@ -265,7 +265,7 @@ export const Devs = /* #__PURE__*/ Object.freeze({
     },
     Dziurwa: {
         name: "Dziurwa",
-        id: 787017887877169173n
+        id: 1034579679526526976n
     },
     AutumnVN: {
         name: "AutumnVN",
@@ -329,7 +329,7 @@ export const Devs = /* #__PURE__*/ Object.freeze({
     },
     rad: {
         name: "rad",
-        id: 113027285765885952n
+        id: 610945092504780823n
     },
     HypedDomi: {
         name: "HypedDomi",

src/utils/react.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { React, useEffect, useReducer, useState } from "@webpack/common";
+import { React, useEffect, useMemo, useReducer, useState } from "@webpack/common";
 
 import { makeLazy } from "./lazy";
 import { checkIntersecting } from "./misc";
@@ -135,3 +135,24 @@ export function LazyComponent<T extends object = any>(factory: () => React.Compo
         return <Component {...props} />;
     };
 }
+
+interface TimerOpts {
+    interval?: number;
+    deps?: unknown[];
+}
+
+export function useTimer({ interval = 1000, deps = [] }: TimerOpts) {
+    const [time, setTime] = useState(0);
+    const start = useMemo(() => Date.now(), deps);
+
+    useEffect(() => {
+        const intervalId = setInterval(() => setTime(Date.now() - start), interval);
+
+        return () => {
+            setTime(0);
+            clearInterval(intervalId);
+        };
+    }, deps);
+
+    return time;
+}

src/utils/settingsSync.ts

@@ -23,7 +23,7 @@ import { deflateSync, inflateSync } from "fflate";
 
 import { getCloudAuth, getCloudUrl } from "./cloud";
 import { Logger } from "./Logger";
-import { saveFile } from "./web";
+import { chooseFile, saveFile } from "./web";
 
 export async function importSettings(data: string) {
     try {
@@ -91,30 +91,20 @@ export async function uploadSettingsBackup(showToast = true): Promise<void> {
             }
         }
     } else {
-        const input = document.createElement("input");
+        const file = await chooseFile("application/json");
-        input.type = "file";
+        if (!file) return;
-        input.style.display = "none";
-        input.accept = "application/json";
-        input.onchange = async () => {
-            const file = input.files?.[0];
-            if (!file) return;
 
-            const reader = new FileReader();
+        const reader = new FileReader();
-            reader.onload = async () => {
+        reader.onload = async () => {
-                try {
+            try {
-                    await importSettings(reader.result as string);
+                await importSettings(reader.result as string);
-                    if (showToast) toastSuccess();
+                if (showToast) toastSuccess();
-                } catch (err) {
+            } catch (err) {
-                    new Logger("SettingsSync").error(err);
+                new Logger("SettingsSync").error(err);
-                    if (showToast) toastFailure(err);
+                if (showToast) toastFailure(err);
-                }
+            }
-            };
-            reader.readAsText(file);
         };
-
+        reader.readAsText(file);
-        document.body.appendChild(input);
-        input.click();
-        setImmediate(() => document.body.removeChild(input));
     }
 }
 

src/utils/web.ts

@@ -16,6 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+/**
+ * Prompts the user to save a file to their system
+ * @param file The file to save
+ */
 export function saveFile(file: File) {
     const a = document.createElement("a");
     a.href = URL.createObjectURL(file);
@@ -28,3 +32,24 @@ export function saveFile(file: File) {
         document.body.removeChild(a);
     });
 }
+
+/**
+ * Prompts the user to choose a file from their system
+ * @param mimeTypes A comma separated list of mime types to accept, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers
+ * @returns A promise that resolves to the chosen file or null if the user cancels
+ */
+export function chooseFile(mimeTypes: string) {
+    return new Promise<File | null>(resolve => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.style.display = "none";
+        input.accept = mimeTypes;
+        input.onchange = async () => {
+            resolve(input.files?.[0] ?? null);
+        };
+
+        document.body.appendChild(input);
+        input.click();
+        setImmediate(() => document.body.removeChild(input));
+    });
+}

src/webpack/common/types/utils.d.ts

@@ -96,6 +96,7 @@ export type Permissions = "CREATE_INSTANT_INVITE"
     | "MANAGE_ROLES"
     | "MANAGE_WEBHOOKS"
     | "MANAGE_GUILD_EXPRESSIONS"
+    | "CREATE_GUILD_EXPRESSIONS"
     | "VIEW_AUDIT_LOG"
     | "VIEW_CHANNEL"
     | "VIEW_GUILD_ANALYTICS"
@@ -116,6 +117,7 @@ export type Permissions = "CREATE_INSTANT_INVITE"
     | "CREATE_PRIVATE_THREADS"
     | "USE_EXTERNAL_STICKERS"
     | "SEND_MESSAGES_IN_THREADS"
+    | "SEND_VOICE_MESSAGES"
     | "CONNECT"
     | "SPEAK"
     | "MUTE_MEMBERS"
@@ -125,8 +127,11 @@ export type Permissions = "CREATE_INSTANT_INVITE"
     | "PRIORITY_SPEAKER"
     | "STREAM"
     | "USE_EMBEDDED_ACTIVITIES"
+    | "USE_SOUNDBOARD"
+    | "USE_EXTERNAL_SOUNDS"
     | "REQUEST_TO_SPEAK"
-    | "MANAGE_EVENTS";
+    | "MANAGE_EVENTS"
+    | "CREATE_EVENTS";
 
 export type PermissionsBits = Record<Permissions, bigint>;