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",