[MIRROR] Adds slider component for preferences, converts TTS volume, and pitch to use it [MDB IGNORE] (#22860)

* Adds slider component for preferences, converts TTS volume, and pitch to use it

* Update base.tsx

---------

Co-authored-by: peptron1 <57651027+peptron1@users.noreply.github.com>
Co-authored-by: Bloop <13398309+vinylspiders@users.noreply.github.com>
This commit is contained in:
SkyratBot
2023-08-03 20:03:51 -04:00
committed by GitHub
co-authored by peptron1 Bloop
parent 247d37c38a
commit 3572896211
3 changed files with 27 additions and 6 deletions
@@ -3,8 +3,8 @@ import { BooleanLike, classes } from 'common/react';
import { ComponentType, createComponentVNode, InfernoNode } from 'inferno';
import { VNodeFlags } from 'inferno-vnode-flags';
import { sendAct, useBackend, useLocalState } from '../../../../backend';
// SKYRAT EDIT
import { Box, Button, Dropdown, Input, NumberInput, Stack, TextArea } from '../../../../components';
// SKYRAT EDIT - adds TextArea to imports
import { Box, Button, Dropdown, Input, NumberInput, Slider, Stack, TextArea } from '../../../../components';
// SKYRAT EDIT END
import { createSetPreference, PreferencesMenuData } from '../../data';
import { ServerPreferencesFetcher } from '../../ServerPreferencesFetcher';
@@ -304,6 +304,27 @@ export const FeatureNumberInput = (
);
};
export const FeatureSliderInput = (
props: FeatureValueProps<number, number, FeatureNumericData>
) => {
if (!props.serverData) {
return <Box>Loading...</Box>;
}
return (
<Slider
onChange={(e, value) => {
props.handleSetValue(value);
}}
minValue={props.serverData.minimum}
maxValue={props.serverData.maximum}
step={props.serverData.step}
value={props.value}
stepPixelSize={10}
/>
);
};
export const FeatureValueInput = (
props: {
feature: Feature<unknown>;
@@ -1,4 +1,4 @@
import { FeatureChoiced, FeatureChoicedServerData, FeatureDropdownInput, FeatureValueProps, FeatureNumeric, FeatureNumberInput } from '../base';
import { FeatureChoiced, FeatureChoicedServerData, FeatureDropdownInput, FeatureValueProps, FeatureNumeric, FeatureSliderInput } from '../base';
import { Stack, Button } from '../../../../../components';
const FeatureTTSDropdownInput = (
@@ -40,5 +40,5 @@ export const tts_voice: FeatureChoiced = {
export const tts_voice_pitch: FeatureNumeric = {
name: 'Voice Pitch Adjustment',
component: FeatureNumberInput,
component: FeatureSliderInput,
};
@@ -1,5 +1,5 @@
import { multiline } from 'common/string';
import { CheckboxInput, FeatureChoiced, FeatureDropdownInput, FeatureToggle, Feature, FeatureNumberInput } from '../base';
import { CheckboxInput, FeatureChoiced, FeatureDropdownInput, FeatureToggle, Feature, FeatureSliderInput } from '../base';
export const sound_ambience: FeatureToggle = {
name: 'Enable ambience',
@@ -49,7 +49,7 @@ export const sound_tts_volume: Feature<number> = {
name: 'TTS Volume',
category: 'SOUND',
description: 'The volume that the text-to-speech sounds will play at.',
component: FeatureNumberInput,
component: FeatureSliderInput,
};
export const sound_jukebox: FeatureToggle = {