Refactor lyrics fetching logic in AudioPlayer to improve performance and prevent unnecessary state updates on track changes.

src/components/AudioPlayer.jsx

@@ -319,39 +319,6 @@ export default function Player({ user }) {
     return parsedLyrics.sort((a, b) => a.timestamp - b.timestamp);
   }, []);
 
-  const fetchLyrics = useCallback(async (trackData, requestStation) => {
-    try {
-      const lyricsResponse = await fetch(`${API_URL}/lyric/search`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          a: trackData.artist,
-          s: trackData.song,
-          excluded_sources: [],
-          extra: false,
-          lrc: true,
-          src: 'WEB-RADIO',
-        }),
-      });
-      const lyricsData = await lyricsResponse.json();
-
-      // Guard against station or track changes during lyrics fetch
-      if (requestStation !== activeStationRef.current || trackData.uuid !== currentTrackUuid.current) return;
-
-      if (!lyricsData.err && Array.isArray(lyricsData.lrc)) {
-        const parsedLyrics = lyricsData.lrc.map(({ timeTag, words }) => {
-          const [mins, rest] = timeTag.split(':');
-          const secs = parseFloat(rest);
-          return { timestamp: Number(mins) * 60 + secs, line: words };
-        });
-        setLyrics(parsedLyrics);
-        setCurrentLyricIndex(0);
-      }
-    } catch (error) {
-      console.error('Error fetching lyrics:', error);
-    }
-  }, []);
-
   const handleTrackData = useCallback((trackData) => {
     const requestStation = activeStationRef.current;
 
@@ -374,9 +341,6 @@ export default function Player({ user }) {
 
       // Refresh queue when track changes
       fetchQueue();
-
-      // Fetch lyrics for the new track
-      fetchLyrics(trackData, requestStation);
     } else {
       // Same track - update duration and elapsed time
       setTrackDuration(trackData.duration || 0);
@@ -387,7 +351,7 @@ export default function Player({ user }) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetchLyrics]);
+  }, []);
 
   const initializeWebSocket = useCallback((station) => {
     // Clean up existing WebSocket
@@ -398,7 +362,6 @@ export default function Player({ user }) {
     }
 
     const connectWebSocket = (retryCount = 0) => {
-      const maxRetries = 5;
       const baseDelay = 1000; // 1 second
       const maxDelay = 30000; // 30 seconds
 
@@ -415,6 +378,8 @@ export default function Player({ user }) {
 
           if (data.type === 'track_change') {
             // Handle track change
+            setLyrics([]);
+            setCurrentLyricIndex(0);
             handleTrackData(data.data);
           } else if (data.type === 'lrc') {
             // Handle LRC data
@@ -435,17 +400,11 @@ export default function Player({ user }) {
         if (event.code === 1000) return;
 
         // Attempt reconnection with exponential backoff
-        if (retryCount < maxRetries) {
-          const delay = Math.min(baseDelay * Math.pow(2, retryCount), maxDelay);
+        const delay = Math.min(baseDelay * Math.pow(2, retryCount), maxDelay);
 
-          setTimeout(() => {
-            connectWebSocket(retryCount + 1);
-          }, delay);
-        } else {
-          console.error('Max WebSocket reconnection attempts reached');
-          setTrackTitle('Connection lost');
-          setLyrics([]);
-        }
+        setTimeout(() => {
+          connectWebSocket(retryCount + 1);
+        }, delay);
       };
 
       ws.onerror = function (error) {