RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-18 06:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix opacity anim

Browse Source
This commit is contained in:
SrGooglo 2025-06-16 20:38:49 +00:00
parent af6c217176
commit 12a9b8eba8
1 changed files with 34 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
packages/app/src/pages/lyrics/components/text/index.jsx
View File

@ -19,8 +19,8 @@ const LyricsText = React.forwardRef((props, textRef) => {
const lineIndex = lyrics.synced_lyrics.findIndex((line) => { const lineIndex = lyrics.synced_lyrics.findIndex((line) => {
return ( return (
currentTrackTime >= line.startTimeMs && currentTrackTime >= (line.startTimeMs ?? line.start_ms) &&
currentTrackTime <= line.endTimeMs currentTrackTime <= (line.endTimeMs ?? line.end_ms)
) )
}) })
@ -123,40 +123,38 @@ const LyricsText = React.forwardRef((props, textRef) => {
return ( return (
<div className="lyrics-text-wrapper"> <div className="lyrics-text-wrapper">
<AnimatePresence> <AnimatePresence>
{visible && ( <motion.div
<motion.div ref={textRef}
ref={textRef} className="lyrics-text"
className="lyrics-text" animate={{
animate={{ opacity: visible ? 1 : 0,
opacity: 1, }}
}} initial={{
initial={{ opacity: 0,
opacity: 0, }}
}} exit={{
exit={{ opacity: 0,
opacity: 0, }}
}} transition={{
transition={{ type: "spring",
type: "spring", stiffness: 100,
stiffness: 100, damping: 20,
damping: 20, }}
}} >
> {lyrics.synced_lyrics.map((line, index) => {
{lyrics.synced_lyrics.map((line, index) => { return (
return ( <p
<p key={index}
key={index} id={`lyrics-line-${index}`}
id={`lyrics-line-${index}`} className={classnames("line", {
className={classnames("line", { ["current"]: currentLineIndex === index,
["current"]: currentLineIndex === index, })}
})} >
> {line.text}
{line.text} </p>
</p> )
) })}
})} </motion.div>
</motion.div>
)}
</AnimatePresence> </AnimatePresence>
</div> </div>
) )