feat: updates

packages/web/api/hooks/useLyric.ts

@@ -11,7 +11,7 @@ export default function useLyric(params: FetchLyricParams) {
     key,
     async () => {
       // fetch from cache as initial data
-      const cache = window.ipcRenderer?.invoke(IpcChannels.GetApiCache, {
+      const cache = await window.ipcRenderer?.invoke(IpcChannels.GetApiCache, {
         api: CacheAPIs.Lyric,
         query: {
           id: params.id,

packages/web/components/ArtistRow.tsx

@@ -12,10 +12,7 @@ const Artist = ({ artist }: { artist: Artist }) => {
   }
 
   return (
-    <div
-      className='text-center'
-      onMouseOver={() => prefetchArtist({ id: artist.id })}
-    >
+    <div className='text-center' onMouseOver={() => prefetchArtist({ id: artist.id })}>
       <Image
         onClick={to}
         src={resizeImage(artist.img1v1Url, 'md')}
@@ -41,10 +38,7 @@ 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='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={{
@@ -73,7 +67,7 @@ const ArtistRow = ({
   placeholderRow?: number
 }) => {
   return (
-    <div className={className}>
+    <div className={cx('@container', className)}>
       {/* Title */}
       {title && (
         <h4 className='mx-2.5 mb-6 text-12 font-medium uppercase dark:text-neutral-300 lg:mx-0 lg:text-14 lg:font-bold'>
@@ -83,7 +77,7 @@ const ArtistRow = ({
 
       {/* Artists */}
       {artists && (
-        <div className='no-scrollbar flex snap-x overflow-x-scroll lg:grid lg:w-auto lg:grid-cols-5 lg:gap-x-10 lg:gap-y-8'>
+        <div className='no-scrollbar grid w-auto grid-cols-4 gap-x-10 gap-y-8 @3xl:grid-cols-5 @7xl:grid-cols-7'>
           {artists.map(artist => (
             <div className='snap-start px-2.5 lg:px-0' key={artist.id}>
               <Artist artist={artist} key={artist.id} />

packages/web/components/CoverRow.tsx

@@ -99,12 +99,12 @@ const CoverRow = ({
   itemSubtitle?: ItemSubTitle
 }) => {
   return (
-    <div className={className}>
+    <div className={cx('@container', className)}>
       {/* Title */}
       {title && <h4 className='mb-6 text-14 font-bold uppercase dark:text-neutral-300'>{title}</h4>}
 
       {/* Items */}
-      <div className='grid grid-cols-3 gap-4 lg:gap-6 xl:grid-cols-4 2xl:grid-cols-5'>
+      <div className='grid grid-cols-3 gap-4 @lg:gap-6 @4xl:grid-cols-4 @7xl:grid-cols-5'>
         {albums?.map(album => (
           <Album key={album.id} album={album} itemTitle={itemTitle} itemSubtitle={itemSubtitle} />
         ))}

packages/web/components/VideoRow.tsx

@@ -3,21 +3,20 @@ import uiStates from '../states/uiStates'
 
 const VideoRow = ({ videos }: { videos: Video[] }) => {
   return (
-    <div className='grid grid-cols-3 gap-6'>
-      {videos.map(video => (
-        <div
-          key={video.vid}
-          onClick={() => (uiStates.playingVideoID = Number(video.vid))}
-        >
-          <img
-            src={video.coverUrl}
-            className='aspect-video w-full rounded-24 border border-white/5 object-contain'
-          />
-          <div className='line-clamp-2 mt-2 text-12 font-medium text-neutral-600'>
-            {video.creator?.at(0)?.userName} - {video.title}
+    <div className='@container'>
+      <div className='grid grid-cols-2 gap-6 @3xl:grid-cols-3 @7xl:grid-cols-4'>
+        {videos.map(video => (
+          <div key={video.vid} onClick={() => (uiStates.playingVideoID = Number(video.vid))}>
+            <img
+              src={video.coverUrl}
+              className='aspect-video w-full rounded-24 border border-white/5 object-contain'
+            />
+            <div className='line-clamp-2 mt-2 text-12 font-medium text-neutral-600'>
+              {video.creator?.at(0)?.userName} - {video.title}
+            </div>
           </div>
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
   )
 }

packages/web/package.json

@@ -24,6 +24,7 @@
     "@emotion/css": "^11.10.5",
     "@sentry/react": "^7.29.0",
     "@sentry/tracing": "^7.29.0",
+    "@tailwindcss/container-queries": "^0.1.0",
     "@tanstack/react-query": "^4.20.9",
     "@tanstack/react-query-devtools": "^4.20.9",
     "ahooks": "^3.7.4",

packages/web/pages/Album/Header.tsx

@@ -37,7 +37,9 @@ const Header = () => {
   const creatorLink = `/artist/${album?.artist.id}`
   const description = isLoadingAppleMusicAlbum
     ? ''
-    : appleMusicAlbum?.editorialNote?.[i18n.language.replace('-', '_')] || album?.description
+    : appleMusicAlbum?.editorialNote?.[i18n.language.replace('-', '_')] ||
+      album?.description ||
+      appleMusicAlbum?.editorialNote?.en_US
   const extraInfo = useMemo(() => {
     const duration = album?.songs?.reduce((acc, cur) => acc + cur.dt, 0) || 0
     const albumDuration = formatDuration(duration, i18n.language, 'hh[hr] mm[min]')

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

@@ -16,7 +16,9 @@ const ArtistInfo = ({ artist, isLoading }: { artist?: Artist; isLoading: boolean
 
   const [isOpenDescription, setIsOpenDescription] = useState(false)
   const description =
-    artistFromApple?.artistBio?.[i18n.language.replace('-', '_')] || artist?.briefDesc
+    artistFromApple?.artistBio?.[i18n.language.replace('-', '_')] ||
+    artist?.briefDesc ||
+    artistFromApple?.artistBio?.en_US
 
   return (
     <div>

packages/web/tailwind.config.js

@@ -121,4 +121,7 @@ module.exports = {
       }
     },
   },
+  plugins: [
+    require('@tailwindcss/container-queries'),
+  ],
 }

packages/web/utils/common.ts

@@ -21,8 +21,8 @@ export function resizeImage(url: string, size: 'xs' | 'sm' | 'md' | 'lg'): strin
     lg: '1024',
   }
 
+  // from Apple Music
   if (url.includes('mzstatic.com')) {
-    // from Apple Music
     return url.replace('{w}', sizeMap[size]).replace('{h}', sizeMap[size])
   }