#38 Add option to use custom speed

vantezzen · Jul 1, 2021 · eb11a3c · eb11a3c
1 parent c89de0e
commit eb11a3c
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 14 deletions.
diff --git 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;
+    }
+  }
 }
diff --git 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 (
     <div className="speed-setting">
       <label htmlFor={name}>{ label }</label>
 
-      <select
-        name={name}
-        id={name}
-        onChange={(evt) => {
-          config.set(name, Number(evt.target.value));
-        }}
-        value={value}
-      >
-        {speedSettings.map((val) => (
-          <option value={val} key={val}>{val}x</option>
-        ))}
-      </select>
+      {isCustomValue ? (
+        <div className="custom-value-container">
+          <input
+            type="number" 
+            value={value}
+            onChange={(evt) => {
+              config.set(name, Number(evt.target.value));
+            }}
+            step={0.1}
+          />
+          <button onClick={() => {
+            config.set(`${name}_is_custom`, false);
+
+            // Find nearest speed setting to the current one
+            let nearestSetting = 1;
+            for(const setting of speedSettings) {
+              if (Math.abs(value - setting) < Math.abs(value - nearestSetting)) {
+                nearestSetting = setting;
+              }
+            }
+            config.set(name, Number(nearestSetting));
+          }}>
+            Drop-down
+          </button>
+        </div>
+      ) : (
+        <select
+          name={name}
+          id={name}
+          onChange={(evt) => {
+            if (evt.target.value === "custom") {
+              config.set(`${name}_is_custom`, true);
+            } else {
+              config.set(name, Number(evt.target.value));
+            }
+          }}
+          value={value}
+        >
+          {speedSettings.map((val) => (
+            <option value={val} key={val}>{val}x</option>
+          ))}
+          <option value="custom">Custom</option>
+        </select>
+      )}
+
     </div>
   );
 };

diff --git 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
@@ -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",