CustomSounds

src/plugins/customSounds/README.md

@@ -0,0 +1,5 @@
+# CustomSounds
+
+Replace Discord's sounds with your own. All sounds toggleable in the Notifications page are also customizable here!
+
+https://github.com/Vendicated/Vencord/assets/57493648/41d35b2f-0db0-479e-bbc7-81a6c2c97e20

src/plugins/customSounds/components/SoundOverrideComponent.tsx

@@ -0,0 +1,119 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { classNameFactory } from "@api/Styles";
+import { makeRange } from "@components/PluginSettings/components";
+import { Margins } from "@utils/margins";
+import { classes } from "@utils/misc";
+import { useForceUpdater } from "@utils/react";
+import { findByPropsLazy, findLazy } from "@webpack";
+import { Button, Card, Forms, Slider, Switch, useRef } from "@webpack/common";
+import { ComponentType, Ref, SyntheticEvent } from "react";
+
+import { SoundOverride, SoundPlayer, SoundType } from "../types";
+
+type FileInput = ComponentType<{
+    ref: Ref<HTMLInputElement>;
+    onChange: (e: SyntheticEvent<HTMLInputElement>) => void;
+    multiple?: boolean;
+    filters?: { name?: string; extensions: string[]; }[];
+}>;
+
+const { playSound }: { playSound(id: string): SoundPlayer; } = findByPropsLazy("createSoundForPack", "createSound", "playSound");
+const FileInput: FileInput = findLazy(m => m.prototype?.activateUploadDialogue && m.prototype.setRef);
+const cl = classNameFactory("vc-custom-sounds-");
+
+export function SoundOverrideComponent({ type, override, onChange }: { type: SoundType; override: SoundOverride; onChange: () => Promise<void>; }) {
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const sound = useRef<SoundPlayer | null>(null);
+    const update = useForceUpdater();
+
+    return (
+        <Card className={cl("card")}>
+            <Switch
+                value={override.enabled}
+                onChange={value => {
+                    override.enabled = value;
+                    onChange();
+                    update();
+                }}
+                className={Margins.bottom16}
+                hideBorder={true}
+            >
+                {type.name} <span className={cl("id")}>({type.id})</span>
+            </Switch>
+            <Button
+                color={Button.Colors.PRIMARY}
+                className={Margins.bottom16}
+                onClick={() => {
+                    if (sound.current != null)
+                        sound.current.stop();
+                    sound.current = playSound(type.id);
+                }}
+                disabled={!override.enabled}
+            >
+                Preview
+            </Button>
+            <Forms.FormTitle>Replacement Sound</Forms.FormTitle>
+            <Button
+                color={Button.Colors.PRIMARY}
+                disabled={!override.enabled}
+                className={classes(Margins.right8, Margins.bottom16, cl("upload"))}
+            >
+                Upload
+                <FileInput
+                    ref={fileInputRef}
+                    onChange={event => {
+                        event.stopPropagation();
+                        event.preventDefault();
+
+                        if (!event.currentTarget?.files?.length)
+                            return;
+
+                        const { files } = event.currentTarget;
+                        const file = files[0];
+
+                        // Set override URL to a data URI
+                        const reader = new FileReader;
+                        reader.onload = () => {
+                            override.url = reader.result as string;
+                            onChange();
+                            update();
+                        };
+                        reader.readAsDataURL(file);
+                    }}
+                    // Sorry .caf lovers, https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats
+                    filters={[{ extensions: ["mp3", "wav", "ogg", "webm", "flac"] }]}
+                />
+            </Button>
+            <Button
+                color={Button.Colors.RED}
+                onClick={() => {
+                    override.url = "";
+                    onChange();
+                    update();
+                }}
+                disabled={!(override.enabled && override.url.length !== 0)}
+                style={{ display: "inline" }}
+                className={classes(Margins.right8, Margins.bottom16)}
+            >
+                Clear
+            </Button>
+            <Forms.FormTitle>Volume</Forms.FormTitle>
+            <Slider
+                markers={makeRange(0, 100, 10)}
+                initialValue={override.volume}
+                onValueChange={value => {
+                    override.volume = value;
+                    onChange();
+                    update();
+                }}
+                className={Margins.bottom16}
+                disabled={!override.enabled}
+            />
+        </Card>
+    );
+}

src/plugins/customSounds/index.tsx

@@ -0,0 +1,90 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./styles.css";
+
+import { DataStore } from "@api/index";
+import { definePluginSettings } from "@api/Settings";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { React } from "@webpack/common";
+
+import { SoundOverrideComponent } from "./components/SoundOverrideComponent";
+import { makeEmptyOverride, SoundOverride, soundTypes } from "./types";
+
+const OVERRIDES_KEY = "CustomSounds_overrides";
+let overrides: Record<string, SoundOverride> = soundTypes.reduce((result, sound) => ({ ...result, [sound.id]: makeEmptyOverride() }), {});
+
+const settings = definePluginSettings({
+    overrides: {
+        type: OptionType.COMPONENT,
+        description: "",
+        component: () =>
+            <>
+                {soundTypes.map(type =>
+                    <SoundOverrideComponent
+                        key={type.id}
+                        type={type}
+                        override={overrides[type.id]}
+                        onChange={() => DataStore.set(OVERRIDES_KEY, overrides)}
+                    />
+                )}
+            </>
+    }
+});
+
+export function isOverriden(id: string): boolean {
+    return overrides[id]?.enabled ?? false;
+}
+
+export function findOverride(id: string): SoundOverride | null {
+    const result = overrides[id];
+    if (!result?.enabled)
+        return null;
+
+    return result;
+}
+
+export default definePlugin({
+    name: "CustomSounds",
+    description: "Replace Discord's sounds with your own.",
+    authors: [Devs.TheKodeToad, Devs.SpikeHD],
+    patches: [
+        // sound class
+        {
+            find: 'Error("could not play audio")',
+            replacement: [
+                // override URL
+                {
+                    match: /(?<=new Audio;\i\.src=)\i\("[0-9]+"\)\("\.\.\/\.\.\/sounds\/".concat\(this.name,".mp3"\)/,
+                    replace: "$self.findOverride(this.name)?.url || $&"
+                },
+                // override volume
+                {
+                    match: /Math.min\(\i\.\i\.getOutputVolume\(\)\/100\*this\._volume/,
+                    replace: "$& * ($self.findOverride(this.name)?.volume ?? 100) / 100"
+                }
+            ]
+        },
+        // force classic soundpack for overriden sounds
+        {
+            find: "createSoundForPack:function(){",
+            replacement: {
+                match: /\i\.\i\.getSoundpack\(\)/,
+                replace: '$self.isOverriden(arguments[0]) ? "classic" : $&'
+            }
+        }
+    ],
+    settings,
+    findOverride,
+    isOverriden,
+    async start() {
+        overrides = await DataStore.get(OVERRIDES_KEY) ?? {};
+        for (const type of soundTypes)
+            overrides[type.id] ??= makeEmptyOverride();
+    }
+});
+

src/plugins/customSounds/styles.css

@@ -0,0 +1,11 @@
+.vc-custom-sounds-card {
+    padding: 1em 1em 0;
+}
+
+.vc-custom-sounds-id {
+    color: var(--text-muted);
+}
+
+.vc-custom-sounds-upload {
+    display: inline;
+}

src/plugins/customSounds/types.ts

@@ -0,0 +1,57 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export interface SoundType {
+    name: string;
+    id: string;
+}
+
+export interface SoundOverride {
+    enabled: boolean;
+    url: string;
+    volume: number;
+}
+
+export interface SoundPlayer {
+    loop(): void;
+    play(): void;
+    pause(): void;
+    stop(): void;
+}
+
+export const soundTypes: readonly SoundType[] = [
+    { name: "Message", id: "message1" },
+    { name: "Defean", id: "deafen" },
+    { name: "Undefean", id: "undeafen" },
+    { name: "Mute", id: "mute" },
+    { name: "Unmute", id: "unmute" },
+    { name: "Voice Disconnected", id: "disconnect" },
+    { name: "PTT Activate", id: "ptt_start" },
+    { name: "PTT Deactive", id: "ptt_stop" },
+    { name: "User Join", id: "user_join" },
+    { name: "User Leave", id: "user_leave" },
+    { name: "User Moved", id: "user_moved" },
+    { name: "Outgoing Ring", id: "call_calling" },
+    { name: "Incoming Ring", id: "call_ringing" },
+    { name: "Stream Started", id: "stream_started" },
+    { name: "Stream Ended", id: "stream_ended" },
+    { name: "Viewer Join", id: "stream_user_joined" },
+    { name: "Viewer Leave", id: "stream_user_left" },
+    { name: "Activity Start", id: "activity_launch" },
+    { name: "Activity End", id: "activity_end" },
+    { name: "Activity User Join", id: "activity_user_join" },
+    { name: "Activity User Leave", id: "activity_user_left" },
+    { name: "Invited to Speak", id: "reconnect" }
+] as const;
+
+export function makeEmptyOverride(): SoundOverride {
+    return {
+        enabled: false,
+        useFile: false,
+        url: "",
+        volume: 100
+    };
+}

src/utils/constants.ts

@@ -425,6 +425,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
     newwares: {
         name: "newwares",
         id: 421405303951851520n
+    },
+    SpikeHD: {
+        name: "SpikeHD",
+        id: 221757857836564485n
     }
 } satisfies Record<string, Dev>);