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

Add motion animations to lyrics background gradient

Browse Source
This commit is contained in:
SrGooglo 2025-06-16 20:49:44 +00:00
parent 4dfacb8427
commit f13d950e48
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/app/src/pages/lyrics/index.jsx
View File

@ -1,5 +1,6 @@
import React from "react" import React from "react"
import classnames from "classnames" import classnames from "classnames"
import { motion } from "motion/react"
import useFullScreen from "@hooks/useFullScreen" import useFullScreen from "@hooks/useFullScreen"
import useSyncRoom from "@hooks/useSyncRoom" import useSyncRoom from "@hooks/useSyncRoom"
@ -25,12 +26,12 @@ const EnhancedLyricsPage = () => {
const textRef = React.useRef() const textRef = React.useRef()
const { toggleFullScreen } = useFullScreen({ const { toggleFullScreen } = useFullScreen({
onExit: () => app?.location?.last && app.location.back(), onExit: () => app.location.back(),
}) })
const { trackManifest } = useTrackManifest(playerState.track_manifest) const { trackManifest } = useTrackManifest(playerState.track_manifest)
const { dominantColor } = useCoverAnalysis(trackManifest) const { dominantColor, cssVars } = useCoverAnalysis(trackManifest)
const { syncRoom, subscribeLyricsUpdates, unsubscribeLyricsUpdates } = const { syncRoom, subscribeLyricsUpdates, unsubscribeLyricsUpdates } =
useSyncRoom() useSyncRoom()
@ -61,9 +62,15 @@ const EnhancedLyricsPage = () => {
className={classnames("lyrics", { className={classnames("lyrics", {
stopped: playerState.playback_status !== "playing", stopped: playerState.playback_status !== "playing",
})} })}
style={dominantColor} style={cssVars}
> >
<div className="lyrics-background-color" /> <motion.div
className="lyrics-background-color"
initial={false}
animate={{
background: `linear-gradient(0deg, rgba(${dominantColor}), rgba(255, 255, 255, 0.5))`,
}}
/>
{playerState.playback_status === "stopped" && ( {playerState.playback_status === "stopped" && (
<div className="lyrics-stopped-decorator"> <div className="lyrics-stopped-decorator">

8
packages/app/src/pages/lyrics/index.less
View File

@ -1,5 +1,7 @@
.lyrics { .lyrics {
position: relative; position: fixed;
top: 0;
left: 0;
z-index: 100; z-index: 100;
@ -46,10 +48,6 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background:
linear-gradient(0deg, rgb(var(--dominant-color)), rgba(0, 0, 0, 0)),
url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
} }
.lyrics-background-wrapper { .lyrics-background-wrapper {