girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-17 05:38:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updates

Browse source
This commit is contained in:
qier222 2022-06-06 01:00:25 +08:00
parent cf7a4528dd
commit 0e58bb6e80
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
44 changed files with 1027 additions and 496 deletions
Download patch file Download diff file Expand all files Collapse all files

44
packages/web/components/New/PlayingNext.tsx
View file

@ -1,19 +1,15 @@
import { resizeImage } from '@/web/utils/common'
import React, { useMemo } from 'react'
import { player } from '@/web/store'
import { useSnapshot } from 'valtio'
import useTracks from '@/web/api/hooks/useTracks'
import { css, cx } from '@emotion/css'
import { AnimatePresence, motion } from 'framer-motion'
import Image from './Image'
import Wave from './Wave'
const PlayingNext = ({ className }: { className?: string }) => {
const playerSnapshot = useSnapshot(player)
const list = useMemo(
() => playerSnapshot.trackList.slice(playerSnapshot.trackIndex + 1, 100),
[playerSnapshot.trackList, playerSnapshot.trackIndex]
)
const { data: tracks } = useTracks({ ids: list })
const { data: tracks } = useTracks({ ids: playerSnapshot.trackList })
return (
<>
@ -28,19 +24,13 @@ const PlayingNext = ({ className }: { className?: string }) => {
className={cx(
'relative z-10 overflow-scroll',
className,
css``,
css`
padding-top: 42px;
mask-image: linear-gradient(to bottom, transparent 0, black 42px);
&::-webkit-scrollbar {
display: none;
}
`,
css`
padding-top: 42px;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0,
black 42px
);
mask-image: linear-gradient(to bottom, transparent 0, black 42px);
`
)}
>
@ -57,13 +47,19 @@ const PlayingNext = ({ className }: { className?: string }) => {
duration: 0.24,
}}
layout
onClick={e => {
if (e.detail === 2) player.playTrack(track.id)
}}
>
{/* Cover */}
<Image
alt='Cover'
className='mr-4 aspect-square h-14 w-14 flex-shrink-0 rounded-12'
src={resizeImage(track.al.picUrl, 'sm')}
/>
<div className='flex-grow'>
{/* Track info */}
<div className='mr-3 flex-grow'>
<div className='line-clamp-1 text-18 font-medium text-neutral-700 dark:text-neutral-200'>
{track.name}
</div>
@ -71,13 +67,21 @@ const PlayingNext = ({ className }: { className?: string }) => {
{track.ar.map(a => a.name).join(', ')}
</div>
</div>
<div className='text-18 font-medium text-neutral-700 dark:text-neutral-200'>
{String(index + 1).padStart(2, '0')}
</div>
{/* Wave icon */}
{playerSnapshot.trackIndex === index ? (
<Wave playing={playerSnapshot.state === 'playing'} />
) : (
<div className='text-18 font-medium text-neutral-700 dark:text-neutral-200'>
{String(index + 1).padStart(2, '0')}
</div>
)}
</motion.div>
))}
<div className='pointer-events-none sticky bottom-0 h-8 w-full bg-gradient-to-t from-black'></div>
{(tracks?.songs.length || 0) >= 4 && (
<div className='pointer-events-none sticky bottom-0 h-8 w-full bg-gradient-to-t from-black'></div>
)}
</AnimatePresence>
</motion.div>
</div>