feat: updates (#1462)

* fix: IconButton disable

* feat(components/Player): heart图标跟随用户喜欢的歌曲变化

* fix(pages/Artist): 对最新发行和EP判断是否存在数据

* fix(utils/player): 音频加载完成后检查id

避免切歌太快，导致已经被切歌音频覆盖当前音频

* update

* fix(utils/player): update

* fix(components/Player): 删掉多余的!!

* _initFM() private

* Update player.ts

Co-authored-by: qier222 <qier222@outlook.com>

src/renderer/components/IconButton.tsx

@@ -14,6 +14,7 @@ const IconButton = ({
   return (
     <button
       onClick={onClick}
+      disabled={disabled}
       className={classNames(
         className,
         'relative transform cursor-default p-1.5 transition duration-200',

src/renderer/components/Player.tsx

@@ -2,6 +2,8 @@ import ArtistInline from '@/components/ArtistsInline'
 import IconButton from '@/components/IconButton'
 import Slider from '@/components/Slider'
 import SvgIcon from '@/components/SvgIcon'
+import useUser from '@/hooks/useUser'
+import useUserLikedSongsIDs from '@/hooks/useUserLikedSongsIDs'
 import { player } from '@/store'
 import { resizeImage } from '@/utils/common'
 import { State as PlayerState, Mode as PlayerMode } from '@/utils/player'
@@ -15,6 +17,12 @@ const PlayingTrack = () => {
     [snappedPlayer.trackListSource]
   )
 
+  // Liked songs ids
+  const { data: user } = useUser()
+  const { data: userLikedSongs } = useUserLikedSongsIDs({
+    uid: user?.account?.id ?? 0,
+  })
+
   const toAlbum = () => {
     const id = track?.al?.id
     if (id) navigate(`/album/${id}`)
@@ -60,7 +68,11 @@ const PlayingTrack = () => {
           <IconButton onClick={() => toast('施工中...')}>
             <SvgIcon
               className='h-6 w-6 text-black dark:text-white'
-              name='heart-outline'
+              name={
+                track?.id && userLikedSongs?.ids?.includes(track.id)
+                  ? 'heart'
+                  : 'heart-outline'
+              }
             />
           </IconButton>
         </div>

src/renderer/pages/Artist.tsx

@@ -179,11 +179,19 @@ const Artist = () => {
     <div>
       <Header artist={artist?.artist} />
 
-      <div className='mt-12 grid h-[20rem] grid-cols-[14rem,_auto] grid-rows-1 gap-16 px-2'>
+      <div
-        <LatestRelease
+        className={classNames(
-          album={albumsRaw?.hotAlbums[0]}
+          'mt-12 px-2',
-          isLoading={isLoadingAlbums}
+          albumsRaw?.hotAlbums?.length !== 0 &&
-        />
+            'grid h-[20rem] grid-cols-[14rem,_auto] grid-rows-1 gap-16'
+        )}
+      >
+        {albumsRaw?.hotAlbums?.length !== 0 && (
+          <LatestRelease
+            album={albumsRaw?.hotAlbums[0]}
+            isLoading={isLoadingAlbums}
+          />
+        )}
 
         <PopularTracks
           tracks={artist?.hotSongs}
@@ -205,15 +213,17 @@ const Artist = () => {
       )}
 
       {/* Singles/EP */}
-      <div className='mt-16 px-2'>
+      {singles.length !== 0 && (
-        <div className='mb-6 text-2xl font-semibold text-gray-800 dark:text-white'>
+        <div className='mt-16 px-2'>
-          单曲和EP
+          <div className='mb-6 text-2xl font-semibold text-gray-800 dark:text-white'>
+            单曲和EP
+          </div>
+          <CoverRow
+            albums={singles.slice(0, 5)}
+            subtitle={Subtitle.TYPE_RELEASE_YEAR}
+          />
         </div>
-        <CoverRow
+      )}
-          albums={singles.slice(0, 5)}
-          subtitle={Subtitle.TYPE_RELEASE_YEAR}
-        />
-      </div>
     </div>
   )
 }

src/renderer/utils/player.ts

@@ -59,7 +59,7 @@ export class Player {
 
   init() {
     this.state = State.READY
-    this.initFM()
+    this._initFM()
   }
 
   /**
@@ -134,6 +134,15 @@ export class Player {
     Howler.volume(this._volume)
   }
 
+  private async _initFM() {
+    const response = await fetchPersonalFMWithReactQuery()
+    this.fmTrackList.push(...(response?.data?.map(r => r.id) ?? []))
+
+    const trackId = this.fmTrackList[0]
+    const track = await this._fetchTrack(trackId)
+    if (track) this.fmTrack = track
+  }
+
   private _setupProgressInterval() {
     this._progressInterval = setInterval(() => {
       if (this.state === State.PLAYING) this._progress = _howler.seek()
@@ -145,9 +154,7 @@ export class Player {
    */
   private async _fetchTrack(trackID: TrackID) {
     const response = await fetchTracksWithReactQuery({ ids: [trackID] })
-    if (response.songs.length) {
+    return response?.songs?.length ? response.songs[0] : null
-      return response.songs[0]
-    }
   }
 
   /**
@@ -187,6 +194,7 @@ export class Player {
       toast('无法播放此歌曲')
       return
     }
+    if (this.trackID !== id) return
     Howler.unload()
     const howler = new Howl({
       src: [`${audio}?id=${id}`],
@@ -393,18 +401,6 @@ export class Player {
     }
   }
 
-  /**
-   * Init personal fm
-   */
-  async initFM() {
-    const response = await fetchPersonalFMWithReactQuery()
-    this.fmTrackList.push(...(response?.data?.map(r => r.id) ?? []))
-
-    const trackId = this.fmTrackList[0]
-    const track = await this._fetchTrack(trackId)
-    if (track) this.fmTrack = track
-  }
-
   /**
    * Trash current PersonalFMTrack
    */