feat: updates

packages/web/components/TrackListHeader/Cover.tsx

@@ -1,29 +1,40 @@
 import { resizeImage } from '@/web/utils/common'
 import Image from '@/web/components/Image'
-import { memo, useEffect } from 'react'
+import { memo, useEffect, useState } from 'react'
 import uiStates from '@/web/states/uiStates'
 import VideoCover from '@/web/components/VideoCover'
+import ArtworkViewer from '../ArtworkViewer'
+import useSettings from '@/web/hooks/useSettings'
 
-const Cover = memo(
-  ({ cover, videoCover }: { cover?: string; videoCover?: string }) => {
-    useEffect(() => {
-      if (cover) uiStates.blurBackgroundImage = cover
-    }, [cover])
+const Cover = memo(({ cover, videoCover }: { cover?: string; videoCover?: string }) => {
+  useEffect(() => {
+    if (cover) uiStates.blurBackgroundImage = cover
+  }, [cover])
 
-    return (
-      <>
-        <div className='relative aspect-square w-full overflow-hidden rounded-24 '>
-          <Image
-            className='absolute inset-0'
-            src={resizeImage(cover || '', 'lg')}
-          />
+  const [isOpenArtworkViewer, setIsOpenArtworkViewer] = useState(false)
 
-          {videoCover && <VideoCover source={videoCover} />}
-        </div>
-      </>
-    )
-  }
-)
+  return (
+    <>
+      <div
+        onClick={() => {
+          if (cover) setIsOpenArtworkViewer(true)
+        }}
+        className='relative aspect-square w-full overflow-hidden rounded-24'
+      >
+        <Image className='absolute inset-0' src={resizeImage(cover || '', 'lg')} />
+
+        {videoCover && <VideoCover source={videoCover} />}
+      </div>
+
+      <ArtworkViewer
+        type='album'
+        artwork={cover || ''}
+        isOpen={isOpenArtworkViewer}
+        onClose={() => setIsOpenArtworkViewer(false)}
+      />
+    </>
+  )
+})
 Cover.displayName = 'Cover'
 
 export default Cover