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

Add fade in animation for lyrics container

Browse source
This commit is contained in:
jeffvli 2023-06-05 03:00:43 -07:00 • committed by Jeff
parent a1a113d3c6
commit f92cd89c46
1 changed files with 25 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { Center, Group } from '@mantine/core'; import { Center, Group } from '@mantine/core';
import { AnimatePresence, motion } from 'framer-motion';
import { ErrorBoundary } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary';
import { RiInformationFill } from 'react-icons/ri'; import { RiInformationFill } from 'react-icons/ri';
import styled from 'styled-components'; import styled from 'styled-components';
@ -9,7 +10,7 @@ import { ErrorFallback } from '/@/renderer/features/action-required';
import { UnsynchronizedLyrics } from '/@/renderer/features/lyrics/unsynchronized-lyrics'; import { UnsynchronizedLyrics } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
import { getServerById, useCurrentSong } from '/@/renderer/store'; import { getServerById, useCurrentSong } from '/@/renderer/store';
const LyricsScrollContainer = styled(ScrollArea)` const LyricsScrollContainer = styled(motion(ScrollArea))`
z-index: 1; z-index: 1;
text-align: center; text-align: center;
transform: translateY(-2rem); transform: translateY(-2rem);
@ -67,23 +68,29 @@ export const Lyrics = () => {
</Group> </Group>
</Center> </Center>
) : ( ) : (
<LyricsScrollContainer> <AnimatePresence mode="sync">
{Array.isArray(data.lyrics) ? ( <LyricsScrollContainer
<SynchronizedLyrics animate={{ opacity: 1 }}
lyrics={data.lyrics} initial={{ opacity: 0 }}
override={null} transition={{ duration: 0.5 }}
source={data.source} >
onRemoveLyric={() => {}} {Array.isArray(data.lyrics) ? (
/> <SynchronizedLyrics
) : ( lyrics={data.lyrics}
<UnsynchronizedLyrics override={null}
lyrics={data.lyrics} source={data.source}
override={null} onRemoveLyric={() => {}}
source={data.source} />
onRemoveLyric={() => {}} ) : (
/> <UnsynchronizedLyrics
)} lyrics={data.lyrics}
</LyricsScrollContainer> override={null}
source={data.source}
onRemoveLyric={() => {}}
/>
)}
</LyricsScrollContainer>
</AnimatePresence>
)} )}
</ErrorBoundary> </ErrorBoundary>
); );