mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-17 05:38:04 +00:00
feat: monorepo
This commit is contained in:
qier222
parent
4d54060a4f
commit
42089d4996
200 changed files with 1530 additions and 1521 deletions
263
packages/web/pages/Library.tsx
Normal file
263
packages/web/pages/Library.tsx
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
import CoverRow, { Subtitle } from '@/web/components/CoverRow'
|
||||
import SvgIcon, { SvgName } from '@/web/components/SvgIcon'
|
||||
import useUserAlbums from '@/web/hooks/useUserAlbums'
|
||||
import useLyric from '@/web/hooks/useLyric'
|
||||
import usePlaylist from '@/web/hooks/usePlaylist'
|
||||
import useUser from '@/web/hooks/useUser'
|
||||
import useUserPlaylists from '@/web/hooks/useUserPlaylists'
|
||||
import { player } from '@/web/store'
|
||||
import { resizeImage } from '@/web/utils/common'
|
||||
import { sample, chunk } from 'lodash-es'
|
||||
import useUserArtists from '@/web/hooks/useUserArtists'
|
||||
import cx from 'classnames'
|
||||
import { useState, useEffect, useMemo, useCallback } from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
const LikedTracksCard = ({ className }: { className?: string }) => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const { data: playlists } = useUserPlaylists()
|
||||
|
||||
const { data: likedSongsPlaylist } = usePlaylist({
|
||||
id: playlists?.playlist?.[0].id ?? 0,
|
||||
})
|
||||
|
||||
// Lyric
|
||||
const [trackID, setTrackID] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
if (trackID === 0) {
|
||||
setTrackID(
|
||||
sample(likedSongsPlaylist?.playlist.trackIds?.map(t => t.id) ?? []) ?? 0
|
||||
)
|
||||
}
|
||||
}, [likedSongsPlaylist?.playlist.trackIds, trackID])
|
||||
|
||||
const { data: lyric } = useLyric({
|
||||
id: trackID,
|
||||
})
|
||||
|
||||
const lyricLines = useMemo(() => {
|
||||
return (
|
||||
sample(
|
||||
chunk(
|
||||
lyric?.lrc.lyric
|
||||
?.split('\n')
|
||||
?.map(l => l.split(']').pop()?.trim())
|
||||
?.filter(
|
||||
l =>
|
||||
l &&
|
||||
!l.includes('作词') &&
|
||||
!l.includes('作曲') &&
|
||||
!l.includes('纯音乐，请欣赏')
|
||||
),
|
||||
3
|
||||
)
|
||||
) ?? []
|
||||
)
|
||||
}, [lyric])
|
||||
|
||||
const handlePlay = useCallback(
|
||||
(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation()
|
||||
if (!likedSongsPlaylist?.playlist.id) {
|
||||
toast('无法播放歌单')
|
||||
return
|
||||
}
|
||||
player.playPlaylist(likedSongsPlaylist.playlist.id)
|
||||
},
|
||||
[likedSongsPlaylist?.playlist.id]
|
||||
)
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() =>
|
||||
likedSongsPlaylist?.playlist.id &&
|
||||
navigate(`/playlist/${likedSongsPlaylist.playlist.id}`)
|
||||
}
|
||||
className={cx(
|
||||
'relative flex h-full w-full flex-col justify-between rounded-2xl bg-brand-50 py-5 px-6 text-brand-600 dark:bg-brand-600 dark:text-brand-50',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className='text-sm'>
|
||||
{lyricLines.map((line, index) => (
|
||||
<div key={`${index}-${line}`}>{line}</div>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<div className='text-2xl font-bold'>我喜欢的音乐</div>
|
||||
<div className='mt-0.5 text-[15px]'>
|
||||
{likedSongsPlaylist?.playlist.trackCount ?? 0} 首歌
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handlePlay}
|
||||
className='btn-pressed-animation absolute bottom-6 right-6 grid h-11 w-11 cursor-default place-content-center rounded-full bg-brand-600 text-brand-50 shadow-lg dark:bg-white dark:text-brand-600'
|
||||
>
|
||||
<SvgIcon name='play-fill' className='ml-0.5 h-6 w-6' />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const OtherCard = ({
|
||||
name,
|
||||
icon,
|
||||
className,
|
||||
}: {
|
||||
name: string
|
||||
icon: SvgName
|
||||
className?: string
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'flex h-full w-full flex-col justify-between rounded-2xl bg-gray-100 text-lg font-bold dark:bg-gray-800 dark:text-gray-200',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<SvgIcon name={icon} className='ml-3 mt-3 h-12 w-12' />
|
||||
<span className='m-4'>{name}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Playlists = () => {
|
||||
const { data: playlists } = useUserPlaylists()
|
||||
return (
|
||||
<div>
|
||||
<CoverRow
|
||||
playlists={playlists?.playlist?.slice(1) ?? []}
|
||||
subtitle={Subtitle.Creator}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Albums = () => {
|
||||
const { data: albums } = useUserAlbums({
|
||||
limit: 1000,
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<CoverRow albums={albums?.data ?? []} subtitle={Subtitle.Artist} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Artists = () => {
|
||||
const { data: artists } = useUserArtists()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<CoverRow artists={artists?.data ?? []} subtitle={Subtitle.Artist} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const MVs = () => {
|
||||
return <div>施工中</div>
|
||||
}
|
||||
|
||||
const Podcasts = () => {
|
||||
return <div>施工中</div>
|
||||
}
|
||||
interface TabsType {
|
||||
playlist: string
|
||||
album: string
|
||||
artist: string
|
||||
mv: string
|
||||
podcast: string
|
||||
}
|
||||
|
||||
const TabHeader = ({
|
||||
activeTab,
|
||||
tabs,
|
||||
setActiveTab,
|
||||
}: {
|
||||
activeTab: keyof TabsType
|
||||
tabs: TabsType
|
||||
setActiveTab: (tab: keyof TabsType) => void
|
||||
}) => {
|
||||
return (
|
||||
<div className='mt-10 flex text-lg dark:text-white'>
|
||||
{Object.entries(tabs).map(([id, name]) => (
|
||||
<div
|
||||
key={id}
|
||||
onClick={() => setActiveTab(id as keyof TabsType)}
|
||||
className={cx(
|
||||
'btn-pressed-animation mr-3 rounded-lg px-3.5 py-1.5 font-medium',
|
||||
activeTab === id
|
||||
? 'bg-black/[.04] dark:bg-white/10'
|
||||
: 'btn-hover-animation after:bg-black/[.04] dark:after:bg-white/10'
|
||||
)}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Tabs = () => {
|
||||
const tabs = {
|
||||
playlist: '全部歌单',
|
||||
album: '专辑',
|
||||
artist: '艺人',
|
||||
mv: 'MV',
|
||||
podcast: '播客',
|
||||
}
|
||||
|
||||
const [activeTab, setActiveTab] = useState<keyof TabsType>('playlist')
|
||||
|
||||
return (
|
||||
<>
|
||||
<TabHeader
|
||||
activeTab={activeTab}
|
||||
tabs={tabs}
|
||||
setActiveTab={setActiveTab}
|
||||
/>
|
||||
<div className='mt-6'>
|
||||
{activeTab === 'playlist' && <Playlists />}
|
||||
{activeTab === 'album' && <Albums />}
|
||||
{activeTab === 'artist' && <Artists />}
|
||||
{activeTab === 'mv' && <MVs />}
|
||||
{activeTab === 'podcast' && <Podcasts />}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const Library = () => {
|
||||
const { data: user } = useUser()
|
||||
|
||||
const avatarUrl = useMemo(
|
||||
() => resizeImage(user?.profile?.avatarUrl ?? '', 'sm'),
|
||||
[user?.profile?.avatarUrl]
|
||||
)
|
||||
|
||||
return (
|
||||
<div className='mt-8'>
|
||||
<div className='flex items-center text-[2.625rem] font-semibold dark:text-white'>
|
||||
<img src={avatarUrl} className='mr-3 mt-1 h-12 w-12 rounded-full' />
|
||||
{user?.profile?.nickname}的音乐库
|
||||
</div>
|
||||
|
||||
<div className='mt-8 grid grid-cols-[2fr_1fr_1fr] grid-rows-2 gap-4'>
|
||||
<LikedTracksCard className='row-span-2' />
|
||||
<OtherCard name='云盘' icon='fm' className='' />
|
||||
<OtherCard name='本地音乐' icon='music-note' className='' />
|
||||
<OtherCard name='最近播放' icon='playlist' className='' />
|
||||
<OtherCard name='听歌排行' icon='music-library' className='' />
|
||||
</div>
|
||||
|
||||
<Tabs />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Library
|
||||
Loading…
Add table
Add a link
Reference in a new issue