feat: updates

packages/web/IpcRendererReact.tsx

@@ -45,7 +45,7 @@ const IpcRendererReact = () => {
 
     window.ipcRenderer?.send(playing ? IpcChannels.Play : IpcChannels.Pause)
     setIsPlaying(playing)
-  }, [state])
+  }, [isPlaying, state])
 
   useEffectOnce(() => {
     // 用于显示 windows taskbar buttons

packages/web/api/hooks/useLyric.ts

@@ -18,6 +18,7 @@ export default function useLyric(params: FetchLyricParams) {
     {
       enabled: !!params.id && params.id !== 0,
       refetchInterval: false,
+      refetchOnWindowFocus: false,
       staleTime: Infinity,
       initialData: (): FetchLyricResponse | undefined =>
         window.ipcRenderer?.sendSync(IpcChannels.GetApiCacheSync, {

packages/web/api/playlist.ts

@@ -39,7 +39,6 @@ export function fetchRecommendedPlaylists(
 }
 
 // 每日推荐歌单（需要登录）
-
 export function fetchDailyRecommendPlaylists(): Promise<FetchDailyRecommendPlaylistsResponse> {
   return request({
     url: '/recommend/resource',

packages/web/components/New/ArtistRow.tsx

@@ -1,5 +1,6 @@
 import { resizeImage } from '@/web/utils/common'
 import { css, cx } from '@emotion/css'
+import { memo } from 'react'
 import Image from './Image'
 
 const Artist = ({ artist }: { artist: Artist }) => {
@@ -82,4 +83,6 @@ const ArtistRow = ({
   )
 }
 
-export default ArtistRow
+const memoizedArtistRow = memo(ArtistRow)
+memoizedArtistRow.displayName = 'ArtistRow'
+export default memoizedArtistRow

packages/web/components/New/CoverRow.tsx

@@ -4,6 +4,48 @@ import { useNavigate } from 'react-router-dom'
 import Image from './Image'
 import { prefetchAlbum } from '@/web/api/hooks/useAlbum'
 import { prefetchPlaylist } from '@/web/api/hooks/usePlaylist'
+import { memo, useCallback } from 'react'
+
+const Album = ({ album }: { album: Album }) => {
+  const navigate = useNavigate()
+  const goTo = () => {
+    console.log('dsada')
+    navigate(`/album/${album.id}`)
+  }
+  const prefetch = () => {
+    prefetchAlbum({ id: album.id })
+  }
+
+  return (
+    <Image
+      onClick={goTo}
+      key={album.id}
+      src={resizeImage(album?.picUrl || '', 'md')}
+      className='aspect-square rounded-24'
+      onMouseOver={prefetch}
+    />
+  )
+}
+
+const Playlist = ({ playlist }: { playlist: Playlist }) => {
+  const navigate = useNavigate()
+  const goTo = useCallback(() => {
+    navigate(`/playlist/${playlist.id}`)
+  }, [navigate, playlist.id])
+  const prefetch = useCallback(() => {
+    prefetchPlaylist({ id: playlist.id })
+  }, [playlist.id])
+
+  return (
+    <Image
+      onClick={goTo}
+      key={playlist.id}
+      src={resizeImage(playlist.coverImgUrl || playlist?.picUrl || '', 'md')}
+      className='aspect-square rounded-24'
+      onMouseOver={prefetch}
+    />
+  )
+}
 
 const CoverRow = ({
   albums,
@@ -16,18 +58,6 @@ const CoverRow = ({
   albums?: Album[]
   playlists?: Playlist[]
 }) => {
-  const navigate = useNavigate()
-
-  const goTo = (id: number) => {
-    if (albums) navigate(`/album/${id}`)
-    if (playlists) navigate(`/playlist/${id}`)
-  }
-
-  const prefetch = (id: number) => {
-    if (albums) prefetchAlbum({ id })
-    if (playlists) prefetchPlaylist({ id })
-  }
-
   return (
     <div className={className}>
       {/* Title */}
@@ -38,33 +68,18 @@ const CoverRow = ({
       )}
 
       {/* Items */}
-      <div className='grid grid-cols-3 gap-4 lg:gap-10 xl:grid-cols-4 2xl:grid-cols-5'>
+      <div className='grid grid-cols-3 gap-4 lg:gap-6 xl:grid-cols-4 2xl:grid-cols-5'>
         {albums?.map(album => (
-          <Image
+          <Album key={album.id} album={album} />
-            onClick={() => goTo(album.id)}
-            key={album.id}
-            alt={album.name}
-            src={resizeImage(album?.picUrl || '', 'md')}
-            className='aspect-square rounded-24'
-            onMouseOver={() => prefetch(album.id)}
-          />
         ))}
         {playlists?.map(playlist => (
-          <Image
+          <Playlist key={playlist.id} playlist={playlist} />
-            onClick={() => goTo(playlist.id)}
-            key={playlist.id}
-            alt={playlist.name}
-            src={resizeImage(
-              playlist.coverImgUrl || playlist?.picUrl || '',
-              'md'
-            )}
-            className='aspect-square rounded-24'
-            onMouseOver={() => prefetch(playlist.id)}
-          />
         ))}
       </div>
     </div>
   )
 }
 
-export default CoverRow
+const memoizedCoverRow = memo(CoverRow)
+memoizedCoverRow.displayName = 'CoverRow'
+export default memoizedCoverRow

packages/web/components/New/CoverRowVirtual.tsx

@@ -0,0 +1,128 @@
+import { resizeImage } from '@/web/utils/common'
+import { cx } from '@emotion/css'
+import { useNavigate } from 'react-router-dom'
+import Image from './Image'
+import { prefetchAlbum } from '@/web/api/hooks/useAlbum'
+import { prefetchPlaylist } from '@/web/api/hooks/usePlaylist'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { CSSProperties, useRef } from 'react'
+
+const CoverRow = ({
+  albums,
+  playlists,
+  title,
+  className,
+  containerClassName,
+  containerStyle,
+}: {
+  title?: string
+  className?: string
+  albums?: Album[]
+  playlists?: Playlist[]
+  containerClassName?: string
+  containerStyle?: CSSProperties
+}) => {
+  const navigate = useNavigate()
+
+  const goTo = (id: number) => {
+    if (albums) navigate(`/album/${id}`)
+    if (playlists) navigate(`/playlist/${id}`)
+  }
+
+  const prefetch = (id: number) => {
+    if (albums) prefetchAlbum({ id })
+    if (playlists) prefetchPlaylist({ id })
+  }
+
+  // The scrollable element for your list
+  const parentRef = useRef<HTMLDivElement>(null)
+
+  type Item = Album | Playlist
+  const items: Item[] = albums || playlists || []
+  const rows = items.reduce((rows: Item[][], item: Item, index: number) => {
+    const rowIndex = Math.floor(index / 4)
+    if (rows.length < rowIndex + 1) {
+      rows.push([item])
+    } else {
+      rows[rowIndex].push(item)
+    }
+    return rows
+  }, [])
+
+  // The virtualizer
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    overscan: 5,
+    estimateSize: () => {
+      const containerWidth = parentRef.current?.clientWidth
+      console.log(parentRef.current?.clientWidth)
+      if (!containerWidth) {
+        return 192
+      }
+      const gridGapY = 24
+      const gridGapX = 40
+      const gridColumns = 4
+      console.log(
+        (containerWidth - (gridColumns - 1) * gridGapX) / gridColumns + gridGapY
+      )
+      return (
+        (containerWidth - (gridColumns - 1) * gridGapX) / gridColumns + gridGapY
+      )
+    },
+  })
+
+  return (
+    <div className={className}>
+      {/* Title */}
+      {title && (
+        <h4 className='mb-6 text-14 font-bold uppercase dark:text-neutral-300'>
+          {title}
+        </h4>
+      )}
+
+      <div
+        ref={parentRef}
+        className={cx('w-full overflow-auto', containerClassName)}
+        style={containerStyle}
+      >
+        <div
+          className='relative w-full'
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((row: any) => (
+            <div
+              key={row.index}
+              className='absolute top-0 left-0 grid w-full grid-cols-4 gap-4 lg:gap-10'
+              style={{
+                height: `${row.size}px`,
+                transform: `translateY(${row.start}px)`,
+              }}
+            >
+              {rows[row.index].map((item: Item) => (
+                <img
+                  onClick={() => goTo(item.id)}
+                  key={item.id}
+                  alt={item.name}
+                  src={resizeImage(
+                    item?.picUrl ||
+                      (item as Playlist)?.coverImgUrl ||
+                      item?.picUrl ||
+                      '',
+                    'md'
+                  )}
+                  className='aspect-square rounded-24'
+                  onMouseOver={() => prefetch(item.id)}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CoverRow

packages/web/components/New/Image.tsx

@@ -4,45 +4,46 @@ import { useEffect, useState } from 'react'
 import { ease } from '@/web/utils/const'
 import useIsMobile from '@/web/hooks/useIsMobile'
 
-const Image = ({
+type Props = {
+  src?: string
+  srcSet?: string
+  sizes?: string
+  className?: string
+  lazyLoad?: boolean
+  placeholder?: 'artist' | 'album' | 'playlist' | 'podcast' | 'blank' | false
+  onClick?: (e: React.MouseEvent<HTMLImageElement>) => void
+  onMouseOver?: (e: React.MouseEvent<HTMLImageElement>) => void
+  animation?: boolean
+}
+
+const ImageDesktop = ({
   src,
   srcSet,
   className,
-  alt,
   lazyLoad = true,
   sizes,
   placeholder = 'blank',
   onClick,
   onMouseOver,
   animation = true,
-}: {
+}: Props) => {
-  src?: string
-  srcSet?: string
-  sizes?: string
-  className?: string
-  alt: string
-  lazyLoad?: boolean
-  placeholder?: 'artist' | 'album' | 'playlist' | 'podcast' | 'blank' | false
-  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 isMobile = useIsMobile()
   const isAnimate = animation && !isMobile
   useEffect(() => setError(false), [src])
 
   const onLoad = async () => {
-    setLoaded(true)
+    if (isAnimate) {
-    if (isAnimate) animate.start({ opacity: 1 })
+      animate.start({ opacity: 1 })
+      placeholderAnimate.start({ opacity: 0 })
+    }
   }
   const onError = () => {
     setError(true)
   }
 
-  const hidden = error || !loaded
   const transition = { duration: 0.6, ease }
   const motionProps = isAnimate
     ? {
@@ -54,6 +55,7 @@ const Image = ({
     : {}
   const placeholderMotionProps = isAnimate
     ? {
+        animate: placeholderAnimate,
         initial: { opacity: 1 },
         exit: { opacity: 0 },
         transition,
@@ -62,6 +64,8 @@ const Image = ({
 
   return (
     <div
+      onClick={onClick}
+      onMouseOver={onMouseOver}
       className={cx(
         'overflow-hidden',
         className,
@@ -71,7 +75,6 @@ const Image = ({
       {/* Image */}
       <AnimatePresence>
         <motion.img
-          alt={alt}
           className='absolute inset-0 h-full w-full'
           src={src}
           srcSet={srcSet}
@@ -80,15 +83,13 @@ const Image = ({
           loading={lazyLoad ? 'lazy' : undefined}
           onError={onError}
           onLoad={onLoad}
-          onClick={onClick}
-          onMouseOver={onMouseOver}
           {...motionProps}
         />
       </AnimatePresence>
 
       {/* Placeholder / Error fallback */}
       <AnimatePresence>
-        {hidden && placeholder && (
+        {placeholder && (
           <motion.div
             {...placeholderMotionProps}
             className='absolute inset-0 h-full w-full bg-white dark:bg-neutral-800'
@@ -99,4 +100,36 @@ const Image = ({
   )
 }
 
+const ImageMobile = (props: Props) => {
+  const { src, className, srcSet, sizes, lazyLoad, onClick, onMouseOver } =
+    props
+  return (
+    <div
+      onClick={onClick}
+      onMouseOver={onMouseOver}
+      className={cx(
+        'overflow-hidden',
+        className,
+        className?.includes('absolute') === false && 'relative'
+      )}
+    >
+      {src && (
+        <img
+          className='absolute inset-0 h-full w-full'
+          src={src}
+          srcSet={srcSet}
+          sizes={sizes}
+          decoding='async'
+          loading={lazyLoad ? 'lazy' : undefined}
+        />
+      )}
+    </div>
+  )
+}
+
+const Image = (props: Props) => {
+  const isMobile = useIsMobile()
+  return isMobile ? <ImageMobile {...props} /> : <ImageDesktop {...props} />
+}
+
 export default Image

packages/web/components/New/Layout.tsx

@@ -5,6 +5,7 @@ import Topbar from '@/web/components/New/Topbar/TopbarDesktop'
 import { css, cx } from '@emotion/css'
 import { player } from '@/web/store'
 import { useSnapshot } from 'valtio'
+import Login from './Login'
 
 const Layout = () => {
   const playerSnapshot = useSnapshot(player)
@@ -36,6 +37,7 @@ const Layout = () => {
       <MenuBar />
       <Topbar />
       <Main />
+      <Login />
       {showPlayer && <Player />}
     </div>
   )

packages/web/components/New/LayoutMobile.tsx

@@ -7,13 +7,14 @@ import Router from '@/web/components/New/Router'
 import MenuBar from './MenuBar'
 import TopbarMobile from './Topbar/TopbarMobile'
 import { isIOS, isPWA, isSafari } from '@/web/utils/common'
+import Login from './Login'
 
 const LayoutMobile = () => {
   const playerSnapshot = useSnapshot(player)
   const showPlayer = !!playerSnapshot.track
 
   return (
-    <div id='layout' className='select-none bg-white pb-32 pt-3 dark:bg-black'>
+    <div id='layout' className='select-none bg-white pb-28 pt-3 dark:bg-black'>
       <main className='min-h-screen overflow-y-auto overflow-x-hidden pb-16'>
         <TopbarMobile />
         <Router />
@@ -48,6 +49,8 @@ const LayoutMobile = () => {
         <MenuBar />
       </div>
 
+      <Login />
+
       {/* Notch background */}
       {isIOS && isSafari && isPWA && (
         <div

packages/web/components/New/Login/Login.tsx

@@ -0,0 +1,80 @@
+import { cx, css } from '@emotion/css'
+import { useEffect, useRef, useState, useMemo } from 'react'
+import qrCode from 'qrcode'
+
+const QRCode = ({ className, text }: { className?: string; text: string }) => {
+  const [image, setImage] = useState<string>('')
+
+  useEffect(() => {
+    if (text) {
+      qrCode
+        .toString(text, {
+          margin: 0,
+          color: { light: '#ffffff00' },
+          type: 'svg',
+        })
+        .then(image => {
+          setImage(image)
+          console.log(image)
+        })
+    }
+  }, [text])
+
+  const encodedImage = useMemo(() => encodeURIComponent(image), [image])
+
+  return (
+    <img
+      className={cx('', className)}
+      src={`data:image/svg+xml;utf8,${encodedImage}`}
+    ></img>
+  )
+}
+
+const Login = () => {
+  return <div></div>
+  return (
+    <div className='fixed inset-0 z-30 flex justify-center rounded-24 bg-black/80 pt-56 backdrop-blur-3xl'>
+      <div className='flex flex-col items-center'>
+        <div
+          className={cx(
+            'rounded-48 bg-white/10 p-9',
+            css`
+              width: 392px;
+              height: fit-content;
+            `
+          )}
+        >
+          <div className='text-center text-18 font-medium text-night-600'>
+            Log in with NetEase QR
+          </div>
+
+          <div className='mt-4 rounded-24 bg-white p-2.5'>
+            <QRCode
+              text='tetesoahfoahdodaoshdoaish'
+              className={css`
+                border-radius: 17px;
+              `}
+            />
+          </div>
+
+          <div className='mt-4 flex items-center'>
+            <div className='h-px flex-grow bg-white/20'></div>
+            <div className='mx-2 text-16 font-medium text-white'>or</div>
+            <div className='h-px flex-grow bg-white/20'></div>
+          </div>
+
+          <div className='mt-4 flex justify-center'>
+            <button className='text-16 font-medium text-night-50'>
+              Use Phone or Email
+            </button>
+          </div>
+        </div>
+
+        {/* Close */}
+        <div className='mt-10 h-14 w-14 rounded-full bg-white/10'></div>
+      </div>
+    </div>
+  )
+}
+
+export default Login

packages/web/components/New/Login/index.tsx

@@ -0,0 +1,3 @@
+import Login from './Login'
+
+export default Login

packages/web/components/New/MenuBar.tsx

@@ -78,9 +78,12 @@ const TabName = () => {
 }
 
 const Tabs = () => {
+  const location = useLocation()
   const navigate = useNavigate()
   const controls = useAnimation()
-  const [active, setActive] = useState<string>(tabs[0].path)
+  const [active, setActive] = useState<string>(
+    location.pathname || tabs[0].path
+  )
 
   const animate = async (path: string) => {
     await controls.start((p: string) =>
@@ -96,7 +99,12 @@ const Tabs = () => {
           key={tab.name}
           animate={controls}
           transition={{ ease, duration: 0.18 }}
-          onMouseDown={() => animate(tab.path)}
+          onMouseDown={() => {
+            if ('vibrate' in navigator) {
+              navigator.vibrate(20)
+            }
+            animate(tab.path)
+          }}
           onClick={() => {
             setActive(tab.path)
             navigate(tab.path)

packages/web/components/New/PlayLikedSongsCard.tsx

@@ -1,93 +0,0 @@
-import useLyric from '@/web/api/hooks/useLyric'
-import usePlaylist from '@/web/api/hooks/usePlaylist'
-import useUserPlaylists from '@/web/api/hooks/useUserPlaylists'
-import { player } from '@/web/store'
-import { sample, chunk } from 'lodash-es'
-import { css, cx } from '@emotion/css'
-import { useState, useEffect, useMemo, useCallback } from 'react'
-import toast from 'react-hot-toast'
-import { useNavigate } from 'react-router-dom'
-
-const PlayLikedSongsCard = () => {
-  const navigate = useNavigate()
-
-  const { data: playlists } = useUserPlaylists()
-
-  const { data: likedSongsPlaylist } = usePlaylist({
-    id: playlists?.playlist?.[0].id ?? 0,
-  })
-
-  // Lyric
-  const [trackID, setTrackID] = useState(0)
-
-  useEffect(() => {
-    if (trackID === 0) {
-      setTrackID(
-        sample(likedSongsPlaylist?.playlist.trackIds?.map(t => t.id) ?? []) ?? 0
-      )
-    }
-  }, [likedSongsPlaylist?.playlist.trackIds, trackID])
-
-  const { data: lyric } = useLyric({
-    id: trackID,
-  })
-
-  const lyricLines = useMemo(() => {
-    return (
-      sample(
-        chunk(
-          lyric?.lrc.lyric
-            ?.split('\n')
-            ?.map(l => l.split(']').pop()?.trim())
-            ?.filter(
-              l =>
-                l &&
-                !l.includes('作词') &&
-                !l.includes('作曲') &&
-                !l.includes('纯音乐，请欣赏')
-            ),
-          4
-        )
-      ) ?? []
-    )
-  }, [lyric])
-
-  const handlePlay = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-      if (!likedSongsPlaylist?.playlist.id) {
-        toast('无法播放歌单')
-        return
-      }
-      player.playPlaylist(likedSongsPlaylist.playlist.id)
-    },
-    [likedSongsPlaylist?.playlist.id]
-  )
-
-  return (
-    <div
-      className={cx(
-        'mx-2.5 flex flex-col justify-between rounded-24 p-8 dark:bg-white/10 lg:mx-0',
-        css`
-          height: 322px;
-        `
-      )}
-    >
-      <div className='text-18 font-medium text-white/20 lg:text-21'>
-        {lyricLines.map((line, index) => (
-          <div key={`${index}-${line}`}>{line}</div>
-        ))}
-      </div>
-      <div>
-        <button
-          onClick={handlePlay}
-          className='rounded-full bg-brand-700 py-5 px-6 text-16 font-medium text-white'
-        >
-          Play Now
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default PlayLikedSongsCard

packages/web/components/New/PlayingNext.tsx

@@ -112,7 +112,7 @@ const TrackList = ({ className }: { className?: string }) => {
     count: tracks.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 76,
-    overscan: 5,
+    overscan: 10,
   })
 
   return (

packages/web/components/New/Router.tsx

@@ -9,6 +9,7 @@ import React, { ReactNode, Suspense } from 'react'
 
 const My = React.lazy(() => import('@/web/pages/New/My'))
 const Discover = React.lazy(() => import('@/web/pages/New/Discover'))
+const Browse = React.lazy(() => import('@/web/pages/New/Browse'))
 const Album = React.lazy(() => import('@/web/pages/New/Album'))
 const Playlist = React.lazy(() => import('@/web/pages/New/Playlist'))
 
@@ -69,6 +70,7 @@ const Router = () => {
       <Routes location={location} key={location.pathname}>
         <Route path='/' element={lazy(<My />)} />
         <Route path='/discover' element={lazy(<Discover />)} />
+        <Route path='/browse' element={lazy(<Browse />)} />
         <Route path='/login' element={lazy(<Login />)} />
         <Route path='/album/:id' element={lazy(<Album />)} />
         <Route path='/playlist/:id' element={lazy(<Playlist />)} />

packages/web/components/New/Tabs.tsx

@@ -20,10 +20,10 @@ const Tabs = ({
         <div
           key={tab.id}
           className={cx(
-            'mr-2.5 rounded-12 py-3 px-6 text-16 font-medium ',
+            'mr-2.5 rounded-12 py-3 px-6 text-16 font-medium backdrop-blur transition duration-500',
             value === tab.id
               ? 'bg-brand-700 text-white'
-              : 'dark:bg-white/10 dark:text-white/20'
+              : 'dark:bg-white/10 dark:text-white/20 hover:dark:bg-white/20 hover:dark:text-white/40'
           )}
           onClick={() => onChange(tab.id)}
         >

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

@@ -20,7 +20,7 @@ const SearchBox = () => {
         className={cx(
           'flex-shrink bg-transparent font-medium  placeholder:text-neutral-500 dark:text-neutral-200',
           css`
-            @media (max-width: 360px) {
+            @media (max-width: 420px) {
               width: 142px;
             }
           `

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

@@ -4,6 +4,7 @@ import Avatar from './Avatar'
 import SearchBox from './SearchBox'
 import SettingsButton from './SettingsButton'
 import NavigationButtons from './NavigationButtons'
+import topbarBackground from '@/web/assets/images/topbar-background.png'
 
 const TopbarDesktop = () => {
   const location = useLocation()
@@ -11,13 +12,16 @@ const TopbarDesktop = () => {
   return (
     <div
       className={cx(
-        'app-region-drag fixed top-0 right-0 z-20 flex items-center justify-between overflow-hidden rounded-tr-24 pt-11 pb-10 pr-6 pl-10 ',
+        'app-region-drag fixed top-0 right-0 z-20 flex items-center justify-between overflow-hidden rounded-tr-24 bg-contain pt-11 pb-10 pr-6 pl-10',
         css`
           left: 104px;
         `,
         !location.pathname.startsWith('/album/') &&
           !location.pathname.startsWith('/playlist/') &&
-          'bg-gradient-to-b from-white dark:from-black'
+          !location.pathname.startsWith('/browse') &&
+          css`
+            background-image: url(${topbarBackground});
+          `
       )}
     >
       {/* Left Part */}

packages/web/components/New/TrackListHeader.tsx

@@ -12,7 +12,6 @@ import Image from './Image'
 import useIsMobile from '@/web/hooks/useIsMobile'
 import { memo, useEffect, useMemo, useRef } from 'react'
 import Hls from 'hls.js'
-import Plyr, { APITypes, PlyrProps, PlyrInstance } from 'plyr-react'
 import useVideoCover from '@/web/hooks/useVideoCover'
 import { motion } from 'framer-motion'
 import { ease } from '@/web/utils/const'
@@ -26,42 +25,20 @@ injectGlobal`
 `
 
 const VideoCover = ({ source }: { source?: string }) => {
-  const ref = useRef<APITypes>(null)
+  const ref = useRef<HTMLVideoElement>(null)
-  useEffect(() => {
+  const hls = useRef<Hls>(new Hls())
-    const loadVideo = async () => {
-      if (!source || !Hls.isSupported()) return
-      const video = document.getElementById('plyr') as HTMLVideoElement
-      const hls = new Hls()
-      hls.loadSource(source)
-      hls.attachMedia(video)
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      ref.current!.plyr.media = video
 
-      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+  useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-extra-semi
+    if (source && Hls.isSupported()) {
-        ;(ref.current!.plyr as PlyrInstance).play()
+      const video = document.querySelector('#video-cover') as HTMLVideoElement
-      })
+      hls.current.loadSource(source)
+      hls.current.attachMedia(video)
     }
-    loadVideo()
+  }, [source])
-  })
 
   return (
     <div className='z-10 aspect-square overflow-hidden rounded-24'>
-      <Plyr
+      <video id='video-cover' ref={ref} autoPlay muted loop />
-        id='plyr'
-        options={{
-          volume: 0,
-          controls: [],
-          autoplay: true,
-          clickToPlay: false,
-          loop: {
-            active: true,
-          },
-        }}
-        source={{} as PlyrProps['source']}
-        ref={ref}
-      />
     </div>
   )
 }
@@ -82,7 +59,6 @@ const Cover = memo(
           <Image
             className='absolute inset-0 h-full w-full'
             src={resizeImage(cover, 'lg')}
-            alt='Cover'
           />
 
           {videoCover && (

packages/web/package.json

@@ -26,6 +26,7 @@
     "@sentry/react": "^6.19.7",
     "@sentry/tracing": "^6.19.7",
     "@tanstack/react-virtual": "3.0.0-beta.2",
+    "ahooks": "^3.4.1",
     "axios": "^0.27.2",
     "color.js": "^1.2.0",
     "colord": "^2.9.2",

packages/web/pages/New/Browse.tsx

@@ -0,0 +1,94 @@
+import Tabs from '@/web/components/New/Tabs'
+import {
+  fetchDailyRecommendPlaylists,
+  fetchRecommendedPlaylists,
+} from '@/web/api/playlist'
+import { PlaylistApiNames } from '@/shared/api/Playlists'
+import { useState } from 'react'
+import { useQuery } from 'react-query'
+import CoverRowVirtual from '@/web/components/New/CoverRowVirtual'
+import PageTransition from '@/web/components/New/PageTransition'
+import { playerWidth, topbarHeight } from '@/web/utils/const'
+import { cx, css } from '@emotion/css'
+import CoverRow from '@/web/components/New/CoverRow'
+import topbarBackground from '@/web/assets/images/topbar-background.png'
+
+const reactQueryOptions = {
+  refetchOnWindowFocus: false,
+  refetchInterval: 1000 * 60 * 60, // 1 hour
+}
+
+const Recommend = () => {
+  const { data: dailyRecommendPlaylists } = useQuery(
+    PlaylistApiNames.FetchDailyRecommendPlaylists,
+    () => fetchDailyRecommendPlaylists(),
+    reactQueryOptions
+  )
+  const { data: recommendedPlaylists } = useQuery(
+    [PlaylistApiNames.FetchRecommendedPlaylists, { limit: 200 }],
+    () => fetchRecommendedPlaylists({ limit: 200 }),
+    reactQueryOptions
+  )
+  const playlists = [
+    ...(dailyRecommendPlaylists?.recommend || []),
+    ...(recommendedPlaylists?.result || []),
+  ]
+
+  // return (
+  //   <CoverRowVirtual
+  //     playlists={playlists}
+  //     containerStyle={{
+  //       height: `${document.body.clientHeight - topbarHeight - 44}px`,
+  //     }}
+  //   />
+  // )
+
+  return <CoverRow playlists={playlists} />
+}
+
+const All = () => {
+  return <div></div>
+}
+
+const categories = [
+  { id: 'recommend', name: 'Recommend', component: <Recommend /> },
+  { id: 'all', name: 'All', component: <All /> },
+  { id: 'featured', name: 'Featured', component: <Recommend /> },
+  { id: 'official', name: 'Official', component: <Recommend /> },
+  { id: 'charts', name: 'Charts', component: <Recommend /> },
+]
+const categoriesKeys = categories.map(c => c.id)
+type Key = typeof categoriesKeys[number]
+
+const Browse = () => {
+  const [active, setActive] = useState<Key>('recommend')
+
+  return (
+    <PageTransition>
+      {/* Topbar background */}
+      <div
+        className={cx(
+          'pointer-events-none fixed top-0 left-0 z-10 hidden lg:block',
+          css`
+            height: 230px;
+            right: ${playerWidth + 32}px;
+            background-image: url(${topbarBackground});
+          `
+        )}
+      ></div>
+
+      <Tabs
+        tabs={categories}
+        value={active}
+        onChange={category => setActive(category)}
+        className='sticky top-0 z-10 px-2.5 lg:px-0'
+      />
+
+      <div className='relative mx-2.5 mt-5 lg:mx-0'>
+        {categories.find(c => c.id === active)?.component}
+      </div>
+    </PageTransition>
+  )
+}
+
+export default Browse

packages/web/pages/New/Discover.tsx

@@ -102,7 +102,7 @@ const Discover = () => {
 
   return (
     <PageTransition disableEnterAnimation={true}>
-      <div className='mx-2.5 lg:mx-0'>
+      <div className='mx-2.5 pb-10 lg:mx-0 lg:pb-16'>
         <CoverWall albums={albums} />
       </div>
     </PageTransition>

packages/web/pages/New/My.tsx

@@ -1,115 +0,0 @@
-import { css, cx } from '@emotion/css'
-import PlayLikedSongsCard from '@/web/components/New/PlayLikedSongsCard'
-import PageTransition from '@/web/components/New/PageTransition'
-import useUserArtists from '@/web/api/hooks/useUserArtists'
-import ArtistRow from '@/web/components/New/ArtistRow'
-import Tabs from '@/web/components/New/Tabs'
-import { useMemo, useState } from 'react'
-import CoverRow from '@/web/components/New/CoverRow'
-import useUserPlaylists from '@/web/api/hooks/useUserPlaylists'
-import useUserAlbums from '@/web/api/hooks/useUserAlbums'
-import useUserListenedRecords from '@/web/api/hooks/useUserListenedRecords'
-import useArtists from '@/web/api/hooks/useArtists'
-
-const tabs = [
-  {
-    id: 'playlists',
-    name: 'Playlists',
-  },
-  {
-    id: 'albums',
-    name: 'Albums',
-  },
-  {
-    id: 'artists',
-    name: 'Artists',
-  },
-  {
-    id: 'videos',
-    name: 'Videos',
-  },
-]
-
-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?.slice(1)}
-      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: {
-      id: number
-      playCount: number
-    }[] = []
-    listenedRecords?.weekData?.forEach(record => {
-      const artist = record.song.ar[0]
-      const index = artists.findIndex(a => a.id === artist.id)
-      if (index === -1) {
-        artists.push({
-          id: artist.id,
-          playCount: record.playCount,
-        })
-      } else {
-        artists[index].playCount += record.playCount
-      }
-    })
-
-    return artists
-      .sort((a, b) => b.playCount - a.playCount)
-      .slice(0, 5)
-      .map(artist => artist.id)
-  }, [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 />
-        <RecentlyListened />
-        <Collections />
-      </div>
-    </PageTransition>
-  )
-}
-
-export default My

packages/web/pages/New/My/Collections.tsx

@@ -0,0 +1,58 @@
+import { css, cx } from '@emotion/css'
+import useUserArtists from '@/web/api/hooks/useUserArtists'
+import Tabs from '@/web/components/New/Tabs'
+import { useMemo, useState } from 'react'
+import CoverRow from '@/web/components/New/CoverRow'
+import useUserPlaylists from '@/web/api/hooks/useUserPlaylists'
+import useUserAlbums from '@/web/api/hooks/useUserAlbums'
+
+const tabs = [
+  {
+    id: 'playlists',
+    name: 'Playlists',
+  },
+  {
+    id: 'albums',
+    name: 'Albums',
+  },
+  {
+    id: 'artists',
+    name: 'Artists',
+  },
+  {
+    id: 'videos',
+    name: 'Videos',
+  },
+]
+
+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()
+  const p = useMemo(() => playlists?.playlist?.slice(1), [playlists])
+  return <CoverRow playlists={p} 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>
+  )
+}
+
+export default Collections

packages/web/pages/New/My/My.tsx

@@ -0,0 +1,19 @@
+import { css, cx } from '@emotion/css'
+import PlayLikedSongsCard from './PlayLikedSongsCard'
+import PageTransition from '@/web/components/New/PageTransition'
+import RecentlyListened from './RecentlyListened'
+import Collections from './Collections'
+
+const My = () => {
+  return (
+    <PageTransition>
+      <div className='grid grid-cols-1 gap-10'>
+        <PlayLikedSongsCard />
+        <RecentlyListened />
+        <Collections />
+      </div>
+    </PageTransition>
+  )
+}
+
+export default My

packages/web/pages/New/My/PlayLikedSongsCard.tsx

@@ -0,0 +1,152 @@
+import useLyric from '@/web/api/hooks/useLyric'
+import usePlaylist from '@/web/api/hooks/usePlaylist'
+import useUserPlaylists from '@/web/api/hooks/useUserPlaylists'
+import { player } from '@/web/store'
+import { sample, chunk, sampleSize } from 'lodash-es'
+import { css, cx } from '@emotion/css'
+import { useState, useEffect, useMemo, useCallback, memo } from 'react'
+import toast from 'react-hot-toast'
+import { useNavigate } from 'react-router-dom'
+import Icon from '@/web/components/Icon'
+import { lyricParser } from '@/web/utils/lyric'
+import Image from '@/web/components/New/Image'
+import { resizeImage } from '@/web/utils/common'
+import { breakpoint as bp } from '@/web/utils/const'
+
+const Lyrics = ({ tracksIDs }: { tracksIDs: number[] }) => {
+  const [id, setId] = useState(0)
+
+  useEffect(() => {
+    if (id === 0) {
+      setId(sample(tracksIDs) || 0)
+    }
+  }, [id, tracksIDs])
+
+  const { data: lyric } = useLyric({ id })
+
+  const lyricLines = useMemo(() => {
+    if (!lyric?.lrc?.lyric) return []
+
+    const parsedLyrics = lyricParser(lyric)
+
+    const lines = parsedLyrics.lyric.map(line => line.content)
+
+    return sample(chunk(lines, 4)) ?? []
+  }, [lyric])
+
+  return (
+    <div
+      className={cx(
+        'line-clamp-4 text-18 font-medium text-white/20 lg:text-21',
+        css`
+          height: 86px;
+          ${bp.lg} {
+            height: auto;
+          }
+        `
+      )}
+    >
+      {lyricLines.map((line, index) => (
+        <div key={`${index}-${line}`}>{line}</div>
+      ))}
+    </div>
+  )
+}
+
+const Covers = memo(({ tracks }: { tracks: Track[] }) => {
+  return (
+    <div className='mt-6 grid w-full flex-shrink-0 grid-cols-3 gap-2.5 lg:mt-0 lg:ml-8 lg:w-auto'>
+      {tracks.map(track => (
+        <Image
+          src={resizeImage(track.al.picUrl || '', 'md')}
+          className={cx(
+            'aspect-square rounded-24',
+            css`
+              ${bp.lg} {
+                height: 125px;
+                width: 125px;
+              }
+            `
+          )}
+          key={track.id}
+        />
+      ))}
+    </div>
+  )
+})
+Covers.displayName = 'Covers'
+
+const PlayLikedSongsCard = () => {
+  const navigate = useNavigate()
+
+  const { data: playlists } = useUserPlaylists()
+
+  const { data: likedSongsPlaylist } = usePlaylist({
+    id: playlists?.playlist?.[0].id ?? 0,
+  })
+
+  const handlePlay = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      if (!likedSongsPlaylist?.playlist.id) {
+        toast('无法播放歌单')
+        return
+      }
+      player.playPlaylist(likedSongsPlaylist.playlist.id)
+    },
+    [likedSongsPlaylist?.playlist.id]
+  )
+
+  const [sampledTracks, setSampledTracks] = useState<Track[]>([])
+  useEffect(() => {
+    const tracks = likedSongsPlaylist?.playlist?.tracks
+    if (!sampledTracks.length && tracks?.length) {
+      setSampledTracks(sampleSize(tracks, 3))
+    }
+  }, [likedSongsPlaylist?.playlist?.tracks, sampledTracks])
+
+  return (
+    <div
+      className={cx(
+        'mx-2.5 flex flex-col justify-between rounded-24 p-8 dark:bg-white/10 lg:mx-0',
+        css`
+          height: 372px;
+          ${bp.lg} {
+            height: 322px;
+          }
+        `
+      )}
+    >
+      {/* Lyrics and Covers */}
+      <div className='flex flex-col justify-between lg:flex-row'>
+        <Lyrics tracksIDs={sampledTracks.map(t => t.id)} />
+        <Covers tracks={sampledTracks} />
+      </div>
+
+      {/* Buttons */}
+      <div className='flex justify-between'>
+        <button
+          onClick={handlePlay}
+          className='rounded-full bg-brand-700 py-5 px-6 text-16 font-medium text-white'
+        >
+          Play Now
+        </button>
+        <button
+          onClick={() =>
+            navigate(`/playlist/${likedSongsPlaylist?.playlist.id}`)
+          }
+          className={cx(
+            'flex items-center justify-center rounded-full bg-white/10 text-night-400',
+            css`
+              padding: 15.5px;
+            `
+          )}
+        >
+          <Icon name='forward' className='h-7 w-7 ' />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default PlayLikedSongsCard

packages/web/pages/New/My/RecentlyListened.tsx

@@ -0,0 +1,42 @@
+import useUserListenedRecords from '@/web/api/hooks/useUserListenedRecords'
+import useArtists from '@/web/api/hooks/useArtists'
+import { useMemo } from 'react'
+import ArtistRow from '@/web/components/New/ArtistRow'
+
+const RecentlyListened = () => {
+  const { data: listenedRecords } = useUserListenedRecords({ type: 'week' })
+  const recentListenedArtistsIDs = useMemo(() => {
+    const artists: {
+      id: number
+      playCount: number
+    }[] = []
+    listenedRecords?.weekData?.forEach(record => {
+      const artist = record.song.ar[0]
+      const index = artists.findIndex(a => a.id === artist.id)
+      if (index === -1) {
+        artists.push({
+          id: artist.id,
+          playCount: record.playCount,
+        })
+      } else {
+        artists[index].playCount += record.playCount
+      }
+    })
+
+    return artists
+      .sort((a, b) => b.playCount - a.playCount)
+      .slice(0, 5)
+      .map(artist => artist.id)
+  }, [listenedRecords])
+  const { data: recentListenedArtists } = useArtists(recentListenedArtistsIDs)
+  const artist = useMemo(
+    () => recentListenedArtists?.map(a => a.artist),
+    [recentListenedArtists]
+  )
+
+  return (
+    <ArtistRow artists={artist} placeholderRow={1} title='RECENTLY LISTENED' />
+  )
+}
+
+export default RecentlyListened

packages/web/pages/New/My/index.tsx

@@ -0,0 +1,3 @@
+import My from './My'
+
+export default My

packages/web/styles/global.css

@@ -59,6 +59,14 @@
     word-break: break-all;
     -webkit-line-clamp: 3;
   }
+
+  .line-clamp-4 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+    -webkit-line-clamp: 4;
+  }
 }
 
 @font-face {
@@ -107,9 +115,12 @@ input {
 }
 
 body {
+  overscroll-behavior: contain;
 }
 
 html {
+  background-color: black;
+  min-height: calc(100% + env(safe-area-inset-top));
 }
 
 button,
@@ -135,8 +146,3 @@ a {
 .no-scrollbar::-webkit-scrollbar {
   display: none;
 }
-
-html {
-  background-color: black;
-  min-height: calc(100% + env(safe-area-inset-top));
-}

packages/web/utils/player.ts

@@ -215,8 +215,12 @@ export class Player {
    */
   private async _fetchAudioSource(trackID: TrackID) {
     const response = await fetchAudioSourceWithReactQuery({ id: trackID })
+    let audio = response.data?.[0]?.url
+    if (audio && audio.includes('126.net')) {
+      audio = audio.replace('http://', 'https://')
+    }
     return {
-      audio: response.data?.[0]?.url,
+      audio,
       id: trackID,
     }
   }

packages/web/vite.config.ts

@@ -14,10 +14,15 @@ const IS_ELECTRON = process.env.IS_ELECTRON
  * @see https://vitejs.dev/config/
  */
 export default defineConfig({
+  clearScreen: IS_ELECTRON ? false : true,
   mode: process.env.NODE_ENV,
   root: './',
   base: '/',
-  clearScreen: IS_ELECTRON ? false : true,
+  resolve: {
+    alias: {
+      '@': join(__dirname, '../'),
+    },
+  },
   plugins: [
     react(),
 
@@ -75,11 +80,6 @@ export default defineConfig({
       ],
     },
   },
-  resolve: {
-    alias: {
-      '@': join(__dirname, '../'),
-    },
-  },
   server: {
     port: Number(process.env['ELECTRON_WEB_SERVER_PORT'] || 42710),
     strictPort: IS_ELECTRON ? true : false,

pnpm-lock.yaml

@@ -130,6 +130,7 @@ importers:
       '@typescript-eslint/parser': ^5.27.0
       '@vitejs/plugin-react': ^1.3.1
       '@vitest/ui': ^0.12.10
+      ahooks: ^3.4.1
       autoprefixer: ^10.4.5
       axios: ^0.27.2
       c8: ^7.11.3
@@ -176,6 +177,7 @@ importers:
       '@sentry/react': 6.19.7_react@18.1.0
       '@sentry/tracing': 6.19.7
       '@tanstack/react-virtual': 3.0.0-beta.2
+      ahooks: 3.4.1_react@18.1.0
       axios: 0.27.2
       color.js: 1.2.0
       colord: 2.9.2
@@ -7549,6 +7551,27 @@ packages:
       indent-string: 4.0.0
     dev: true
 
+  /ahooks-v3-count/1.0.0:
+    resolution: {integrity: sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ==}
+    dev: false
+
+  /ahooks/3.4.1_react@18.1.0:
+    resolution: {integrity: sha512-PMxCDO6JsFdNrAyN3cW1J/2qt/vy2EJ/9KhxGOxj41hJhQddjgaBJjZKf/FrrnZmL+3yGPioZtbC4C7q7ru3yA==}
+    engines: {node: '>=8.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@types/js-cookie': 2.2.7
+      ahooks-v3-count: 1.0.0
+      dayjs: 1.11.2
+      intersection-observer: 0.12.0
+      js-cookie: 2.2.1
+      lodash: 4.17.21
+      react: 18.1.0
+      resize-observer-polyfill: 1.5.1
+      screenfull: 5.2.0
+    dev: false
+
   /airbnb-js-shims/2.2.1:
     resolution: {integrity: sha512-wJNXPH66U2xjgo1Zwyjf9EydvJ2Si94+vSdk6EERcBfB2VZkeltpqIats0cqIZMLCXP3zcyaUKGYQeIBT6XjsQ==}
     dependencies:
@@ -12937,6 +12960,10 @@ packages:
     engines: {node: '>= 0.10'}
     dev: true
 
+  /intersection-observer/0.12.0:
+    resolution: {integrity: sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ==}
+    dev: false
+
   /ip/1.1.8:
     resolution: {integrity: sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==}
 
@@ -13947,7 +13974,6 @@ packages:
 
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: true
 
   /log-symbols/4.1.0:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}

vercel.json

@@ -7,6 +7,10 @@
       "source": "/netease/:match*",
       "destination": "http://168.138.40.199:12835/:match*"
     },
-    {"source": "/(.*)", "destination": "/"}
+    {
+      "source": "/yesplaymusic/:match*",
+      "destination": "http://168.138.40.199:51324/yesplaymusic/:match*"
+    },
+    { "source": "/(.*)", "destination": "/" }
   ]
 }