feat: updates

packages/web/pages/Artist/Artist.tsx

@@ -2,7 +2,7 @@ import Header from './Header'
 import Popular from './Popular'
 import ArtistAlbum from './ArtistAlbums'
 import FansAlsoLike from './FansAlsoLike'
-import ArtistMVs from './ArtistMVs'
+import ArtistVideos from './ArtistVideos'
 
 const Artist = () => {
   return (
@@ -12,7 +12,7 @@ const Artist = () => {
       <div className='mt-10 mb-7.5 h-px w-full bg-white/20'></div>
       <Popular />
       <ArtistAlbum />
-      <ArtistMVs />
+      <ArtistVideos />
       <FansAlsoLike />
 
       {/* Page padding */}

packages/web/pages/Artist/ArtistVideos.tsx

@@ -1,11 +1,11 @@
-import { useNavigate, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import useArtistMV from '@/web/api/hooks/useArtistMV'
 import { useTranslation } from 'react-i18next'
+import uiStates from '@/web/states/uiStates'
 
-const ArtistMVs = () => {
+const ArtistVideos = () => {
   const { t } = useTranslation()
   const params = useParams()
-  const navigate = useNavigate()
   const { data: videos } = useArtistMV({ id: Number(params.id) || 0 })
 
   return (
@@ -16,10 +16,13 @@ const ArtistMVs = () => {
 
       <div className='grid grid-cols-3 gap-6'>
         {videos?.mvs?.slice(0, 6)?.map(video => (
-          <div key={video.id} onClick={() => navigate(`/mv/${video.id}`)}>
+          <div
+            key={video.id}
+            onClick={() => (uiStates.playingVideoID = video.id)}
+          >
             <img
               src={video.imgurl16v9}
-              className='aspect-video w-full rounded-24 object-contain'
+              className='aspect-video w-full rounded-24 border border-white/5 object-contain'
             />
             <div className='mt-2 text-12 font-medium text-neutral-600'>
               {video.name}
@@ -31,4 +34,4 @@ const ArtistMVs = () => {
   )
 }
 
-export default ArtistMVs
+export default ArtistVideos

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

@@ -8,6 +8,7 @@ import { useMemo } from 'react'
 import useArtistMV from '@/web/api/hooks/useArtistMV'
 import { motion } from 'framer-motion'
 import { useTranslation } from 'react-i18next'
+import uiStates from '@/web/states/uiStates'
 
 const Album = ({ album }: { album?: Album }) => {
   const navigate = useNavigate()
@@ -49,14 +50,12 @@ const Album = ({ album }: { album?: Album }) => {
 }
 
 const Video = ({ video }: { video?: any }) => {
-  const navigate = useNavigate()
-
   return (
     <>
       {video && (
         <div
           className='group mt-4 flex rounded-24 bg-white/10 p-2.5 transition-colors duration-400 hover:bg-white/20'
-          onClick={() => navigate(`/mv/${video.id}`)}
+          onClick={() => (uiStates.playingVideoID = video.id)}
         >
           <img
             src={video.imgurl16v9}