feat: change music to be configurable

Author: nicholasgriffintn

apps/web/README.md

@@ -37,6 +37,7 @@ Set these in `apps/web/.env` for local development:
 
 - `GITHUB_TOKEN`
 - `LAST_FM_TOKEN`
+- `MUSIC_WIDGET_PROVIDER` (`apple-music` or `lastfm`; defaults to `apple-music`)
 - `APPLE_MUSIC_USER_TOKEN`
 - `VITE_EMAIL_TURNSTILE_SITE_KEY`
 

apps/web/app/routes.ts

@@ -26,7 +26,7 @@ export default [
   route("anyone-can-draw", "routes/redirect/anyone-can-draw.tsx"),
   // Resource routes
   route("api/spotify", "routes/api/spotify.tsx"),
-  route("api/apple-music", "routes/api/apple-music.tsx"),
+  route("api/music", "routes/api/music.tsx"),
   route("api/github", "routes/api/github.tsx"),
   route("api/projects", "routes/api/projects.tsx"),
   route("api/gists", "routes/api/gists.tsx"),

apps/web/app/routes/_index.tsx

@@ -3,7 +3,7 @@ import type { MetaFunction, LoaderFunctionArgs } from "react-router";
 import { Await, useLoaderData } from "react-router";
 import { ChevronUp } from "lucide-react";
 
-import { getRecentlyPlayed } from "@/lib/apple-music/getRecentlyPlayed";
+import { getRecentlyPlayedMusic } from "@/lib/music/getRecentlyPlayed";
 import { getProjects } from "@/lib/data/projects";
 import { getGitHubRepos } from "@/lib/data/github";
 import { PageLayout } from "@/components/PageLayout";
@@ -28,15 +28,15 @@ export async function loader({ request, context }: LoaderFunctionArgs) {
     executionContext: context?.cloudflare?.ctx,
   };
 
-  const applemusic = getRecentlyPlayed(10, cacheContext).catch(() => null);
+  const music = getRecentlyPlayedMusic(10, cacheContext).catch(() => null);
   const featuredRepos = getGitHubRepos({ limit: 8, cacheContext })
     .then((repos) => repos ?? null)
     .catch(() => null);
   const blogPosts = getPaginatedBlogPosts({ limit: 6 }, cacheContext).catch(() => []);
   const projects = await getProjects();
 
   return {
-    applemusic,
+    music,
     projects,
     featuredRepos,
     blogPosts,
@@ -81,11 +81,11 @@ export default function Home() {
               <Suspense
                 fallback={<LoadingState label="Loading recent tracks..." className="w-full py-6" />}
               >
-                <Await resolve={data.applemusic}>
-                  {(applemusic) => (
+                <Await resolve={data.music}>
+                  {(music) => (
                     <>
-                      <AppleMusicWidget data={applemusic ?? undefined} />
-                      {applemusic && (
+                      <AppleMusicWidget data={music ?? undefined} />
+                      {music && (
                         <div className="text-sm text-muted-foreground text-center inline-flex justify-center w-full mt-5">
                           <span>What I&apos;m listening to</span>
                           <ChevronUp />

apps/web/app/routes/api/apple-music.tsx

@@ -0,0 +1,27 @@
+import type { LoaderFunctionArgs } from "react-router";
+
+import { getRecentlyPlayedMusic } from "@/lib/music/getRecentlyPlayed";
+import { CDN_CACHE_HEADERS } from "@/lib/constants";
+
+export async function loader({ request, context }: LoaderFunctionArgs) {
+  const cacheContext = {
+    request,
+    executionContext: context?.cloudflare?.ctx,
+  };
+
+  const data = await getRecentlyPlayedMusic(10, cacheContext).catch(() => null);
+
+  if (!data) {
+    return Response.json(
+      { error: "Failed to fetch recently played music" },
+      {
+        status: 500,
+        headers: CDN_CACHE_HEADERS,
+      },
+    );
+  }
+
+  return Response.json(data, {
+    headers: CDN_CACHE_HEADERS,
+  });
+}

apps/web/app/routes/api/music.tsx

@@ -5,25 +5,55 @@ import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import "./styles.css";
 
 import { Image } from "@/components/Image";
-import { createWidgetStyles } from "@/lib/apple-music/artwork";
 import imageLoader from "@/lib/imageLoader";
-import type { RecentTracks } from "@/types/apple-music";
+import type { MusicWidgetData, MusicWidgetTrack } from "@/types/music";
 import { PauseIcon } from "@/components/Icons/PauseIcon";
 import { PlayIcon } from "@/components/Icons/PlayIcon";
 
-export function AppleMusicWidget({ data }: { data: RecentTracks | undefined }) {
-  if (!data) {
-    return null;
+function TrackAction({
+  track,
+  isPlaying,
+  className,
+  onToggle,
+}: {
+  track: MusicWidgetTrack;
+  isPlaying: boolean;
+  className: string;
+  onToggle: (track: MusicWidgetTrack) => void;
+}) {
+  if (track.previewUrl) {
+    return (
+      <button
+        type="button"
+        aria-label={`${isPlaying ? "Pause" : "Play preview of"} ${track.name}`}
+        className={className}
+        onClick={() => onToggle(track)}
+        data-playing={isPlaying ? "true" : "false"}
+      >
+        {isPlaying ? <PauseIcon /> : <PlayIcon />}
+      </button>
+    );
   }
 
-  const tracksList = data;
+  if (!track.url) {
+    return null;
+  }
 
-  const firstTrack = tracksList?.length > 0 ? tracksList[0] : null;
-  const firstTrackImage = firstTrack?.attributes.artwork.url
-    ? firstTrack.attributes.artwork.url.replace("{w}", "700").replace("{h}", "245")
-    : null;
-  const widgetStyle = createWidgetStyles(firstTrack?.attributes.artwork);
+  return (
+    <a
+      aria-label={`Open ${track.name}`}
+      className={className}
+      rel="noopener noreferrer nofollow"
+      target="_blank"
+      href={track.url}
+      data-playing="false"
+    >
+      <PlayIcon />
+    </a>
+  );
+}
 
+export function AppleMusicWidget({ data }: { data: MusicWidgetData | undefined }) {
   const [currentTrackId, setCurrentTrackId] = useState<string | null>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const audioRef = useRef<HTMLAudioElement | null>(null);
@@ -72,13 +102,18 @@ export function AppleMusicWidget({ data }: { data: RecentTracks | undefined }) {
     };
   }, []);
 
+  const tracksList = data?.tracks ?? [];
+  const firstTrack = tracksList.length > 0 ? tracksList[0] : null;
+  const firstTrackImage = firstTrack?.artworkUrl ?? null;
+  const widgetStyle = data?.style;
+
   const handleToggleTrack = useCallback(
-    async (track: RecentTracks[number]) => {
-      const previewUrl = track?.attributes?.previews?.[0]?.url;
+    async (track: MusicWidgetTrack) => {
+      const previewUrl = track.previewUrl;
 
       if (!previewUrl) {
-        if (track?.attributes?.url) {
-          window.open(track.attributes.url, "_blank", "noopener,noreferrer");
+        if (track.url) {
+          window.open(track.url, "_blank", "noopener,noreferrer");
         }
         return;
       }
@@ -123,6 +158,10 @@ export function AppleMusicWidget({ data }: { data: RecentTracks | undefined }) {
     [currentTrackId, isPlaying],
   );
 
+  if (!data || !firstTrack) {
+    return null;
+  }
+
   return (
     <div id="applemusic-widget" style={widgetStyle}>
       <Suspense fallback={<div>Loading...</div>}>
@@ -137,7 +176,7 @@ export function AppleMusicWidget({ data }: { data: RecentTracks | undefined }) {
                   }}
                 >
                   <Image
-                    alt={firstTrack.attributes.name}
+                    alt={firstTrack.name}
                     src={imageLoader({
                       src: firstTrackImage,
                       width: 700,
@@ -156,84 +195,70 @@ export function AppleMusicWidget({ data }: { data: RecentTracks | undefined }) {
               <div className="applemusic-widget-latest-overlay">
                 <div className="applemusic-widget-latest-actions">
                   <div className="applemusic-widget-latest-meta">
-                    <h3>{firstTrack.attributes.name}</h3>
-                    <span>{firstTrack.attributes.artistName}</span>
-                    <span>{firstTrack.attributes.albumName}</span>
+                    <h3>{firstTrack.name}</h3>
+                    <span>{firstTrack.artistName}</span>
+                    <span>{firstTrack.albumName}</span>
                   </div>
-                  <button
-                    type="button"
-                    aria-label={`${
-                      isTrackPlaying(firstTrack.id) ? "Pause" : "Play preview of"
-                    } ${firstTrack.attributes.name}`}
+                  <TrackAction
+                    track={firstTrack}
                     className="trackLinkPlay"
-                    onClick={() => handleToggleTrack(firstTrack)}
-                    data-playing={isTrackPlaying(firstTrack.id) ? "true" : "false"}
-                  >
-                    {isTrackPlaying(firstTrack.id) ? <PauseIcon /> : <PlayIcon />}
-                  </button>
+                    isPlaying={isTrackPlaying(firstTrack.id)}
+                    onToggle={handleToggleTrack}
+                  />
                 </div>
               </div>
+              {firstTrack.isNowPlaying ? (
+                <div className="absolute left-0 bottom-0 z-10 bg-[#010517] text-primary-foreground px-1 py-1 text-sm">
+                  <span>Now Playing</span>
+                </div>
+              ) : null}
             </div>
             <div className="applemusic-widget-tracks">
-              {tracksList?.map((track, index) => {
-                if (index !== 0) {
-                  const trackImage = track.attributes.artwork.url
-                    ? track.attributes.artwork.url.replace("{w}", "700").replace("{h}", "245")
-                    : null;
-
-                  const isPlayingTrack = isTrackPlaying(track.id);
-
-                  return (
-                    <div
-                      className="applemusic-widget-track-item"
-                      key={`${track.id}_${track.attributes.issrc}`}
-                    >
-                      <div className="applemusic-widget-track-item-image">
-                        <div className="applemusic-widget-track-item-image-inner">
-                          {trackImage ? (
-                            <Image
-                              width="53"
-                              height="53"
-                              loading="lazy"
-                              alt={track.attributes.albumName}
-                              src={imageLoader({
-                                src: trackImage,
-                                width: 53,
-                              })}
-                              style={{
-                                objectFit: "cover",
-                              }}
-                              unoptimized
-                            />
-                          ) : (
-                            <div
-                              className="applemusic-widget-track-item-image-placeholder"
-                              aria-hidden="true"
-                            />
-                          )}
-                          <button
-                            type="button"
-                            className="applemusic-widget-track-item-play"
-                            onClick={() => handleToggleTrack(track)}
-                            aria-label={`${
-                              isPlayingTrack ? "Pause" : "Play preview of"
-                            } ${track.attributes.name}`}
-                            data-playing={isPlayingTrack ? "true" : "false"}
-                          >
-                            {isPlayingTrack ? <PauseIcon /> : <PlayIcon />}
-                          </button>
-                        </div>
+              {tracksList.slice(1).map((track) => {
+                const isPlayingTrack = isTrackPlaying(track.id);
+
+                return (
+                  <div className="applemusic-widget-track-item" key={track.id}>
+                    <div className="applemusic-widget-track-item-image">
+                      <div className="applemusic-widget-track-item-image-inner">
+                        {track.artworkUrl ? (
+                          <Image
+                            width="53"
+                            height="53"
+                            loading="lazy"
+                            alt={track.albumName}
+                            src={imageLoader({
+                              src: track.artworkUrl,
+                              width: 53,
+                            })}
+                            style={{
+                              objectFit: "cover",
+                            }}
+                            unoptimized
+                          />
+                        ) : (
+                          <div
+                            className="applemusic-widget-track-item-image-placeholder"
+                            aria-hidden="true"
+                          />
+                        )}
+                        <TrackAction
+                          track={track}
+                          className="applemusic-widget-track-item-play"
+                          isPlaying={isPlayingTrack}
+                          onToggle={handleToggleTrack}
+                        />
                       </div>
-                      <div className="applemusic-widget-track-item-content">
-                        <div className="applemusic-widget-track-item-text">
-                          <h3>{track.attributes.name}</h3>
-                          <span>{track.attributes.artistName}</span>
-                          <span>{track.attributes.albumName}</span>
-                        </div>
+                    </div>
+                    <div className="applemusic-widget-track-item-content">
+                      <div className="applemusic-widget-track-item-text">
+                        <h3>{track.name}</h3>
+                        <span>{track.artistName}</span>
+                        <span>{track.albumName}</span>
                       </div>
                     </div>
-                  );
-                }
+                  </div>
+                );
               })}
             </div>
           </>

apps/web/components/AppleMusicWidget/index.tsx

@@ -2,7 +2,12 @@
 // by running `wrangler types --env-interface CloudflareEnv env.d.ts`
 
 interface CloudflareEnv {
-  LAST_FM_TOKEN: string;
+  LAST_FM_TOKEN?: string;
+  MUSIC_WIDGET_PROVIDER?: "apple-music" | "lastfm";
+  APPLE_MUSIC_USER_TOKEN?: string;
+  APPLE_MUSIC_PRIVATE_KEY?: string;
+  APPLE_MUSIC_KEY_ID?: string;
+  APPLE_MUSIC_TEAM_ID?: string;
 }
 
 interface ExecutionContext {

apps/web/env.d.ts

@@ -1,11 +1,12 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 
 import { ensureAccessibleTextColor, sanitizeHexColor, toRgbaString } from "../colors";
-import type { RecentTracks } from "../../types/apple-music";
+import type { MusicWidgetStyleArtwork } from "@/types/music";
 
-type Artwork = RecentTracks[number]["attributes"]["artwork"];
-
-export function getArtworkColor(artwork: Artwork | null | undefined, ...keys): string | null {
+export function getArtworkColor(
+  artwork: MusicWidgetStyleArtwork | null | undefined,
+  ...keys: (keyof MusicWidgetStyleArtwork)[]
+): string | null {
   if (!artwork) {
     return null;
   }
@@ -22,7 +23,9 @@ export function getArtworkColor(artwork: Artwork | null | undefined, ...keys): s
   return null;
 }
 
-export function createWidgetStyles(artwork?: Artwork | null): CSSProperties | undefined {
+export function createWidgetStyles(
+  artwork?: MusicWidgetStyleArtwork | null,
+): CSSProperties | undefined {
   if (!artwork) {
     return undefined;
   }