From a1a113d3c6e0d88f6837e9ddc647e099234f8ef9 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 5 Jun 2023 02:57:20 -0700
Subject: [PATCH] Move scroll container to wrap lyrics only

---
 src/renderer/features/lyrics/lyrics.tsx       | 35 ++++++++++++++++---
 .../components/full-screen-player-queue.tsx   | 32 ++---------------
 2 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx
index d96fe5a8..1f894fa7 100644
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/src/renderer/features/lyrics/lyrics.tsx
@@ -1,13 +1,40 @@
 import { Center, Group } from '@mantine/core';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RiInformationFill } from 'react-icons/ri';
+import styled from 'styled-components';
 import { useSongLyrics } from './queries/lyric-query';
 import { SynchronizedLyrics } from './synchronized-lyrics';
-import { Spinner, TextTitle } from '/@/renderer/components';
+import { ScrollArea, Spinner, TextTitle } from '/@/renderer/components';
 import { ErrorFallback } from '/@/renderer/features/action-required';
 import { UnsynchronizedLyrics } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
 import { getServerById, useCurrentSong } from '/@/renderer/store';
 
+const LyricsScrollContainer = styled(ScrollArea)`
+  z-index: 1;
+  text-align: center;
+  transform: translateY(-2rem);
+
+  mask-image: linear-gradient(
+    180deg,
+    transparent 5%,
+    rgba(0, 0, 0, 100%) 20%,
+    rgba(0, 0, 0, 100%) 85%,
+    transparent 95%
+  );
+
+  &.mantine-ScrollArea-root {
+    height: 100%;
+  }
+
+  & .mantine-ScrollArea-viewport {
+    height: 100% !important;
+  }
+
+  & .mantine-ScrollArea-viewport > div {
+    height: 100%;
+  }
+`;
+
 export const Lyrics = () => {
   const currentSong = useCurrentSong();
   const currentServer = getServerById(currentSong?.serverId);
@@ -28,7 +55,7 @@ export const Lyrics = () => {
           size={25}
         />
       ) : !data?.lyrics ? (
-        <Center p="2rem">
+        <Center>
           <Group>
             <RiInformationFill size="2rem" />
             <TextTitle
@@ -40,7 +67,7 @@ export const Lyrics = () => {
           </Group>
         </Center>
       ) : (
-        <>
+        <LyricsScrollContainer>
           {Array.isArray(data.lyrics) ? (
             <SynchronizedLyrics
               lyrics={data.lyrics}
@@ -56,7 +83,7 @@ export const Lyrics = () => {
               onRemoveLyric={() => {}}
             />
           )}
-        </>
+        </LyricsScrollContainer>
       )}
     </ErrorBoundary>
   );
diff --git a/src/renderer/features/player/components/full-screen-player-queue.tsx b/src/renderer/features/player/components/full-screen-player-queue.tsx
index 4e9816dd..95a7d1d6 100644
--- a/src/renderer/features/player/components/full-screen-player-queue.tsx
+++ b/src/renderer/features/player/components/full-screen-player-queue.tsx
@@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import { RiFileMusicLine, RiFileTextLine, RiInformationFill } from 'react-icons/ri';
 import styled from 'styled-components';
-import { Button, ScrollArea, TextTitle } from '/@/renderer/components';
+import { Button, TextTitle } from '/@/renderer/components';
 import { PlayQueue } from '/@/renderer/features/now-playing';
 import {
   useFullScreenPlayerStore,
@@ -27,32 +27,6 @@ const QueueContainer = styled.div`
   }
 `;
 
-const LyricsContainer = styled(ScrollArea)`
-  z-index: 1;
-  text-align: center;
-  transform: translateY(-2rem);
-
-  mask-image: linear-gradient(
-    180deg,
-    transparent 5%,
-    rgba(0, 0, 0, 100%) 20%,
-    rgba(0, 0, 0, 100%) 85%,
-    transparent 95%
-  );
-
-  &.mantine-ScrollArea-root {
-    height: 100%;
-  }
-
-  & .mantine-ScrollArea-viewport {
-    height: 100% !important;
-  }
-
-  & .mantine-ScrollArea-viewport > div {
-    height: 100%;
-  }
-`;
-
 const ActiveTabIndicator = styled(motion.div)`
   position: absolute;
   bottom: 0;
@@ -140,9 +114,7 @@ export const FullScreenPlayerQueue = () => {
           </Group>
         </Center>
       ) : activeTab === 'lyrics' ? (
-        <LyricsContainer scrollHideDelay={0}>
-          <Lyrics />
-        </LyricsContainer>
+        <Lyrics />
       ) : null}
     </Stack>
   );