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: add playing status on sidebar playlists (#1517)

Browse source 
* udpate playing status on sidebar playlists

* update player mode logic & delete unused codes

* change sidebar svg to volume-half

* format code and relevant optimizations

* justify-between

* change object visit mode to dot.

* delete duplited `flex` class

* add playlist id check
in case playlist id conflicts with album.
This commit is contained in:
L.Ryland 2022-04-12 22:18:37 +08:00 • committed by GitHub
parent 1591586735
commit 3626095d97
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 73 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/renderer/components/Sidebar.tsx
View file

@ -3,17 +3,10 @@ import SvgIcon from './SvgIcon'
import useUserPlaylists from '@/renderer/hooks/useUserPlaylists'
import { scrollToTop } from '@/renderer/utils/common'
import { prefetchPlaylist } from '@/renderer/hooks/usePlaylist'
import { player } from '@/renderer/store'
import { Mode, TrackListSourceType } from '@/renderer/utils/player'
interface Tab {
name: string
icon: string
route: string
}
interface PrimaryTab extends Tab {
icon: string
}
const primaryTabs: PrimaryTab[] = [
const primaryTabs = [
{
name: '主页',
icon: 'home',
@ -29,7 +22,7 @@ const primaryTabs: PrimaryTab[] = [
icon: 'music-library',
route: '/library',
},
]
] as const
const PrimaryTabs = () => {
return (
@ -62,6 +55,16 @@ const PrimaryTabs = () => {
const Playlists = () => {
const { data: playlists } = useUserPlaylists()
const playerSnapshot = useSnapshot(player)
const currentPlaylistID = useMemo(
() => playerSnapshot.trackListSource?.id,
[playerSnapshot.trackListSource]
)
const playlistMode = useMemo(
() => playerSnapshot.trackListSource?.type,
[playerSnapshot.trackListSource]
)
const mode = useMemo(() => playerSnapshot.mode, [playerSnapshot.mode])
return (
<div className='mb-16 overflow-auto pb-2'>
@ -73,12 +76,17 @@ const Playlists = () => {
to={`/playlist/${playlist.id}`}
className={({ isActive }: { isActive: boolean }) =>
classNames(
'btn-hover-animation line-clamp-1 my-px mx-3 flex cursor-default items-center rounded-lg px-3 py-[0.38rem] text-sm text-black opacity-70 transition-colors duration-200 after:scale-[0.97] after:bg-black/[.06] dark:text-white dark:after:bg-white/20',
'btn-hover-animation line-clamp-1 my-px mx-3 flex cursor-default items-center justify-between rounded-lg px-3 py-[0.38rem] text-sm text-black opacity-70 transition-colors duration-200 after:scale-[0.97] after:bg-black/[.06] dark:text-white dark:after:bg-white/20',
isActive && 'after:scale-100 after:opacity-100'
)
}
>
<span className='line-clamp-1'>{playlist.name}</span>
{playlistMode === TrackListSourceType.PLAYLIST &&
mode === Mode.PLAYLIST &&
currentPlaylistID === playlist.id && (
<SvgIcon className='h-5 w-5' name='volume-half' />
)}
</NavLink>
))}
</div>