ai generated solutions to our ai generated problems

server.cjs

@@ -130,6 +130,7 @@ const CSP_DIRECTIVES = [
   "style-src-elem 'self'",
   "style-src-attr 'unsafe-inline'",
   "img-src 'self' data: blob: https://*.basemaps.cartocdn.com https://basemaps.cartocdn.com https://lastfm.freetls.fastly.net https://*.lastfm.freetls.fastly.net",
+  "media-src https://*.dzcdn.net https://*.deezer.com",
   "font-src 'self' data:",
   "connect-src 'self' https://challenges.cloudflare.com",
   "frame-src https://challenges.cloudflare.com",
@@ -242,6 +243,65 @@ function randomItem(items) {
   return items[index]
 }
 
+function normalizeComparable(value) {
+  return String(value || '')
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/&/g, ' and ')
+    .replace(/[^a-z0-9]+/g, ' ')
+    .trim()
+}
+
+function previewUrl(value) {
+  if (!value) return ''
+
+  try {
+    const parsed = new URL(value)
+    if (parsed.protocol === 'http:') parsed.protocol = 'https:'
+    if (parsed.protocol !== 'https:') return ''
+    if (!parsed.hostname.endsWith('.dzcdn.net') && !parsed.hostname.endsWith('.deezer.com')) return ''
+    if (!parsed.pathname.endsWith('.mp3')) return ''
+    return parsed.toString()
+  } catch {
+    return ''
+  }
+}
+
+async function findDeezerPreview(track) {
+  if (!track?.artist || !track?.name) return null
+
+  const url = new URL('https://api.deezer.com/search/track')
+  url.searchParams.set('q', `${track.artist} ${track.name}`)
+  url.searchParams.set('limit', '5')
+
+  const result = await requestJson(url.toString(), 8000)
+  const candidates = Array.isArray(result.body?.data) ? result.body.data : []
+  const targetArtist = normalizeComparable(track.artist)
+  const targetTitle = normalizeComparable(track.name)
+
+  const matched = candidates.find((candidate) => {
+    const candidateArtist = normalizeComparable(candidate?.artist?.name)
+    const candidateTitle = normalizeComparable(candidate?.title_short || candidate?.title)
+    if (!candidateArtist || !candidateTitle) return false
+    return (
+      candidateTitle === targetTitle &&
+      (candidateArtist === targetArtist ||
+        candidateArtist.includes(targetArtist) ||
+        targetArtist.includes(candidateArtist))
+    )
+  }) || candidates[0]
+
+  const preview = previewUrl(matched?.preview)
+  if (!preview) return null
+
+  return {
+    preview_url: preview,
+    preview_provider: 'Deezer',
+    preview_track_url: matched?.link || '',
+  }
+}
+
 async function songOfTheDay() {
   if (!LASTFM_API_KEY || !LASTFM_USERNAME) {
     return {
@@ -254,6 +314,17 @@ async function songOfTheDay() {
   const history = readSongHistory()
   const existing = (history.picks || []).find((pick) => pick.date === date)
   if (existing?.track) {
+    if (!existing.track.preview_url) {
+      try {
+        const preview = await findDeezerPreview(existing.track)
+        if (preview) {
+          existing.track = { ...existing.track, ...preview }
+          writeSongHistory(history)
+        }
+      } catch {
+        // The Last.fm card still works without a preview.
+      }
+    }
     return { configured: true, date, track: existing.track }
   }
 
@@ -284,7 +355,13 @@ async function songOfTheDay() {
 
   const previousIds = new Set((history.picks || []).map((pick) => pick.track?.id).filter(Boolean))
   const available = uniqueTracks.filter((track) => !previousIds.has(track.id))
-  const track = randomItem(available.length ? available : uniqueTracks)
+  let track = randomItem(available.length ? available : uniqueTracks)
+  try {
+    const preview = await findDeezerPreview(track)
+    if (preview) track = { ...track, ...preview }
+  } catch {
+    // Preview playback is opportunistic; metadata should still render.
+  }
   const nextHistory = {
     picks: [
       ...(history.picks || []).filter((pick) => pick.date !== date),

src/App.jsx

@@ -1900,10 +1900,37 @@ function Landing({
 function SongOfDayCard({ onRetry, songOfDay }) {
   const track = songOfDay.data?.track
   const isLoading = songOfDay.status === 'loading'
+  const audioRef = useRef(null)
+  const [isPreviewPlaying, setIsPreviewPlaying] = useState(false)
+  const [previewError, setPreviewError] = useState('')
   const message =
     songOfDay.status === 'error'
       ? songOfDay.error
-      : songOfDay.data?.error || 'A random track from the last week of Last.fm scrobbles.'
+      : previewError || songOfDay.data?.error || 'A random track from the last week of Last.fm scrobbles.'
+
+  useEffect(() => {
+    setIsPreviewPlaying(false)
+    setPreviewError('')
+  }, [track?.id, track?.preview_url])
+
+  function togglePreview() {
+    const audio = audioRef.current
+    if (!audio) return
+
+    setPreviewError('')
+    if (!audio.paused) {
+      audio.pause()
+      setIsPreviewPlaying(false)
+      return
+    }
+
+    audio.play()
+      .then(() => setIsPreviewPlaying(true))
+      .catch(() => {
+        setIsPreviewPlaying(false)
+        setPreviewError('Preview could not play')
+      })
+  }
 
   return (
     <article className="mt-3 rounded-lg border border-border bg-fury-white/88 p-3 shadow-sm backdrop-blur">
@@ -1919,6 +1946,23 @@ function SongOfDayCard({ onRetry, songOfDay }) {
               <p className="truncate text-sm text-text-soft">
                 {track.artist}{track.album ? ` · ${track.album}` : ''}
               </p>
+              {previewError ? (
+                <p className="mt-1 text-xs font-semibold text-fury-cyan">{previewError}</p>
+              ) : null}
+              {track.preview_url ? (
+                <audio
+                  onEnded={() => setIsPreviewPlaying(false)}
+                  onError={() => {
+                    setIsPreviewPlaying(false)
+                    setPreviewError('Preview could not load')
+                  }}
+                  onPause={() => setIsPreviewPlaying(false)}
+                  onPlay={() => setIsPreviewPlaying(true)}
+                  preload="none"
+                  ref={audioRef}
+                  src={track.preview_url}
+                />
+              ) : null}
             </>
           ) : (
             <p className="mt-1 text-sm font-semibold text-text-soft">
@@ -1926,6 +1970,15 @@ function SongOfDayCard({ onRetry, songOfDay }) {
             </p>
           )}
         </div>
+        {track?.preview_url ? (
+          <button
+            className="shrink-0 rounded-md border border-ring px-3 py-2 text-sm font-semibold text-fury-cyan transition hover:bg-surface hover:text-text"
+            onClick={togglePreview}
+            type="button"
+          >
+            {isPreviewPlaying ? 'Pause' : 'Preview'}
+          </button>
+        ) : null}
         {track?.url ? (
           <a
             className="shrink-0 rounded-md border border-ring px-3 py-2 text-sm font-semibold text-fury-cyan transition hover:bg-surface hover:text-text"

vite.config.js

@@ -97,6 +97,66 @@ function normalizeLastfmTrack(track) {
   }
 }
 
+function normalizeComparable(value) {
+  return String(value || '')
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/&/g, ' and ')
+    .replace(/[^a-z0-9]+/g, ' ')
+    .trim()
+}
+
+function previewUrl(value) {
+  if (!value) return ''
+
+  try {
+    const parsed = new URL(value)
+    if (parsed.protocol === 'http:') parsed.protocol = 'https:'
+    if (parsed.protocol !== 'https:') return ''
+    if (!parsed.hostname.endsWith('.dzcdn.net') && !parsed.hostname.endsWith('.deezer.com')) return ''
+    if (!parsed.pathname.endsWith('.mp3')) return ''
+    return parsed.toString()
+  } catch {
+    return ''
+  }
+}
+
+async function findDeezerPreview(track) {
+  if (!track?.artist || !track?.name) return null
+
+  const url = new URL('https://api.deezer.com/search/track')
+  url.searchParams.set('q', `${track.artist} ${track.name}`)
+  url.searchParams.set('limit', '5')
+
+  const response = await fetch(url)
+  if (!response.ok) throw new Error(`HTTP ${response.status}`)
+  const body = await response.json()
+  const candidates = Array.isArray(body?.data) ? body.data : []
+  const targetArtist = normalizeComparable(track.artist)
+  const targetTitle = normalizeComparable(track.name)
+  const matched = candidates.find((candidate) => {
+    const candidateArtist = normalizeComparable(candidate?.artist?.name)
+    const candidateTitle = normalizeComparable(candidate?.title_short || candidate?.title)
+    if (!candidateArtist || !candidateTitle) return false
+    return (
+      candidateTitle === targetTitle &&
+      (candidateArtist === targetArtist ||
+        candidateArtist.includes(targetArtist) ||
+        targetArtist.includes(candidateArtist))
+    )
+  }) || candidates[0]
+
+  const preview = previewUrl(matched?.preview)
+  if (!preview) return null
+
+  return {
+    preview_url: preview,
+    preview_provider: 'Deezer',
+    preview_track_url: matched?.link || '',
+  }
+}
+
 async function devSongOfTheDay(env) {
   const apiKey = env.LASTFM_API_KEY || ''
   const username = env.LASTFM_USERNAME || ''
@@ -108,6 +168,17 @@ async function devSongOfTheDay(env) {
   const history = readDevSongHistory(env)
   const existing = (history.picks || []).find((pick) => pick.date === date)
   if (existing?.track) {
+    if (!existing.track.preview_url) {
+      try {
+        const preview = await findDeezerPreview(existing.track)
+        if (preview) {
+          existing.track = { ...existing.track, ...preview }
+          writeDevSongHistory(env, history)
+        }
+      } catch {
+        // The card still works without a preview.
+      }
+    }
     return { status: 200, body: { configured: true, date, track: existing.track } }
   }
 
@@ -134,7 +205,13 @@ async function devSongOfTheDay(env) {
   const previousIds = new Set((history.picks || []).map((pick) => pick.track?.id).filter(Boolean))
   const available = uniqueTracks.filter((track) => !previousIds.has(track.id))
   const pool = available.length ? available : uniqueTracks
-  const track = pool[crypto.randomInt(0, pool.length)]
+  let track = pool[crypto.randomInt(0, pool.length)]
+  try {
+    const preview = await findDeezerPreview(track)
+    if (preview) track = { ...track, ...preview }
+  } catch {
+    // Preview playback is opportunistic; metadata should still render.
+  }
   const nextHistory = {
     picks: [
       ...(history.picks || []).filter((pick) => pick.date !== date),