diff --git a/src/pages/shared/components/speedSetting.scss b/src/pages/shared/components/speedSetting.scss index 425b54c..e19c106 100644 --- a/src/pages/shared/components/speedSetting.scss +++ b/src/pages/shared/components/speedSetting.scss @@ -4,9 +4,9 @@ $shade-0: #fff !default; $teal: #1abc9c !default; .speed-setting { - margin: 0 2rem; + margin: 0 1rem; - select { + select, input, button { width: 100%; margin-top: 0.5rem; background-color: $shade-10; @@ -21,4 +21,13 @@ $teal: #1abc9c !default; 0 0 0 2px $teal; } } + + .custom-value-container { + display: flex; + width: 100%; + + input { + margin-right: 0.5rem; + } + } } \ No newline at end of file diff --git a/src/pages/shared/components/speedSetting.tsx b/src/pages/shared/components/speedSetting.tsx index 4d76bb5..cb6e60c 100644 --- a/src/pages/shared/components/speedSetting.tsx +++ b/src/pages/shared/components/speedSetting.tsx @@ -12,23 +12,57 @@ interface SpeedSettingProps { const SpeedSetting = ({ label, name, config } : SpeedSettingProps) => { const value = config.get(name); + const isCustomValue = config.get(`${name}_is_custom`); return (
- + {isCustomValue ? ( +
+ { + config.set(name, Number(evt.target.value)); + }} + step={0.1} + /> + +
+ ) : ( + + )} +
); }; diff --git a/src/pages/shared/config.ts b/src/pages/shared/config.ts index 73b0cdf..61f179a 100644 --- a/src/pages/shared/config.ts +++ b/src/pages/shared/config.ts @@ -7,7 +7,9 @@ const defaultConfig = { // Speeds playback_speed: 1, + playback_speed_is_custom: false, // True if the user wants to type in their own speed silence_speed: 3, + silence_speed_is_custom: false, mute_silence: true, diff --git a/src/pages/shared/configProvider.ts b/src/pages/shared/configProvider.ts index a7475e0..cf00dfe 100644 --- a/src/pages/shared/configProvider.ts +++ b/src/pages/shared/configProvider.ts @@ -12,7 +12,9 @@ const storedKeys : (keyof typeof defaultConfig)[] = [ "samples_threshold", "playback_speed", + "playback_speed_is_custom", "silence_speed", + "silence_speed_is_custom", "mute_silence",