girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-18 06:07:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updates

Browse source
This commit is contained in:
qier222 2022-10-28 20:29:04 +08:00
parent a1b0bcf4d3
commit 884f3df41a
No known key found for this signature in database
198 changed files with 4572 additions and 5336 deletions
Download patch file Download diff file Expand all files Collapse all files

65
packages/web/components/New/NowPlaying/NowPlaying.tsx
View file

@ -1,65 +0,0 @@
import { css, cx } from '@emotion/css'
import player from '@/web/states/player'
import { useSnapshot } from 'valtio'
import { AnimatePresence, motion } from 'framer-motion'
import ArtistInline from '@/web/components/New/ArtistsInLine'
import persistedUiStates from '@/web/states/persistedUiStates'
import Controls from './Controls'
import Cover from './Cover'
import Progress from './Progress'
const NowPlaying = () => {
const { track } = useSnapshot(player)
const { minimizePlayer } = useSnapshot(persistedUiStates)
return (
<>
{/* Now Playing */}
<AnimatePresence>
{!minimizePlayer && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className={cx(
'relative flex aspect-square h-full w-full flex-col justify-end overflow-hidden rounded-24 border',
css`
border-color: hsl(0, 100%, 100%, 0.08);
`
)}
>
{/* Cover */}
<Cover />
{/* Info & Controls */}
<div className='m-3 flex flex-col items-center rounded-20 bg-white/60 p-5 font-medium backdrop-blur-3xl dark:bg-black/70'>
{/* Track Info */}
<div className='line-clamp-1 text-lg text-black dark:text-white'>
{track?.name}
</div>
<ArtistInline
artists={track?.ar || []}
className='text-black/30 dark:text-white/30'
hoverClassName='hover:text-black/50 dark:hover:text-white/70 transition-colors duration-400'
/>
{/* Dividing line */}
<div className='mt-2 h-px w-2/5 bg-black/10 dark:bg-white/10'></div>
{/* Progress */}
<Progress />
{/* Controls placeholder */}
<div className='h-11'></div>
</div>
</motion.div>
)}
</AnimatePresence>
{/* Controls */}
<Controls />
</>
)
}
export default NowPlaying