[enhancement]: support serach on settings page

This commit is contained in:
Kendall Garner 2024-05-05 13:25:05 -07:00
parent 683bb0222c
commit 645697367d
No known key found for this signature in database
GPG key ID: 18D2767419676C87
21 changed files with 439 additions and 385 deletions

View file

@ -18,7 +18,7 @@ const getAudioDevice = async () => {
return (devices || []).filter((dev: MediaDeviceInfo) => dev.kind === 'audiooutput');
};
export const AudioSettings = () => {
export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) => {
const { t } = useTranslation();
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
@ -201,5 +201,10 @@ export const AudioSettings = () => {
},
];
return <SettingsSection options={audioOptions} />;
return (
<SettingsSection
divider={!hasFancyAudio}
options={audioOptions}
/>
);
};

View file

@ -118,5 +118,10 @@ export const LyricSettings = () => {
},
];
return <SettingsSection options={lyricOptions} />;
return (
<SettingsSection
divider={false}
options={lyricOptions}
/>
);
};

View file

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { Divider, Group, Stack } from '@mantine/core';
import { Group, Stack } from '@mantine/core';
import isElectron from 'is-electron';
import {
FileInput,
@ -414,9 +414,7 @@ export const MpvSettings = () => {
return (
<>
<SettingsSection options={options} />
<Divider />
<SettingsSection options={generalOptions} />
<Divider />
<SettingsSection options={replayGainOptions} />
</>
);

View file

@ -1,5 +1,5 @@
import { lazy, Suspense, useMemo } from 'react';
import { Divider, Stack } from '@mantine/core';
import { Stack } from '@mantine/core';
import { AudioSettings } from '/@/renderer/features/settings/components/playback/audio-settings';
import { ScrobbleSettings } from '/@/renderer/features/settings/components/playback/scrobble-settings';
import isElectron from 'is-electron';
@ -15,13 +15,12 @@ export const PlaybackTab = () => {
const hasFancyAudio = useMemo(() => {
return isElectron() || 'AudioContext' in window;
}, []);
return (
<Stack spacing="md">
<AudioSettings />
<AudioSettings hasFancyAudio={hasFancyAudio} />
<Suspense fallback={<></>}>{hasFancyAudio && <MpvSettings />}</Suspense>
<Divider />
<ScrobbleSettings />
<Divider />
<LyricSettings />
</Stack>
);