diff --git a/src/plugins/vcPanelSettings/index.tsx b/src/plugins/vcPanelSettings/index.tsx new file mode 100644 index 000000000..71269753c --- /dev/null +++ b/src/plugins/vcPanelSettings/index.tsx @@ -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 && Output volume - {Math.floor(outputVolume)}%} + { + 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 && Input volume - {Math.floor(inputVolume)}%} + { + 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 && Output device} + + + ); +} + +function InputDeviceComponent() { + const [inputDevice, setInputDevice] = useState(configModule.getInputDeviceId()); + + useEffect(() => { + const listener = () => setInputDevice(configModule.getInputDeviceId()); + FluxDispatcher.subscribe("AUDIO_SET_INPUT_DEVICE", listener); + }); + + return ( +
+ {Settings.plugins.VCPanelSettings.showInputDeviceHeader && Input device} + +
+ ); +} + +function VideoDeviceComponent() { + const [videoDevice, setVideoDevice] = useState(configModule.getVideoDeviceId()); + + useEffect(() => { + const listener = () => setVideoDevice(configModule.getVideoDeviceId()); + FluxDispatcher.subscribe("MEDIA_ENGINE_SET_VIDEO_DEVICE", listener); + }); + + return ( +
+ {Settings.plugins.VCPanelSettings.showVideoDeviceHeader && Camera} + +
+ ); +} + +function VoiceSettings() { + const [showSettings, setShowSettings] = useState(Settings.plugins.VCPanelSettings.uncollapseSettingsByDefault); + return
+
+ { setShowSettings(!showSettings); }}>{!showSettings ? "â–º Settings" : "â–¼ Hide"} +
+ + { + showSettings && <> + {Settings.plugins.VCPanelSettings.outputVolume && } + {Settings.plugins.VCPanelSettings.inputVolume && } + {Settings.plugins.VCPanelSettings.outputDevice && } + {Settings.plugins.VCPanelSettings.inputDevice && } + {Settings.plugins.VCPanelSettings.camera && } + + } +
; +} + +export default definePlugin({ + name: "VCPanelSettings", + description: "Control voice settings right from the voice panel", + authors: [Devs.nin0dev], + settings: definePluginSettings({ + title1: { + type: OptionType.COMPONENT, + component: () => Appearance, + description: "" + }, + uncollapseSettingsByDefault: { + type: OptionType.BOOLEAN, + default: false, + description: "Automatically uncollapse voice settings by default" + }, + title2: { + type: OptionType.COMPONENT, + component: () => Settings to show, + 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: () => Headers to show, + 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 ; }, + patches: [ + { + find: "this.renderChannelButtons()", + replacement: { + match: /this.renderChannelButtons\(\)/, + replace: "this.renderChannelButtons(), $self.renderVoiceSettings()" + } + } + ] +}); diff --git a/src/plugins/vcPanelSettings/style.css b/src/plugins/vcPanelSettings/style.css new file mode 100644 index 000000000..f54657419 --- /dev/null +++ b/src/plugins/vcPanelSettings/style.css @@ -0,0 +1,3 @@ +.vc-panelsettings-underline-on-hover:hover { + text-decoration: underline; +}