feat: add 'preservePitch' toggle to playback speed "dropdown" (#1243)

* feat: add 'preservePitch' toggle to playback speed "dropdown"

.vscode/settings.json

@@ -42,7 +42,7 @@
         "dist/**/*": true
     },
     "i18n-ally.localesPaths": ["src/i18n", "src/i18n/locales"],
-    "typescript.tsdk": "node_modules\\typescript\\lib",
+    "typescript.tsdk": "node_modules/typescript/lib",
     "typescript.preferences.importModuleSpecifier": "non-relative",
     "stylelint.config": null,
     "stylelint.validate": ["css", "postcss"],

src/renderer/features/player/components/right-controls.tsx

@@ -14,8 +14,11 @@ import {
     useCurrentSong,
     useHotkeySettings,
     useMuted,
+    usePlaybackSettings,
+    usePlaybackType,
     usePreviousSong,
     useSettingsStore,
+    useSettingsStoreActions,
     useSidebarStore,
     useSpeed,
     useVolume,
@@ -24,9 +27,12 @@ import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
+import { Option } from '/@/shared/components/option/option';
 import { Rating } from '/@/shared/components/rating/rating';
 import { Slider } from '/@/shared/components/slider/slider';
+import { Switch } from '/@/shared/components/switch/switch';
 import { LibraryItem, QueueSong, ServerType, Song } from '/@/shared/types/domain-types';
+import { PlaybackType } from '/@/shared/types/types';
 
 const ipc = isElectron() ? window.api.ipc : null;
 const remote = isElectron() ? window.api.remote : null;
@@ -50,9 +56,13 @@ export const RightControls = () => {
         handleVolumeUp,
         handleVolumeWheel,
     } = useRightControls();
+    const { setSettings } = useSettingsStoreActions();
+    const playbackSettings = usePlaybackSettings();
+    const playbackType = usePlaybackType();
 
     const speed = useSpeed();
     const volumeWidth = useSettingsStore((state) => state.general.volumeWidth);
+    const speedPreservePitch = useSettingsStore((state) => state.playback.preservePitch);
 
     const updateRatingMutation = useSetRating({});
     const addToFavoritesMutation = useCreateFavorite({});
@@ -227,6 +237,28 @@ export const RightControls = () => {
                         />
                     </DropdownMenu.Target>
                     <DropdownMenu.Dropdown>
+                        {playbackType === PlaybackType.WEB && (
+                            <Option>
+                                <Option.Label>
+                                    {t('setting.preservePitch', {
+                                        postProcess: 'sentenceCase',
+                                    })}
+                                </Option.Label>
+                                <Option.Control>
+                                    <Switch
+                                        defaultChecked={speedPreservePitch}
+                                        onChange={(e) => {
+                                            setSettings({
+                                                playback: {
+                                                    ...playbackSettings,
+                                                    preservePitch: e.currentTarget.checked,
+                                                },
+                                            });
+                                        }}
+                                    />
+                                </Option.Control>
+                            </Option>
+                        )}
                         <Slider
                             label={formatPlaybackSpeedSliderLabel}
                             marks={[