add configurable seek intervals

src/components/player/PlayerBar.tsx

@@ -50,12 +50,6 @@ const PlayerBar = () => {
   const [localVolume, setLocalVolume] = useState(
     Number(settings.getSync('volume'))
   );
-  const [seekForwardInterval] = useState<number>(
-    Number(settings.getSync('seekForwardInterval')) || 5
-  );
-  const [seekBackwardInterval] = useState<number>(
-    Number(settings.getSync('seekBackwardInterval')) || 5
-  );
   const playersRef = useRef<any>();
   const history = useHistory();
 
@@ -180,6 +174,9 @@ const PlayerBar = () => {
 
   const handleClickForward = () => {
     if (playQueue[currentEntryList].length > 0) {
+      const seekForwardInterval = Number(
+        settings.getSync('seekForwardInterval')
+      );
       setIsDragging(true);
 
       if (playQueue.isFading) {
@@ -219,6 +216,9 @@ const PlayerBar = () => {
   };
 
   const handleClickBackward = () => {
+    const seekBackwardInterval = Number(
+      settings.getSync('seekBackwardInterval')
+    );
     if (playQueue[currentEntryList].length > 0) {
       setIsDragging(true);
 

src/components/settings/Config.tsx

@@ -346,6 +346,36 @@ const Config = () => {
           />
         )}
       </ConfigPanel>
+      <ConfigPanel header="Player" bordered>
+        <p>
+          Configure the number of seconds to skip forwards/backwards by when
+          clicking the seek forward/backward buttons.
+        </p>
+        <br />
+        <ControlLabel>Seek forward (s)</ControlLabel>
+        <InputNumber
+          defaultValue={String(settings.getSync('seekForwardInterval')) || '0'}
+          step={0.5}
+          min={0}
+          max={100}
+          onChange={(e) => {
+            settings.setSync('seekForwardInterval', Number(e));
+          }}
+          style={{ width: '150px' }}
+        />
+        <br />
+        <ControlLabel>Seek backward (s)</ControlLabel>
+        <InputNumber
+          defaultValue={String(settings.getSync('seekBackwardInterval')) || '0'}
+          step={0.5}
+          min={0}
+          max={100}
+          onChange={(e) => {
+            settings.setSync('seekBackwardInterval', Number(e));
+          }}
+          style={{ width: '150px' }}
+        />
+      </ConfigPanel>
       <ConfigPanel header="Cache" bordered>
         {errorMessage !== '' && (
           <>

src/components/shared/setDefaultSettings.ts

@@ -16,6 +16,14 @@ const setDefaultSettings = (force: boolean) => {
     settings.setSync('volume', 0.5);
   }
 
+  if (force || !settings.hasSync('seekForwardInterval')) {
+    settings.setSync('seekForwardInterval', 5);
+  }
+
+  if (force || !settings.hasSync('seekBackwardInterval')) {
+    settings.setSync('seekBackwardInterval', 5);
+  }
+
   if (force || !settings.hasSync('volumeFade')) {
     settings.setSync('volumeFade', true);
   }
@@ -48,7 +56,7 @@ const setDefaultSettings = (force: boolean) => {
   }
 
   if (force || !settings.hasSync('fadeDuration')) {
-    settings.setSync('fadeDuration', '9.0');
+    settings.setSync('fadeDuration', 9);
   }
 
   if (force || !settings.hasSync('fadeType')) {