perf(deps): replace colorthief with fast-average-color

package.json

@@ -50,8 +50,8 @@
     "react": "^18.2.0"
   },
   "dependencies": {
-    "@pioug/colorthief": "^3.0.1",
     "clsx": "^1.2.1",
+    "fast-average-color": "^9.3.0",
     "use-sync-external-store": "^1.2.0"
   }
 }

src/hooks/useThemeColor.test.ts

@@ -6,7 +6,7 @@ import { useThemeColor } from "./useThemeColor";
 
 vi.mock("../utils/getImageColor", () => {
   return {
-    getImageColor: vi.fn(() => Promise.resolve(["r", "g", "b"])),
+    getImageColor: vi.fn(() => Promise.resolve("calculated")),
   };
 });
 
@@ -28,7 +28,7 @@ describe("`song.theme` is not specified", () => {
     expect(result.current).toBe(defaultThemeColor);
 
     await waitFor(() => {
-      expect(result.current).toBe("rgb(r,g,b)");
+      expect(result.current).toBe("calculated");
     });
   });
 });
@@ -64,7 +64,7 @@ describe('`song.theme` is "auto"', () => {
     expect(result.current).toBe("green");
 
     await waitFor(() => {
-      expect(result.current).toBe("rgb(r,g,b)");
+      expect(result.current).toBe("calculated");
     });
   });
 
@@ -74,7 +74,7 @@ describe('`song.theme` is "auto"', () => {
     expect(result.current).toBe(defaultThemeColor);
 
     await waitFor(() => {
-      expect(result.current).toBe("rgb(r,g,b)");
+      expect(result.current).toBe("calculated");
     });
   });
 });

src/hooks/useThemeColor.ts

@@ -23,10 +23,10 @@ export function useThemeColor(
     if (shouldUseColorThief(song, fallback)) {
       const coverUrl = song!.cover!;
 
-      getImageColor(coverUrl).then(([r, g, b]) => {
+      getImageColor(coverUrl).then((hex) => {
         setCoverColorMap((prev) => ({
           ...prev,
-          [coverUrl]: `rgb(${r},${g},${b})`,
+          [coverUrl]: hex,
         }));
       });
     }

src/utils/getImageColor.ts

@@ -1,20 +1,18 @@
-import ColorThief from "@pioug/colorthief";
+import { FastAverageColor } from "fast-average-color";
 
-let colorThiefSingleton: ColorThief;
+let facSingleton: FastAverageColor;
 
-export function getImageColor(
-  imageUrl: string
-): Promise<[r: number, g: number, b: number]> {
-  const colorThief =
-    colorThiefSingleton ?? (colorThiefSingleton = new ColorThief());
+/**
+ * @returns hex color
+ */
+export function getImageColor(imageUrl: string): Promise<string> {
+  const fac = facSingleton ?? (facSingleton = new FastAverageColor());
 
-  return new Promise((resolve) => {
-    const img = new Image();
-
-    img.onload = () => {
-      resolve(colorThief.getColor(img));
-    };
-    img.crossOrigin = "anonymous";
-    img.src = imageUrl;
-  });
+  return fac
+    .getColorAsync(imageUrl, {
+      ignoredColor: [255, 255, 255, 255], // Ignore white because the default background color of APlayer is white
+    })
+    .then((color) => {
+      return color.hex;
+    });
 }