Browse Source

Change crossfade type from radio -> input picker

master
jeffvli 3 years ago
committed by Jeff
parent
commit
42435b64d3
  1. 63
      src/components/settings/ConfigPanels/PlaybackConfig.tsx

63
src/components/settings/ConfigPanels/PlaybackConfig.tsx

@ -2,7 +2,7 @@ import React from 'react';
import settings from 'electron-settings'; import settings from 'electron-settings';
import { ControlLabel, RadioGroup } from 'rsuite'; import { ControlLabel, RadioGroup } from 'rsuite';
import { ConfigPanel } from '../styled'; import { ConfigPanel } from '../styled';
import { StyledInputNumber, StyledRadio } from '../../shared/styled'; import { StyledInputNumber, StyledInputPicker, StyledRadio } from '../../shared/styled';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks'; import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { setPlaybackSetting, setPlayerVolume } from '../../../redux/playQueueSlice'; import { setPlaybackSetting, setPlayerVolume } from '../../../redux/playQueueSlice';
@ -77,24 +77,49 @@ const PlaybackConfig = () => {
}} }}
/> />
<br /> <br />
<ControlLabel>Crossfade type</ControlLabel> <div>
<RadioGroup <ControlLabel>Crossfade type</ControlLabel>
name="fadeTypeRadioList" <br />
appearance="default" <StyledInputPicker
defaultValue={String(settings.getSync('fadeType'))} data={[
onChange={(e) => { {
settings.setSync('fadeType', e); label: 'Equal Power',
dispatch(setPlaybackSetting({ setting: 'fadeType', value: e })); value: 'equalPower',
}} },
> {
<StyledRadio value="equalPower">Equal Power</StyledRadio> label: 'Linear',
<StyledRadio value="linear">Linear</StyledRadio> value: 'linear',
<StyledRadio value="dipped">Dipped</StyledRadio> },
<StyledRadio value="constantPower">Constant Power</StyledRadio> {
<StyledRadio value="constantPowerSlowFade">Constant Power (slow fade)</StyledRadio> label: 'Dipped',
<StyledRadio value="constantPowerSlowCut">Constant Power (slow cut)</StyledRadio> value: 'dipped',
<StyledRadio value="constantPowerFastCut">Constant Power (fast cut)</StyledRadio> },
</RadioGroup> {
label: 'Constant Power',
value: 'constantPower',
},
{
label: 'Constant Power (slow fade)',
value: 'constantPowerSlowFade',
},
{
label: 'Constant Power (slow cut)',
value: 'constantPowerSlowCut',
},
{
label: 'Constant Power (fast cut)',
value: 'constantPowerFastCut',
},
]}
cleanable={false}
defaultValue={String(settings.getSync('fadeType'))}
onChange={(e: string) => {
settings.setSync('fadeType', e);
dispatch(setPlaybackSetting({ setting: 'fadeType', value: e }));
}}
/>
</div>
<br /> <br />
<ControlLabel>Volume fade</ControlLabel> <ControlLabel>Volume fade</ControlLabel>
<RadioGroup <RadioGroup

Loading…
Cancel
Save