feat: updates

packages/web/components/New/LayoutMobile.tsx

@@ -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'>
+    <div id='layout' className='bg-white select-none pb-28 dark:bg-black'>
-      <main className='min-h-screen overflow-y-auto overflow-x-hidden pb-16'>
+      <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
+              ${isIosPwa ? '24px' : 'env(safe-area-inset-bottom)'} + 0.75rem
-                  ? '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',

packages/web/components/New/NowPlaying.tsx

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

packages/web/components/New/PlayerMobile.tsx

@@ -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>
+      <LikeButton />
-        <Icon name='heart' className='h-7 w-7 text-white/10' />
-      </button>
 
       {/* 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>

packages/web/components/New/PlayingNext.tsx

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

packages/web/components/New/PlayingNextMobile.tsx

@@ -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'>
+    <AnimatePresence>
-      <div className='px-7'>
+      <motion.div
-        <PlayingNext />
+        className='fixed inset-0 px-3 bg-black/80 backdrop-blur-3xl'
-      </div>
+        exit={{
-    </div>
+          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>
   )
 }
 

packages/web/pages/New/Artist/Header/Header.tsx

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

packages/web/pages/New/Artist/Header/LatestRelease.tsx

@@ -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='ml-2 flex-shrink-1'>
-        <div className='line-clamp-1 text-16 font-medium text-night-100'>
+        <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='ml-2 flex-shrink-1'>
-        <div className='line-clamp-2 text-16 font-medium text-night-100'>
+        <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>
 

packages/web/utils/common.ts

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