fix: bugs (#1503)

* fix: 限制FMCard上的歌名长度

避免曲名过长将其他部分顶出卡片外

* fix: Library取词逻辑

* fix: 歌词页面Player UI

* fix: 搜索页面专辑发布日期

* fix: 修复私人FM启动时总是加载新的数据，导致数据过多的问题

* update

* 更改FM的初始化顺序

* Update player.ts

* fix: 将FMCard的歌名长度限制为两行

src/renderer/components/FMCard.tsx

@@ -102,7 +102,9 @@ const FMCard = () => {
         {/* Track info */}
         <div>
           {track ? (
-            <div className='text-xl font-semibold'>{track?.name}</div>
+            <div className='line-clamp-2 text-xl font-semibold'>
+              {track?.name}
+            </div>
           ) : (
             <div className='flex'>
               <div className='bg-gray-200 text-xl text-transparent dark:bg-white/5'>

src/renderer/components/Lyric/Player.tsx

@@ -29,8 +29,11 @@ const PlayingTrack = () => {
     () => playerSnapshot.trackListSource,
     [playerSnapshot.trackListSource]
   )
+
+  const hasListSource = playerSnapshot.mode !== PlayerMode.FM && trackListSource?.type
+
   const toTrackListSource = () => {
-    if (!trackListSource?.type) return
+    if (!hasListSource) return
 
     navigate(`/${trackListSource.type}/${trackListSource.id}`)
     state.uiStates.showLyricPanel = false
@@ -40,19 +43,24 @@ const PlayingTrack = () => {
     <div>
       <div
         onClick={toTrackListSource}
-        className='line-clamp-1 text-[22px] font-semibold text-white hover:underline'
+        className={classNames(
+          'line-clamp-1 text-[22px] font-semibold text-white',
+          hasListSource && 'hover:underline'
+        )}
       >
         {track?.name}
       </div>
       <div className='line-clamp-1 -mt-0.5 inline-flex max-h-7 text-white opacity-60'>
         <ArtistInline artists={track?.ar ?? []} />
-        <span>
-          {' '}
-          -{' '}
-          <span onClick={toAlbum} className='hover:underline'>
-            {track?.al.name}
+        {!!track?.al?.id && (
+          <span>
+            {' '}
+            -{' '}
+            <span onClick={toAlbum} className='hover:underline'>
+              {track?.al.name}
+            </span>
           </span>
-        </span>
+        )}
       </div>
     </div>
   )

src/renderer/pages/Library.tsx

@@ -40,7 +40,7 @@ const LikedTracksCard = ({ className }: { className?: string }) => {
         chunk(
           lyric?.lrc.lyric
             ?.split('\n')
-            ?.map(l => l.split(']')[1]?.trim())
+            ?.map(l => l.split(']').pop()?.trim())
             ?.filter(
               l =>
                 l &&

src/renderer/pages/Search/Search.tsx

@@ -8,6 +8,7 @@ import Cover from '@/renderer/components/Cover'
 import TrackGrid from '@/renderer/components/TracksGrid'
 import { player } from '@/renderer/store'
 import { resizeImage } from '@/renderer/utils/common'
+import dayjs from 'dayjs'
 
 const Artists = ({ artists }: { artists: Artist[] }) => {
   const navigate = useNavigate()
@@ -62,7 +63,7 @@ const Albums = ({ albums }: { albums: Album[] }) => {
               {album.name}
             </div>
             <div className='mt-0.5 text-sm font-medium text-gray-500  dark:text-gray-400'>
-              专辑 · {album?.artist.name} · 2020
+              专辑 · {album?.artist.name} · {dayjs(album.publishTime).year()}
             </div>
           </div>
         </div>

src/renderer/utils/player.ts

@@ -152,12 +152,13 @@ export class Player {
   }
 
   private async _initFM() {
-    const response = await fetchPersonalFMWithReactQuery()
-    this.fmTrackList.push(...(response?.data?.map(r => r.id) ?? []))
+    if (this.fmTrackList.length === 0) await this._loadMoreFMTracks()
 
     const trackId = this.fmTrackList[0]
     const track = await this._fetchTrack(trackId)
     if (track) this.fmTrack = track
+
+    this._loadMoreFMTracks()
   }
 
   private _setupProgressInterval() {
@@ -255,12 +256,6 @@ export class Player {
   }
 
   private async _nextFMTrack() {
-    const loadMoreTracks = async () => {
-      if (this.fmTrackList.length <= 5) {
-        const response = await fetchPersonalFMWithReactQuery()
-        this.fmTrackList.push(...(response?.data?.map(r => r.id) ?? []))
-      }
-    }
     const prefetchNextTrack = async () => {
       const prefetchTrackID = this.fmTrackList[1]
       const track = await this._fetchTrack(prefetchTrackID)
@@ -271,13 +266,20 @@ export class Player {
     }
 
     this.fmTrackList.shift()
-    if (this.fmTrackList.length === 0) await loadMoreTracks()
+    if (this.fmTrackList.length === 0) await this._loadMoreFMTracks()
     this._playTrack()
 
-    this.fmTrackList.length <= 1 ? await loadMoreTracks() : loadMoreTracks()
+    this.fmTrackList.length <= 1 ? await this._loadMoreFMTracks() : this._loadMoreFMTracks()
     prefetchNextTrack()
   }
 
+  private async _loadMoreFMTracks() {
+    if (this.fmTrackList.length <= 5) {
+      const response = await fetchPersonalFMWithReactQuery()
+      this.fmTrackList.push(...(response?.data?.map(r => r.id) ?? []))
+    }
+  }
+
   /**
    * Play current track
    * @param {boolean} fade fade in