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

feat: updates

Browse source
This commit is contained in:
qier222 2022-06-09 20:16:05 +08:00
parent d4d8dd817b
commit 4c90db789b
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
14 changed files with 144 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

28
packages/web/components/New/TrackList.tsx
View file

@ -5,6 +5,7 @@ import { player } from '@/web/store'
import { useSnapshot } from 'valtio'
import Wave from './Wave'
import Icon from '@/web/components/Icon'
import useIsMobile from '@/web/hooks/useIsMobile'
const TrackList = ({
tracks,
@ -20,9 +21,14 @@ const TrackList = ({
() => playerSnapshot.track,
[playerSnapshot.track]
)
const isMobile = useIsMobile()
const handleClick = (e: React.MouseEvent<HTMLElement>, trackID: number) => {
if (e.detail === 2) onPlay?.(trackID)
if (isMobile) {
onPlay?.(trackID)
} else {
if (e.detail === 2) onPlay?.(trackID)
}
}
const playing = useMemo(
@ -38,7 +44,12 @@ const TrackList = ({
onClick={e => handleClick(e, track.id)}
className='group relative flex items-center py-2 text-16 font-medium text-neutral-200 transition duration-300 ease-in-out'
>
<div className='mr-6'>{String(track.no).padStart(2, '0')}</div>
{/* Track no */}
<div className='mr-3 lg:mr-6'>
{String(track.no).padStart(2, '0')}
</div>
{/* Track name */}
<div className='flex flex-grow items-center'>
{track.name}
{playingTrack?.id === track.id && (
@ -47,7 +58,9 @@ const TrackList = ({
</div>
)}
</div>
<div className='mr-12 flex opacity-0 transition-opacity group-hover:opacity-100'>
{/* Desktop context menu */}
<div className='mr-12 hidden opacity-0 transition-opacity group-hover:opacity-100 lg:flex'>
<div className='mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-brand-600 text-white/80'>
{/* <Icon name='play' className='h-7 w-7' /> */}
</div>
@ -58,7 +71,14 @@ const TrackList = ({
{/* <Icon name='play' className='h-7 w-7' /> */}
</div>
</div>
<div className='text-right'>
{/* Mobile menu */}
<div className='lg:hidden'>
<div className='h-10 w-10 rounded-full bg-night-900'></div>
</div>
{/* Track duration */}
<div className='hidden text-right lg:block'>
{formatDuration(track.dt, 'en', 'hh:mm:ss')}
</div>
</div>