fix: tweak album art color and links to work with dark mode

Author: alexieyizhe

src/components/CoverArt.tsx

@@ -1,10 +1,13 @@
 import { css, keyframes } from 'goober';
 import { FC, memo } from 'react';
+import { TNowPlayingData } from 'services/now-playing';
 
 import { useStoreFocusListeners } from 'services/store/utils';
 import { screen } from 'services/style';
 
-type TCoverArtProps = { link: string; src: string; color: string };
+type TCoverArtProps = Pick<TNowPlayingData, 'link' | 'coverArtSrc'> & {
+  color: string | undefined;
+};
 
 const rotate = keyframes`
     from { transform: rotate(0deg); }
@@ -59,7 +62,7 @@ const CoverArtLink = css`
   }
 `;
 
-const CoverArt: FC<TCoverArtProps> = memo(({ link, src, color }) => {
+const CoverArt: FC<TCoverArtProps> = memo(({ link, coverArtSrc, color }) => {
   return (
     <a
       href={link}
@@ -69,7 +72,7 @@ const CoverArt: FC<TCoverArtProps> = memo(({ link, src, color }) => {
       {...useStoreFocusListeners()}
     >
       <div style={{ color }}>
-        <img src={src} />
+        <img src={coverArtSrc} />
         <span />
       </div>
     </a>

src/components/DynamicCurrentStatus.tsx

@@ -11,6 +11,19 @@ import {
 import CoverArt from 'components/CoverArt';
 import { Text } from 'components/core';
 
+const clamp = (v: number, min: number, max: number) =>
+  Math.max(Math.min(v, max), min);
+
+const hslColor = (color: TNowPlayingData['coverArtColor'] = [0, 0, 0]) => {
+  const [h, s, l] = [
+    color[0],
+    clamp(color[1], 0, 60),
+    // clamp lightness value to make it colorful but still readable
+    clamp(color[1], 50, 70),
+  ];
+  return `hsl(${h}, ${s}%, ${l}%)`;
+};
+
 const nowPlayingMarkup = ({
   name,
   artistName,
@@ -27,20 +40,21 @@ const nowPlayingMarkup = ({
   const label = `${isPodcast ? podcastName : name}${
     hasArtist ? ` by ${artistName}` : ''
   }`;
+  const color = hslColor(coverArtColor);
 
   return [
     ...action.split(' '),
     ...label.split(' ').map((s) => (
       <Text
         bold={s !== 'by'}
         style={{
-          color: coverArtColor,
+          color,
         }}
       >
         {s}
       </Text>
     )),
-    <CoverArt link={link} src={coverArtSrc} color={coverArtColor} />,
+    <CoverArt link={link} coverArtSrc={coverArtSrc} color={color} />,
   ];
 };
 

src/components/DynamicTime.tsx

@@ -52,7 +52,7 @@ const timeToGradient = (hour: number, time: string): TextGradientInfo => {
       return ['120deg', '#5995B7', '#D36C50'];
 
     case '7PM': // sunset
-      return ['145deg', '#477792', '#A8131C'];
+      return ['145deg', '#477792', '#b54800'];
 
     case '8PM':
       return ['120deg', '#2D1D7A', '#5995B7'];

src/services/color.ts

@@ -1,5 +1,5 @@
 // from https://css-tricks.com/converting-color-spaces-in-javascript/
-export const rgbToHsl = ([r, g, b]: number[]) => {
+const rgbToHsl = ([r, g, b]: number[]) => {
   r /= 255;
   g /= 255;
   b /= 255;
@@ -27,17 +27,8 @@ export const rgbToHsl = ([r, g, b]: number[]) => {
   return [h, s, l];
 };
 
-export const rgbToHex = (rgb: Rgb): Hex =>
-  `#${rgb
-    .map((val) => {
-      const hex = val.toString(16);
-      return hex.length === 1 ? `0${hex}` : hex;
-    })
-    .join('')}`;
-
 type Args = {
   amount: number;
-  format: string;
   group: number;
   sample: number;
   canvasBuilder: () => any;
@@ -61,14 +52,12 @@ const getSrc = (item: Item): string =>
 
 const getArgs = ({
   amount = 3,
-  format = 'array',
   group = 20,
   sample = 10,
   canvasBuilder = browserCanvasBuilder,
   imageClass = Image,
 }: ProminentOptions = {}): Args => ({
   amount,
-  format,
   group,
   sample,
   canvasBuilder,
@@ -77,8 +66,7 @@ const getArgs = ({
 
 const format = (input: Input, args: Args): Output => {
   const list = input.map((val) => {
-    const rgb = Array.isArray(val) ? val : (val.split(',').map(Number) as Rgb);
-    return args.format === 'hex' ? rgbToHex(rgb) : rgb;
+    return Array.isArray(val) ? val : (val.split(',').map(Number) as Rgb);
   });
 
   return args.amount === 1 || list.length === 1 ? list[0] : list;
@@ -143,32 +131,23 @@ const processImage = (
       .catch((error) => reject(error))
   );
 
+// from https://github.com/luukdv/color.js
 const prominent = (item: Item, opts?: ProminentOptions) =>
   processImage(getProminent, item, opts);
 
 export const getBestTextColor = async (
   coverArt: string | undefined,
   colorArgs?: ProminentOptions
-): Promise<string> => {
-  if (!coverArt) return '#000';
+): Promise<[h: number, s: number, l: number] | undefined> => {
+  if (!coverArt) return undefined;
 
-  const colors = (await prominent(coverArt, {
+  const colors = ((await prominent(coverArt, {
     amount: 3,
     group: 10,
-    format: 'array',
-    sample: 10,
     ...colorArgs,
-  })) as number[][];
-
-  let [bestH, bestS, bestL] = rgbToHsl(colors[0]);
-  for (const rgb of colors) {
-    const [h, s, l] = rgbToHsl(rgb);
-    if (s > 40) {
-      [bestH, bestS, bestL] = [h, s, l];
-      break;
-    }
-  }
+  })) as number[][]).map(rgbToHsl);
+
+  const saturatedColors = [...colors.filter(([, s]) => s > 10), ...colors];
 
-  // clamp lightness value to preserve both colorfulness and readability
-  return `hsl(${bestH}, ${bestS}%, ${Math.max(Math.min(bestL, 40), 30)}%)`;
+  return saturatedColors[0] as Rgb;
 };

src/services/copy.ts

@@ -70,13 +70,13 @@ export const PAST_EXPERIENCE = [
   {
     label: 'Hack the North',
     href: 'https://hackthenorth.com/',
-    color: '#004f85',
+    color: '#007cba',
   },
   { label: 'Faire', href: 'https://www.faire.com/about', color: 'textPrimary' },
   { label: 'TEDxUW', href: 'https://tedxuw.com/', color: '#c9200c' },
   {
     label: 'Flipp',
     href: 'https://corp.flipp.com/about-us/',
-    color: '#007cba',
+    color: '#0e9cba',
   },
 ];

src/services/now-playing.ts

@@ -8,7 +8,7 @@ export type TNowPlayingData = {
   artistName?: string; // name of artist or undefined if podcast
   podcastName?: string;
   coverArtSrc: string;
-  coverArtColor: string;
+  coverArtColor?: [h: number, s: number, l: number];
   link: string; //  song link, podcast episode link, or playlist link
 };
 

src/services/store/site.ts

@@ -104,7 +104,7 @@ export const createSiteModule = (initialProps: TPageInitialProps) => {
         !!updatedNowPlayingData &&
         updatedNowPlayingData.uri !== lastNowPlayingData?.uri
       ) {
-        console.debug(
+        console.log(
           `Now playing: ${
             updatedNowPlayingData.podcastName ?? updatedNowPlayingData.name
           }`