Move seekDuration setting to keybinds tab

artjomsR · artjomsR · commit feaafc7cb805 · 2025-07-15T17:58:41.000+01:00
diff --git a/common/components/SettingsForm.tsx b/common/components/SettingsForm.tsx
@@ -430,6 +430,7 @@ interface KeyBindProperties {
     label: string;
     boundViaChrome: boolean;
     hide?: boolean;
+    additionalControl?: React.ReactNode;
 }
 
 // hotkeys only returns strings for a Mac while requiring the OS-specific keys for the actual binds
@@ -836,6 +837,74 @@ export default function SettingsForm({
         [onSettingsChanged]
     );
     const { t } = useTranslation();
+
+    const {
+        ankiConnectUrl,
+        deck,
+        noteType,
+        sentenceField,
+        definitionField,
+        audioField,
+        imageField,
+        wordField,
+        sourceField,
+        urlField,
+        track1Field,
+        track2Field,
+        track3Field,
+        ankiFieldSettings,
+        subtitlePreview,
+        subtitlePositionOffset: subtitlePositionOffset,
+        topSubtitlePositionOffset,
+        subtitlesWidth,
+        audioPaddingStart,
+        audioPaddingEnd,
+        maxImageWidth,
+        maxImageHeight,
+        surroundingSubtitlesCountRadius,
+        surroundingSubtitlesTimeRadius,
+        autoPausePreference,
+        seekDuration,
+        speedChangeStep,
+        fastForwardModePlaybackRate,
+        keyBindSet,
+        clickToMineDefaultAction,
+        postMiningPlaybackState,
+        recordWithAudioPlayback,
+        preferMp3,
+        miningHistoryStorageLimit,
+        themeType,
+        copyToClipboardOnMine,
+        rememberSubtitleOffset,
+        autoCopyCurrentSubtitle,
+        alwaysPlayOnSubtitleRepeat,
+        tabName,
+        subtitleRegexFilter,
+        subtitleRegexFilterTextReplacement,
+        subtitleHtml,
+        language,
+        customAnkiFields,
+        customAnkiFieldSettings,
+        tags,
+        imageBasedSubtitleScaleFactor,
+        streamingAppUrl,
+        streamingDisplaySubtitles,
+        streamingRecordMedia,
+        streamingTakeScreenshot,
+        streamingCleanScreenshot,
+        streamingCropScreenshot,
+        streamingSubsDragAndDrop,
+        streamingAutoSync,
+        streamingAutoSyncPromptOnFailure,
+        streamingCondensedPlaybackMinimumSkipIntervalMs,
+        streamingScreenshotDelay,
+        streamingSubtitleListPreference,
+        streamingEnableOverlay,
+        webSocketClientEnabled,
+        webSocketServerUrl,
+        pauseOnHoverMode,
+    } = settings;
+
     const keyBindProperties = useMemo<{ [key in AllKeyNames]: KeyBindProperties }>(
         () => ({
             copySubtitle: { label: t('binds.copySubtitle')!, boundViaChrome: true },
@@ -896,7 +965,21 @@ export default function SettingsForm({
                 boundViaChrome: false,
             },
             seekBackward: { label: t('binds.seekBackward')!, boundViaChrome: false },
-            seekForward: { label: t('binds.seekForward')!, boundViaChrome: false },
+            seekForward: { label: t('binds.seekForward')!, boundViaChrome: false, additionalControl: (
+                <TextField
+                    type="number"
+                    label={t('settings.seekDuration')}
+                    fullWidth
+                    value={seekDuration}
+                    color="primary"
+                    onChange={(event) => handleSettingChanged('seekDuration', Number(event.target.value))}
+                    inputProps={{
+                        min: 1,
+                        max: 60,
+                        step: 1,
+                    }}
+                />)
+            },
             seekToPreviousSubtitle: { label: t('binds.seekToPreviousSubtitle')!, boundViaChrome: false },
             seekToNextSubtitle: { label: t('binds.seekToNextSubtitle')!, boundViaChrome: false },
             seekToBeginningOfCurrentSubtitle: {
@@ -922,76 +1005,9 @@ export default function SettingsForm({
                 hide: !extensionInstalled || !extensionSupportsSidePanel,
             },
         }),
-        [t, extensionInstalled, extensionSupportsSidePanel, extensionSupportsExportCardBind]
+        [t, extensionInstalled, extensionSupportsSidePanel, extensionSupportsExportCardBind, seekDuration]
     );
 
-    const {
-        ankiConnectUrl,
-        deck,
-        noteType,
-        sentenceField,
-        definitionField,
-        audioField,
-        imageField,
-        wordField,
-        sourceField,
-        urlField,
-        track1Field,
-        track2Field,
-        track3Field,
-        ankiFieldSettings,
-        subtitlePreview,
-        subtitlePositionOffset: subtitlePositionOffset,
-        topSubtitlePositionOffset,
-        subtitlesWidth,
-        audioPaddingStart,
-        audioPaddingEnd,
-        maxImageWidth,
-        maxImageHeight,
-        surroundingSubtitlesCountRadius,
-        surroundingSubtitlesTimeRadius,
-        autoPausePreference,
-        seekDuration,
-        speedChangeStep,
-        fastForwardModePlaybackRate,
-        keyBindSet,
-        clickToMineDefaultAction,
-        postMiningPlaybackState,
-        recordWithAudioPlayback,
-        preferMp3,
-        miningHistoryStorageLimit,
-        themeType,
-        copyToClipboardOnMine,
-        rememberSubtitleOffset,
-        autoCopyCurrentSubtitle,
-        alwaysPlayOnSubtitleRepeat,
-        tabName,
-        subtitleRegexFilter,
-        subtitleRegexFilterTextReplacement,
-        subtitleHtml,
-        language,
-        customAnkiFields,
-        customAnkiFieldSettings,
-        tags,
-        imageBasedSubtitleScaleFactor,
-        streamingAppUrl,
-        streamingDisplaySubtitles,
-        streamingRecordMedia,
-        streamingTakeScreenshot,
-        streamingCleanScreenshot,
-        streamingCropScreenshot,
-        streamingSubsDragAndDrop,
-        streamingAutoSync,
-        streamingAutoSyncPromptOnFailure,
-        streamingCondensedPlaybackMinimumSkipIntervalMs,
-        streamingScreenshotDelay,
-        streamingSubtitleListPreference,
-        streamingEnableOverlay,
-        webSocketClientEnabled,
-        webSocketServerUrl,
-        pauseOnHoverMode,
-    } = settings;
-
     const [selectedSubtitleAppearanceTrack, setSelectedSubtitleAppearanceTrack] = useState<number>();
     const {
         subtitleSize,
@@ -2320,18 +2336,21 @@ export default function SettingsForm({
                         }
 
                         return (
-                            <KeyBindField
-                                key={key}
-                                label={properties.label}
-                                keys={
-                                    extensionInstalled && properties.boundViaChrome
-                                        ? (chromeKeyBinds[keyBindName] ?? '')
-                                        : keyBindSet[keyBindName].keys
-                                }
-                                boundViaChrome={extensionInstalled && properties.boundViaChrome}
-                                onKeysChange={(keys) => handleKeysChange(keys, keyBindName)}
-                                onOpenExtensionShortcuts={onOpenChromeExtensionShortcuts}
-                            />
+                            <div>
+                                <KeyBindField
+                                    key={key}
+                                    label={properties.label}
+                                    keys={
+                                        extensionInstalled && properties.boundViaChrome
+                                            ? (chromeKeyBinds[keyBindName] ?? '')
+                                            : keyBindSet[keyBindName].keys
+                                    }
+                                    boundViaChrome={extensionInstalled && properties.boundViaChrome}
+                                    onKeysChange={(keys) => handleKeysChange(keys, keyBindName)}
+                                    onOpenExtensionShortcuts={onOpenChromeExtensionShortcuts}
+                                />
+                                {properties.additionalControl}
+                            </div>
                         );
                     })}
                 </FormGroup>
@@ -2788,19 +2807,6 @@ export default function SettingsForm({
                     )}
                     <Grid item>
                         <FormGroup className={classes.formGroup}>
-                            <TextField
-                                type="number"
-                                label={t('settings.seekDuration')}
-                                fullWidth
-                                value={seekDuration}
-                                color="primary"
-                                onChange={(event) => handleSettingChanged('seekDuration', Number(event.target.value))}
-                                inputProps={{
-                                    min: 1,
-                                    max: 60,
-                                    step: 1,
-                                }}
-                            />
                             <TextField
                                 type="number"
                                 label={t('settings.speedChangeStep')}
