New plugin: VoiceMessages (#1380)

Co-authored-by: V <vendicated@riseup.net>
Co-authored-by: Justice Almanzar <superdash993@gmail.com>

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/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/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/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/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,12 +91,7 @@ export async function uploadSettingsBackup(showToast = true): Promise<void> {
             }
         }
     } else {
-        const input = document.createElement("input");
+        const file = await chooseFile("application/json");
-        input.type = "file";
-        input.style.display = "none";
-        input.accept = "application/json";
-        input.onchange = async () => {
-            const file = input.files?.[0];
         if (!file) return;
 
         const reader = new FileReader();
@@ -110,11 +105,6 @@ export async function uploadSettingsBackup(showToast = true): Promise<void> {
             }
         };
         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>;