camera
This commit is contained in:
parent
d863cf300e
commit
738443a8b2
SSH key fingerprint:
SHA256:Is2DvJdw1OkSopR4wKJfdWV0fZhMLxpnCs1P1nPhIgA
1 changed files with 70 additions and 28 deletions
98
index.tsx
98
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 && <Forms.FormTitle>Output volume - {Math.floor(outputVolume)}%</Forms.FormTitle>}
|
||||
<Slider maxValue={200} minValue={0} initialValue={outputVolume} hideBubble={Settings.plugins.VCPanelSettings.showOutputVolumeHeader} onValueChange={(volume) => {
|
||||
<Slider maxValue={200} minValue={0} initialValue={outputVolume} hideBubble={Settings.plugins.VCPanelSettings.showOutputVolumeHeader} onValueChange={volume => {
|
||||
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 && <Forms.FormTitle>Input volume - {Math.floor(inputVolume)}%</Forms.FormTitle>}
|
||||
<Slider maxValue={100} minValue={0} initialValue={inputVolume} onValueChange={(volume) => {
|
||||
<Slider maxValue={100} minValue={0} initialValue={inputVolume} onValueChange={volume => {
|
||||
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 && <Forms.FormTitle>Output device</Forms.FormTitle>}
|
||||
<Select options={Object.values(audioConfigModule.getOutputDevices()).map((device: any /*i am NOT typing this*/) => {
|
||||
<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) => {
|
||||
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 (
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
{Settings.plugins.VCPanelSettings.showInputDeviceHeader && <Forms.FormTitle>Input device</Forms.FormTitle>}
|
||||
<Select options={Object.values(audioConfigModule.getInputDevices()).map((device: any /*i am NOT typing this*/) => {
|
||||
<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) => {
|
||||
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 (
|
||||
<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" }}>
|
||||
|
|
@ -124,6 +156,7 @@ function VoiceSettings() {
|
|||
{Settings.plugins.VCPanelSettings.inputVolume && <InputVolumeComponent />}
|
||||
{Settings.plugins.VCPanelSettings.outputDevice && <OutputDeviceComponent />}
|
||||
{Settings.plugins.VCPanelSettings.inputDevice && <InputDeviceComponent />}
|
||||
{Settings.plugins.VCPanelSettings.camera && <VideoDeviceComponent />}
|
||||
</>
|
||||
}
|
||||
</div>;
|
||||
|
|
@ -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: () => <Text style={{ fontWeight: "bold", fontSize: "1.27rem" }}>Headers to show</Text>,
|
||||
|
|
@ -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 <VoiceSettings />; },
|
||||
|
|
|
|||
Loading…
Reference in a new issue