Add additional lyrics customizability options (#146)

This commit is contained in:
jeffvli 2023-08-04 19:32:41 -07:00
parent 72b4a60c7b
commit fca135ce2b
7 changed files with 230 additions and 64 deletions

View file

@ -2,14 +2,9 @@ import type { ChangeEvent } from 'react';
import { MultiSelect } from '/@/renderer/components/select';
import { Slider } from '/@/renderer/components/slider';
import { Switch } from '/@/renderer/components/switch';
import {
useSettingsStoreActions,
useSettingsStore,
useLyricsSettings,
} from '/@/renderer/store/settings.store';
import { useSettingsStoreActions, useSettingsStore } from '/@/renderer/store/settings.store';
import { TableColumn, TableType } from '/@/renderer/types';
import { Option } from '/@/renderer/components/option';
import { NumberInput } from '/@/renderer/components/input';
export const SONG_TABLE_COLUMNS = [
{ label: 'Row Index', value: TableColumn.ROW_INDEX },
@ -97,7 +92,6 @@ interface TableConfigDropdownProps {
export const TableConfigDropdown = ({ type }: TableConfigDropdownProps) => {
const { setSettings } = useSettingsStoreActions();
const tableConfig = useSettingsStore((state) => state.tables);
const lyricConfig = useLyricsSettings();
const handleAddOrRemoveColumns = (values: TableColumn[]) => {
const existingColumns = tableConfig[type].columns;
@ -182,24 +176,6 @@ export const TableConfigDropdown = ({ type }: TableConfigDropdownProps) => {
});
};
const handleLyricFollow = (e: ChangeEvent<HTMLInputElement>) => {
setSettings({
lyrics: {
...useSettingsStore.getState().lyrics,
follow: e.currentTarget.checked,
},
});
};
const handleLyricOffset = (e: ChangeEvent<HTMLInputElement>) => {
setSettings({
lyrics: {
...useSettingsStore.getState().lyrics,
delayMs: Number(e.currentTarget.value),
},
});
};
return (
<>
<Option>
@ -220,25 +196,6 @@ export const TableConfigDropdown = ({ type }: TableConfigDropdownProps) => {
/>
</Option.Control>
</Option>
<Option>
<Option.Label>Follow current lyrics</Option.Label>
<Option.Control>
<Switch
defaultChecked={lyricConfig.follow}
onChange={handleLyricFollow}
/>
</Option.Control>
</Option>
<Option>
<Option.Label>Lyric offset (ms)</Option.Label>
<Option.Control>
<NumberInput
defaultValue={lyricConfig.delayMs}
step={10}
onBlur={handleLyricOffset}
/>
</Option.Control>
</Option>
<Option>
<Option.Control>
<Slider