vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-17 06:00:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

crossfade player enhancements, reorganize settings

Browse Source
This commit is contained in:
jeffvli
2025-11-19 15:43:20 -08:00
parent 725e44f048
commit 0dff13c43f
8 changed files with 546 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/settings/components/general/control-settings.tsx
+201
View File
@@ -7,13 +7,17 @@ import {
SettingsSection,
} from '/@/renderer/features/settings/components/settings-section';
import {
BarAlign,
GenreTarget,
PlayerbarSliderType,
SideQueueType,
useGeneralSettings,
usePlayerbarSlider,
useSettingsStoreActions,
} from '/@/renderer/store/settings.store';
import { Group } from '/@/shared/components/group/group';
import { NumberInput } from '/@/shared/components/number-input/number-input';
import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
import { Select } from '/@/shared/components/select/select';
import { Slider } from '/@/shared/components/slider/slider';
import { Switch } from '/@/shared/components/switch/switch';
@@ -43,6 +47,7 @@ const SIDE_QUEUE_OPTIONS = [
export const ControlSettings = () => {
const { t } = useTranslation();
const settings = useGeneralSettings();
const playerbarSlider = usePlayerbarSlider();
const { setSettings } = useSettingsStoreActions();
const controlOptions: SettingOption[] = [
@@ -621,6 +626,202 @@ export const ControlSettings = () => {
isHidden: false,
title: t('setting.playerbarOpenDrawer', { postProcess: 'sentenceCase' }),
},
{
control: (
<SegmentedControl
data={[
{
label: t('setting.playerbarSliderType', {
context: 'optionSlider',
postProcess: 'titleCase',
}),
value: PlayerbarSliderType.SLIDER,
},
{
label: t('setting.playerbarSliderType', {
context: 'optionWaveform',
postProcess: 'titleCase',
}),
value: PlayerbarSliderType.WAVEFORM,
},
]}
onChange={(value) => {
setSettings({
general: {
...settings,
playerbarSlider: {
...playerbarSlider,
type: value as PlayerbarSliderType,
},
},
});
}}
size="sm"
value={playerbarSlider?.type || PlayerbarSliderType.WAVEFORM}
w="100%"
/>
),
description: t('setting.playerbarSlider', {
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: false,
title: t('setting.playerbarSlider', { postProcess: 'sentenceCase' }),
},
...(playerbarSlider?.type === PlayerbarSliderType.WAVEFORM
? [
{
control: (
<SegmentedControl
data={[
{
label: t('setting.playerbarWaveformAlign', {
context: 'optionTop',
postProcess: 'titleCase',
}),
value: BarAlign.TOP,
},
{
label: t('setting.playerbarWaveformAlign', {
context: 'optionCenter',
postProcess: 'titleCase',
}),
value: BarAlign.CENTER,
},
{
label: t('setting.playerbarWaveformAlign', {
context: 'optionBottom',
postProcess: 'titleCase',
}),
value: BarAlign.BOTTOM,
},
]}
onChange={(value) => {
setSettings({
general: {
...settings,
playerbarSlider: {
...playerbarSlider,
barAlign: (value as BarAlign) || BarAlign.CENTER,
},
},
});
}}
size="sm"
value={playerbarSlider?.barAlign || BarAlign.CENTER}
w="100%"
/>
),
description: t('setting.playerbarWaveformAlign', {
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: false,
title: t('setting.playerbarWaveformAlign', {
postProcess: 'sentenceCase',
}),
},
{
control: (
<Slider
defaultValue={playerbarSlider?.barWidth ?? 2}
max={10}
min={0}
onChangeEnd={(value) => {
setSettings({
general: {
...settings,
playerbarSlider: {
...playerbarSlider,
barWidth: value,
},
},
});
}}
step={1}
styles={{
root: {},
}}
w="120px"
/>
),
description: t('setting.playerbarWaveformBarWidth', {
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: false,
title: t('setting.playerbarWaveformBarWidth', {
postProcess: 'sentenceCase',
}),
},
{
control: (
<Slider
defaultValue={playerbarSlider?.barGap || 0}
max={10}
min={0}
onChangeEnd={(value) => {
setSettings({
general: {
...settings,
playerbarSlider: {
...playerbarSlider,
barGap: value,
},
},
});
}}
step={1}
styles={{
root: {},
}}
w="120px"
/>
),
description: t('setting.playerbarWaveformGap', {
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: false,
title: t('setting.playerbarWaveformGap', {
postProcess: 'sentenceCase',
}),
},
{
control: (
<Slider
defaultValue={playerbarSlider?.barRadius ?? 4}
max={20}
min={0}
onChangeEnd={(value) => {
setSettings({
general: {
...settings,
playerbarSlider: {
...playerbarSlider,
barRadius: value,
},
},
});
}}
step={1}
styles={{
root: {},
}}
w="120px"
/>
),
description: t('setting.playerbarWaveformRadius', {
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: false,
title: t('setting.playerbarWaveformRadius', {
postProcess: 'sentenceCase',
}),
},
]
: []),
];
return <SettingsSection options={controlOptions} />;