mirror of
https://github.com/Vendicated/Vencord.git
synced 2025-02-24 07:25:10 +00:00
CustomVoiceFilter: Refactored UIs
This commit is contained in:
fox3000foxy
parent
cff7492f37
commit
ba431e78b1
3 changed files with 216 additions and 211 deletions
|
|
@ -11,6 +11,7 @@ import { JSX } from "react";
|
|||
|
||||
import { voices } from ".";
|
||||
import { openErrorModal } from "./ErrorModal";
|
||||
import { openHelpModal } from "./HelpModal";
|
||||
import { IVoiceFilter, useVoiceFiltersStore } from "./index";
|
||||
const requiredFields = ["name", "iconURL", "onnxFileUrl", "previewSoundURLs"] as const satisfies readonly (keyof IVoiceFilter)[];
|
||||
|
||||
|
|
@ -102,8 +103,9 @@ function CreateVoiceFilterModal({ modalProps, close, defaultValue }: CreateVoice
|
|||
</ModalContent>
|
||||
<ModalFooter>
|
||||
<Flex style={{ gap: "0.5rem" }} justify={Flex.Justify.END} align={Flex.Align.CENTER}>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={close} >Cancel</Button>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={openHelpModal}>How to create a voicepack?</Button>
|
||||
<Button color={Button.Colors.GREEN} onClick={submit}>{voiceFilter.id ? "Save" : "Create"}</Button>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={close} >Cancel</Button>
|
||||
</Flex>
|
||||
</ModalFooter>
|
||||
</ModalRoot>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,13 @@
|
|||
|
||||
import { Margins } from "@utils/margins";
|
||||
import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
|
||||
import { PluginNative } from "@utils/types";
|
||||
import { Button, Flex, Forms, Slider } from "@webpack/common";
|
||||
import { JSX } from "react";
|
||||
|
||||
import plugin, { settings } from "./index";
|
||||
|
||||
import plugin, { settings, useVoiceFiltersStore } from "./index";
|
||||
|
||||
const Native = VencordNative.pluginHelpers.CustomVoiceFilters as PluginNative<typeof import("./native")>;
|
||||
export function openSettingsModal(): string {
|
||||
const key = openModal(modalProps => (
|
||||
<SettingsModal modalProps={modalProps} close={() => closeModal(key)} />
|
||||
|
|
@ -24,12 +25,16 @@ interface SettingsModalProps {
|
|||
close: () => void;
|
||||
}
|
||||
|
||||
function openModelFolder() {
|
||||
const { modulePath } = useVoiceFiltersStore.getState();
|
||||
Native.openFolder(modulePath);
|
||||
}
|
||||
|
||||
// Create Voice Filter Modal
|
||||
function SettingsModal({ modalProps, close }: SettingsModalProps): JSX.Element {
|
||||
const settingsState = settings.use();
|
||||
const { settings: { def } } = plugin;
|
||||
|
||||
const { deleteAll, exportVoiceFilters, importVoiceFilters } = useVoiceFiltersStore();
|
||||
return (
|
||||
<ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
|
||||
<ModalHeader>
|
||||
|
|
@ -66,6 +71,16 @@ function SettingsModal({ modalProps, close }: SettingsModalProps): JSX.Element {
|
|||
stickToMarkers={true}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Voicepacks:</Forms.FormTitle>
|
||||
<Forms.FormText type="description">Here you can manage your voicepacks.</Forms.FormText>
|
||||
<Flex style={{ gap: "0.5rem" }}>
|
||||
<Button onClick={deleteAll} color={Button.Colors.RED}>Delete all voicepacks</Button>
|
||||
<Button onClick={openModelFolder} color={Button.Colors.TRANSPARENT}>Open Models Folder</Button>
|
||||
<Button onClick={exportVoiceFilters} color={Button.Colors.GREEN}>Export</Button>
|
||||
<Button onClick={importVoiceFilters} color={Button.Colors.GREEN}>Import</Button>
|
||||
</Flex>
|
||||
</Forms.FormSection>
|
||||
</Flex>
|
||||
</ModalContent>
|
||||
<ModalFooter>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import { Button, Flex, Forms, Text, TextInput, Tooltip, useEffect, useState } fr
|
|||
import { JSX } from "react";
|
||||
|
||||
import { openCreateVoiceModal } from "./CreateVoiceFilterModal";
|
||||
import { openHelpModal } from "./HelpModal";
|
||||
import { DownloadIcon, DownloadingIcon, PauseIcon, PlayIcon, RefreshIcon, TrashIcon } from "./Icons";
|
||||
import { downloadCustomVoiceModel, getClient, IVoiceFilter, useVoiceFiltersStore, VoiceFilterStyles } from "./index";
|
||||
import { openSettingsModal } from "./SettingsModal";
|
||||
|
|
@ -20,11 +19,6 @@ import { openWikiHomeModal } from "./WikiHomeModal";
|
|||
|
||||
const Native = VencordNative.pluginHelpers.CustomVoiceFilters as PluginNative<typeof import("./native")>;
|
||||
|
||||
function openModelFolder() {
|
||||
const { modulePath } = useVoiceFiltersStore.getState();
|
||||
const modelFolder = Native.openFolder(modulePath);
|
||||
}
|
||||
|
||||
export function openVoiceFiltersModal(): string {
|
||||
const key = openModal(modalProps => (
|
||||
<VoiceFiltersModal
|
||||
|
|
@ -47,7 +41,7 @@ interface VoiceFiltersModalProps {
|
|||
|
||||
function VoiceFiltersModal({ modalProps, close, accept }: VoiceFiltersModalProps): JSX.Element {
|
||||
const [url, setUrl] = useState("");
|
||||
const { downloadVoicepack, deleteAll, exportVoiceFilters, importVoiceFilters, voiceFilters } = useVoiceFiltersStore();
|
||||
const { downloadVoicepack, exportVoiceFilters, importVoiceFilters, voiceFilters } = useVoiceFiltersStore();
|
||||
const { client } = getClient();
|
||||
const voiceComponents = Object.values(voiceFilters).map(voice =>
|
||||
<VoiceFilter {...voice} key={voice.id} />
|
||||
|
|
@ -64,6 +58,7 @@ function VoiceFiltersModal({ modalProps, close, accept }: VoiceFiltersModalProps
|
|||
<ModalContent className="vc-voice-filters-modal">
|
||||
<Flex style={{ gap: "1rem" }} direction={Flex.Direction.VERTICAL}>
|
||||
<Text>Download a voicepack from a url or paste a voicepack data here:</Text>
|
||||
<Flex style={{ display: "grid", gridTemplateColumns: "89% 10%", gap: "0.5rem" }}>
|
||||
<TextInput
|
||||
value={url}
|
||||
placeholder="( e.g. https://fox3000foxy.com/voicepacks/agents.json )"
|
||||
|
|
@ -71,13 +66,7 @@ function VoiceFiltersModal({ modalProps, close, accept }: VoiceFiltersModalProps
|
|||
onKeyDown={e => { if (e.key === "Enter") downloadVoicepack(url); }}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<Flex style={{ gap: "0.5rem" }}>
|
||||
<Button onClick={() => downloadVoicepack(url)}>Download</Button>
|
||||
<Button onClick={deleteAll} color={Button.Colors.RED}>Delete all</Button>
|
||||
<Button onClick={exportVoiceFilters} color={Button.Colors.TRANSPARENT}>Export</Button>
|
||||
<Button onClick={importVoiceFilters} color={Button.Colors.TRANSPARENT}>Import</Button>
|
||||
<Button onClick={() => downloadVoicepack("https://fox3000foxy.com/voicepacks/agents.json")} color={Button.Colors.TRANSPARENT}>Download Default</Button>
|
||||
<Button onClick={openModelFolder} color={Button.Colors.TRANSPARENT}>Open Model Folder</Button>
|
||||
<Button onClick={() => downloadVoicepack(url || "https://fox3000foxy.com/voicepacks/agents.json")}>Download</Button>
|
||||
</Flex>
|
||||
|
||||
<Text>Voice filters list:</Text>
|
||||
|
|
@ -94,7 +83,6 @@ function VoiceFiltersModal({ modalProps, close, accept }: VoiceFiltersModalProps
|
|||
<ModalFooter>
|
||||
<Flex style={{ gap: "0.5rem" }} justify={Flex.Justify.END} align={Flex.Align.CENTER}>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={openSettingsModal}>Settings</Button>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={openHelpModal}>Learn how to build your own voicepack</Button>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={() => openCreateVoiceModal()}>Create Voicepack</Button>
|
||||
<Button color={Button.Colors.GREEN} onClick={openWikiHomeModal}>Wiki</Button>
|
||||
<Button color={Button.Colors.RED} onClick={accept}>Close</Button>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue