diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index bb6f4d27..549bba02 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -621,6 +621,8 @@ "useSystemTheme_description": "follow the system-defined light or dark preference", "volumeWheelStep": "volume wheel step", "volumeWheelStep_description": "the amount of volume to change when scrolling the mouse wheel on the volume slider", + "volumeWidth": "volume slider width", + "volumeWidth_description": "the width of the volume slider", "windowBarStyle": "window bar style", "windowBarStyle_description": "select the style of the window bar", "zoom": "zoom percentage", diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx index 6ae0de9e..de5573bc 100644 --- a/src/renderer/features/player/components/right-controls.tsx +++ b/src/renderer/features/player/components/right-controls.tsx @@ -18,6 +18,7 @@ import { useHotkeySettings, useMuted, usePreviousSong, + useSettingsStore, useSidebarStore, useSpeed, useVolume, @@ -54,6 +55,7 @@ export const RightControls = () => { } = useRightControls(); const speed = useSpeed(); + const volumeWidth = useSettingsStore((state) => state.general.volumeWidth); const updateRatingMutation = useSetRating({}); const addToFavoritesMutation = useCreateFavorite({}); @@ -324,7 +326,7 @@ export const RightControls = () => { min={0} size={6} value={volume} - w="60px" + w={volumeWidth} onChange={handleVolumeSlider} onWheel={handleVolumeWheel} /> diff --git a/src/renderer/features/settings/components/general/control-settings.tsx b/src/renderer/features/settings/components/general/control-settings.tsx index d19575ef..28afbe17 100644 --- a/src/renderer/features/settings/components/general/control-settings.tsx +++ b/src/renderer/features/settings/components/general/control-settings.tsx @@ -71,14 +71,15 @@ export const ControlSettings = () => { { - const newVal = e.currentTarget.value - ? Math.min(Math.max(Number(e.currentTarget.value), 175), 2500) - : null; + const newVal = + e.currentTarget.value !== '0' + ? Math.min(Math.max(Number(e.currentTarget.value), 175), 2500) + : null; setSettings({ general: { ...settings, albumArtRes: newVal } }); }} /> @@ -322,6 +323,29 @@ export const ControlSettings = () => { isHidden: false, title: t('setting.volumeWheelStep', { postProcess: 'sentenceCase' }), }, + { + control: ( + { + setSettings({ + general: { ...settings, volumeWidth: Number(e.currentTarget.value) }, + }); + }} + /> + ), + description: t('setting.volumeWidth', { + context: 'description', + postProcess: 'sentenceCase', + }), + isHidden: false, + title: t('setting.volumeWidth', { postProcess: 'sentenceCase' }), + }, { control: (