Add initial lyrics search UI

src/renderer/features/lyrics/components/lyrics-search-form.tsx

@@ -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',
+  });
+};

src/renderer/features/lyrics/lyrics-actions.tsx

@@ -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>
+    </>
+  );
+};

src/renderer/features/lyrics/lyrics.tsx

@@ -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
+          <LyricsContainer>
-            animate={{ opacity: 1 }}
+            {!data?.lyrics || clear ? (
-            initial={{ opacity: 0 }}
+              <Center>
-            transition={{ duration: 0.5 }}
+                <Group>
-          >
+                  <RiInformationFill size="2rem" />
-            {isSynchronized(data) ? (
+                  <TextTitle
-              <SynchronizedLyrics
+                    order={3}
-                {...data}
+                    weight={700}
-                onRemoveLyric={() => setClear(true)}
+                  >
-              />
+                    No lyrics found
+                  </TextTitle>
+                </Group>
+              </Center>
             ) : (
-              <UnsynchronizedLyrics
+              <ScrollContainer
-                {...data}
+                animate={{ opacity: 1 }}
-                onRemoveLyric={() => setClear(true)}
+                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>