From 1f50f78912caeeff1c65182d61b72e6ec95b9899 Mon Sep 17 00:00:00 2001 From: megumin Date: Wed, 19 Oct 2022 20:57:27 +0100 Subject: [PATCH] feat: settings sliders (#120) Co-authored-by: Ven --- src/components/PluginSettings/PluginModal.tsx | 28 ++++++----- .../components/SettingBooleanComponent.tsx | 10 ++-- .../components/SettingNumericComponent.tsx | 10 ++-- .../components/SettingSelectComponent.tsx | 10 ++-- .../components/SettingSliderComponent.tsx | 49 +++++++++++++++++++ .../components/SettingTextComponent.tsx | 10 ++-- .../PluginSettings/components/index.ts | 1 + src/plugins/moyai.ts | 20 ++++++-- src/utils/types.ts | 24 ++++++++- src/webpack/common.tsx | 1 + 10 files changed, 123 insertions(+), 40 deletions(-) create mode 100644 src/components/PluginSettings/components/SettingSliderComponent.tsx diff --git a/src/components/PluginSettings/PluginModal.tsx b/src/components/PluginSettings/PluginModal.tsx index a3243004..3ef36b4d 100644 --- a/src/components/PluginSettings/PluginModal.tsx +++ b/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> = 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 There are no settings for this plugin.; + return There are no settings for this plugin.; } const options: JSX.Element[] = []; @@ -110,6 +109,11 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti } case OptionType.BOOLEAN: { options.push(); + break; + } + case OptionType.SLIDER: { + options.push(); + break; } } } @@ -142,9 +146,9 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti {plugin.name} - - About {plugin.name} - {plugin.description} + + About {plugin.name} + {plugin.description}
- + {!!plugin.settingsAboutComponent && (
- + - +
)} - - Settings + + Settings {renderSettings()} - + diff --git a/src/components/PluginSettings/components/SettingBooleanComponent.tsx b/src/components/PluginSettings/components/SettingBooleanComponent.tsx index 62dd4d5e..939ca708 100644 --- a/src/components/PluginSettings/components/SettingBooleanComponent.tsx +++ b/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) { const def = pluginSettings[id] ?? option.default; @@ -31,8 +29,8 @@ export function SettingBooleanComponent({ option, pluginSettings, id, onChange, } return ( - - {option.description} + + {option.description} String(v)} {...option.componentProps} /> - {error && {error}} - + {error && {error}} + ); } diff --git a/src/components/PluginSettings/components/SettingSliderComponent.tsx b/src/components/PluginSettings/components/SettingSliderComponent.tsx new file mode 100644 index 00000000..64466c16 --- /dev/null +++ b/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) { + const def = pluginSettings[id] ?? option.default; + + const [error, setError] = React.useState(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 ( + + {option.description} + String(v.toFixed(2))} + stickToMarkers={option.stickToMarkers ?? true} + {...option.componentProps} + /> + + ); +} + diff --git a/src/components/PluginSettings/components/SettingTextComponent.tsx b/src/components/PluginSettings/components/SettingTextComponent.tsx index 0bfe3fbe..898f66b4 100644 --- a/src/components/PluginSettings/components/SettingTextComponent.tsx +++ b/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) { const [state, setState] = React.useState(pluginSettings[id] ?? option.default ?? null); const [error, setError] = React.useState(null); @@ -23,8 +21,8 @@ export function SettingInputComponent({ option, pluginSettings, id, onChange, on } return ( - - {option.description} + + {option.description} - {error && {error}} - + {error && {error}} + ); } diff --git a/src/components/PluginSettings/components/index.ts b/src/components/PluginSettings/components/index.ts index d1fe7d62..a1748b08 100644 --- a/src/components/PluginSettings/components/index.ts +++ b/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"; diff --git a/src/plugins/moyai.ts b/src/plugins/moyai.ts index 581f960c..66cd68c7 100644 --- a/src/plugins/moyai.ts +++ b/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(); } diff --git a/src/utils/types.ts b/src/utils/types.ts index 5ed95e48..1318799c 100644 --- a/src/utils/types.ts +++ b/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 = { ok: true; value: V; } | { ok: false, error: any; }; diff --git a/src/webpack/common.tsx b/src/webpack/common.tsx index 8077a9fd..44cb2b5d 100644 --- a/src/webpack/common.tsx +++ b/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: {