mirrors/Vencord
1
0
Fork 1
mirror of https://github.com/Vendicated/Vencord.git synced 2025-01-10 09:56:24 +00:00
Code Activity

feat(plugin): VCPanelSettings

Browse source
This commit is contained in:
nin0dev 2024-12-25 17:29:45 -05:00
parent 20ed7dc96b
commit 2efb29c7cb
2 changed files with 254 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

251
src/plugins/vcPanelSettings/index.tsx Normal file
View file

@ -0,0 +1,251 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2024 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import "./style.css";
import { definePluginSettings } from "@api/Settings";
import { Link } from "@components/Link";
import { Devs } from "@utils/constants";
import { identity } from "@utils/misc";
import definePlugin, { OptionType } from "@utils/types";
import { findByPropsLazy } from "@webpack";
import { FluxDispatcher, Forms, Select, Slider, Text, useEffect, useState } from "@webpack/common";
import { Settings } from "Vencord";
const configModule = findByPropsLazy("getOutputVolume");
function OutputVolumeComponent() {
const [outputVolume, setOutputVolume] = useState(configModule.getOutputVolume());
useEffect(() => {
const listener = () => setOutputVolume(configModule.getOutputVolume());
FluxDispatcher.subscribe("AUDIO_SET_OUTPUT_VOLUME", listener);
});
return (
<>
{Settings.plugins.VCPanelSettings.showOutputVolumeHeader && <Forms.FormTitle>Output volume - {Math.floor(outputVolume)}%</Forms.FormTitle>}
<Slider maxValue={200} minValue={0} initialValue={outputVolume} hideBubble={Settings.plugins.VCPanelSettings.showOutputVolumeHeader} onValueChange={volume => {
FluxDispatcher.dispatch({
type: "AUDIO_SET_OUTPUT_VOLUME",
volume
});
}} />
</>
);
}
function InputVolumeComponent() {
const [inputVolume, setInputVolume] = useState(configModule.getInputVolume());
useEffect(() => {
const listener = () => setInputVolume(configModule.getInputVolume());
FluxDispatcher.subscribe("AUDIO_SET_INPUT_VOLUME", listener);
});
return (
<>
{Settings.plugins.VCPanelSettings.showInputVolumeHeader && <Forms.FormTitle>Input volume - {Math.floor(inputVolume)}%</Forms.FormTitle>}
<Slider maxValue={100} minValue={0} initialValue={inputVolume} onValueChange={volume => {
FluxDispatcher.dispatch({
type: "AUDIO_SET_INPUT_VOLUME",
volume
});
}} />
</>
);
}
function OutputDeviceComponent() {
const [outputDevice, setOutputDevice] = useState(configModule.getOutputDeviceId());
useEffect(() => {
const listener = () => setOutputDevice(configModule.getOutputDeviceId());
FluxDispatcher.subscribe("AUDIO_SET_OUTPUT_DEVICE", listener);
});
return (
<>
{Settings.plugins.VCPanelSettings.showOutputDeviceHeader && <Forms.FormTitle>Output device</Forms.FormTitle>}
<Select options={Object.values(configModule.getOutputDevices()).map((device: any /* i am NOT typing this*/) => {
return { value: device.id, label: Settings.plugins.VCPanelSettings.showOutputDeviceHeader ? device.name : `🔊 ${device.name}` };
})}
serialize={identity}
isSelected={value => value === outputDevice}
select={id => {
FluxDispatcher.dispatch({
type: "AUDIO_SET_OUTPUT_DEVICE",
id
});
}}>
</Select>
</>
);
}
function InputDeviceComponent() {
const [inputDevice, setInputDevice] = useState(configModule.getInputDeviceId());
useEffect(() => {
const listener = () => setInputDevice(configModule.getInputDeviceId());
FluxDispatcher.subscribe("AUDIO_SET_INPUT_DEVICE", listener);
});
return (
<div style={{ marginTop: "10px" }}>
{Settings.plugins.VCPanelSettings.showInputDeviceHeader && <Forms.FormTitle>Input device</Forms.FormTitle>}
<Select options={Object.values(configModule.getInputDevices()).map((device: any /* i am NOT typing this*/) => {
return { value: device.id, label: Settings.plugins.VCPanelSettings.showInputDeviceHeader ? device.name : `🎤 ${device.name}` };
})}
serialize={identity}
isSelected={value => value === inputDevice}
select={id => {
FluxDispatcher.dispatch({
type: "AUDIO_SET_INPUT_DEVICE",
id
});
}}>
</Select>
</div>
);
}
function VideoDeviceComponent() {
const [videoDevice, setVideoDevice] = useState(configModule.getVideoDeviceId());
useEffect(() => {
const listener = () => setVideoDevice(configModule.getVideoDeviceId());
FluxDispatcher.subscribe("MEDIA_ENGINE_SET_VIDEO_DEVICE", listener);
});
return (
<div style={{ marginTop: "10px" }}>
{Settings.plugins.VCPanelSettings.showVideoDeviceHeader && <Forms.FormTitle>Camera</Forms.FormTitle>}
<Select options={Object.values(configModule.getVideoDevices()).map((device: any /* i am NOT typing this*/) => {
return { value: device.id, label: Settings.plugins.VCPanelSettings.showVideoDeviceHeader ? device.name : `📷 ${device.name}` };
})}
serialize={identity}
isSelected={value => value === videoDevice}
select={id => {
FluxDispatcher.dispatch({
type: "MEDIA_ENGINE_SET_VIDEO_DEVICE",
id
});
}}>
</Select>
</div>
);
}
function VoiceSettings() {
const [showSettings, setShowSettings] = useState(Settings.plugins.VCPanelSettings.uncollapseSettingsByDefault);
return <div style={{ marginTop: "20px" }}>
<div style={{ marginBottom: "10px" }}>
<Link className="vc-panelsettings-underline-on-hover" style={{ color: "var(--header-secondary)" }} onClick={() => { setShowSettings(!showSettings); }}>{!showSettings ? "► Settings" : "▼ Hide"}</Link>
</div>
{
showSettings && <>
{Settings.plugins.VCPanelSettings.outputVolume && <OutputVolumeComponent />}
{Settings.plugins.VCPanelSettings.inputVolume && <InputVolumeComponent />}
{Settings.plugins.VCPanelSettings.outputDevice && <OutputDeviceComponent />}
{Settings.plugins.VCPanelSettings.inputDevice && <InputDeviceComponent />}
{Settings.plugins.VCPanelSettings.camera && <VideoDeviceComponent />}
</>
}
</div>;
}
export default definePlugin({
name: "VCPanelSettings",
description: "Control voice settings right from the voice panel",
authors: [Devs.nin0dev],
settings: definePluginSettings({
title1: {
type: OptionType.COMPONENT,
component: () => <Text style={{ fontWeight: "bold", fontSize: "1.27rem" }}>Appearance</Text>,
description: ""
},
uncollapseSettingsByDefault: {
type: OptionType.BOOLEAN,
default: false,
description: "Automatically uncollapse voice settings by default"
},
title2: {
type: OptionType.COMPONENT,
component: () => <Text style={{ fontWeight: "bold", fontSize: "1.27rem" }}>Settings to show</Text>,
description: ""
},
outputVolume: {
type: OptionType.BOOLEAN,
default: true,
description: "Show an output volume slider"
},
inputVolume: {
type: OptionType.BOOLEAN,
default: true,
description: "Show an input volume slider"
},
outputDevice: {
type: OptionType.BOOLEAN,
default: true,
description: "Show an output device selector"
},
inputDevice: {
type: OptionType.BOOLEAN,
default: true,
description: "Show an input device selector"
},
camera: {
type: OptionType.BOOLEAN,
default: false,
description: "Show a camera selector"
},
title3: {
type: OptionType.COMPONENT,
component: () => <Text style={{ fontWeight: "bold", fontSize: "1.27rem" }}>Headers to show</Text>,
description: ""
},
showOutputVolumeHeader: {
type: OptionType.BOOLEAN,
default: true,
description: "Show header above output volume slider"
},
showInputVolumeHeader: {
type: OptionType.BOOLEAN,
default: true,
description: "Show header above input volume slider"
},
showOutputDeviceHeader: {
type: OptionType.BOOLEAN,
default: false,
description: "Show header above output device selector"
},
showInputDeviceHeader: {
type: OptionType.BOOLEAN,
default: false,
description: "Show header above input device selector"
},
showVideoDeviceHeader: {
type: OptionType.BOOLEAN,
default: false,
description: "Show header above camera selector"
},
}),
renderVoiceSettings() { return <VoiceSettings />; },
patches: [
{
find: "this.renderChannelButtons()",
replacement: {
match: /this.renderChannelButtons\(\)/,
replace: "this.renderChannelButtons(), $self.renderVoiceSettings()"
}
}
]
});

3
src/plugins/vcPanelSettings/style.css Normal file
View file

@ -0,0 +1,3 @@
.vc-panelsettings-underline-on-hover:hover {
text-decoration: underline;
}