meow && add song of the day!

README.md

@@ -80,6 +80,17 @@ API_RATE_LIMIT_WINDOW_MS=60000
 API_RATE_LIMIT_MAX=120
 ```
 
+Optional Last.fm song of the day:
+
+```sh
+LASTFM_API_KEY=your-lastfm-api-key
+LASTFM_USERNAME=your-lastfm-username
+LASTFM_HISTORY_FILE=lastfm-song-of-day.json
+```
+
+The server stores daily picks in `UPTIME_STORAGE_DIR` and avoids repeating songs
+until the recent-track pool is exhausted.
+
 ## Reverse proxy / Cloudflare
 
 The server only honours `CF-Connecting-IP`, `X-Forwarded-For`, `X-Forwarded-Proto`,

example.env

@@ -14,6 +14,11 @@ ANALYTICS_DATABASE_FILE=viewers.sqlite
 ANALYTICS_RETENTION_DAYS=30
 ANALYTICS_ACTIVE_WINDOW_SECONDS=75
 
+# Last.fm song of the day. Picks one non-repeated daily track from the configured user's last 7 days.
+LASTFM_API_KEY=
+LASTFM_USERNAME=
+LASTFM_HISTORY_FILE=lastfm-song-of-day.json
+
 API_CACHE_TTL_MS=15000
 API_RATE_LIMIT_WINDOW_MS=60000
 API_RATE_LIMIT_MAX=120

server.cjs

@@ -46,6 +46,9 @@ const UPTIME_HISTORY_LIMIT = Number(process.env.UPTIME_HISTORY_LIMIT || 336)
 const ANALYTICS_DATABASE_FILE = process.env.ANALYTICS_DATABASE_FILE || 'viewers.sqlite'
 const ANALYTICS_RETENTION_DAYS = Number(process.env.ANALYTICS_RETENTION_DAYS || 30)
 const ANALYTICS_ACTIVE_WINDOW_SECONDS = Number(process.env.ANALYTICS_ACTIVE_WINDOW_SECONDS || 75)
+const LASTFM_API_KEY = process.env.LASTFM_API_KEY || ''
+const LASTFM_USERNAME = process.env.LASTFM_USERNAME || ''
+const LASTFM_HISTORY_FILE = process.env.LASTFM_HISTORY_FILE || 'lastfm-song-of-day.json'
 const API_CACHE_TTL_MS = Number(process.env.API_CACHE_TTL_MS || 15000)
 const API_RATE_LIMIT_WINDOW_MS = Number(process.env.API_RATE_LIMIT_WINDOW_MS || 60000)
 const API_RATE_LIMIT_MAX = Number(process.env.API_RATE_LIMIT_MAX || 120)
@@ -123,7 +126,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",
@@ -175,6 +178,112 @@ let uptimeDb = null
 let analyticsDb = null
 let latestUptimeSnapshot = null
 
+function songHistoryPath() {
+  return path.join(uptimeStoragePath(), LASTFM_HISTORY_FILE)
+}
+
+function readSongHistory() {
+  try {
+    return JSON.parse(fs.readFileSync(songHistoryPath(), 'utf8'))
+  } catch {
+    return { picks: [] }
+  }
+}
+
+function writeSongHistory(history) {
+  const storageDir = uptimeStoragePath()
+  fs.mkdirSync(storageDir, { recursive: true })
+  fs.writeFileSync(songHistoryPath(), JSON.stringify(history, null, 2))
+}
+
+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'])
+  return image?.['#text'] || ''
+}
+
+function normalizeLastfmTrack(track) {
+  const artist = track?.artist?.['#text'] || track?.artist?.name || ''
+  const name = track?.name || ''
+  if (!artist || !name) return null
+
+  return {
+    id: `${artist.toLowerCase()}::${name.toLowerCase()}`,
+    artist,
+    name,
+    album: track?.album?.['#text'] || '',
+    url: track?.url || '',
+    image: lastfmImage(track),
+    played_at: track?.date?.uts ? Number(track.date.uts) : null,
+  }
+}
+
+function randomItem(items) {
+  if (!items.length) return null
+  const index = crypto.randomInt(0, items.length)
+  return items[index]
+}
+
+async function songOfTheDay() {
+  if (!LASTFM_API_KEY || !LASTFM_USERNAME) {
+    return {
+      configured: false,
+      error: 'Last.fm is not configured',
+    }
+  }
+
+  const date = todayKey()
+  const history = readSongHistory()
+  const existing = (history.picks || []).find((pick) => pick.date === date)
+  if (existing?.track) {
+    return { configured: true, date, track: existing.track }
+  }
+
+  const to = Math.floor(Date.now() / 1000)
+  const from = to - 7 * 24 * 60 * 60
+  const url = new URL('https://ws.audioscrobbler.com/2.0/')
+  url.searchParams.set('method', 'user.getrecenttracks')
+  url.searchParams.set('user', LASTFM_USERNAME)
+  url.searchParams.set('api_key', LASTFM_API_KEY)
+  url.searchParams.set('format', 'json')
+  url.searchParams.set('from', String(from))
+  url.searchParams.set('to', String(to))
+  url.searchParams.set('limit', '200')
+
+  const result = await requestJson(url.toString(), 10000)
+  const tracks = (result.body?.recenttracks?.track || [])
+    .map(normalizeLastfmTrack)
+    .filter(Boolean)
+
+  const uniqueTracks = Array.from(new Map(tracks.map((track) => [track.id, track])).values())
+  if (!uniqueTracks.length) {
+    return {
+      configured: true,
+      date,
+      error: 'No Last.fm tracks found from the last week',
+    }
+  }
+
+  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)
+  const nextHistory = {
+    picks: [
+      ...(history.picks || []).filter((pick) => pick.date !== date),
+      { date, track },
+    ]
+      .sort((a, b) => String(a.date).localeCompare(String(b.date)))
+      .slice(-366),
+  }
+
+  writeSongHistory(nextHistory)
+  return { configured: true, date, track }
+}
+
 function sendJson(res, status, body, headers = {}) {
   send(res, status, JSON.stringify(body), { ...jsonHeaders, ...headers })
 }
@@ -1792,6 +1901,23 @@ const server = http.createServer((req, res) => {
     return
   }
 
+  if (req.method === 'GET' && req.url === '/api/lastfm/song-of-day') {
+    if (!isSameOriginRequest(req)) {
+      sendJson(res, 403, { error: 'Song of the day is restricted to this site' })
+      return
+    }
+
+    if (isRateLimited(req)) {
+      sendJson(res, 429, { error: 'Too many requests' }, { 'retry-after': String(Math.ceil(API_RATE_LIMIT_WINDOW_MS / 1000)) })
+      return
+    }
+
+    songOfTheDay()
+      .then((data) => sendJson(res, data.error ? 503 : 200, data))
+      .catch((error) => sendJson(res, 502, { configured: Boolean(LASTFM_API_KEY && LASTFM_USERNAME), error: 'Last.fm request failed', detail: error.message }))
+    return
+  }
+
   if (req.method === 'POST' && req.url === '/api/viewers/event') {
     if (!isSameOriginRequest(req)) {
       sendJson(res, 403, { error: 'Analytics events are restricted to this site' })

src/App.jsx

@@ -16,6 +16,7 @@ const apiEndpoints = {
   viewers: '/api/viewers',
   viewerEvent: '/api/viewers/event',
   viewerDelete: '/api/viewers/delete',
+  songOfDay: '/api/lastfm/song-of-day',
   teams: '/api/tss/leaderboard/teams?limit=100',
   teamsHealth: '/api/tss/leaderboard/teams?limit=1',
   resolve: (name) => `/api/tss/teams/resolve?name=${encodeURIComponent(name)}`,
@@ -666,6 +667,7 @@ function AppContent() {
   const [live, setLive] = useState({ status: 'idle', data: null, error: null, updatedAt: 0 })
   const [uptime, setUptime] = useState({ status: 'idle', checks: [], history: [], updatedAt: null })
   const [viewers, setViewers] = useState({ status: 'idle', data: null, error: null, updatedAt: null })
+  const [songOfDay, setSongOfDay] = useState({ status: 'idle', data: null, error: null })
   const [analyticsPreferences, setAnalyticsPreferences] = useState(() => storedAnalyticsPreferences())
   const [theme, setTheme] = useState(() => storedThemePreference())
   const [showFloatingNav, setShowFloatingNav] = useState(() => window.scrollY > 40)
@@ -1006,6 +1008,24 @@ function AppContent() {
     }
   }, [route.page, teams])
 
+  useEffect(() => {
+    if (route.page !== 'home') return
+    if (songOfDay.status === 'ready' || songOfDay.status === 'loading') return
+
+    const controller = new AbortController()
+    setSongOfDay({ status: 'loading', data: null, error: null })
+
+    fetchJson(apiEndpoints.songOfDay, controller.signal)
+      .then((data) => setSongOfDay({ status: 'ready', data, error: null }))
+      .catch((error) => {
+        if (!controller.signal.aborted) {
+          setSongOfDay({ status: 'error', data: null, error: error.message })
+        }
+      })
+
+    return () => controller.abort()
+  }, [route.page, songOfDay.status])
+
   useEffect(() => {
     if (route.page !== 'team' || !route.teamName) return
 
@@ -1388,6 +1408,7 @@ function AppContent() {
             onTeamSearch={handleTeamSearch}
             searchPlaceholder={searchPlaceholder}
             setTeamQuery={setTeamQuery}
+            songOfDay={songOfDay}
             teamSuggestions={teamSuggestions}
             teams={teams}
             teamQuery={teamQuery}
@@ -1760,6 +1781,7 @@ function Landing({
   onTeamSearch,
   searchPlaceholder,
   setTeamQuery,
+  songOfDay,
   teamSuggestions,
   teams,
   teamQuery,
@@ -1829,6 +1851,7 @@ function Landing({
                   Search teams
                 </button>
               </form>
+              <SongOfDayCard songOfDay={songOfDay} />
             </div>
           </div>
 
@@ -1855,6 +1878,61 @@ function Landing({
   )
 }
 
+function SongOfDayCard({ songOfDay }) {
+  const track = songOfDay.data?.track
+  const isLoading = songOfDay.status === 'loading'
+  const message =
+    songOfDay.status === 'error'
+      ? songOfDay.error
+      : songOfDay.data?.error || 'A random track from the last week of Last.fm scrobbles.'
+
+  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">
+          {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
+          </p>
+          {track ? (
+            <>
+              <h2 className="mt-1 truncate text-base font-bold text-text">{track.name}</h2>
+              <p className="truncate text-sm text-text-soft">
+                {track.artist}{track.album ? ` · ${track.album}` : ''}
+              </p>
+            </>
+          ) : (
+            <p className="mt-1 text-sm font-semibold text-text-soft">
+              {isLoading ? 'Choosing a song' : message}
+            </p>
+          )}
+        </div>
+        {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"
+            href={track.url}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Play
+          </a>
+        ) : null}
+      </div>
+    </article>
+  )
+}
+
 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

@@ -1,4 +1,7 @@
 import crypto from 'node:crypto'
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
 import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
@@ -35,6 +38,102 @@ function obfuscate() {
 
 const MAX_TEAM_NAME_LENGTH = 80
 
+function expandHome(filePath) {
+  if (filePath === '~') return os.homedir()
+  if (filePath.startsWith(`~${path.sep}`)) return path.join(os.homedir(), filePath.slice(2))
+  if (filePath.startsWith('~/')) return path.join(os.homedir(), filePath.slice(2))
+  return filePath
+}
+
+function devSongHistoryPath(env) {
+  const storageDir = path.resolve(expandHome(env.UPTIME_STORAGE_DIR || '~/tsswebstorage'))
+  return path.join(storageDir, env.LASTFM_HISTORY_FILE || 'lastfm-song-of-day.json')
+}
+
+function readDevSongHistory(env) {
+  try {
+    return JSON.parse(fs.readFileSync(devSongHistoryPath(env), 'utf8'))
+  } catch {
+    return { picks: [] }
+  }
+}
+
+function writeDevSongHistory(env, history) {
+  const filePath = devSongHistoryPath(env)
+  fs.mkdirSync(path.dirname(filePath), { recursive: true })
+  fs.writeFileSync(filePath, JSON.stringify(history, null, 2))
+}
+
+function normalizeLastfmTrack(track) {
+  const artist = track?.artist?.['#text'] || track?.artist?.name || ''
+  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'])
+
+  return {
+    id: `${artist.toLowerCase()}::${name.toLowerCase()}`,
+    artist,
+    name,
+    album: track?.album?.['#text'] || '',
+    url: track?.url || '',
+    image: image?.['#text'] || '',
+    played_at: track?.date?.uts ? Number(track.date.uts) : null,
+  }
+}
+
+async function devSongOfTheDay(env) {
+  const apiKey = env.LASTFM_API_KEY || ''
+  const username = env.LASTFM_USERNAME || ''
+  if (!apiKey || !username) {
+    return { status: 503, body: { configured: false, error: 'Last.fm is not configured' } }
+  }
+
+  const date = new Date().toISOString().slice(0, 10)
+  const history = readDevSongHistory(env)
+  const existing = (history.picks || []).find((pick) => pick.date === date)
+  if (existing?.track) {
+    return { status: 200, body: { configured: true, date, track: existing.track } }
+  }
+
+  const to = Math.floor(Date.now() / 1000)
+  const from = to - 7 * 24 * 60 * 60
+  const url = new URL('https://ws.audioscrobbler.com/2.0/')
+  url.searchParams.set('method', 'user.getrecenttracks')
+  url.searchParams.set('user', username)
+  url.searchParams.set('api_key', apiKey)
+  url.searchParams.set('format', 'json')
+  url.searchParams.set('from', String(from))
+  url.searchParams.set('to', String(to))
+  url.searchParams.set('limit', '200')
+
+  const response = await fetch(url)
+  if (!response.ok) throw new Error(`HTTP ${response.status}`)
+  const data = await response.json()
+  const tracks = (data?.recenttracks?.track || []).map(normalizeLastfmTrack).filter(Boolean)
+  const uniqueTracks = Array.from(new Map(tracks.map((track) => [track.id, track])).values())
+  if (!uniqueTracks.length) {
+    return { status: 503, body: { configured: true, date, error: 'No Last.fm tracks found from the last week' } }
+  }
+
+  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)]
+  const nextHistory = {
+    picks: [
+      ...(history.picks || []).filter((pick) => pick.date !== date),
+      { date, track },
+    ]
+      .sort((a, b) => String(a.date).localeCompare(String(b.date)))
+      .slice(-366),
+  }
+  writeDevSongHistory(env, nextHistory)
+
+  return { status: 200, body: { configured: true, date, track } }
+}
+
 function sri() {
   return {
     name: 'sri',
@@ -77,6 +176,7 @@ function isAllowedApiUrl(req) {
 
   if (url.pathname === '/api/viewers' && (req.method === 'GET' || req.method === 'HEAD')) return true
   if (url.pathname === '/api/viewers/event' && req.method === 'POST') return true
+  if (url.pathname === '/api/lastfm/song-of-day' && (req.method === 'GET' || req.method === 'HEAD')) return true
 
   if (req.method !== 'GET' && req.method !== 'HEAD') return false
 
@@ -117,16 +217,37 @@ function isAllowedApiUrl(req) {
   }
 }
 
-function apiGuard() {
+function apiGuard(env) {
   return {
     name: 'api-guard',
     configureServer(server) {
-      server.middlewares.use((req, res, next) => {
+      server.middlewares.use(async (req, res, next) => {
         if (!req.url?.startsWith('/api/')) {
           next()
           return
         }
 
+        const url = new URL(req.url, 'http://localhost')
+        if (url.pathname === '/api/lastfm/song-of-day' && req.method === 'GET') {
+          try {
+            const result = await devSongOfTheDay(env)
+            res.writeHead(result.status, {
+              'content-type': 'application/json; charset=utf-8',
+              'cache-control': 'no-store',
+              'x-content-type-options': 'nosniff',
+            })
+            res.end(JSON.stringify(result.body))
+          } catch (error) {
+            res.writeHead(502, {
+              'content-type': 'application/json; charset=utf-8',
+              'cache-control': 'no-store',
+              'x-content-type-options': 'nosniff',
+            })
+            res.end(JSON.stringify({ error: 'Last.fm request failed', detail: error.message }))
+          }
+          return
+        }
+
         if (isAllowedApiUrl(req)) {
           next()
           return
@@ -198,7 +319,7 @@ export default defineConfig(({ mode }) => {
   const comingSoon = String(env.comingsoon || env.COMINGSOON || '').toLowerCase() === 'true'
 
   return {
-    plugins: [comingSoonDev(comingSoon), apiGuard(), react(), tailwindcss(), obfuscate(), sri()],
+    plugins: [comingSoonDev(comingSoon), apiGuard(env), react(), tailwindcss(), obfuscate(), sri()],
     server: {
       host: '0.0.0.0',
       port: 3001,