feat: updates

packages/web/components/New/ArtistRow.tsx

@@ -33,6 +33,30 @@ const Artist = ({ artist }: { artist: Artist }) => {
   )
 }
 
+const Placeholder = ({ row }: { row: number }) => {
+  return (
+    <div className='no-scrollbar flex snap-x overflow-x-scroll lg:grid lg:w-auto lg:grid-cols-5 lg:gap-10'>
+      {[...new Array(row * 5).keys()].map(i => (
+        <div
+          className='flex snap-start flex-col items-center px-2.5 lg:px-0'
+          key={i}
+        >
+          <div
+            className='aspect-square w-full rounded-full bg-white dark:bg-neutral-800'
+            style={{
+              minHeight: '96px',
+              minWidth: '96px',
+            }}
+          />
+          <div className='line-clamp-1 mt-2.5 w-1/2 rounded-full text-12 font-medium text-transparent dark:bg-neutral-800 lg:text-14 lg:font-bold'>
+            NAME
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
 const ArtistRow = ({
   artists,
   title,
@@ -70,24 +94,7 @@ const ArtistRow = ({
       )}
 
       {/* Placeholder */}
-      {placeholderRow && !artists && (
-        <div className='no-scrollbar flex snap-x overflow-x-scroll lg:grid lg:w-auto lg:grid-cols-5 lg:gap-10'>
-          {[...new Array(placeholderRow * 5).keys()].map(i => (
-            <div className='snap-start px-2.5 lg:px-0' key={i}>
-              <div
-                className='aspect-square w-full rounded-full bg-white dark:bg-neutral-800'
-                style={{
-                  minHeight: '96px',
-                  minWidth: '96px',
-                }}
-              />
-              <div className='mt-2.5 text-12 font-medium text-transparent lg:text-14 lg:font-bold'>
-                PLACE
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
+      {placeholderRow && !artists && <Placeholder row={placeholderRow} />}
     </div>
   )
 }

packages/web/components/New/PlayingNext.tsx

@@ -130,7 +130,7 @@ const TrackList = ({ className }: { className?: string }) => {
           overscan={10}
           components={{
             Header: () => <div className='h-8'></div>,
-            Footer: () => <div className='h-1'></div>,
+            Footer: () => <div className='h-8'></div>,
           }}
           itemContent={(index, track) => (
             <Track

packages/web/components/New/Topbar/NavigationButtons.tsx

@@ -18,10 +18,10 @@ const NavigationButtons = () => {
           await controlsBack.start({ x: -5 })
           await controlsBack.start({ x: 0 })
         }}
-        className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'
+        className='app-region-no-drag rounded-full bg-white/10 p-2.5 text-white/40 backdrop-blur-3xl'
       >
         <motion.div animate={controlsBack} transition={transition}>
-          <Icon name='back' className='h-7 w-7 text-neutral-500' />
+          <Icon name='back' className='h-7 w-7 ' />
         </motion.div>
       </button>
       <button
@@ -32,10 +32,10 @@ const NavigationButtons = () => {
           await controlsForward.start({ x: 5 })
           await controlsForward.start({ x: 0 })
         }}
-        className='app-region-no-drag ml-2.5 rounded-full bg-day-600 p-2.5 dark:bg-night-600'
+        className='app-region-no-drag ml-2.5 rounded-full  bg-white/10 p-2.5 text-white/40 backdrop-blur-3xl'
       >
         <motion.div animate={controlsForward} transition={transition}>
-          <Icon name='forward' className='h-7 w-7 text-neutral-500' />
+          <Icon name='forward' className='h-7 w-7' />
         </motion.div>
       </button>
     </>

packages/web/components/New/Topbar/SearchBox.tsx

@@ -11,7 +11,7 @@ const SearchBox = () => {
   return (
     <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',
+        'app-region-no-drag flex items-center rounded-full bg-white/10 p-2.5 text-white/40 backdrop-blur-3xl',
         css`
           ${bp.lg} {
             min-width: 284px;
@@ -23,7 +23,7 @@ const SearchBox = () => {
       <input
         placeholder='Search'
         className={cx(
-          'flex-shrink bg-transparent font-medium  placeholder:text-neutral-500 dark:text-neutral-200',
+          'flex-shrink bg-transparent font-medium  placeholder:text-white/40 dark:text-white/80',
           css`
             @media (max-width: 420px) {
               width: 142px;

packages/web/components/New/Topbar/TopbarDesktop.tsx

@@ -8,14 +8,21 @@ import uiStates from '@/web/states/uiStates'
 import { useSnapshot } from 'valtio'
 import { AnimatePresence, motion } from 'framer-motion'
 import { ease } from '@/web/utils/const'
+import { useLocation } from 'react-router-dom'
 
 const Background = () => {
   const { hideTopbarBackground } = useSnapshot(uiStates)
+  const location = useLocation()
+  const isPageHaveBlurBG =
+    location.pathname.startsWith('/album/') ||
+    location.pathname.startsWith('/artist/') ||
+    location.pathname.startsWith('/playlist/')
+  const show = !hideTopbarBackground || !isPageHaveBlurBG
 
   return (
     <>
       <AnimatePresence>
-        {!hideTopbarBackground && (
+        {show && (
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}

packages/web/components/New/TrackListHeader.tsx

@@ -18,6 +18,8 @@ import { ease } from '@/web/utils/const'
 import { injectGlobal } from '@emotion/css'
 import { useNavigate } from 'react-router-dom'
 import BlurBackground from '@/web/components/New/BlurBackground'
+import useAppleMusicAlbum from '@/web/hooks/useAppleMusicAlbum'
+import { AppleMusicAlbum } from '@/shared/AppleMusic'
 
 injectGlobal`
   .plyr__video-wrapper,
@@ -47,12 +49,20 @@ const VideoCover = ({ source }: { source?: string }) => {
 
 const Cover = memo(
   ({ album, playlist }: { album?: Album; playlist?: Playlist }) => {
-    const isMobile = useIsMobile()
-    const { data: videoCover } = useVideoCover({
+    const { data: albumFromApple } = useAppleMusicAlbum({
       id: album?.id,
       name: album?.name,
       artist: album?.artist.name,
     })
+    const { data: videoCoverFromRemote } = useVideoCover({
+      id: album?.id,
+      name: album?.name,
+      artist: album?.artist.name,
+      enabled: !window.env?.isElectron,
+    })
+    const videoCover =
+      albumFromApple?.attributes?.editorialVideo?.motionSquareVideo1x1?.video ||
+      videoCoverFromRemote
     const cover = album?.picUrl || playlist?.coverImgUrl || ''
 
     return (
@@ -111,6 +121,12 @@ const TrackListHeader = ({
     const duration = album?.songs?.reduce((acc, cur) => acc + cur.dt, 0) || 0
     return formatDuration(duration, 'en', 'hh[hr] mm[min]')
   }, [album?.songs])
+  const { data: albumFromApple, isLoading: isLoadingAlbumFromApple } =
+    useAppleMusicAlbum({
+      id: album?.id,
+      name: album?.name,
+      artist: album?.artist.name,
+    })
 
   return (
     <div
@@ -172,9 +188,17 @@ const TrackListHeader = ({
 
           {/* Description */}
           {!isMobile && (
-            <div className='line-clamp-3 mt-6 whitespace-pre-wrap text-14 font-bold dark:text-night-400 '>
-              {album?.description || playlist?.description}
-            </div>
+            <div
+              className='line-clamp-3 mt-6 whitespace-pre-wrap text-14 font-bold dark:text-night-400 '
+              dangerouslySetInnerHTML={{
+                __html: !isLoadingAlbumFromApple
+                  ? albumFromApple?.attributes?.editorialNotes?.standard ||
+                    album?.description ||
+                    playlist?.description ||
+                    ''
+                  : '',
+              }}
+            ></div>
           )}
         </div>