feat: settings sliders (#120)

Co-authored-by: Ven <vendicated@riseup.net>

src/components/PluginSettings/PluginModal.tsx

@@ -15,10 +15,9 @@ import {
     SettingInputComponent,
     SettingNumericComponent,
     SettingSelectComponent,
+    SettingSliderComponent,
 } from "./components";
 
-const { FormSection, FormText, FormTitle } = Forms;
-
 const UserSummaryItem = lazyWebpack(filters.byCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));
 const AvatarStyles = lazyWebpack(filters.byProps(["moreUsers", "emptyUser", "avatarContainer", "clickableAvatar"]));
 const UserRecord: Constructor<Partial<User>> = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
@@ -80,7 +79,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
 
     function renderSettings() {
         if (!pluginSettings || !plugin.options) {
-            return <FormText>There are no settings for this plugin.</FormText>;
+            return <Forms.FormText>There are no settings for this plugin.</Forms.FormText>;
         }
 
         const options: JSX.Element[] = [];
@@ -110,6 +109,11 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                 }
                 case OptionType.BOOLEAN: {
                     options.push(<SettingBooleanComponent key={key} option={setting} {...props} />);
+                    break;
+                }
+                case OptionType.SLIDER: {
+                    options.push(<SettingSliderComponent key={key} option={setting} {...props} />);
+                    break;
                 }
             }
         }
@@ -142,9 +146,9 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                 <Text variant="heading-md/bold">{plugin.name}</Text>
             </ModalHeader>
             <ModalContent style={{ marginBottom: 8, marginTop: 8 }}>
-                <FormSection>
+                <Forms.FormSection>
-                    <FormTitle tag="h3">About {plugin.name}</FormTitle>
+                    <Forms.FormTitle tag="h3">About {plugin.name}</Forms.FormTitle>
-                    <FormText>{plugin.description}</FormText>
+                    <Forms.FormText>{plugin.description}</Forms.FormText>
                     <div style={{ marginTop: 8, marginBottom: 8, width: "fit-content" }}>
                         <UserSummaryItem
                             users={authors}
@@ -157,20 +161,20 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                             renderMoreUsers={renderMoreUsers}
                         />
                     </div>
-                </FormSection>
+                </Forms.FormSection>
                 {!!plugin.settingsAboutComponent && (
                     <div style={{ marginBottom: 8 }}>
-                        <FormSection>
+                        <Forms.FormSection>
                             <ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent">
                                 <plugin.settingsAboutComponent />
                             </ErrorBoundary>
-                        </FormSection>
+                        </Forms.FormSection>
                     </div>
                 )}
-                <FormSection>
+                <Forms.FormSection>
-                    <FormTitle tag="h3">Settings</FormTitle>
+                    <Forms.FormTitle tag="h3">Settings</Forms.FormTitle>
                     {renderSettings()}
-                </FormSection>
+                </Forms.FormSection>
             </ModalContent>
             <ModalFooter>
                 <Flex>

src/components/PluginSettings/components/SettingBooleanComponent.tsx

@@ -2,8 +2,6 @@ import { ISettingElementProps } from ".";
 import { PluginOptionBoolean } from "../../../utils/types";
 import { Forms, React, Select } from "../../../webpack/common";
 
-const { FormSection, FormTitle, FormText } = Forms;
-
 export function SettingBooleanComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionBoolean>) {
     const def = pluginSettings[id] ?? option.default;
 
@@ -31,8 +29,8 @@ export function SettingBooleanComponent({ option, pluginSettings, id, onChange,
     }
 
     return (
-        <FormSection>
+        <Forms.FormSection>
-            <FormTitle>{option.description}</FormTitle>
+            <Forms.FormTitle>{option.description}</Forms.FormTitle>
             <Select
                 isDisabled={option.disabled?.() ?? false}
                 options={options}
@@ -44,8 +42,8 @@ export function SettingBooleanComponent({ option, pluginSettings, id, onChange,
                 serialize={v => String(v)}
                 {...option.componentProps}
             />
-            {error && <FormText style={{ color: "var(--text-danger)" }}>{error}</FormText>}
+            {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
-        </FormSection>
+        </Forms.FormSection>
     );
 }
 

src/components/PluginSettings/components/SettingNumericComponent.tsx

@@ -2,8 +2,6 @@ import { ISettingElementProps } from ".";
 import { OptionType, PluginOptionNumber } from "../../../utils/types";
 import { Forms, React, TextInput } from "../../../webpack/common";
 
-const { FormSection, FormTitle, FormText } = Forms;
-
 const MAX_SAFE_NUMBER = BigInt(Number.MAX_SAFE_INTEGER);
 
 export function SettingNumericComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionNumber>) {
@@ -33,8 +31,8 @@ export function SettingNumericComponent({ option, pluginSettings, id, onChange,
     }
 
     return (
-        <FormSection>
+        <Forms.FormSection>
-            <FormTitle>{option.description}</FormTitle>
+            <Forms.FormTitle>{option.description}</Forms.FormTitle>
             <TextInput
                 type="number"
                 pattern="-?[0-9]+"
@@ -44,7 +42,7 @@ export function SettingNumericComponent({ option, pluginSettings, id, onChange,
                 disabled={option.disabled?.() ?? false}
                 {...option.componentProps}
             />
-            {error && <FormText style={{ color: "var(--text-danger)" }}>{error}</FormText>}
+            {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
-        </FormSection>
+        </Forms.FormSection>
     );
 }

src/components/PluginSettings/components/SettingSelectComponent.tsx

@@ -2,8 +2,6 @@ import { ISettingElementProps } from ".";
 import { PluginOptionSelect } from "../../../utils/types";
 import { Forms, React, Select } from "../../../webpack/common";
 
-const { FormSection, FormTitle, FormText } = Forms;
-
 export function SettingSelectComponent({ option, pluginSettings, onChange, onError, id }: ISettingElementProps<PluginOptionSelect>) {
     const def = pluginSettings[id] ?? option.options?.find(o => o.default)?.value;
 
@@ -25,8 +23,8 @@ export function SettingSelectComponent({ option, pluginSettings, onChange, onErr
     }
 
     return (
-        <FormSection>
+        <Forms.FormSection>
-            <FormTitle>{option.description}</FormTitle>
+            <Forms.FormTitle>{option.description}</Forms.FormTitle>
             <Select
                 isDisabled={option.disabled?.() ?? false}
                 options={option.options}
@@ -38,7 +36,7 @@ export function SettingSelectComponent({ option, pluginSettings, onChange, onErr
                 serialize={v => String(v)}
                 {...option.componentProps}
             />
-            {error && <FormText style={{ color: "var(--text-danger)" }}>{error}</FormText>}
+            {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
-        </FormSection>
+        </Forms.FormSection>
     );
 }

src/components/PluginSettings/components/SettingSliderComponent.tsx

@@ -0,0 +1,49 @@
+import { ISettingElementProps } from ".";
+import { PluginOptionSlider } from "../../../utils/types";
+import { Forms, React, Slider } from "../../../webpack/common";
+
+export function makeRange(start: number, end: number, step = 1) {
+    const ranges: number[] = [];
+    for (let value = start; value <= end; value += step) {
+        ranges.push(Math.round(value * 100) / 100);
+    }
+    return ranges;
+}
+
+export function SettingSliderComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionSlider>) {
+    const def = pluginSettings[id] ?? option.default;
+
+    const [error, setError] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        onError(error !== null);
+    }, [error]);
+
+    function handleChange(newValue: number): void {
+        let isValid = (option.isValid && option.isValid(newValue)) ?? true;
+        if (typeof isValid === "string") setError(isValid);
+        else if (!isValid) setError("Invalid input provided.");
+        else {
+            setError(null);
+            onChange(newValue);
+        }
+    }
+
+    return (
+        <Forms.FormSection>
+            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+            <Slider
+                disabled={option.disabled?.() ?? false}
+                markers={option.markers}
+                minValue={option.markers[0]}
+                maxValue={option.markers[option.markers.length - 1]}
+                initialValue={def}
+                onValueChange={handleChange}
+                onValueRender={(v: number) => String(v.toFixed(2))}
+                stickToMarkers={option.stickToMarkers ?? true}
+                {...option.componentProps}
+            />
+        </Forms.FormSection>
+    );
+}
+

src/components/PluginSettings/components/SettingTextComponent.tsx

@@ -2,8 +2,6 @@ import { ISettingElementProps } from ".";
 import { PluginOptionString } from "../../../utils/types";
 import { Forms, React, TextInput } from "../../../webpack/common";
 
-const { FormSection, FormTitle, FormText } = Forms;
-
 export function SettingInputComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionString>) {
     const [state, setState] = React.useState(pluginSettings[id] ?? option.default ?? null);
     const [error, setError] = React.useState<string | null>(null);
@@ -23,8 +21,8 @@ export function SettingInputComponent({ option, pluginSettings, id, onChange, on
     }
 
     return (
-        <FormSection>
+        <Forms.FormSection>
-            <FormTitle>{option.description}</FormTitle>
+            <Forms.FormTitle>{option.description}</Forms.FormTitle>
             <TextInput
                 type="text"
                 value={state}
@@ -33,7 +31,7 @@ export function SettingInputComponent({ option, pluginSettings, id, onChange, on
                 disabled={option.disabled?.() ?? false}
                 {...option.componentProps}
             />
-            {error && <FormText style={{ color: "var(--text-danger)" }}>{error}</FormText>}
+            {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
-        </FormSection>
+        </Forms.FormSection>
     );
 }

src/components/PluginSettings/components/index.ts

@@ -15,3 +15,4 @@ export * from "./SettingBooleanComponent";
 export * from "./SettingNumericComponent";
 export * from "./SettingSelectComponent";
 export * from "./SettingTextComponent";
+export * from "./SettingSliderComponent";

src/plugins/moyai.ts

@@ -1,8 +1,11 @@
-import definePlugin from "../utils/types";
-import { Devs } from "../utils/constants";
 import { Message, ReactionEmoji } from "discord-types/general";
-import { FluxDispatcher, SelectedChannelStore } from "../webpack/common";
+
+import { makeRange } from "../components/PluginSettings/components/SettingSliderComponent";
+import { Devs } from "../utils/constants";
 import { sleep } from "../utils/misc";
+import definePlugin, { OptionType } from "../utils/types";
+import { Settings } from "../Vencord";
+import { FluxDispatcher, SelectedChannelStore } from "../webpack/common";
 
 interface IMessageCreate {
     type: "MESSAGE_CREATE";
@@ -67,6 +70,16 @@ export default definePlugin({
         FluxDispatcher.unsubscribe("MESSAGE_CREATE", this.onMessage);
         FluxDispatcher.unsubscribe("MESSAGE_REACTION_ADD", this.onReaction);
     },
+
+    options: {
+        volume: {
+            description: "Volume of the 🗿🗿🗿",
+            type: OptionType.SLIDER,
+            markers: makeRange(0, 1, 0.1),
+            default: 0.5,
+            stickToMarkers: false,
+        }
+    }
 });
 
 function countOccurrences(sourceString: string, subString: string) {
@@ -101,5 +114,6 @@ function getMoyaiCount(message: string) {
 function boom() {
     const audioElement = document.createElement("audio");
     audioElement.src = MOYAI_URL;
+    audioElement.volume = Settings.plugins.Moyai.volume;
     audioElement.play();
 }

src/utils/types.ts

@@ -70,13 +70,15 @@ export enum OptionType {
     BIGINT,
     BOOLEAN,
     SELECT,
+    SLIDER,
 }
 
 export type PluginOptionsItem =
     | PluginOptionString
     | PluginOptionNumber
     | PluginOptionBoolean
-    | PluginOptionSelect;
+    | PluginOptionSelect
+    | PluginOptionSlider;
 
 export interface PluginOptionBase {
     description: string;
@@ -132,4 +134,24 @@ export interface PluginOptionSelectOption {
     default?: boolean;
 }
 
+export interface PluginOptionSlider extends PluginOptionBase {
+    type: OptionType.SLIDER;
+    /**
+     * All the possible values in the slider. Needs at least two values.
+     */
+    markers: number[];
+    /**
+     * Default value to use
+     */
+    default: number;
+    /**
+     * If false, allow users to select values in-between your markers.
+     */
+    stickToMarkers?: boolean;
+    /**
+     * Prevents the user from saving settings if this is false or a string
+     */
+    isValid?(value: number): number;
+}
+
 export type IpcRes<V = any> = { ok: true; value: V; } | { ok: false, error: any; };

src/webpack/common.tsx

@@ -31,6 +31,7 @@ export let TextInput: any;
 export let Text: (props: TextProps) => JSX.Element;
 
 export const Select = lazyWebpack(filters.byCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
+export const Slider = lazyWebpack(filters.byCode("closestMarkerIndex", "stickToMarkers"));
 
 export let Parser: any;
 export let Alerts: {