feat: updates

This commit is contained in:
qier222 2022-06-11 00:19:07 +08:00
parent 4c90db789b
commit 196a974a64
No known key found for this signature in database
GPG Key ID: 9C85007ED905F14D
21 changed files with 291 additions and 191 deletions

View File

@ -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)
}
})

View File

@ -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]

View File

@ -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>

View File

@ -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

View File

@ -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>
)}

View File

@ -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

View File

@ -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'>

View File

@ -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

View File

@ -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>

View File

@ -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 && (

View File

@ -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>
)

View File

@ -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>
)

View File

@ -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 />

View File

@ -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>

View File

@ -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 => (

View File

@ -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

View File

@ -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>

View File

@ -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>
)
}

View File

@ -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>
)

View File

@ -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)',
}

View File

@ -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) {