diff --git a/src/equicordplugins/demonstration/index.tsx b/src/equicordplugins/demonstration/index.tsx index 017e9bf5..92c79af3 100644 --- a/src/equicordplugins/demonstration/index.tsx +++ b/src/equicordplugins/demonstration/index.tsx @@ -5,9 +5,11 @@ */ import { definePluginSettings } from "@api/Settings"; -import { Devs } from "@utils/constants"; +import { classNameFactory } from "@api/Styles"; +import { Devs, EquicordDevs } from "@utils/constants"; +import { closeModal, ModalCloseButton, ModalContent, ModalHeader, ModalRoot, openModal } from "@utils/modal"; import definePlugin, { OptionType } from "@utils/types"; -import { Text } from "@webpack/common"; +import { Button, Forms, Switch, Text } from "@webpack/common"; // definitely not stolen from glide :P async function injectCSS() { @@ -32,42 +34,90 @@ const validKeycodes = [ "NumpadDivide", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "NumLock", "ScrollLock" ]; -const settings = definePluginSettings( - { - keyBind: { - description: "The key to toggle the theme when pressed", - type: OptionType.STRING, - default: "F6", - isValid: (value: string) => { - if (validKeycodes.includes(value)) { - return true; - } - return false; +const settings = definePluginSettings({ + keyBind: { + description: "The key to toggle the theme when pressed", + type: OptionType.STRING, + default: "F6", + isValid: (value: string) => { + if (validKeycodes.includes(value)) { + return true; } - }, - soundVolume: { - description: "How loud the toggle sound is (0 to disable)", - type: OptionType.SLIDER, - default: 0.5, - markers: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] - }, - }); + return false; + } + }, + soundVolume: { + description: "How loud the toggle sound is (0 to disable)", + type: OptionType.SLIDER, + default: 0.5, + markers: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] + }, + showConfirmationModal: { + description: "Show modal to remind shortcut", + type: OptionType.BOOLEAN, + default: true, + } +}); -function handleKeydown(event) { - if (event.code !== settings.store.keyBind) { return; } +function ToggleModal() { + const value = !settings.use(["showConfirmationModal"]).showConfirmationModal; + return ( + { settings.store.showConfirmationModal = !v; }}> + Disable modal? + + ); +} +function handleToggle() { const style = document.getElementById("DemonstrationStyle"); if (style != null) { style.remove(); playSound("https://files.catbox.moe/wp5rpz.wav"); } else { - injectCSS(); - playSound("https://files.catbox.moe/ckz46t.wav"); + if (settings.store.showConfirmationModal) { + const cl = classNameFactory("vc-demonstration-modal"); + + const key = openModal(props => ( + + + Demonstration + closeModal(key)}> + + + + This will censor all text! To disable this, remember the shortcut: + + + {settings.store.keyBind} + + + + + + )); + } else { + injectCSS(); + playSound("https://files.catbox.moe/ckz46t.wav"); + } } } -async function playSound(url) { +function handleKeydown(event: KeyboardEvent) { + if (event.code !== settings.store.keyBind) { return; } + handleToggle(); +} + +async function playSound(url: string) { const audio = new Audio(url); audio.volume = settings.store.soundVolume; await audio.play().catch(error => { @@ -76,10 +126,15 @@ async function playSound(url) { audio.remove(); } + export default definePlugin({ name: "Demonstration", description: "Plugin for taking theme screenshots - censors identifying images and text.", - authors: [Devs.Samwich], + authors: [Devs.Samwich, EquicordDevs.Panniku], + settings, + toolboxActions: { + "Toggle Demonstration": (() => handleToggle()) + }, settingsAboutComponent: () => { return ( <> @@ -93,5 +148,5 @@ export default definePlugin({ stop() { document.removeEventListener("keydown", handleKeydown); }, - settings + });