{
  "$type": "site.standard.document",
  "canonicalUrl": "https://www.simoncox.com/now/now-listening/",
  "description": "Tracks from Spotify that Simon Cox is litening to at the moment and recently.",
  "path": "/now/now-listening/",
  "publishedAt": "2025-06-09T00:00:00.000Z",
  "site": "at://did:plc:tki7vwlanxbwrz2er67eaeqa/site.standard.publication/3mp4h4md7zv2y",
  "textContent": "What has Simon Cox been listening to?\nDon't judge unless we can all see your own music tastes!\nThis is the list of track I listened to before the ones on the Now page. \n\n<section class=\"tracks\"><i>expLoading into life - give it a moment...</i><img src=\"/assets/img/site/loading.gif\" width=32 height=32 alt=\"Hang on a moment the stuff is loading circular loading gif.\"></section>\n<style>.tracks, .films {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 1fr 1fr;\n}\n.track, .film {\n\tborder:solid 1px #6DA38C;\n\tpadding: 10px; \n}\n\n</style>\n\n<script>\n// Endpoint to get my tracks - thanks Raymond Camden for this!\nvar TRACKS_API = 'https://eo79gghw7wbgdsy.m.pipedream.net';\n\ndocument.addEventListener('DOMContentLoaded', init, false);\n\nasync function init() {\n\tlet tracks = await getTracks();\n\t// while we get 20, limit to 18 as we're doing rows of 3\n\ttracks = tracks.slice(18, 108);\n\n\tlet s = '';\n\ttracks.forEach(t => {\n\t\tlet artists = t.artists.map(a => a.name).join(', ');\n\t\tlet playedTime = timeAgo(t.played_at);\n\n\t\tlet html = \n<section class=\"track\">\n  <a href=\"${t.href}\" target=\"_new\">\n    <img src=\"${t.images[1].url}\" alt=\"${t.name} by ${artists}\">\n    \"${t.name}\"\n  </a> by ${artists}<br>\n  <small>Played ${playedTime}</small>\n</section>\n\t\t;\n\t\ts += html;\n\t});\n\n\tdocument.querySelector('.tracks').innerHTML = s;\n}\n\nasync function getTracks() {\n\t/\n\tI hit the TRACKS_API, but also cache - not that I think people will be hitting this much.\n\tI'll cache for 10 minutes. \n\t/\n\tlet cache = sessionStorage.getItem('tracks');\n\tif(cache) {\n\t\tlet cachedData = JSON.parse(cache);\n\t\tif(cachedData.tracks && cachedData.timestamp) {\n\t\t\tlet now = new Date();\n\t\t\tlet diff = (now.valueOf() - cachedData.timestamp) / (1000 * 60);\n\t\t\tconsole.log('age in minutes is', diff);\n\t\t\tif(diff < 10) return cachedData.tracks;\n\t\t}\n\t} \n\n\tlet resp = await fetch(TRACKS_API);\n\tlet data = await resp.json();\n\t// cache it!\n\tcache = { tracks: data, timestamp: Date.now() };\n\tsessionStorage.setItem('tracks', JSON.stringify(cache));\n\treturn data;\n}\n\n// Helper function to format played_at time\nfunction timeAgo(isoTime) {\n\tconst now = new Date();\n\tconst played = new Date(isoTime);\n\tconst diffMs = now - played;\n\tconst diffMins = Math.floor(diffMs / 60000);\n\n\tif (diffMins < 1) return 'just now';\n\tif (diffMins < 60) return ${diffMins} minute${diffMins !== 1 ? 's' : ''} ago;\n\tconst diffHours = Math.floor(diffMins / 60);\n\tif (diffHours < 24) return ${diffHours} hour${diffHours !== 1 ? 's' : ''} ago;\n\tconst diffDays = Math.floor(diffHours / 24);\n\treturn ${diffDays} day${diffDays !== 1 ? 's' : ''} ago;\n}\n</script>",
  "title": "What is Simon Cox listening to now?"
}