mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2025-02-22 00:20:55 +08:00
feat: updates
This commit is contained in:
parent
4c90db789b
commit
196a974a64
@ -5,15 +5,13 @@ import useUserLikedTracksIDs, {
|
||||
import { player } from '@/web/store'
|
||||
import useIpcRenderer from '@/web/hooks/useIpcRenderer'
|
||||
import { State as PlayerState } from '@/web/utils/player'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useEffectOnce } from 'react-use'
|
||||
import { useSnapshot } from 'valtio'
|
||||
|
||||
const IpcRendererReact = () => {
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
const playerSnapshot = useSnapshot(player)
|
||||
const track = useMemo(() => playerSnapshot.track, [playerSnapshot.track])
|
||||
const state = useMemo(() => playerSnapshot.state, [playerSnapshot.state])
|
||||
const { track, state } = useSnapshot(player)
|
||||
const trackIDRef = useRef(0)
|
||||
|
||||
// Liked songs ids
|
||||
@ -51,7 +49,7 @@ const IpcRendererReact = () => {
|
||||
|
||||
useEffectOnce(() => {
|
||||
// 用于显示 windows taskbar buttons
|
||||
if (playerSnapshot.track?.id) {
|
||||
if (track?.id) {
|
||||
window.ipcRenderer?.send(IpcChannels.Pause)
|
||||
}
|
||||
})
|
||||
|
@ -60,8 +60,7 @@ const MediaControls = () => {
|
||||
const FMCard = () => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const playerSnapshot = useSnapshot(player)
|
||||
const track = useMemo(() => playerSnapshot.fmTrack, [playerSnapshot.fmTrack])
|
||||
const { track } = useSnapshot(player)
|
||||
const coverUrl = useMemo(
|
||||
() => resizeImage(track?.al?.picUrl ?? '', 'md'),
|
||||
[track?.al?.picUrl]
|
||||
|
@ -71,7 +71,7 @@ const ArtistRow = ({
|
||||
minWidth: '96px',
|
||||
}}
|
||||
/>
|
||||
<div className='mt-2.5 text-12 font-medium text-transparent lg:text-16 lg:font-bold'>
|
||||
<div className='mt-2.5 text-12 font-medium text-transparent lg:text-14 lg:font-bold'>
|
||||
PLACE
|
||||
</div>
|
||||
</div>
|
||||
|
@ -5,6 +5,23 @@ import useBreakpoint from '@/web/hooks/useBreakpoint'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { prefetchAlbum } from '@/web/api/hooks/useAlbum'
|
||||
|
||||
const sizes = {
|
||||
small: {
|
||||
sm: 'sm',
|
||||
md: 'sm',
|
||||
lg: 'sm',
|
||||
xl: 'sm',
|
||||
'2xl': 'md',
|
||||
},
|
||||
large: {
|
||||
sm: 'md',
|
||||
md: 'md',
|
||||
lg: 'md',
|
||||
xl: 'md',
|
||||
'2xl': 'lg',
|
||||
},
|
||||
} as const
|
||||
|
||||
const CoverWall = ({
|
||||
albums,
|
||||
}: {
|
||||
@ -12,22 +29,6 @@ const CoverWall = ({
|
||||
}) => {
|
||||
const navigate = useNavigate()
|
||||
const breakpoint = useBreakpoint()
|
||||
const sizes = {
|
||||
small: {
|
||||
sm: 'sm',
|
||||
md: 'sm',
|
||||
lg: 'sm',
|
||||
xl: 'sm',
|
||||
'2xl': 'md',
|
||||
},
|
||||
large: {
|
||||
sm: 'md',
|
||||
md: 'md',
|
||||
lg: 'md',
|
||||
xl: 'md',
|
||||
'2xl': 'lg',
|
||||
},
|
||||
} as const
|
||||
|
||||
return (
|
||||
<div
|
||||
|
@ -1,7 +1,8 @@
|
||||
import { css, cx } from '@emotion/css'
|
||||
import { AnimatePresence, motion, useAnimation } from 'framer-motion'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { ease } from '@/web/utils/const'
|
||||
import useIsMobile from '@/web/hooks/useIsMobile'
|
||||
|
||||
const Image = ({
|
||||
src,
|
||||
@ -13,6 +14,7 @@ const Image = ({
|
||||
placeholder = 'blank',
|
||||
onClick,
|
||||
onMouseOver,
|
||||
animation = true,
|
||||
}: {
|
||||
src?: string
|
||||
srcSet?: string
|
||||
@ -23,53 +25,63 @@ const Image = ({
|
||||
placeholder?: 'artist' | 'album' | 'playlist' | 'podcast' | 'blank' | null
|
||||
onClick?: (e: React.MouseEvent<HTMLImageElement>) => void
|
||||
onMouseOver?: (e: React.MouseEvent<HTMLImageElement>) => void
|
||||
animation?: boolean
|
||||
}) => {
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
const [error, setError] = useState(false)
|
||||
const animate = useAnimation()
|
||||
const placeholderAnimate = useAnimation()
|
||||
const transition = { duration: 0.6, ease }
|
||||
|
||||
const isMobile = useIsMobile()
|
||||
const isAnimate = animation && !isMobile
|
||||
useEffect(() => setError(false), [src])
|
||||
|
||||
const onload = async () => {
|
||||
const onLoad = async () => {
|
||||
setLoaded(true)
|
||||
animate.start({ opacity: 1 })
|
||||
if (isAnimate) animate.start({ opacity: 1 })
|
||||
}
|
||||
const onError = () => {
|
||||
setError(true)
|
||||
}
|
||||
|
||||
const hidden = error || !loaded
|
||||
const transition = { duration: 0.6, ease }
|
||||
const motionProps = isAnimate
|
||||
? {
|
||||
animate,
|
||||
initial: { opacity: 0 },
|
||||
transition,
|
||||
}
|
||||
: {}
|
||||
const placeholderMotionProps = isAnimate
|
||||
? {
|
||||
initial: { opacity: 1 },
|
||||
exit: { opacity: 0 },
|
||||
transition,
|
||||
}
|
||||
: {}
|
||||
|
||||
return (
|
||||
<div className={cx('relative overflow-hidden', className)}>
|
||||
{/* Image */}
|
||||
<motion.img
|
||||
alt={alt}
|
||||
className={cx('absolute inset-0 h-full w-full')}
|
||||
className='absolute inset-0 h-full w-full'
|
||||
src={src}
|
||||
srcSet={srcSet}
|
||||
sizes={sizes}
|
||||
decoding='async'
|
||||
loading={lazyLoad ? 'lazy' : undefined}
|
||||
onLoad={onload}
|
||||
onError={onError}
|
||||
animate={animate}
|
||||
initial={{ opacity: 0 }}
|
||||
transition={transition}
|
||||
onLoad={onLoad}
|
||||
onClick={onClick}
|
||||
onMouseOver={onMouseOver}
|
||||
{...motionProps}
|
||||
/>
|
||||
|
||||
{/* Placeholder / Error fallback */}
|
||||
<AnimatePresence>
|
||||
{hidden && placeholder && (
|
||||
<motion.div
|
||||
animate={placeholderAnimate}
|
||||
initial={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={transition}
|
||||
{...placeholderMotionProps}
|
||||
className='absolute inset-0 h-full w-full bg-white dark:bg-neutral-800'
|
||||
></motion.div>
|
||||
)}
|
||||
|
@ -3,13 +3,12 @@ import Player from '@/web/components/New/Player'
|
||||
import MenuBar from '@/web/components/New/MenuBar'
|
||||
import Topbar from '@/web/components/New/Topbar/TopbarDesktop'
|
||||
import { css, cx } from '@emotion/css'
|
||||
import { useMemo } from 'react'
|
||||
import { player } from '@/web/store'
|
||||
import { useSnapshot } from 'valtio'
|
||||
|
||||
const Layout = () => {
|
||||
const playerSnapshot = useSnapshot(player)
|
||||
const showPlayer = useMemo(() => !!playerSnapshot.track, [playerSnapshot])
|
||||
const showPlayer = !!playerSnapshot.track
|
||||
|
||||
return (
|
||||
<div
|
||||
|
@ -10,7 +10,7 @@ import { isIOS, isPWA, isSafari } from '@/web/utils/common'
|
||||
|
||||
const LayoutMobile = () => {
|
||||
const playerSnapshot = useSnapshot(player)
|
||||
const showPlayer = useMemo(() => !!playerSnapshot.track, [playerSnapshot])
|
||||
const showPlayer = !!playerSnapshot.track
|
||||
|
||||
return (
|
||||
<div id='layout' className='select-none bg-white pb-32 pt-3 dark:bg-black'>
|
||||
|
@ -10,12 +10,7 @@ import { animate, motion, useAnimation } from 'framer-motion'
|
||||
import { ease } from '@/web/utils/const'
|
||||
|
||||
const Progress = () => {
|
||||
const playerSnapshot = useSnapshot(player)
|
||||
const track = useMemo(() => playerSnapshot.track, [playerSnapshot.track])
|
||||
const progress = useMemo(
|
||||
() => playerSnapshot.progress,
|
||||
[playerSnapshot.progress]
|
||||
)
|
||||
const { track, progress } = useSnapshot(player)
|
||||
|
||||
return (
|
||||
<div className='mt-10 flex w-full flex-col'>
|
||||
@ -85,10 +80,7 @@ const Cover = () => {
|
||||
}
|
||||
|
||||
const NowPlaying = () => {
|
||||
const playerSnapshot = useSnapshot(player)
|
||||
|
||||
const state = useMemo(() => playerSnapshot.state, [playerSnapshot.state])
|
||||
const track = useMemo(() => playerSnapshot.track, [playerSnapshot.track])
|
||||
const { state, track } = useSnapshot(player)
|
||||
|
||||
return (
|
||||
<div
|
||||
|
@ -10,8 +10,8 @@ import { useLockBodyScroll } from 'react-use'
|
||||
import { useState } from 'react'
|
||||
|
||||
const PlayerMobile = () => {
|
||||
const playerSnapshot = useSnapshot(player)
|
||||
const bgColor = useCoverColor(playerSnapshot.track?.al?.picUrl ?? '')
|
||||
const { track, state } = useSnapshot(player)
|
||||
const bgColor = useCoverColor(track?.al?.picUrl ?? '')
|
||||
const [locked, setLocked] = useState(false)
|
||||
|
||||
useLockBodyScroll(locked)
|
||||
@ -49,7 +49,7 @@ const PlayerMobile = () => {
|
||||
|
||||
<div className='h-full py-2.5'>
|
||||
<Image
|
||||
src={resizeImage(playerSnapshot.track?.al.picUrl || '', 'sm')}
|
||||
src={resizeImage(track?.al.picUrl || '', 'sm')}
|
||||
alt='Cover'
|
||||
className='z-10 aspect-square h-full rounded-lg'
|
||||
/>
|
||||
@ -66,10 +66,10 @@ const PlayerMobile = () => {
|
||||
>
|
||||
<div className='flex-shrink-0'>
|
||||
<div className='line-clamp-1 text-14 font-bold text-white'>
|
||||
{playerSnapshot.track?.name}
|
||||
{track?.name}
|
||||
</div>
|
||||
<div className='line-clamp-1 mt-1 text-12 font-bold text-white/60'>
|
||||
{playerSnapshot.track?.ar?.map(a => a.name).join(', ')}
|
||||
{track?.ar?.map(a => a.name).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full flex-grow'></div>
|
||||
@ -102,7 +102,7 @@ const PlayerMobile = () => {
|
||||
className='ml-2.5 flex items-center justify-center rounded-full bg-white/20 p-2.5'
|
||||
>
|
||||
<Icon
|
||||
name={playerSnapshot.state === 'playing' ? 'pause' : 'play'}
|
||||
name={state === 'playing' ? 'pause' : 'play'}
|
||||
className='h-6 w-6 text-white/80'
|
||||
/>
|
||||
</button>
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { resizeImage } from '@/web/utils/common'
|
||||
import { player } from '@/web/store'
|
||||
import { State as PlayerState } from '@/web/utils/player'
|
||||
import { useSnapshot } from 'valtio'
|
||||
import useTracks from '@/web/api/hooks/useTracks'
|
||||
import { css, cx } from '@emotion/css'
|
||||
@ -8,30 +9,96 @@ import Image from './Image'
|
||||
import Wave from './Wave'
|
||||
import Icon from '@/web/components/Icon'
|
||||
|
||||
const PlayingNext = ({ className }: { className?: string }) => {
|
||||
const playerSnapshot = useSnapshot(player)
|
||||
const { data: tracks } = useTracks({ ids: playerSnapshot.trackList })
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cx(
|
||||
'absolute top-0 left-0 z-10 flex w-full items-center justify-between px-4 pb-6 text-14 font-bold text-neutral-700 dark:text-neutral-300'
|
||||
)}
|
||||
>
|
||||
<div className='flex'>
|
||||
<div className='mr-2 h-4 w-1 bg-brand-700'></div>
|
||||
PLAYING NEXT
|
||||
<div
|
||||
className={cx(
|
||||
'absolute top-0 left-0 z-10 flex w-full items-center justify-between px-4 pb-6 text-14 font-bold text-neutral-700 dark:text-neutral-300'
|
||||
)}
|
||||
>
|
||||
<div className='flex'>
|
||||
<div className='mr-2 h-4 w-1 bg-brand-700'></div>
|
||||
PLAYING NEXT
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='mr-2'>
|
||||
<Icon name='repeat-1' className='h-7 w-7 opacity-40' />
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='mr-2'>
|
||||
<Icon name='repeat-1' className='h-7 w-7 opacity-40' />
|
||||
</div>
|
||||
<div className='mr-1'>
|
||||
<Icon name='shuffle' className='h-7 w-7 opacity-40' />
|
||||
</div>
|
||||
<div className='mr-1'>
|
||||
<Icon name='shuffle' className='h-7 w-7 opacity-40' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Track = ({
|
||||
track,
|
||||
index,
|
||||
playingTrackIndex,
|
||||
state,
|
||||
}: {
|
||||
track?: Track
|
||||
index: number
|
||||
playingTrackIndex: number
|
||||
state: PlayerState
|
||||
}) => {
|
||||
return (
|
||||
<motion.div
|
||||
className='flex items-center justify-between'
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ x: '100%', opacity: 0 }}
|
||||
transition={{
|
||||
duration: 0.24,
|
||||
}}
|
||||
layout
|
||||
onClick={e => {
|
||||
if (e.detail === 2 && track?.id) 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')}
|
||||
/>
|
||||
|
||||
{/* Track info */}
|
||||
<div className='mr-3 flex-grow'>
|
||||
<div
|
||||
className={cx(
|
||||
'line-clamp-1 text-16 font-medium ',
|
||||
playingTrackIndex === index
|
||||
? 'text-brand-700'
|
||||
: 'text-neutral-700 dark:text-neutral-200'
|
||||
)}
|
||||
>
|
||||
{track?.name}
|
||||
</div>
|
||||
<div className='line-clamp-1 mt-1 text-14 font-bold text-neutral-200 dark:text-neutral-700'>
|
||||
{track?.ar.map(a => a.name).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Wave icon */}
|
||||
{playingTrackIndex === index ? (
|
||||
<Wave playing={state === 'playing'} />
|
||||
) : (
|
||||
<div className='text-16 font-medium text-neutral-700 dark:text-neutral-200'>
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
const PlayingNext = ({ className }: { className?: string }) => {
|
||||
const { trackList, trackIndex, state } = useSnapshot(player)
|
||||
const { data: tracks } = useTracks({ ids: trackList })
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
|
||||
<div
|
||||
className={cx(
|
||||
@ -46,53 +113,13 @@ const PlayingNext = ({ className }: { className?: string }) => {
|
||||
<motion.div className='grid gap-4'>
|
||||
<AnimatePresence>
|
||||
{tracks?.songs?.map((track, index) => (
|
||||
<motion.div
|
||||
className='flex items-center justify-between'
|
||||
<Track
|
||||
key={track.id}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ x: '100%', opacity: 0 }}
|
||||
transition={{
|
||||
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')}
|
||||
/>
|
||||
|
||||
{/* Track info */}
|
||||
<div className='mr-3 flex-grow'>
|
||||
<div
|
||||
className={cx(
|
||||
'line-clamp-1 text-16 font-medium ',
|
||||
playerSnapshot.trackIndex === index
|
||||
? 'text-brand-700'
|
||||
: 'text-neutral-700 dark:text-neutral-200'
|
||||
)}
|
||||
>
|
||||
{track.name}
|
||||
</div>
|
||||
<div className='line-clamp-1 mt-1 text-14 font-bold text-neutral-200 dark:text-neutral-700'>
|
||||
{track.ar.map(a => a.name).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Wave icon */}
|
||||
{playerSnapshot.trackIndex === index ? (
|
||||
<Wave playing={playerSnapshot.state === 'playing'} />
|
||||
) : (
|
||||
<div className='text-16 font-medium text-neutral-700 dark:text-neutral-200'>
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
track={track}
|
||||
index={index}
|
||||
playingTrackIndex={trackIndex}
|
||||
state={state}
|
||||
/>
|
||||
))}
|
||||
|
||||
{(tracks?.songs?.length || 0) >= 4 && (
|
||||
|
@ -1,13 +1,30 @@
|
||||
import { css, cx } from '@emotion/css'
|
||||
import Icon from '../../Icon'
|
||||
import { breakpoint as bp } from '@/web/utils/const'
|
||||
|
||||
const SearchBox = () => {
|
||||
return (
|
||||
<div className='app-region-no-drag flex items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600 lg:min-w-[284px]'>
|
||||
<div
|
||||
className={cx(
|
||||
'app-region-no-drag flex items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600',
|
||||
css`
|
||||
${bp.lg} {
|
||||
min-width: 284px;
|
||||
}
|
||||
`
|
||||
)}
|
||||
>
|
||||
<Icon name='search' className='mr-2.5 h-7 w-7' />
|
||||
<input
|
||||
placeholder='Artist, songs and more'
|
||||
className='bg-transparent font-medium placeholder:text-neutral-500 dark:text-neutral-200'
|
||||
placeholder='Search'
|
||||
className={cx(
|
||||
'flex-shrink bg-transparent font-medium placeholder:text-neutral-500 dark:text-neutral-200',
|
||||
css`
|
||||
@media (max-width: 360px) {
|
||||
width: 142px;
|
||||
}
|
||||
`
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
@ -1,8 +1,14 @@
|
||||
import Icon from '@/web/components/Icon'
|
||||
import { cx } from '@emotion/css'
|
||||
|
||||
const SettingsButton = () => {
|
||||
const SettingsButton = ({ className }: { className?: string }) => {
|
||||
return (
|
||||
<button className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'>
|
||||
<button
|
||||
className={cx(
|
||||
'app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Icon name='placeholder' className='h-7 w-7 text-neutral-500' />
|
||||
</button>
|
||||
)
|
||||
|
@ -1,3 +1,4 @@
|
||||
import { css } from '@emotion/css'
|
||||
import Avatar from './Avatar'
|
||||
import SearchBox from './SearchBox'
|
||||
import SettingsButton from './SettingsButton'
|
||||
@ -9,7 +10,7 @@ const TopbarMobile = () => {
|
||||
<SearchBox />
|
||||
</div>
|
||||
|
||||
<div className='ml-6 flex'>
|
||||
<div className='ml-6 flex flex-shrink-0'>
|
||||
<SettingsButton />
|
||||
<div className='ml-3'>
|
||||
<Avatar />
|
||||
|
@ -16,11 +16,7 @@ const TrackList = ({
|
||||
onPlay: (id: number) => void
|
||||
className?: string
|
||||
}) => {
|
||||
const playerSnapshot = useSnapshot(player)
|
||||
const playingTrack = useMemo(
|
||||
() => playerSnapshot.track,
|
||||
[playerSnapshot.track]
|
||||
)
|
||||
const { track: playingTrack, state } = useSnapshot(player)
|
||||
const isMobile = useIsMobile()
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLElement>, trackID: number) => {
|
||||
@ -31,10 +27,7 @@ const TrackList = ({
|
||||
}
|
||||
}
|
||||
|
||||
const playing = useMemo(
|
||||
() => playerSnapshot.state === 'playing',
|
||||
[playerSnapshot.state]
|
||||
)
|
||||
const playing = state === 'playing'
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
@ -51,11 +44,11 @@ const TrackList = ({
|
||||
|
||||
{/* Track name */}
|
||||
<div className='flex flex-grow items-center'>
|
||||
{track.name}
|
||||
<span className='line-clamp-1 mr-4'>{track.name}</span>
|
||||
{playingTrack?.id === track.id && (
|
||||
<div className='ml-4'>
|
||||
<span className='mr-4 inline-block'>
|
||||
<Wave playing={playing} />
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
@ -1,18 +1,17 @@
|
||||
import { css, cx, keyframes } from '@emotion/css'
|
||||
|
||||
const Wave = ({ playing }: { playing: boolean }) => {
|
||||
const wave = keyframes`
|
||||
const wave = keyframes`
|
||||
0% { transform: scaleY(1) }
|
||||
50% { transform: scaleY(0.2) }
|
||||
100% { transform: scaleY(1)}
|
||||
`
|
||||
const animation = css`
|
||||
transform-origin: bottom;
|
||||
animation: ${wave} 1s ease-in-out infinite;
|
||||
`
|
||||
const animation = css`
|
||||
transform-origin: bottom;
|
||||
animation: ${wave} 1s ease-in-out infinite;
|
||||
`
|
||||
const delay = ['-100ms', '-500ms', '-1200ms', '-1000ms', '-700ms']
|
||||
|
||||
const delay = ['-100ms', '-500ms', '-1200ms', '-1000ms', '-700ms']
|
||||
|
||||
const Wave = ({ playing }: { playing: boolean }) => {
|
||||
return (
|
||||
<div className='grid h-3 grid-cols-5 items-end gap-0.5'>
|
||||
{[...new Array(5).keys()].map(i => (
|
||||
|
@ -17,19 +17,13 @@ import { useNavigate } from 'react-router-dom'
|
||||
|
||||
const PlayingTrack = () => {
|
||||
const navigate = useNavigate()
|
||||
const snappedPlayer = useSnapshot(player)
|
||||
const track = useMemo(() => snappedPlayer.track, [snappedPlayer.track])
|
||||
const trackListSource = useMemo(
|
||||
() => snappedPlayer.trackListSource,
|
||||
[snappedPlayer.trackListSource]
|
||||
)
|
||||
const { track, trackListSource, mode } = useSnapshot(player)
|
||||
|
||||
// Liked songs ids
|
||||
const { data: userLikedSongs } = useUserLikedTracksIDs()
|
||||
const mutationLikeATrack = useMutationLikeATrack()
|
||||
|
||||
const hasTrackListSource =
|
||||
snappedPlayer.mode !== PlayerMode.FM && trackListSource?.type
|
||||
const hasTrackListSource = mode !== PlayerMode.FM && trackListSource?.type
|
||||
|
||||
const toAlbum = () => {
|
||||
const id = track?.al?.id
|
||||
|
@ -220,11 +220,7 @@ const TracksAlbum = ({
|
||||
[onTrackDoubleClick]
|
||||
)
|
||||
|
||||
const playerSnapshot = useSnapshot(player)
|
||||
const playingTrack = useMemo(
|
||||
() => playerSnapshot.track,
|
||||
[playerSnapshot.track]
|
||||
)
|
||||
const { track } = useSnapshot(player)
|
||||
|
||||
return (
|
||||
<div className='grid w-full'>
|
||||
@ -255,7 +251,7 @@ const TracksAlbum = ({
|
||||
onClick={handleClick}
|
||||
isLiked={userLikedSongs?.ids?.includes(track.id) ?? false}
|
||||
isSkeleton={false}
|
||||
isHighlight={track.id === playingTrack?.id}
|
||||
isHighlight={track.id === track?.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
@ -102,7 +102,9 @@ const Discover = () => {
|
||||
|
||||
return (
|
||||
<PageTransition disableEnterAnimation={true}>
|
||||
<CoverWall albums={albums} />
|
||||
<div className='mx-2.5 lg:mx-0'>
|
||||
<CoverWall albums={albums} />
|
||||
</div>
|
||||
</PageTransition>
|
||||
)
|
||||
}
|
||||
|
@ -30,12 +30,38 @@ const tabs = [
|
||||
},
|
||||
]
|
||||
|
||||
const My = () => {
|
||||
const { data: artists } = useUserArtists()
|
||||
const { data: playlists } = useUserPlaylists()
|
||||
const Albums = () => {
|
||||
const { data: albums } = useUserAlbums()
|
||||
|
||||
return <CoverRow albums={albums?.data} className='mt-6 px-2.5 lg:px-0' />
|
||||
}
|
||||
|
||||
const Playlists = () => {
|
||||
const { data: playlists } = useUserPlaylists()
|
||||
return (
|
||||
<CoverRow playlists={playlists?.playlist} className='mt-6 px-2.5 lg:px-0' />
|
||||
)
|
||||
}
|
||||
|
||||
const Collections = () => {
|
||||
// const { data: artists } = useUserArtists()
|
||||
const [selectedTab, setSelectedTab] = useState(tabs[0].id)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Tabs
|
||||
tabs={tabs}
|
||||
value={selectedTab}
|
||||
onChange={(id: string) => setSelectedTab(id)}
|
||||
className='px-2.5 lg:px-0'
|
||||
/>
|
||||
{selectedTab === 'albums' && <Albums />}
|
||||
{selectedTab === 'playlists' && <Playlists />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const RecentlyListened = () => {
|
||||
const { data: listenedRecords } = useUserListenedRecords({ type: 'week' })
|
||||
const recentListenedArtistsIDs = useMemo(() => {
|
||||
const artists: {
|
||||
@ -62,32 +88,22 @@ const My = () => {
|
||||
}, [listenedRecords])
|
||||
const { data: recentListenedArtists } = useArtists(recentListenedArtistsIDs)
|
||||
|
||||
return (
|
||||
<ArtistRow
|
||||
artists={recentListenedArtists?.map(a => a.artist)}
|
||||
placeholderRow={1}
|
||||
title='RECENTLY LISTENED'
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const My = () => {
|
||||
return (
|
||||
<PageTransition>
|
||||
<div className='grid grid-cols-1 gap-10'>
|
||||
<PlayLikedSongsCard />
|
||||
|
||||
<ArtistRow
|
||||
artists={recentListenedArtists?.map(a => a.artist)}
|
||||
placeholderRow={1}
|
||||
title='RECENTLY LISTENED'
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Tabs
|
||||
tabs={tabs}
|
||||
value={selectedTab}
|
||||
onChange={(id: string) => setSelectedTab(id)}
|
||||
className='px-2.5 lg:px-0'
|
||||
/>
|
||||
<CoverRow
|
||||
playlists={
|
||||
selectedTab === 'playlists' ? playlists?.playlist : undefined
|
||||
}
|
||||
albums={selectedTab === 'albums' ? albums?.data : undefined}
|
||||
className='mt-6 px-2.5 lg:px-0'
|
||||
/>
|
||||
</div>
|
||||
<RecentlyListened />
|
||||
<Collections />
|
||||
</div>
|
||||
</PageTransition>
|
||||
)
|
||||
|
@ -1 +1,8 @@
|
||||
export const ease: [number, number, number, number] = [0.4, 0, 0.2, 1]
|
||||
export const breakpoint = {
|
||||
sm: '@media (min-width: 640px)',
|
||||
md: '@media (min-width: 768px)',
|
||||
lg: '@media (min-width: 1024px)',
|
||||
xl: '@media (min-width: 1280px)',
|
||||
'2xl': '@media (min-width: 1536px)',
|
||||
}
|
||||
|
@ -72,6 +72,7 @@ export class Player {
|
||||
this.state = State.Ready
|
||||
this._playAudio(false) // just load the audio, not play
|
||||
this._initFM()
|
||||
this._initMediaSession()
|
||||
|
||||
window.ipcRenderer?.send(IpcChannels.Repeat, { mode: this._repeatMode })
|
||||
}
|
||||
@ -180,7 +181,7 @@ export class Player {
|
||||
_howler.pause()
|
||||
}
|
||||
|
||||
private _setupProgressInterval() {
|
||||
private async _setupProgressInterval() {
|
||||
this._progressInterval = setInterval(() => {
|
||||
if (this.state === State.Playing) this._progress = _howler.seek()
|
||||
}, 1000)
|
||||
@ -234,6 +235,7 @@ export class Player {
|
||||
}
|
||||
if (this.mode === Mode.TrackList) this._track = track
|
||||
if (this.mode === Mode.FM) this.fmTrack = track
|
||||
this._updateMediaSessionMetaData()
|
||||
this._playAudio()
|
||||
}
|
||||
|
||||
@ -496,6 +498,45 @@ export class Player {
|
||||
this._trackIndex = index
|
||||
this._playTrack()
|
||||
}
|
||||
|
||||
private async _initMediaSession() {
|
||||
console.log('init')
|
||||
if ('mediaSession' in navigator === false) return
|
||||
navigator.mediaSession.setActionHandler('play', () => this.play())
|
||||
navigator.mediaSession.setActionHandler('pause', () => this.pause())
|
||||
navigator.mediaSession.setActionHandler('previoustrack', () =>
|
||||
this.prevTrack()
|
||||
)
|
||||
navigator.mediaSession.setActionHandler('nexttrack', () => this.nextTrack())
|
||||
navigator.mediaSession.setActionHandler('seekto', event => {
|
||||
if (event.seekTime) this.progress = event.seekTime
|
||||
})
|
||||
}
|
||||
|
||||
private async _updateMediaSessionMetaData() {
|
||||
if ('mediaSession' in navigator === false || !this.track) return
|
||||
const track = this.track
|
||||
const metadata = {
|
||||
title: track.name,
|
||||
artist: track.ar.map(a => a.name).join(', '),
|
||||
album: track.al.name,
|
||||
artwork: [
|
||||
{
|
||||
src: track.al.picUrl + '?param=256y256',
|
||||
type: 'image/jpg',
|
||||
sizes: '256x256',
|
||||
},
|
||||
{
|
||||
src: track.al.picUrl + '?param=512y512',
|
||||
type: 'image/jpg',
|
||||
sizes: '512x512',
|
||||
},
|
||||
],
|
||||
length: this.progress,
|
||||
trackId: track.id,
|
||||
}
|
||||
navigator.mediaSession.metadata = new window.MediaMetadata(metadata)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user