mirror of
https://github.com/jeffvli/feishin.git
synced 2024-11-20 14:37:06 +01:00
Add initial lyrics search UI
This commit is contained in:
jeffvli
Jeff
parent
0fa5b6496f
commit
14a6766072
135
src/renderer/features/lyrics/components/lyrics-search-form.tsx
Normal file
135
src/renderer/features/lyrics/components/lyrics-search-form.tsx
Normal file
@ -0,0 +1,135 @@
|
||||
import { useMemo } from 'react';
|
||||
import { Divider, Group, Stack, UnstyledButton } from '@mantine/core';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import { openModal } from '@mantine/modals';
|
||||
import styled from 'styled-components';
|
||||
import { InternetProviderLyricSearchResponse } from '../../../api/types';
|
||||
import { useLyricSearch } from '../queries/lyric-search-query';
|
||||
import { Badge, ScrollArea, Spinner, Text, TextInput } from '/@/renderer/components';
|
||||
|
||||
const SearchItem = styled(UnstyledButton)`
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
color: var(--btn-default-fg-hover);
|
||||
background: var(--btn-default-bg-hover);
|
||||
}
|
||||
|
||||
padding: 0.5rem;
|
||||
border-radius: 5px;
|
||||
`;
|
||||
|
||||
interface SearchResultProps {
|
||||
artist?: string;
|
||||
name?: string;
|
||||
source?: string;
|
||||
}
|
||||
const SearchResult = ({ name, artist, source }: SearchResultProps) => {
|
||||
return (
|
||||
<SearchItem>
|
||||
<Group
|
||||
noWrap
|
||||
position="apart"
|
||||
>
|
||||
<Stack
|
||||
maw="65%"
|
||||
spacing={0}
|
||||
>
|
||||
<Text size="md">{name}</Text>
|
||||
<Text $secondary>{artist}</Text>
|
||||
</Stack>
|
||||
<Badge size="lg">{source}</Badge>
|
||||
</Group>
|
||||
</SearchItem>
|
||||
);
|
||||
};
|
||||
|
||||
interface LyricSearchFormProps {
|
||||
artist?: string;
|
||||
name?: string;
|
||||
onSelect?: (lyrics: InternetProviderLyricSearchResponse) => void;
|
||||
}
|
||||
|
||||
export const LyricsSearchForm = ({ artist, name }: LyricSearchFormProps) => {
|
||||
const form = useForm({
|
||||
initialValues: {
|
||||
artist: artist || '',
|
||||
name: name || '',
|
||||
},
|
||||
});
|
||||
|
||||
const [debouncedArtist] = useDebouncedValue(form.values.artist, 500);
|
||||
const [debouncedName] = useDebouncedValue(form.values.name, 500);
|
||||
|
||||
const { data, isLoading } = useLyricSearch({
|
||||
options: { enabled: Boolean(form.values.artist && form.values.name) },
|
||||
query: { artist: debouncedArtist, name: debouncedName },
|
||||
});
|
||||
|
||||
const searchResults = useMemo(() => {
|
||||
if (!data) return [];
|
||||
|
||||
console.log('data', data);
|
||||
|
||||
const results: InternetProviderLyricSearchResponse[] = [];
|
||||
Object.keys(data).forEach((key) => {
|
||||
(data[key as keyof typeof data] || []).forEach((result) => results.push(result));
|
||||
});
|
||||
|
||||
return results;
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<form>
|
||||
<Group grow>
|
||||
<TextInput
|
||||
data-autofocus
|
||||
required
|
||||
label="Name"
|
||||
{...form.getInputProps('name')}
|
||||
/>
|
||||
<TextInput
|
||||
required
|
||||
label="Artist"
|
||||
{...form.getInputProps('artist')}
|
||||
/>
|
||||
</Group>
|
||||
</form>
|
||||
<Divider />
|
||||
{isLoading ? (
|
||||
<Spinner container />
|
||||
) : (
|
||||
<ScrollArea
|
||||
offsetScrollbars
|
||||
h={500}
|
||||
pr="1rem"
|
||||
>
|
||||
<Stack spacing="md">
|
||||
{searchResults.map((result) => (
|
||||
<SearchResult
|
||||
key={`${result.source}-${result.id}`}
|
||||
artist={result.artist}
|
||||
name={result.name}
|
||||
source={result.source}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export const openLyricSearchModal = ({ artist, name }: LyricSearchFormProps) => {
|
||||
openModal({
|
||||
children: (
|
||||
<LyricsSearchForm
|
||||
artist={artist}
|
||||
name={name}
|
||||
/>
|
||||
),
|
||||
size: 'lg',
|
||||
title: 'Search for lyrics',
|
||||
});
|
||||
};
|
||||
51
src/renderer/features/lyrics/lyrics-actions.tsx
Normal file
51
src/renderer/features/lyrics/lyrics-actions.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import { RiAddFill, RiSubtractFill } from 'react-icons/ri';
|
||||
import { Button, NumberInput } from '/@/renderer/components';
|
||||
import { openLyricSearchModal } from '/@/renderer/features/lyrics/components/lyrics-search-form';
|
||||
import { useCurrentSong } from '/@/renderer/store';
|
||||
|
||||
export const LyricsActions = () => {
|
||||
const currentSong = useCurrentSong();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={() =>
|
||||
openLyricSearchModal({
|
||||
artist: currentSong?.artistName,
|
||||
name: currentSong?.name,
|
||||
})
|
||||
}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
<Button
|
||||
tooltip={{ label: 'Decrease offset', openDelay: 500 }}
|
||||
variant="default"
|
||||
>
|
||||
<RiSubtractFill />
|
||||
</Button>
|
||||
<NumberInput
|
||||
styles={{ input: { textAlign: 'center' } }}
|
||||
width={55}
|
||||
/>
|
||||
<Button
|
||||
tooltip={{ label: 'Increase offset', openDelay: 500 }}
|
||||
variant="default"
|
||||
>
|
||||
<RiAddFill />
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={() =>
|
||||
openLyricSearchModal({
|
||||
artist: currentSong?.artistName,
|
||||
name: currentSong?.name,
|
||||
})
|
||||
}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -11,8 +11,40 @@ import { ErrorFallback } from '/@/renderer/features/action-required';
|
||||
import { UnsynchronizedLyrics } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
|
||||
import { getServerById, useCurrentSong } from '/@/renderer/store';
|
||||
import { FullLyricsMetadata, SynchronizedLyricMetadata } from '/@/renderer/api/types';
|
||||
import { LyricsActions } from '/@/renderer/features/lyrics/lyrics-actions';
|
||||
|
||||
const LyricsScrollContainer = styled(motion(ScrollArea))`
|
||||
const ActionsContainer = styled.div`
|
||||
position: absolute;
|
||||
bottom: 4rem;
|
||||
left: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const LyricsContainer = styled.div`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
${ActionsContainer} {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ScrollContainer = styled(motion(ScrollArea))`
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
transform: translateY(-2rem);
|
||||
@ -50,7 +82,7 @@ export const Lyrics = () => {
|
||||
|
||||
const [clear, setClear] = useState(false);
|
||||
|
||||
const { data, isLoading } = useSongLyrics(
|
||||
const { data, isInitialLoading } = useSongLyrics(
|
||||
{
|
||||
query: { songId: currentSong?.id || '' },
|
||||
serverId: currentServer?.id,
|
||||
@ -65,42 +97,51 @@ export const Lyrics = () => {
|
||||
|
||||
return (
|
||||
<ErrorBoundary FallbackComponent={ErrorFallback}>
|
||||
{isLoading ? (
|
||||
{isInitialLoading ? (
|
||||
<Spinner
|
||||
container
|
||||
size={25}
|
||||
/>
|
||||
) : !data?.lyrics || clear ? (
|
||||
<Center>
|
||||
<Group>
|
||||
<RiInformationFill size="2rem" />
|
||||
<TextTitle
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
No lyrics found
|
||||
</TextTitle>
|
||||
</Group>
|
||||
</Center>
|
||||
) : (
|
||||
<AnimatePresence mode="sync">
|
||||
<LyricsScrollContainer
|
||||
animate={{ opacity: 1 }}
|
||||
initial={{ opacity: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{isSynchronized(data) ? (
|
||||
<SynchronizedLyrics
|
||||
{...data}
|
||||
onRemoveLyric={() => setClear(true)}
|
||||
/>
|
||||
<LyricsContainer>
|
||||
{!data?.lyrics || clear ? (
|
||||
<Center>
|
||||
<Group>
|
||||
<RiInformationFill size="2rem" />
|
||||
<TextTitle
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
No lyrics found
|
||||
</TextTitle>
|
||||
</Group>
|
||||
</Center>
|
||||
) : (
|
||||
<UnsynchronizedLyrics
|
||||
{...data}
|
||||
onRemoveLyric={() => setClear(true)}
|
||||
/>
|
||||
<ScrollContainer
|
||||
animate={{ opacity: 1 }}
|
||||
initial={{ opacity: 0 }}
|
||||
scrollHideDelay={0}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{isSynchronized(data) ? (
|
||||
<SynchronizedLyrics
|
||||
{...data}
|
||||
onRemoveLyric={() => setClear(true)}
|
||||
/>
|
||||
) : (
|
||||
<UnsynchronizedLyrics
|
||||
{...data}
|
||||
onRemoveLyric={() => setClear(true)}
|
||||
/>
|
||||
)}
|
||||
</ScrollContainer>
|
||||
)}
|
||||
</LyricsScrollContainer>
|
||||
|
||||
<ActionsContainer>
|
||||
<LyricsActions />
|
||||
</ActionsContainer>
|
||||
</LyricsContainer>
|
||||
</AnimatePresence>
|
||||
)}
|
||||
</ErrorBoundary>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user