Refactor AudioPlayer to reset metadata and state on station change, improve WebSocket cleanup logic, and ensure proper title updates for active stations.

src/components/AudioPlayer.jsx

@@ -278,13 +278,12 @@ export default function Player({ user }) {
 
   // Handle station changes: reset and start new stream
   useEffect(() => {
-    setIsPlaying(false);
+    // Reset metadata and state when switching stations
     setTrackTitle("");
     setTrackArtist("");
     setTrackGenre("");
     setTrackAlbum("");
     setCoverArt("/images/radio_art_default.jpg");
-
     setLyrics([]);
     setCurrentLyricIndex(0);
     setElapsedTime(0);
@@ -295,7 +294,8 @@ export default function Player({ user }) {
     lastUpdateTimestamp.current = Date.now();
 
     initializeStream(activeStation);
-    // If no track is loaded, update page title to just station
+
+    // Update page title to reflect the new station
     document.title = `${metaData.title} - Radio [${activeStation}]`;
   }, [activeStation]);
 
@@ -394,6 +394,7 @@ export default function Player({ user }) {
   const initializeWebSocket = useCallback((station) => {
     // Clean up existing WebSocket
     if (wsInstance.current) {
+      wsInstance.current.onclose = null; // Prevent triggering reconnection logic
       wsInstance.current.close();
       wsInstance.current = null;
     }
@@ -481,15 +482,27 @@ export default function Player({ user }) {
   }, []);
 
   useEffect(() => {
-    // ensure the ref points to the current activeStation for in-flight guards
+    // Ensure the ref points to the current activeStation for in-flight guards
     activeStationRef.current = activeStation;
 
+    // Clean up the existing WebSocket connection before initializing a new one
+    const cleanupWebSocket = async () => {
+      if (wsInstance.current) {
+        wsInstance.current.onclose = null; // Prevent triggering reconnection logic
+        wsInstance.current.close();
+        wsInstance.current = null;
+      }
+    };
+
+    cleanupWebSocket().then(() => {
       // Initialize WebSocket connection for metadata
       initializeWebSocket(activeStation);
+    });
 
     return () => {
       // Clean up WebSocket on station change or component unmount
       if (wsInstance.current) {
+        wsInstance.current.onclose = null; // Prevent triggering reconnection logic
         wsInstance.current.close();
         wsInstance.current = null;
       }