Fix memory leaks by cleaning up object URLs in webamp package

This commit addresses object URL memory leaks by ensuring proper cleanup:

1. Track URLs: Added cleanup in tracks reducer when tracks are removed
   - REMOVE_TRACKS action now revokes object URLs for removed tracks
   - REMOVE_ALL_TRACKS action cleans up all object URLs

2. Album art URLs: Clean up old album art URLs when they are replaced
   - SET_MEDIA_TAGS action revokes old album art URL if being replaced

3. Skin URLs: setSkinFromUrl now detects and cleans up object URLs
   - Automatically revokes blob: URLs after fetch completes

4. Skin parser: fallbackGetImgFromBlob now cleans up after image loads
   - Object URL is revoked once image loading completes or fails

These changes prevent memory leaks when users:
- Add/remove tracks with blob URLs
- Change tracks with album art
- Load custom skins from files
- Parse skin images

Fixes object URL cleanup as noted in TODO comments in playlist.ts

Author: claude

packages/webamp/js/actionCreators/files.ts

@@ -116,6 +116,7 @@ export function setSkinFromBlob(blob: Blob | Promise<Blob>): Thunk {
 export function setSkinFromUrl(url: string): Thunk {
   return async (dispatch) => {
     dispatch({ type: "LOADING" });
+    const isObjectUrl = url.startsWith("blob:");
     try {
       const response = await fetch(url);
       if (!response.ok) {
@@ -126,6 +127,11 @@ export function setSkinFromUrl(url: string): Thunk {
       console.error(e);
       dispatch({ type: "LOADED" });
       alert(`Failed to download skin from ${url}`);
+    } finally {
+      // Clean up object URL if one was created
+      if (isObjectUrl) {
+        URL.revokeObjectURL(url);
+      }
     }
   };
 }

packages/webamp/js/reducers/playlist.ts

@@ -74,7 +74,6 @@ const playlist = (
         ),
       };
     case "REMOVE_ALL_TRACKS":
-      // TODO: Consider disposing of ObjectUrls
       return {
         ...state,
         trackOrder: [],
@@ -83,7 +82,6 @@ const playlist = (
         lastSelectedIndex: null,
       };
     case "REMOVE_TRACKS":
-      // TODO: Consider disposing of ObjectUrls
       const actionIds = new Set((action as any).ids.map(Number));
       const { currentTrack } = state;
       return {

packages/webamp/js/reducers/tracks.ts

@@ -88,7 +88,7 @@ const tracks = (
         },
       };
     }
-    case "SET_MEDIA_TAGS":
+    case "SET_MEDIA_TAGS": {
       const track = state[(action as any).id];
       const {
         sampleRate,
@@ -100,6 +100,16 @@ const tracks = (
         albumArtUrl,
       } = action as any;
       const { kbps, khz, channels } = track;
+
+      // Clean up old album art URL if it's being replaced
+      if (
+        track.albumArtUrl &&
+        track.albumArtUrl.startsWith("blob:") &&
+        track.albumArtUrl !== albumArtUrl
+      ) {
+        URL.revokeObjectURL(track.albumArtUrl);
+      }
+
       return {
         ...state,
         [(action as any).id]: {
@@ -114,6 +124,42 @@ const tracks = (
           channels: numberOfChannels != null ? numberOfChannels : channels,
         },
       };
+    }
+    case "REMOVE_TRACKS": {
+      const actionIds = (action as any).ids;
+      const newState = { ...state };
+
+      // Clean up object URLs for removed tracks
+      actionIds.forEach((id: number) => {
+        const track = state[id];
+        if (track) {
+          // Revoke track URL if it's an object URL
+          if (track.url && track.url.startsWith("blob:")) {
+            URL.revokeObjectURL(track.url);
+          }
+          // Revoke album art URL if it's an object URL
+          if (track.albumArtUrl && track.albumArtUrl.startsWith("blob:")) {
+            URL.revokeObjectURL(track.albumArtUrl);
+          }
+          delete newState[id];
+        }
+      });
+
+      return newState;
+    }
+    case "REMOVE_ALL_TRACKS": {
+      // Clean up all object URLs
+      Object.values(state).forEach((track) => {
+        if (track.url && track.url.startsWith("blob:")) {
+          URL.revokeObjectURL(track.url);
+        }
+        if (track.albumArtUrl && track.albumArtUrl.startsWith("blob:")) {
+          URL.revokeObjectURL(track.albumArtUrl);
+        }
+      });
+
+      return {};
+    }
     default:
       return state;
   }

packages/webamp/js/skinParserUtils.ts

@@ -55,8 +55,15 @@ export async function getFileFromZip(
   }
 }
 
-function fallbackGetImgFromBlob(blob: Blob): Promise<HTMLImageElement> {
-  return Utils.imgFromUrl(URL.createObjectURL(blob));
+async function fallbackGetImgFromBlob(blob: Blob): Promise<HTMLImageElement> {
+  const url = URL.createObjectURL(blob);
+  try {
+    const img = await Utils.imgFromUrl(url);
+    return img;
+  } finally {
+    // Clean up the object URL after the image has loaded (or failed to load)
+    URL.revokeObjectURL(url);
+  }
 }
 
 export async function getImgFromBlob(