camera

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}
+                isSelected={value => value === outputDevice}
-                select={(id) => {
+                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}
+                isSelected={value => value === inputDevice}
-                select={(id) => {
+                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 />; },