mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2024-11-22 15:50:57 +08:00
feat: updates
This commit is contained in:
qier222
parent
793db0127c
commit
0b4baa3eff
|
|
@ -6,7 +6,7 @@ import { useSnapshot } from 'valtio'
|
|||
import Router from '@/web/components/New/Router'
|
||||
import MenuBar from './MenuBar'
|
||||
import Topbar from './Topbar/TopbarMobile'
|
||||
import { isIOS, isPWA, isSafari } from '@/web/utils/common'
|
||||
import { isIOS, isIosPwa, isPWA, isSafari } from '@/web/utils/common'
|
||||
import Login from './Login'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import PlayingNext from './PlayingNextMobile'
|
||||
|
|
@ -17,8 +17,8 @@ const LayoutMobile = () => {
|
|||
const location = useLocation()
|
||||
|
||||
return (
|
||||
<div id='layout' className='select-none bg-white pb-28 dark:bg-black'>
|
||||
<main className='min-h-screen overflow-y-auto overflow-x-hidden pb-16'>
|
||||
<div id='layout' className='bg-white select-none pb-28 dark:bg-black'>
|
||||
<main className='min-h-screen pb-16 overflow-x-hidden overflow-y-auto'>
|
||||
{location.pathname === '/' && <Topbar />}
|
||||
<Router />
|
||||
</main>
|
||||
|
|
@ -27,9 +27,7 @@ const LayoutMobile = () => {
|
|||
'fixed bottom-0 left-0 right-0 z-20 pt-3 dark:bg-black',
|
||||
css`
|
||||
padding-bottom: calc(
|
||||
${isIOS && isSafari && isPWA
|
||||
? '24px'
|
||||
: 'env(safe-area-inset-bottom)'} + 0.75rem
|
||||
${isIosPwa ? '24px' : 'env(safe-area-inset-bottom)'} + 0.75rem
|
||||
);
|
||||
`
|
||||
)}
|
||||
|
|
@ -40,7 +38,7 @@ const LayoutMobile = () => {
|
|||
'absolute left-7 right-7 z-20',
|
||||
css`
|
||||
top: calc(
|
||||
-100% - 6px + ${isIOS && isSafari && isPWA ? '24px' : 'env(safe-area-inset-bottom)'}
|
||||
-100% - 6px + ${isIosPwa ? '24px' : 'env(safe-area-inset-bottom)'}
|
||||
);
|
||||
`
|
||||
)}
|
||||
|
|
@ -56,7 +54,7 @@ const LayoutMobile = () => {
|
|||
<Login />
|
||||
|
||||
{/* Notch background */}
|
||||
{isIOS && isSafari && isPWA && (
|
||||
{isIosPwa && (
|
||||
<div
|
||||
className={cx(
|
||||
'fixed left-0 right-0 bg-black/30 backdrop-blur-sm',
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const Progress = () => {
|
|||
const { track, progress } = useSnapshot(player)
|
||||
|
||||
return (
|
||||
<div className='mt-10 flex w-full flex-col'>
|
||||
<div className='flex flex-col w-full mt-10'>
|
||||
<Slider
|
||||
min={0}
|
||||
max={(track?.dt ?? 100000) / 1000}
|
||||
|
|
@ -28,7 +28,7 @@ const Progress = () => {
|
|||
onlyCallOnChangeAfterDragEnded={true}
|
||||
/>
|
||||
|
||||
<div className='mt-1 flex justify-between text-14 font-bold text-black/20 dark:text-white/20'>
|
||||
<div className='flex justify-between mt-1 font-bold text-14 text-black/20 dark:text-white/20'>
|
||||
<span>{formatDuration(progress * 1000, 'en', 'hh:mm:ss')}</span>
|
||||
<span>{formatDuration(track?.dt || 0, 'en', 'hh:mm:ss')}</span>
|
||||
</div>
|
||||
|
|
@ -83,7 +83,7 @@ const Cover = () => {
|
|||
)
|
||||
}
|
||||
|
||||
const HeartButton = () => {
|
||||
const LikeButton = () => {
|
||||
const { track } = useSnapshot(player)
|
||||
const { data: likedIDs } = useUserLikedTracksIDs()
|
||||
|
||||
|
|
@ -117,9 +117,9 @@ const NowPlaying = () => {
|
|||
<Cover />
|
||||
|
||||
{/* Info & Controls */}
|
||||
<div className='m-3 flex flex-col items-center rounded-20 bg-white/60 p-5 font-medium backdrop-blur-3xl dark:bg-black/70'>
|
||||
<div className='flex flex-col items-center p-5 m-3 font-medium rounded-20 bg-white/60 backdrop-blur-3xl dark:bg-black/70'>
|
||||
{/* Track Info */}
|
||||
<div className='line-clamp-1 text-lg text-black dark:text-white'>
|
||||
<div className='text-lg text-black line-clamp-1 dark:text-white'>
|
||||
{track?.name}
|
||||
</div>
|
||||
<ArtistInline
|
||||
|
|
@ -129,17 +129,17 @@ const NowPlaying = () => {
|
|||
/>
|
||||
|
||||
{/* Dividing line */}
|
||||
<div className='mt-2 h-px w-2/3 bg-black/10 dark:bg-white/10'></div>
|
||||
<div className='w-2/3 h-px mt-2 bg-black/10 dark:bg-white/10'></div>
|
||||
|
||||
{/* Progress */}
|
||||
<Progress />
|
||||
|
||||
{/* Controls */}
|
||||
<div className='mt-4 flex w-full items-center justify-between'>
|
||||
<div className='flex items-center justify-between w-full mt-4'>
|
||||
<button>
|
||||
<Icon
|
||||
name='hide-list'
|
||||
className='h-7 w-7 text-black/90 dark:text-white/40'
|
||||
className='h-7 w-7 text-black/90 dark:text-white/40'
|
||||
/>
|
||||
</button>
|
||||
|
||||
|
|
@ -149,7 +149,7 @@ const NowPlaying = () => {
|
|||
disabled={!track}
|
||||
className='rounded-full bg-black/10 p-2.5 dark:bg-white/10'
|
||||
>
|
||||
<Icon name='previous' className='h-6 w-6 ' />
|
||||
<Icon name='previous' className='w-6 h-6 ' />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => track && player.playOrPause()}
|
||||
|
|
@ -161,7 +161,7 @@ const NowPlaying = () => {
|
|||
? 'pause'
|
||||
: 'play'
|
||||
}
|
||||
className='h-6 w-6 '
|
||||
className='w-6 h-6 '
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -169,11 +169,11 @@ const NowPlaying = () => {
|
|||
disabled={!track}
|
||||
className='rounded-full bg-black/10 p-2.5 dark:bg-white/10'
|
||||
>
|
||||
<Icon name='next' className='h-6 w-6 ' />
|
||||
<Icon name='next' className='w-6 h-6 ' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<HeartButton />
|
||||
<LikeButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,15 +8,38 @@ import { resizeImage } from '@/web/utils/common'
|
|||
import { motion, PanInfo, useMotionValue } from 'framer-motion'
|
||||
import { useLockBodyScroll } from 'react-use'
|
||||
import { useState } from 'react'
|
||||
import useUserLikedTracksIDs, {
|
||||
useMutationLikeATrack,
|
||||
} from '@/web/api/hooks/useUserLikedTracksIDs'
|
||||
import PlayingNextMobile from './PlayingNextMobile'
|
||||
|
||||
const LikeButton = () => {
|
||||
const { track } = useSnapshot(player)
|
||||
const { data: likedIDs } = useUserLikedTracksIDs()
|
||||
|
||||
const isLiked = !!likedIDs?.ids?.find(id => id === track?.id)
|
||||
|
||||
const likeATrack = useMutationLikeATrack()
|
||||
|
||||
return (
|
||||
<button
|
||||
className='flex items-center h-full'
|
||||
onClick={() => track?.id && likeATrack.mutateAsync(track.id)}
|
||||
>
|
||||
<Icon
|
||||
name={isLiked ? 'heart' : 'heart-outline'}
|
||||
className='h-7 w-7 text-white/10'
|
||||
/>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
const PlayerMobile = () => {
|
||||
const { track, state } = useSnapshot(player)
|
||||
const bgColor = useCoverColor(track?.al?.picUrl ?? '')
|
||||
const [locked, setLocked] = useState(false)
|
||||
|
||||
useLockBodyScroll(locked)
|
||||
|
||||
const x = useMotionValue(0)
|
||||
const onDragEnd = (
|
||||
event: MouseEvent | TouchEvent | PointerEvent,
|
||||
info: PanInfo
|
||||
|
|
@ -31,8 +54,6 @@ const PlayerMobile = () => {
|
|||
setLocked(false)
|
||||
}
|
||||
|
||||
const y = useMotionValue(0)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
|
|
@ -42,53 +63,33 @@ const PlayerMobile = () => {
|
|||
`
|
||||
)}
|
||||
>
|
||||
{/* Indictor */}
|
||||
<motion.div
|
||||
drag='y'
|
||||
dragConstraints={{ top: 0, bottom: 0 }}
|
||||
style={{ y: y.get() * 2 }}
|
||||
className={cx(
|
||||
'absolute flex items-center justify-center',
|
||||
css`
|
||||
--width: 60px;
|
||||
--height: 26px;
|
||||
left: calc((100% - var(--width)) / 2);
|
||||
top: calc(var(--height) * -1);
|
||||
height: var(--height);
|
||||
width: var(--width);
|
||||
`
|
||||
)}
|
||||
>
|
||||
<div className='h-1.5 w-10 rounded-full bg-brand-700'></div>
|
||||
</motion.div>
|
||||
|
||||
{/* Cover */}
|
||||
|
||||
<div className='h-full py-2.5'>
|
||||
<Image
|
||||
src={resizeImage(track?.al.picUrl || '', 'sm')}
|
||||
className='z-10 aspect-square h-full rounded-lg'
|
||||
className='z-10 h-full rounded-lg aspect-square'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Track info */}
|
||||
<div className='relative flex h-full flex-grow items-center overflow-hidden px-3'>
|
||||
<div className='relative flex items-center flex-grow h-full px-3 overflow-hidden'>
|
||||
<motion.div
|
||||
drag='x'
|
||||
style={{ x }}
|
||||
dragConstraints={{ left: 0, right: 0 }}
|
||||
onDragStart={() => setLocked(true)}
|
||||
onDragEnd={onDragEnd}
|
||||
className=' flex h-full flex-grow items-center '
|
||||
className='flex items-center flex-grow h-full '
|
||||
>
|
||||
<div className='flex-shrink-0'>
|
||||
<div className='line-clamp-1 text-14 font-bold text-white'>
|
||||
<div className='font-bold text-white line-clamp-1 text-14'>
|
||||
{track?.name}
|
||||
</div>
|
||||
<div className='line-clamp-1 mt-1 text-12 font-bold text-white/60'>
|
||||
<div className='mt-1 font-bold line-clamp-1 text-12 text-white/60'>
|
||||
{track?.ar?.map(a => a.name).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full flex-grow'></div>
|
||||
<div className='flex-grow h-full'></div>
|
||||
</motion.div>
|
||||
|
||||
<div
|
||||
|
|
@ -110,9 +111,7 @@ const PlayerMobile = () => {
|
|||
</div>
|
||||
|
||||
{/* Like */}
|
||||
<button>
|
||||
<Icon name='heart' className='h-7 w-7 text-white/10' />
|
||||
</button>
|
||||
<LikeButton />
|
||||
|
||||
{/* Play or pause */}
|
||||
<button
|
||||
|
|
@ -121,7 +120,7 @@ const PlayerMobile = () => {
|
|||
>
|
||||
<Icon
|
||||
name={state === 'playing' ? 'pause' : 'play'}
|
||||
className='h-6 w-6 text-white/80'
|
||||
className='w-6 h-6 text-white/80'
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@ 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'
|
||||
'absolute top-0 left-0 z-10 flex w-full items-center justify-between px-7 pb-6 text-14 font-bold text-neutral-700 dark:text-neutral-300 lg:px-4'
|
||||
)}
|
||||
>
|
||||
<div className='flex'>
|
||||
<div className='mr-2 h-4 w-1 bg-brand-700'></div>
|
||||
<div className='w-1 h-4 mr-2 bg-brand-700'></div>
|
||||
PLAYING NEXT
|
||||
</div>
|
||||
<div className='flex'>
|
||||
|
|
@ -64,14 +64,14 @@ const Track = ({
|
|||
{/* Cover */}
|
||||
<Image
|
||||
alt='Cover'
|
||||
className='mr-4 aspect-square h-14 w-14 flex-shrink-0 rounded-12'
|
||||
className='flex-shrink-0 mr-4 aspect-square h-14 w-14 rounded-12'
|
||||
src={resizeImage(track?.al?.picUrl || '', 'sm')}
|
||||
animation={false}
|
||||
placeholder={false}
|
||||
/>
|
||||
|
||||
{/* Track info */}
|
||||
<div className='mr-3 flex-grow'>
|
||||
<div className='flex-grow mr-3'>
|
||||
<div
|
||||
className={cx(
|
||||
'line-clamp-1 text-16 font-medium ',
|
||||
|
|
@ -82,7 +82,7 @@ const Track = ({
|
|||
>
|
||||
{track?.name}
|
||||
</div>
|
||||
<div className='line-clamp-1 mt-1 text-14 font-bold text-neutral-200 dark:text-neutral-700'>
|
||||
<div className='mt-1 font-bold line-clamp-1 text-14 text-neutral-200 dark:text-neutral-700'>
|
||||
{track?.ar.map(a => a.name).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -91,7 +91,7 @@ const Track = ({
|
|||
{playingTrackIndex === index ? (
|
||||
<Wave playing={state === 'playing'} />
|
||||
) : (
|
||||
<div className='text-16 font-medium text-neutral-700 dark:text-neutral-200'>
|
||||
<div className='font-medium text-16 text-neutral-700 dark:text-neutral-200'>
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -163,7 +163,7 @@ const TrackList = ({ className }: { className?: string }) => {
|
|||
|
||||
{/* 底部渐变遮罩 */}
|
||||
<div
|
||||
className='pointer-events-none absolute right-0 left-0 z-20 hidden h-14 bg-gradient-to-t from-black to-transparent lg:block'
|
||||
className='absolute left-0 right-0 z-20 hidden pointer-events-none h-14 bg-gradient-to-t from-black to-transparent lg:block'
|
||||
style={{ top: `${listHeight - 56}px` }}
|
||||
></div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,82 @@
|
|||
import { css, cx } from '@emotion/css'
|
||||
import {
|
||||
motion,
|
||||
useMotionValue,
|
||||
useDragControls,
|
||||
AnimatePresence,
|
||||
} from 'framer-motion'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useLockBodyScroll } from 'react-use'
|
||||
import { isIosPwa } from '@/web/utils/common'
|
||||
import PlayingNext from './PlayingNext'
|
||||
import { ease } from '@/web/utils/const'
|
||||
|
||||
const PlayingNextMobile = () => {
|
||||
useLockBodyScroll(true)
|
||||
const [display, setDisplay] = useState(false)
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
useLockBodyScroll(isDragging || display)
|
||||
|
||||
const dragControls = useDragControls()
|
||||
const y = useMotionValue('82%')
|
||||
|
||||
return (
|
||||
<div className='fixed inset-0 z-10 bg-black/80 backdrop-blur-3xl'>
|
||||
<div className='px-7'>
|
||||
<PlayingNext />
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
className='fixed inset-0 px-3 bg-black/80 backdrop-blur-3xl'
|
||||
exit={{
|
||||
y: '100%',
|
||||
transition: {
|
||||
duration: 0.6,
|
||||
ease: 'easeOut',
|
||||
},
|
||||
}}
|
||||
animate={{ opacity: 1 }}
|
||||
initial={{ opacity: 0 }}
|
||||
style={{
|
||||
borderRadius: isDragging ? '24px' : '0px',
|
||||
y,
|
||||
}}
|
||||
drag='y'
|
||||
dragControls={dragControls}
|
||||
dragListener={false}
|
||||
dragConstraints={{ top: 0, bottom: 0 }}
|
||||
dragDirectionLock={true}
|
||||
onDrag={(event, info) => console.log(info.point.y)}
|
||||
>
|
||||
{/* Indictor */}
|
||||
<motion.div
|
||||
onPointerDown={e => {
|
||||
setIsDragging(true)
|
||||
dragControls.start(e)
|
||||
}}
|
||||
onDragEnd={() => setIsDragging(false)}
|
||||
dragConstraints={{ top: 0, bottom: 0 }}
|
||||
className={cx(
|
||||
'mx-7 flex justify-center',
|
||||
css`
|
||||
--height: 30px;
|
||||
bottom: calc(
|
||||
70px + 64px +
|
||||
${isIosPwa ? '24px' : 'env(safe-area-inset-bottom)'}
|
||||
); // 拖动条到导航栏的距离 + 导航栏高度 + safe-area-inset-bottom
|
||||
height: var(--height);
|
||||
`
|
||||
)}
|
||||
layout
|
||||
>
|
||||
<motion.div
|
||||
className='mt-3.5 h-1.5 w-10 rounded-full bg-brand-700'
|
||||
layout
|
||||
style={{ width: isDragging || display ? '80px' : '40px' }}
|
||||
></motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* List */}
|
||||
<div className='relative'>
|
||||
<PlayingNext />
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const Header = ({ artist }: { artist?: Artist }) => {
|
|||
>
|
||||
<Image
|
||||
className={cx(
|
||||
'z-10 aspect-square lg:rounded-24',
|
||||
'aspect-square lg:z-10 lg:rounded-24',
|
||||
css`
|
||||
grid-area: cover;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const Album = () => {
|
|||
<Image
|
||||
src={resizeImage(album.picUrl, 'sm')}
|
||||
className={cx(
|
||||
'aspect-square',
|
||||
'aspect-square shrink-0',
|
||||
css`
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
|
|
@ -37,11 +37,11 @@ const Album = () => {
|
|||
`
|
||||
)}
|
||||
/>
|
||||
<div className='flex-shrink-1 ml-2'>
|
||||
<div className='line-clamp-1 text-16 font-medium text-night-100'>
|
||||
<div className='ml-2 flex-shrink-1'>
|
||||
<div className='font-medium line-clamp-1 text-16 text-night-100'>
|
||||
{album.name}
|
||||
</div>
|
||||
<div className='mt-1 text-14 font-bold text-night-500'>
|
||||
<div className='mt-1 font-bold text-14 text-night-500'>
|
||||
{album.type}
|
||||
{album.size > 1 ? `· ${album.size} Tracks` : ''}
|
||||
</div>
|
||||
|
|
@ -69,8 +69,8 @@ const Video = () => {
|
|||
`
|
||||
)}
|
||||
/>
|
||||
<div className='flex-shrink-1 ml-2'>
|
||||
<div className='line-clamp-2 text-16 font-medium text-night-100'>
|
||||
<div className='ml-2 flex-shrink-1'>
|
||||
<div className='font-medium line-clamp-2 text-16 text-night-100'>
|
||||
Swedish House Mafia & The Weeknd Live at C...
|
||||
</div>
|
||||
<div className='mt-1.5 text-12 font-medium text-night-500'>
|
||||
|
|
@ -84,7 +84,7 @@ const Video = () => {
|
|||
const LatestRelease = () => {
|
||||
return (
|
||||
<div className='mx-2.5 lg:mx-0'>
|
||||
<div className='mt-7 mb-3 text-14 font-bold text-neutral-300'>
|
||||
<div className='mb-3 font-bold mt-7 text-14 text-neutral-300'>
|
||||
Latest Releases
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -166,3 +166,4 @@ export const isSafari = /^((?!chrome|android).)*safari/i.test(
|
|||
export const isPWA =
|
||||
(navigator as any).standalone ||
|
||||
window.matchMedia('(display-mode: standalone)').matches
|
||||
export const isIosPwa = isIOS && isPWA && isSafari
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user