diff --git a/index.tsx b/index.tsx index 7b764c9..7126975 100644 --- a/index.tsx +++ b/index.tsx @@ -1,30 +1,34 @@ +/* + * 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 { Devs } from "@utils/constants"; -import definePlugin, { OptionType } from "@utils/types"; -import { findByProps, findByPropsLazy, findComponentByCode } from "@webpack"; -import { FluxDispatcher, Forms, Select, Slider, Text, useEffect } from "@webpack/common"; -import { useState } from "@webpack/common"; -import { identity } from "@utils/misc"; -import { boolean } from "ts-pattern/dist/patterns"; -import { Settings } from "Vencord"; 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 audioConfigModule = findByPropsLazy("getOutputVolume"); +const configModule = findByPropsLazy("getOutputVolume"); function OutputVolumeComponent() { - const [outputVolume, setOutputVolume] = useState(audioConfigModule.getOutputVolume()); + const [outputVolume, setOutputVolume] = useState(configModule.getOutputVolume()); useEffect(() => { - const listener = () => setOutputVolume(audioConfigModule.getOutputVolume()); + 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 @@ -35,17 +39,17 @@ function OutputVolumeComponent() { } function InputVolumeComponent() { - const [inputVolume, setInputVolume] = useState(audioConfigModule.getInputVolume()); + const [inputVolume, setInputVolume] = useState(configModule.getInputVolume()); useEffect(() => { - const listener = () => setInputVolume(audioConfigModule.getInputVolume()); + 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 @@ -56,22 +60,22 @@ function InputVolumeComponent() { } function OutputDeviceComponent() { - const [outputDevice, setOutputDevice] = useState(audioConfigModule.getOutputDeviceId()); + const [outputDevice, setOutputDevice] = useState(configModule.getOutputDeviceId()); useEffect(() => { - const listener = () => setOutputDevice(audioConfigModule.getOutputDeviceId()); + const listener = () => setOutputDevice(configModule.getOutputDeviceId()); FluxDispatcher.subscribe("AUDIO_SET_OUTPUT_DEVICE", listener); }); return ( <> {Settings.plugins.VCPanelSettings.showOutputDeviceHeader && Output device} - { + { return { value: device.id, label: Settings.plugins.VCPanelSettings.showOutputDeviceHeader ? device.name : `🔊 ${device.name}` }; })} serialize={identity} - isSelected={(value) => value === outputDevice} - select={(id) => { + isSelected={value => value === outputDevice} + select={id => { FluxDispatcher.dispatch({ type: "AUDIO_SET_OUTPUT_DEVICE", id @@ -84,22 +88,22 @@ function OutputDeviceComponent() { } function InputDeviceComponent() { - const [inputDevice, setInputDevice] = useState(audioConfigModule.getInputDeviceId()); + const [inputDevice, setInputDevice] = useState(configModule.getInputDeviceId()); useEffect(() => { - const listener = () => setInputDevice(audioConfigModule.getInputDeviceId()); + const listener = () => setInputDevice(configModule.getInputDeviceId()); FluxDispatcher.subscribe("AUDIO_SET_INPUT_DEVICE", listener); }); return ( {Settings.plugins.VCPanelSettings.showInputDeviceHeader && Input device} - { + { return { value: device.id, label: Settings.plugins.VCPanelSettings.showInputDeviceHeader ? device.name : `🎤 ${device.name}` }; })} serialize={identity} - isSelected={(value) => value === inputDevice} - select={(id) => { + isSelected={value => value === inputDevice} + select={id => { FluxDispatcher.dispatch({ type: "AUDIO_SET_INPUT_DEVICE", id @@ -111,6 +115,34 @@ function InputDeviceComponent() { ); } +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} + { + 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 + }); + }}> + + + + ); +} + function VoiceSettings() { const [showSettings, setShowSettings] = useState(Settings.plugins.VCPanelSettings.uncollapseSettingsByDefault); return @@ -124,6 +156,7 @@ function VoiceSettings() { {Settings.plugins.VCPanelSettings.inputVolume && } {Settings.plugins.VCPanelSettings.outputDevice && } {Settings.plugins.VCPanelSettings.inputDevice && } + {Settings.plugins.VCPanelSettings.camera && } > } ; @@ -164,12 +197,16 @@ export default definePlugin({ 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, @@ -188,12 +225,17 @@ export default definePlugin({ showOutputDeviceHeader: { type: OptionType.BOOLEAN, default: false, - description: "Show header above output device slider" + description: "Show header above output device selector" }, showInputDeviceHeader: { type: OptionType.BOOLEAN, default: false, - description: "Show header above input device slider" + description: "Show header above input device selector" + }, + showVideoDeviceHeader: { + type: OptionType.BOOLEAN, + default: false, + description: "Show header above camera selector" }, }), renderVoiceSettings() { return ; },