renameVoiceDevices/index.tsx

/* eslint-disable simple-header/header */
/*
 * Vencord, a Discord client mod
 * Copyright (c) 2025 nin0dev
 * All rights reserved.
 */

import { definePluginSettings, useSettings } from "@api/Settings";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { findByPropsLazy } from "@webpack";
import { Text, TextInput } from "@webpack/common";

const settings = definePluginSettings({
    settings: {
        type: OptionType.COMPONENT,
        component: () => <RenameSettings />
    },
    values: {
        type: OptionType.CUSTOM,
        default: [] as {
            name: string;
            id: string;
        }[]
    }
});

const getDevices = findByPropsLazy("getInputDevices");

function RenameSettings() {
    const vcSettings = useSettings(["plugins.RenameVoiceDevices.values"]);
    return <>
        <Text style={{ fontSize: "1.1rem", fontWeight: "bold", marginBottom: "10px" }}>Input devices</Text>
        {
            (() => {
                const vcSettings = useSettings(["plugins.RenameVoiceDevices.values"]);
                const savedDevices = vcSettings.plugins.RenameVoiceDevices.values;
                const devices = Object.values(getDevices.getInputDevices());
                return devices.map((device: any) => {
                    if (device.id === "default") return;
                    return <div key={device.id} style={{ marginBottom: "10px" }}>
                        <Text style={{ fontSize: "0.9rem", color: "var(--text-muted)", marginBottom: "7px" }}>🎤 {device.id}</Text>
                        <TextInput
                            name="Name"
                            placeholder={device.name}
                            value={savedDevices.find(v => v.id === device.id)?.name || ""}
                            onChange={v => {
                                const existingDevice = settings.store.values.find(vv => device.id === vv.id);
                                if (existingDevice) {
                                    if (v === "") {
                                        settings.store.values.splice(settings.store.values.indexOf(existingDevice), 1);
                                        return;
                                    }
                                    existingDevice.name = v;
                                } else {
                                    if (v === "") return;
                                    settings.store.values.push({
                                        name: v,
                                        id: device.id
                                    });
                                }
                            }}
                        />
                    </div>;
                });
            })()
        }
        <Text style={{ fontSize: "1.1rem", fontWeight: "bold", marginBottom: "10px" }}>Output devices</Text>
        {
            (() => {
                const savedDevices = vcSettings.plugins.RenameVoiceDevices.values;
                const devices = Object.values(getDevices.getOutputDevices());
                return devices.map((device: any) => {
                    if (device.id === "default") return;
                    return <div key={device.id} style={{ marginBottom: "10px" }}>
                        <Text style={{ fontSize: "0.9rem", color: "var(--text-muted)", marginBottom: "7px" }}>🔊 {device.id}</Text>
                        <TextInput
                            name="Name"
                            placeholder={device.name}
                            value={savedDevices.find(v => v.id === device.id)?.name || ""}
                            onChange={v => {
                                const existingDevice = settings.store.values.find(vv => device.id === vv.id);
                                if (existingDevice) {
                                    if (v === "") {
                                        settings.store.values.splice(settings.store.values.indexOf(existingDevice), 1);
                                        return;
                                    }
                                    existingDevice.name = v;
                                } else {
                                    if (v === "") return;
                                    settings.store.values.push({
                                        name: v,
                                        id: device.id
                                    });
                                }
                            }}
                        />
                    </div>;
                });
            })()
        }
    </>;
}

export default definePlugin({
    name: "RenameVoiceDevices",
    description: "Rename voice input/output devices",
    authors: [Devs.nin0dev],
    settings,
    processDevices(devices: {
        [key: string]: {
            id: string;
            originalName?: string;
            name: string;
        };
    }) {
        const frozenDevices = devices;
        for (const key in devices) {
            const potentialRenamedDevice = settings.store.values.find(vv => devices[key].id === vv.id);
            if (potentialRenamedDevice) devices[key].name = `${potentialRenamedDevice.name}`;
        }
        return devices;
    },
    patches: [{
        find: "getInputDevices(){return",
        replacement: [
            {
                match: /getInputDevices\(\){return (\i)}/,
                replace: "getInputDevices(){return $self.processDevices($1)}"
            },
            {
                match: /getOutputDevices\(\){return (\i)}/,
                replace: "getOutputDevices(){return $self.processDevices($1)}"
            }
        ]
    }]
});