ai generated solutions to our ai generated problems

server.cjs

@@ -129,7 +129,7 @@ const CSP_DIRECTIVES = [
   "style-src 'self'",
   "style-src-elem 'self'",
   "style-src-attr 'unsafe-inline'",
-  "img-src 'self' data: blob: https://*.basemaps.cartocdn.com https://basemaps.cartocdn.com",
+  "img-src 'self' data: blob: https://*.basemaps.cartocdn.com https://basemaps.cartocdn.com https://lastfm.freetls.fastly.net https://*.lastfm.freetls.fastly.net",
   "font-src 'self' data:",
   "connect-src 'self' https://challenges.cloudflare.com",
   "frame-src https://challenges.cloudflare.com",
@@ -204,6 +204,22 @@ function todayKey() {
   return new Date().toISOString().slice(0, 10)
 }
 
+function lastfmImage(track) {
+  const images = Array.isArray(track.image) ? track.image : []
+  const image = [...images].reverse().find((item) => item?.['#text'])
+  const url = image?.['#text'] || ''
+  if (!url) return ''
+
+  try {
+    const parsed = new URL(url)
+    if (parsed.protocol !== 'https:') return ''
+    if (parsed.hostname !== 'lastfm.freetls.fastly.net' && !parsed.hostname.endsWith('.lastfm.freetls.fastly.net')) return ''
+    return parsed.toString()
+  } catch {
+    return ''
+  }
+}
+
 function normalizeLastfmTrack(track) {
   const artist = track?.artist?.['#text'] || track?.artist?.name || ''
   const name = track?.name || ''
@@ -215,7 +231,7 @@ function normalizeLastfmTrack(track) {
     name,
     album: track?.album?.['#text'] || '',
     url: track?.url || '',
-    image: '',
+    image: lastfmImage(track),
     played_at: track?.date?.uts ? Number(track.date.uts) : null,
   }
 }

src/App.jsx

@@ -1908,18 +1908,7 @@ function SongOfDayCard({ onRetry, songOfDay }) {
   return (
     <article className="mt-3 rounded-lg border border-border bg-fury-white/88 p-3 shadow-sm backdrop-blur">
       <div className="flex items-center gap-3">
-        <div className="grid h-14 w-14 shrink-0 place-items-center overflow-hidden rounded-md border border-border bg-surface">
+        <SongArtwork src={track?.image} />
-          {track?.image ? (
-            <img
-              alt=""
-              className="h-full w-full object-cover"
-              loading="lazy"
-              src={track.image}
-            />
-          ) : (
-            <span className="text-lg font-bold text-fury-cyan">♪</span>
-          )}
-        </div>
         <div className="min-w-0 flex-1">
           <p className="text-xs font-semibold uppercase tracking-wide text-fury-cyan">
             Song of the day
@@ -1960,6 +1949,32 @@ function SongOfDayCard({ onRetry, songOfDay }) {
   )
 }
 
+function SongArtwork({ src }) {
+  const [failed, setFailed] = useState(false)
+  const showImage = src && !failed
+
+  useEffect(() => {
+    setFailed(false)
+  }, [src])
+
+  return (
+    <div className="grid h-14 w-14 shrink-0 place-items-center overflow-hidden rounded-md border border-border bg-surface">
+      {showImage ? (
+        <img
+          alt=""
+          className="h-full w-full object-cover"
+          loading="lazy"
+          onError={() => setFailed(true)}
+          referrerPolicy="no-referrer"
+          src={src}
+        />
+      ) : (
+        <span className="text-lg font-bold text-fury-cyan">♪</span>
+      )}
+    </div>
+  )
+}
+
 function LandingOverview({ teams, matches, navigate }) {
   const activeTeams = teams.slice(0, 4)
   const totalPlayers = matches.reduce((sum, match) => sum + Number(match.player_count || 0), 0)

vite.config.js

@@ -70,13 +70,29 @@ function normalizeLastfmTrack(track) {
   const name = track?.name || ''
   if (!artist || !name) return null
 
+  const images = Array.isArray(track.image) ? track.image : []
+  const image = [...images].reverse().find((item) => item?.['#text'])
+  let imageUrl = ''
+  try {
+    const parsed = new URL(image?.['#text'] || '')
+    if (
+      parsed.protocol === 'https:' &&
+      (parsed.hostname === 'lastfm.freetls.fastly.net' ||
+        parsed.hostname.endsWith('.lastfm.freetls.fastly.net'))
+    ) {
+      imageUrl = parsed.toString()
+    }
+  } catch {
+    imageUrl = ''
+  }
+
   return {
     id: `${artist.toLowerCase()}::${name.toLowerCase()}`,
     artist,
     name,
     album: track?.album?.['#text'] || '',
     url: track?.url || '',
-    image: '',
+    image: imageUrl,
     played_at: track?.date?.uts ? Number(track.date.uts) : null,
   }
 }