🏃 Spotify Running

Find the perfect BPM for your run

\n \n Login with Spotify\n \n

\n );\n}\n\nfunction PlayerPage() {\n const data = useLoaderData() as {\n accessToken: string;\n displayName: string;\n sessionId: string;\n spotifyUserId: string;\n };\n\n const [bpm, setBpm] = useState(150);\n const [isPlaying, setIsPlaying] = useState(false);\n const [currentTrack, setCurrentTrack] = useState(null);\n const [deviceId, setDeviceId] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [sdkReady, setSdkReady] = useState(false);\n const playerRef = useRef(null);\n const searchOffsetRef = useRef(0);\n\n // Initialize Spotify Web Playback SDK\n useEffect(() => {\n const script = document.createElement(\"script\");\n script.src = \"https://sdk.scdn.co/spotify-player.js\";\n script.async = true;\n document.body.appendChild(script);\n\n (window as any).onSpotifyWebPlaybackSDKReady = () => {\n const player = new (window as any).Spotify.Player({\n name: \"Spotify Running\",\n getOAuthToken: (cb: (token: string) => void) => cb(data.accessToken),\n volume: 0.8,\n });\n\n player.addListener(\"ready\", ({ device_id }: { device_id: string }) => {\n setDeviceId(device_id);\n setSdkReady(true);\n });\n\n player.addListener(\"not_ready\", () => {\n setSdkReady(false);\n setDeviceId(null);\n });\n\n player.addListener(\"player_state_changed\", (state: any) => {\n if (!state) return;\n setIsPlaying(!state.paused);\n if (state.track_window?.current_track) {\n const t = state.track_window.current_track;\n setCurrentTrack({\n id: t.id,\n name: t.name,\n artist: t.artists.map((a: any) => a.name).join(\", \"),\n album: t.album.name,\n image: t.album.images?.[0]?.url,\n uri: t.uri,\n });\n }\n });\n\n player.addListener(\"initialization_error\", ({ message }: any) => {\n setError(`Player init error: ${message}`);\n });\n\n player.addListener(\"authentication_error\", ({ message }: any) => {\n setError(`Auth error: ${message}. Try logging in again.`);\n });\n\n player.connect();\n playerRef.current = player;\n };\n\n return () => {\n if (playerRef.current) playerRef.current.disconnect();\n };\n }, [data.accessToken]);\n\n const findAndPlay = useCallback(async () => {\n if (!deviceId) {\n setError(\"Waiting for player to connect...\");\n return;\n }\n setLoading(true);\n setError(null);\n try {\n const results = await fetch(`/api/search?bpm=${bpm}&offset=${searchOffsetRef.current}`, {\n headers: { \"X-Session-Id\": data.sessionId },\n }).then(r => r.json());\n\n if (results.error) throw new Error(results.error);\n if (!results.tracks?.length) {\n setError(\"No tracks found at this BPM. Try a different tempo!\");\n setLoading(false);\n return;\n }\n\n const track = results.tracks[Math.floor(Math.random() * results.tracks.length)];\n\n await fetch(\"/api/play\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\", \"X-Session-Id\": data.sessionId },\n body: JSON.stringify({\n trackUri: track.uri,\n deviceId,\n bpm,\n trackName: track.name,\n artistName: track.artist,\n trackId: track.id,\n }),\n });\n\n searchOffsetRef.current += 1;\n setIsPlaying(true);\n } catch (e: any) {\n setError(e.message);\n } finally {\n setLoading(false);\n }\n }, [bpm, deviceId, data.sessionId]);\n\n // Auto-play when SDK is ready\n useEffect(() => {\n if (sdkReady && !currentTrack) {\n findAndPlay();\n }\n }, [sdkReady]);\n\n const togglePlayPause = useCallback(async () => {\n if (!playerRef.current) return;\n await playerRef.current.togglePlay();\n }, []);\n\n const skipTrack = useCallback(async () => {\n await findAndPlay();\n }, [findAndPlay]);\n\n const heartTrack = useCallback(async () => {\n if (!currentTrack) return;\n try {\n await fetch(\"/api/like\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\", \"X-Session-Id\": data.sessionId },\n body: JSON.stringify({ trackUri: currentTrack.uri }),\n });\n setCurrentTrack((prev: any) => prev ? { ...prev, liked: true } : prev);\n } catch (e: any) {\n setError(e.message);\n }\n }, [currentTrack, data.sessionId]);\n\n const adjustBpm = useCallback((delta: number) => {\n setBpm(prev => Math.max(80, Math.min(220, prev + delta)));\n searchOffsetRef.current = 0;\n }, []);\n\n // When BPM changes, find a new track after a short debounce\n const prevBpmRef = useRef(bpm);\n useEffect(() => {\n if (prevBpmRef.current !== bpm && sdkReady) {\n prevBpmRef.current = bpm;\n const timer = setTimeout(() => findAndPlay(), 500);\n return () => clearTimeout(timer);\n }\n }, [bpm, sdkReady, findAndPlay]);\n\n return (\n

\n {/* Header */}\n

\n {data.displayName}\n {\" · \"}\n Logout\n

\n\n {/* Track Info */}\n

\n {currentTrack ? (\n

\n {currentTrack.image && (\n \n )}\n

{currentTrack.name}

{currentTrack.artist}

\n ) : (\n

\n 🏃\n

\n )}\n

\n\n {/* BPM Display */}\n

\n adjustBpm(-5)}\n className=\"w-16 h-16 rounded-full bg-gray-800 hover:bg-gray-700 text-3xl font-bold transition-colors flex items-center justify-center\"\n >\n −\n \n

{bpm}

BPM

\n adjustBpm(5)}\n className=\"w-16 h-16 rounded-full bg-gray-800 hover:bg-gray-700 text-3xl font-bold transition-colors flex items-center justify-center\"\n >\n +\n \n

\n\n {/* Playback Controls */}\n

\n \n {currentTrack?.liked ? \"❤️\" : \"🤍\"}\n \n \n ⏭\n \n \n {isPlaying ? \"⏸\" : \"▶️\"}\n \n

\n\n {/* Status */}\n {loading &&

Finding a track…

}\n {error &&

{error}

}\n {!sdkReady && !error &&

Connecting to Spotify…

}\n

\n );\n}\n\n// ─── Routes ─────────────────────────────────────────────────────────\n\nexport const routes = defineRoutes([\n { path: \"/\", Component: LoginPage, loader: \"./loaders/login.ts\" },\n { path: \"/player\", Component: PlayerPage, loader: \"./loaders/player.ts\" },\n]);\n\n// ─── App ────────────────────────────────────────────────────────────\n\nexport default createApp({\n routes,\n head: `\n Spotify Running\n \n \n `,\n setup: (app) => {\n // OAuth callback\n app.get(\"/callback\", async (c) => {\n await initDatabase();\n const code = c.req.query(\"code\");\n if (!code) return c.text(\"Missing code\", 400);\n\n try {\n const redirectUri = getRedirectUri(c.req.raw);\n const tokenData = await exchangeCode(code, redirectUri);\n const me = await getMe(tokenData.access_token);\n const sessionId = crypto.randomUUID();\n\n await upsertSession({\n id: sessionId,\n spotify_user_id: me.id,\n access_token: tokenData.access_token,\n refresh_token: tokenData.refresh_token,\n expires_at: Date.now() + tokenData.expires_in * 1000,\n display_name: me.display_name || me.id,\n });\n\n return new Response(\"\", {\n status: 302,\n headers: new Headers([\n [\"Location\", \"/player\"],\n [\"Set-Cookie\", `session_id=${sessionId}; Path=/; HttpOnly; SameSite=Lax; Max-Age=2592000`],\n ]),\n });\n } catch (e: any) {\n return c.text(`Auth error: ${e.message}`, 500);\n }\n });\n\n // Logout\n app.get(\"/logout\", (c) => {\n return new Response(\"\", {\n status: 302,\n headers: new Headers([\n [\"Location\", \"/\"],\n [\"Set-Cookie\", \"session_id=; Path=/; HttpOnly; Max-Age=0\"],\n ]),\n });\n });\n\n // API: Search tracks by BPM\n app.get(\"/api/search\", async (c) => {\n await initDatabase();\n const sessionId = c.req.header(\"X-Session-Id\");\n if (!sessionId) return c.json({ error: \"Unauthorized\" }, 401);\n const session = await getSession(sessionId);\n if (!session) return c.json({ error: \"Session expired\" }, 401);\n\n const token = await getValidToken(session);\n const bpm = parseInt(c.req.query(\"bpm\") || \"150\");\n const offset = parseInt(c.req.query(\"offset\") || \"0\");\n\n try {\n const recentlyPlayed = await getRecentlyPlayed(session.spotify_user_id);\n const results = await searchRunningTracks(token, bpm, offset);\n const tracks = (results.tracks?.items || [])\n .filter((t: any) => t && !recentlyPlayed.includes(t.id))\n .map((t: any) => ({\n id: t.id,\n name: t.name,\n artist: t.artists?.map((a: any) => a.name).join(\", \") || \"Unknown\",\n album: t.album?.name || \"\",\n image: t.album?.images?.[0]?.url || \"\",\n uri: t.uri,\n }));\n return c.json({ tracks });\n } catch (e: any) {\n return c.json({ error: e.message }, 500);\n }\n });\n\n // API: Play a track\n app.post(\"/api/play\", async (c) => {\n await initDatabase();\n const sessionId = c.req.header(\"X-Session-Id\");\n if (!sessionId) return c.json({ error: \"Unauthorized\" }, 401);\n const session = await getSession(sessionId);\n if (!session) return c.json({ error: \"Session expired\" }, 401);\n\n const token = await getValidToken(session);\n const body = await c.req.json();\n\n try {\n await playTrack(token, body.trackUri, body.deviceId);\n await recordPlay({\n spotify_user_id: session.spotify_user_id,\n track_id: body.trackId,\n track_name: body.trackName,\n artist_name: body.artistName,\n bpm: body.bpm,\n });\n return c.json({ ok: true });\n } catch (e: any) {\n return c.json({ error: e.message }, 500);\n }\n });\n\n // API: Like a track\n app.post(\"/api/like\", async (c) => {\n await initDatabase();\n const sessionId = c.req.header(\"X-Session-Id\");\n if (!sessionId) return c.json({ error: \"Unauthorized\" }, 401);\n const session = await getSession(sessionId);\n if (!session) return c.json({ error: \"Session expired\" }, 401);\n\n const token = await getValidToken(session);\n const body = await c.req.json();\n\n try {\n await saveTrack(token, body.trackUri);\n return c.json({ ok: true });\n } catch (e: any) {\n return c.json({ error: e.message }, 500);\n }\n });\n },\n});\n","deleted","label",[102],"permalink","https://www.val.town/x/stevekrouse/spotify-running/code/main.tsx","extension","actionData","errors"]