optimize settings store

This commit is contained in:
jeffvli
2026-01-02 03:13:17 -08:00
parent 0cfc4119ba
commit a66c67e86d
72 changed files with 479 additions and 354 deletions
@@ -1,5 +1,5 @@
import isElectron from 'is-electron';
import { useEffect, useState } from 'react';
import { memo, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
@@ -20,7 +20,7 @@ const getAudioDevice = async () => {
return (devices || []).filter((dev: MediaDeviceInfo) => dev.kind === 'audiooutput');
};
export const AudioSettings = () => {
export const AudioSettings = memo(() => {
const { t } = useTranslation();
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
@@ -61,7 +61,7 @@ export const AudioSettings = () => {
defaultValue={settings.type}
disabled={status === PlayerStatus.PLAYING}
onChange={(e) => {
setSettings({ playback: { ...settings, type: e as PlayerType } });
setSettings({ playback: { type: e as PlayerType } });
ipc?.send('settings-set', { property: 'playbackType', value: e });
}}
/>
@@ -84,7 +84,7 @@ export const AudioSettings = () => {
data={audioDevices}
defaultValue={settings.audioDeviceId}
disabled={settings.type !== PlayerType.WEB}
onChange={(e) => setSettings({ playback: { ...settings, audioDeviceId: e } })}
onChange={(e) => setSettings({ playback: { audioDeviceId: e } })}
/>
),
description: t('setting.audioDevice', {
@@ -100,7 +100,7 @@ export const AudioSettings = () => {
defaultChecked={settings.webAudio}
onChange={(e) => {
setSettings({
playback: { ...settings, webAudio: e.currentTarget.checked },
playback: { webAudio: e.currentTarget.checked },
});
}}
/>
@@ -121,7 +121,7 @@ export const AudioSettings = () => {
defaultChecked={settings.preservePitch}
onChange={(e) => {
setSettings({
playback: { ...settings, preservePitch: e.currentTarget.checked },
playback: { preservePitch: e.currentTarget.checked },
});
}}
/>
@@ -142,7 +142,6 @@ export const AudioSettings = () => {
onChange={(e) => {
setSettings({
playback: {
...settings,
audioFadeOnStatusChange: e.currentTarget.checked,
},
});
@@ -165,4 +164,4 @@ export const AudioSettings = () => {
title={t('page.setting.audio', { postProcess: 'sentenceCase' })}
/>
);
};
});
@@ -1,3 +1,4 @@
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import {
@@ -7,7 +8,7 @@ import {
import { useAutoDJSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
import { NumberInput } from '/@/shared/components/number-input/number-input';
export const AutoDJSettings = () => {
export const AutoDJSettings = memo(() => {
const { t } = useTranslation();
const settings = useAutoDJSettings();
const { setSettings } = useSettingsStoreActions();
@@ -23,7 +24,6 @@ export const AutoDJSettings = () => {
onChange={(e) => {
setSettings({
autoDJ: {
...settings,
itemCount: Number(e),
},
});
@@ -47,7 +47,6 @@ export const AutoDJSettings = () => {
onChange={(e) => {
setSettings({
autoDJ: {
...settings,
timing: Number(e),
},
});
@@ -69,4 +68,4 @@ export const AutoDJSettings = () => {
title={t('setting.autoDJ', { postProcess: 'titleCase' })}
/>
);
};
});
@@ -1,5 +1,5 @@
import isElectron from 'is-electron';
import { useEffect, useState } from 'react';
import { memo, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
@@ -68,7 +68,7 @@ export const getMpvProperties = (settings: SettingsState['playback']['mpvPropert
return properties;
};
export const MpvSettings = () => {
export const MpvSettings = memo(() => {
const { t } = useTranslation();
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
@@ -114,9 +114,7 @@ export const MpvSettings = () => {
) => {
setSettings({
playback: {
...settings,
mpvProperties: {
...settings.mpvProperties,
[setting]: value,
},
},
@@ -146,7 +144,6 @@ export const MpvSettings = () => {
const handleSetExtraParameters = (data: string[]) => {
setSettings({
playback: {
...settings,
mpvExtraParameters: data,
},
});
@@ -421,4 +418,4 @@ export const MpvSettings = () => {
<SettingsSection options={replayGainOptions} />
</>
);
};
});
@@ -1,5 +1,6 @@
import isElectron from 'is-electron';
import { lazy, Suspense, useMemo } from 'react';
import { lazy, memo, Suspense, useMemo } from 'react';
import { shallow } from 'zustand/shallow';
import { AudioSettings } from '/@/renderer/features/settings/components/playback/audio-settings';
import { AutoDJSettings } from '/@/renderer/features/settings/components/playback/auto-dj-settings';
@@ -16,9 +17,14 @@ const MpvSettings = lazy(() =>
}),
);
export const PlaybackTab = () => {
const audioType = useSettingsStore((state) => state.playback.type);
const useWebAudio = useSettingsStore((state) => state.playback.webAudio);
export const PlaybackTab = memo(() => {
const { audioType, useWebAudio } = useSettingsStore(
(state) => ({
audioType: state.playback.type,
useWebAudio: state.playback.webAudio,
}),
shallow,
);
const hasFancyAudio = useMemo(() => {
return (
@@ -39,4 +45,4 @@ export const PlaybackTab = () => {
<AutoDJSettings />
</Stack>
);
};
});
@@ -1,5 +1,5 @@
import { nanoid } from 'nanoid/non-secure';
import { useCallback, useMemo } from 'react';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
@@ -262,7 +262,7 @@ const FilterValueInput = ({
}
};
export const PlayerFilterSettings = () => {
export const PlayerFilterSettings = memo(() => {
const { t } = useTranslation();
const filters = useSettingsStore((state) => state.playback.filters);
const { setPlaybackFilters } = useSettingsStoreActions();
@@ -432,4 +432,4 @@ export const PlayerFilterSettings = () => {
title={t('page.setting.playerFilters', { postProcess: 'sentenceCase' })}
/>
);
};
});
@@ -1,3 +1,4 @@
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import {
@@ -9,7 +10,7 @@ import { NumberInput } from '/@/shared/components/number-input/number-input';
import { Switch } from '/@/shared/components/switch/switch';
import { TextInput } from '/@/shared/components/text-input/text-input';
export const TranscodeSettings = () => {
export const TranscodeSettings = memo(() => {
const { t } = useTranslation();
const { transcode } = usePlaybackSettings();
const { setTranscodingConfig } = useSettingsStoreActions();
@@ -92,4 +93,4 @@ export const TranscodeSettings = () => {
title={t('page.setting.transcoding', { postProcess: 'sentenceCase' })}
/>
);
};
});