80 lines
2 KiB
TypeScript
80 lines
2 KiB
TypeScript
import { RiAddFill, RiSubtractFill } from 'react-icons/ri';
|
|
import { LyricsOverride } from '/@/renderer/api/types';
|
|
import { Button, NumberInput } from '/@/renderer/components';
|
|
import { openLyricSearchModal } from '/@/renderer/features/lyrics/components/lyrics-search-form';
|
|
import {
|
|
useCurrentSong,
|
|
useLyricsSettings,
|
|
useSettingsStore,
|
|
useSettingsStoreActions,
|
|
} from '/@/renderer/store';
|
|
|
|
interface LyricsActionsProps {
|
|
onRemoveLyric: () => void;
|
|
onSearchOverride: (params: LyricsOverride) => void;
|
|
}
|
|
|
|
export const LyricsActions = ({ onRemoveLyric, onSearchOverride }: LyricsActionsProps) => {
|
|
const currentSong = useCurrentSong();
|
|
const { setSettings } = useSettingsStoreActions();
|
|
const { delayMs } = useLyricsSettings();
|
|
|
|
const handleLyricOffset = (e: number) => {
|
|
setSettings({
|
|
lyrics: {
|
|
...useSettingsStore.getState().lyrics,
|
|
delayMs: e,
|
|
},
|
|
});
|
|
};
|
|
|
|
const isActionsDisabled = !currentSong;
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
uppercase
|
|
disabled={isActionsDisabled}
|
|
variant="subtle"
|
|
onClick={() =>
|
|
openLyricSearchModal({
|
|
artist: currentSong?.artistName,
|
|
name: currentSong?.name,
|
|
onSearchOverride,
|
|
})
|
|
}
|
|
>
|
|
Search
|
|
</Button>
|
|
<Button
|
|
aria-label="Decrease lyric offset"
|
|
variant="subtle"
|
|
onClick={() => handleLyricOffset(delayMs - 50)}
|
|
>
|
|
<RiSubtractFill />
|
|
</Button>
|
|
<NumberInput
|
|
aria-label="Lyric offset"
|
|
styles={{ input: { textAlign: 'center' } }}
|
|
value={delayMs || 0}
|
|
width={55}
|
|
onChange={handleLyricOffset}
|
|
/>
|
|
<Button
|
|
aria-label="Increase lyric offset"
|
|
variant="subtle"
|
|
onClick={() => handleLyricOffset(delayMs + 50)}
|
|
>
|
|
<RiAddFill />
|
|
</Button>
|
|
<Button
|
|
uppercase
|
|
disabled={isActionsDisabled}
|
|
variant="subtle"
|
|
onClick={onRemoveLyric}
|
|
>
|
|
Clear
|
|
</Button>
|
|
</>
|
|
);
|
|
};
|