From 367f91fcb461f005c8bbcb282cbe1c0f56fcc316 Mon Sep 17 00:00:00 2001 From: Lino Schmidt Date: Sat, 26 Nov 2022 21:46:04 +0100 Subject: [PATCH] Added reset button to each setting --- src/components/settings.ts | 22 +++- src/components/ui/settingsPage.tsx | 188 ++++++++++++++++++++++------- src/index.css | 61 ++++++---- 3 files changed, 199 insertions(+), 72 deletions(-) diff --git a/src/components/settings.ts b/src/components/settings.ts index f24252a..a8d0e53 100644 --- a/src/components/settings.ts +++ b/src/components/settings.ts @@ -114,18 +114,28 @@ function createProfile(profileName:string, clone:boolean) { writeSettings(); } -function ProfileLoadDefault(profileName?:string) { +function ProfileLoadDefault(reset:{fps?:boolean, width?:boolean, stickDistance?:boolean, stickMode2?:boolean, videoFormat?:boolean, all?:boolean}, profileName?:string) { if(profileName === undefined) { profileName = getActiveProfile().profileName; } settingList.profiles.forEach(profile => { if(profile.profileName === profileName) { - profile.fps = defaultSettings.profiles[0].fps; - profile.width = defaultSettings.profiles[0].width; - profile.stickDistance = defaultSettings.profiles[0].stickDistance; - profile.stickMode2 = defaultSettings.profiles[0].stickMode2; - profile.videoFormat = defaultSettings.profiles[0].videoFormat; + if(reset.all || reset.fps) { + profile.fps = defaultSettings.profiles[0].fps; + } + if(reset.all || reset.width) { + profile.width = defaultSettings.profiles[0].width; + } + if(reset.all || reset.stickDistance) { + profile.stickDistance = defaultSettings.profiles[0].stickDistance; + } + if(reset.all || reset.stickMode2) { + profile.stickMode2 = defaultSettings.profiles[0].stickMode2; + } + if(reset.all || reset.videoFormat) { + profile.videoFormat = defaultSettings.profiles[0].videoFormat; + } } }); diff --git a/src/components/ui/settingsPage.tsx b/src/components/ui/settingsPage.tsx index 492acf9..7298de3 100644 --- a/src/components/ui/settingsPage.tsx +++ b/src/components/ui/settingsPage.tsx @@ -8,10 +8,118 @@ let setRenderImg:React.Dispatch>; let setRenderLoading:React.Dispatch>; let pageLoaded = false; +const VideoFormatOptions = Object.keys(VideoFormat).filter((el) => { return isNaN(Number(el)) }).map(key => { + return ; +}); + function picturePath() { return path.join(dataPath, "render.png?t="+Date.now()); } +const overlayArrowStyle:CSSProperties = { + width: "50%", + height: "50%", + fill: "white" +} +const settingLabelStyle:CSSProperties = { + position: "relative", + paddingLeft: "10px", + paddingRight: "10px", + height: "100%", + background: "#00c24a", + borderTopLeftRadius: "19px", + borderBottomLeftRadius: "19px", + fontWeight: "bolder", + overflow: "hidden", + display: "flex", + alignItems: "center" +} + +function InputSpan({name, value, min, step, onChange, onReset}:{name:string, value:number, min:number, step:number, onChange:React.ChangeEventHandler, onReset:CallableFunction}) { + const [dispayOverlay, setDisplayOverlay] = useState("none"); + + return ( + +
{setDisplayOverlay("flex");}} onMouseLeave={() => {setDisplayOverlay("none");}}> + {name} +
{onReset()}}> + + {/* */} + + +
+
+ + + ) +} + +function SelectSpan({name, value, optiones, onChange, onReset}:{name:string, value:string, optiones:JSX.Element[], onChange:React.ChangeEventHandler, onReset:CallableFunction}) { + const [dispayOverlay, setDisplayOverlay] = useState("none"); + + return ( + +
{setDisplayOverlay("flex");}} onMouseLeave={() => {setDisplayOverlay("none");}}> + {name} +
{onReset()}}> + + {/* */} + + +
+
+ + + ) +} + +function ToggleSpan({name, state, checkedValue, uncheckedValue, onChange, onReset}:{name:string, state:boolean, checkedValue:string, uncheckedValue:string, onChange(checked:boolean):void, onReset:CallableFunction}) { + const [dispayOverlay, setDisplayOverlay] = useState("none"); + const [checked, setChecked] = useState(state); + + useEffect(() => { + setChecked(state); + }, [state]); + + const toggleStyle:CSSProperties = { + height: "100%", + border: "0", + borderTopRightRadius: "18px", + borderBottomRightRadius: "18px", + textAlign: "center", + fontSize: "large", + paddingLeft: "15px", + paddingRight: "15px", + display: "flex", + alignItems: "center", + backgroundColor: checked ? "#2196F3" : "white", + color: checked ? "white" : "black", + cursor: "pointer" + } + + return ( + +
{setDisplayOverlay("flex");}} onMouseLeave={() => {setDisplayOverlay("none");}}> + {name} +
{onReset()}}> + + {/* */} + + +
+
+
{ + onChange(!checked); + setChecked(!checked); + }}> + {checked ? checkedValue : uncheckedValue} +
+ + ) +} + const RenderLoadingSpinner = () => (
@@ -88,59 +196,57 @@ function SettingsPage() { pageLoaded = true; - const VideoFormatOptions = Object.keys(VideoFormat).filter((el) => { return isNaN(Number(el)) }).map(key => { - return ; - }); - return (
- - - { + { { if(e.target.value.trim().length !== 0) setFps(parseInt(e.target.value)); - }}/> - - - - { + } + } onReset={() => { + ProfileLoadDefault({fps: true}); + setFps(getActiveProfile().fps); + }}/>} + { { if(e.target.value.trim().length !== 0) setWidth(parseInt(e.target.value)); - }}/> - - - - { + } + } onReset={() => { + ProfileLoadDefault({width: true}); + setWidth(getActiveProfile().width); + }}/>} + { { if(e.target.value.trim().length !== 0) setStickDistance(parseInt(e.target.value)); - }}/> - + } + } onReset={() => { + ProfileLoadDefault({stickDistance: true}); + setStickDistance(getActiveProfile().stickDistance); + }}/>}
-
-

Stick Mode

- -
- - - + { { + setStickMode2(checked); + }} onReset={() => { + ProfileLoadDefault({stickMode2: true}); + setStickMode2(getActiveProfile().stickMode2); + }}/>} +
+ { { + setVideoFormat(e.target.value as unknown as VideoFormat); + }} onReset={() => { + ProfileLoadDefault({videoFormat: true}); + setVideoFormat(getActiveProfile().videoFormat); + }}/>} {videoFormat === VideoFormat.mov? : null} {videoFormat === VideoFormat.mp4? : null} {videoFormat === VideoFormat.avi? : null} - +