Spotify "şu an dinliyor" kartı

Ana sayfadaki Spotify kutusu o an ne dinlediğimi, bir şey çalmıyorsa en son dinlediğim şarkıyı gösteriyor. Hazır bir servis yerine doğrudan Spotify Web API'yi kullandım.

Bir kerelik yetkilendirme

Spotify, hesabıma erişim için kullanıcı izni istiyor. Bunu bir kez yapıp uzun ömürlü bir refresh token alıyorum. Bunun için küçük bir yardımcı betik yazdım: bilgisayarımda 127.0.0.1:8888 adresinde geçici bir sunucu açıyor, onay sayfasının bağlantısını veriyor ve onaydan sonra gelen kodu token ile değiştiriyor. İstediğim izinler yalnızca iki tane: user-read-currently-playing ve user-read-recently-played.

Sunucu tarafı

Her istekte refresh token ile kısa ömürlü bir erişim anahtarı alınıyor, sonra iki adım deneniyor:

1. /me/player/currently-playing: bir şarkı gerçekten çalıyorsa onu döndür.
2. Değilse /me/player/recently-played?limit=1: en son dinlenen şarkıyı döndür.

"Çalmıyor" sayılan durumlar sandığımdan fazlaydı: cevap boş gelebiliyor (204), bir reklam ya da podcast çalıyor olabiliyor (item: null), ya da çalma duraklatılmış olabiliyor. Hepsinde ikinci adıma geçiliyor. Herhangi bir hata olursa fonksiyon null döndürüyor ve kutu sade bir duruma geçiyor; sayfa asla bozulmuyor.

Gizli anahtarlar tarayıcıya hiç gitmiyor: tarayıcı sadece sitenin kendi /api/spotify adresini çağırıyor. Bu cevap 30 saniye önbellekte tutuluyor, böylece çok ziyaretçi gelse bile Spotify'a giden istek sayısı sabit kalıyor.

return Response.json(nowPlaying, {
  headers: { "Cache-Control": "public, s-maxage=30, stale-while-revalidate=30" },
});

Tarayıcı tarafı

Kutu 30 saniyede bir yeniden soruyor. Şarkı çalıyorsa ilerleme çubuğu her saniye yerelde ilerliyor; yani her saniye sunucuya gitmeden akıcı görünüyor. Kutunun boyutu sabit olduğu için veri gelince sayfa kaymıyor.