fix colors when album has no vibrantColor #1

web/src/App.tsx

@@ -105,10 +105,17 @@ export default function App() {
             <div
               key={album.id}
               className="flex gap-2 p-2"
-              style={{
-                backgroundColor: album.vibrantColor,
-                color: contrastColor,
-              }}
+              style={
+                album.vibrantColor
+                  ? {
+                      backgroundColor: album.vibrantColor,
+                      color: contrastColor,
+                    }
+                  : {
+                      backgroundColor: "white",
+                      color: "black",
+                    }
+              }
             >
               <img
                 src={`/cover/${album.cover}`}
@@ -126,7 +133,11 @@ export default function App() {
               <button
                 type="button"
                 className="cursor-pointer ml-auto mt-auto py-1 px-2"
-                style={{ backgroundColor: oppositeColor, color: contrastColor }}
+                style={
+                  album.vibrantColor
+                    ? { backgroundColor: oppositeColor, color: contrastColor }
+                    : { backgroundColor: "black", color: "white" }
+                }
                 onClick={() => handleDownloadAlbum(album)}
               >
                 Download

web/src/getContrastYIQ.ts

@@ -13,9 +13,9 @@ export function getContrastYIQ(hexcolor: string) {
   }
 
   // Parse RGB values
-  const r = parseInt(hexcolor.substr(0, 2), 16);
-  const g = parseInt(hexcolor.substr(2, 2), 16);
-  const b = parseInt(hexcolor.substr(4, 2), 16);
+  const r = parseInt(hexcolor.substring(0, 2), 16);
+  const g = parseInt(hexcolor.substring(2, 2), 16);
+  const b = parseInt(hexcolor.substring(4, 2), 16);
 
   // Calculate YIQ brightness
   const yiq = (r * 299 + g * 587 + b * 114) / 1000;