re-add per page/leaderboard embed colors

projects/website/src/app/(pages)/leaderboard/[...slug]/page.tsx

@@ -103,14 +103,8 @@ export async function generateViewport(props: Props): Promise<Viewport> {
   }
 
   const color = await getAverageColor(leaderboard.coverImage);
-  if (color === undefined) {
-    return {
-      themeColor: Colors.primary,
-    };
-  }
-
   return {
-    themeColor: color?.hex,
+    themeColor: color.hex,
   };
 }
 

projects/website/src/app/(pages)/player/[...slug]/page.tsx

@@ -117,14 +117,8 @@ export async function generateViewport(props: Props): Promise<Viewport> {
   }
 
   const color = await getAverageColor(player.avatar);
-  if (color === undefined) {
-    return {
-      themeColor: Colors.primary,
-    };
-  }
-
   return {
-    themeColor: color?.hex,
+    themeColor: color.hex,
   };
 }
 

projects/website/src/common/image-utils.ts

@@ -1,4 +1,6 @@
 import { config } from "../../config";
+import ky from "ky";
+import { Colors } from "@/common/colors";
 
 /**
  * Proxies all non-localhost images to make them load faster.
@@ -17,7 +19,11 @@ export function getImageUrl(originalUrl: string) {
  * @returns the average color
  */
 export const getAverageColor = async (src: string) => {
-  return {
-    hex: "#fff",
-  };
+  try {
+    return await ky.get<{ hex: string }>(`${config.siteApi}/image/averagecolor/${encodeURIComponent(src)}`).json();
+  } catch {
+    return {
+      hex: Colors.primary,
+    };
+  }
 };