provide transcoding support

src/renderer/features/settings/components/playback/audio-settings.tsx

@@ -10,8 +10,7 @@ import { useCurrentStatus, usePlayerStore } from '/@/renderer/store';
 import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
 import { PlaybackType, PlayerStatus, PlaybackStyle, CrossfadeStyle } from '/@/renderer/types';
 import { useTranslation } from 'react-i18next';
-
-const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
+import { setQueue } from '/@/renderer/utils/set-transcoded-queue-data';
 
 const getAudioDevice = async () => {
     const devices = await navigator.mediaDevices.enumerateDevices();
@@ -62,7 +61,7 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
                         setSettings({ playback: { ...settings, type: e as PlaybackType } });
                         if (isElectron() && e === PlaybackType.LOCAL) {
                             const queueData = usePlayerStore.getState().actions.getPlayerData();
-                            mpvPlayer!.setQueue(queueData);
+                            setQueue(queueData);
                         }
                     }}
                 />

src/renderer/features/settings/components/playback/playback-tab.tsx

@@ -6,6 +6,7 @@ import isElectron from 'is-electron';
 import { LyricSettings } from '/@/renderer/features/settings/components/playback/lyric-settings';
 import { useSettingsStore } from '/@/renderer/store';
 import { PlaybackType } from '/@/renderer/types';
+import { TranscodeSettings } from '/@/renderer/features/settings/components/playback/transcode-settings';
 
 const MpvSettings = lazy(() =>
     import('/@/renderer/features/settings/components/playback/mpv-settings').then((module) => {
@@ -28,6 +29,7 @@ export const PlaybackTab = () => {
         <Stack spacing="md">
             <AudioSettings hasFancyAudio={hasFancyAudio} />
             <Suspense fallback={<></>}>{hasFancyAudio && <MpvSettings />}</Suspense>
+            <TranscodeSettings />
             <ScrobbleSettings />
             <LyricSettings />
         </Stack>

src/renderer/features/settings/components/playback/transcode-settings.tsx

@@ -0,0 +1,89 @@
+import { NumberInput, Switch, TextInput } from '/@/renderer/components';
+import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
+import { SettingOption, SettingsSection } from '../settings-section';
+import { useTranslation } from 'react-i18next';
+
+export const TranscodeSettings = () => {
+    const { t } = useTranslation();
+    const { transcode } = usePlaybackSettings();
+    const { setTranscodingConfig } = useSettingsStoreActions();
+    const note = t('setting.transcodeNote', { postProcess: 'sentenceCase' });
+
+    const transcodeOptions: SettingOption[] = [
+        {
+            control: (
+                <Switch
+                    aria-label="Toggle transcode"
+                    defaultChecked={transcode.enabled}
+                    onChange={(e) => {
+                        setTranscodingConfig({
+                            ...transcode,
+                            enabled: e.currentTarget.checked,
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.transcode', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            note,
+            title: t('setting.transcode', { postProcess: 'sentenceCase' }),
+        },
+        {
+            control: (
+                <NumberInput
+                    aria-label="Transcode bitrate"
+                    defaultValue={transcode.bitrate}
+                    min={0}
+                    placeholder="mp3, opus"
+                    w={100}
+                    onBlur={(e) => {
+                        setTranscodingConfig({
+                            ...transcode,
+                            bitrate: e.currentTarget.value
+                                ? Number(e.currentTarget.value)
+                                : undefined,
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.transcodeBitrate', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: !transcode.enabled,
+            note,
+            title: t('setting.transcodeBitrate', { postProcess: 'sentenceCase' }),
+        },
+        {
+            control: (
+                <TextInput
+                    aria-label="transcoding format"
+                    defaultValue={transcode.format}
+                    width={100}
+                    onBlur={(e) => {
+                        setTranscodingConfig({
+                            ...transcode,
+                            format: e.currentTarget.value || undefined,
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.transcodeFormat', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: !transcode.enabled,
+            note,
+            title: t('setting.transcodeFormat', { postProcess: 'sentenceCase' }),
+        },
+    ];
+
+    return (
+        <SettingsSection
+            divider
+            options={transcodeOptions}
+        />
+    );
+};