pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move scroll container to wrap lyrics only

Browse source
This commit is contained in:
jeffvli 2023-06-05 02:57:20 -07:00 • committed by Jeff
parent 3f78c3f420
commit a1a113d3c6
2 changed files with 33 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/renderer/features/lyrics/lyrics.tsx
View file

@ -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>
);

32
src/renderer/features/player/components/full-screen-player-queue.tsx
View file

@ -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>
);