atridad/atridotdad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Spotify integration

Browse Source
This commit is contained in:
Atridad Lahiji
2025-06-03 14:31:38 -06:00
parent 9491ef1c40
commit 7e2a8e3bf7
9 changed files with 513 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/SocialLinks.astro
View File

@ -1,5 +1,6 @@
---
import { Icon } from 'astro-icon/components';
import SpotifyIcon from './SpotifyIcon';
---
<div class="flex flex-row gap-1 sm:gap-4 text-3xl">
@ -38,4 +39,6 @@ import { Icon } from 'astro-icon/components';
>
<Icon name="simple-icons:bluesky" />
</a>
<SpotifyIcon profileUrl="https://open.spotify.com/user/31pjwuuqwnn5zr7fnhfjjmi7c4bi?si=1be2bfdc844c4d85" client:load />
</div>

157
src/components/SpotifyIcon.tsx Normal file
View File

@ -0,0 +1,157 @@
import { useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";
interface SpotifyTrack {
name: string;
artists: { name: string }[];
is_playing: boolean;
external_urls?: {
spotify: string;
};
}
interface SpotifyResponse {
is_playing: boolean;
item: SpotifyTrack;
}
interface SpotifyIconProps {
profileUrl?: string;
}
// Spotify SVG icon component
const SpotifySVG = ({ className }: { className?: string }) => (
<svg
viewBox="0 0 24 24"
fill="currentColor"
className={className}
width="24"
height="24"
>
<path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.559.3z"/>
</svg>
);
export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }: SpotifyIconProps) {
const currentTrack = useSignal<SpotifyTrack | null>(null);
const isPlaying = useSignal(false);
useEffect(() => {
// Set up Server-Sent Events connection
const eventSource = new EventSource('/api/spotify/stream');
eventSource.onopen = () => {
console.log('Spotify SSE connected');
};
eventSource.onmessage = (event) => {
try {
const data: SpotifyResponse = JSON.parse(event.data);
if (data.is_playing && data.item) {
currentTrack.value = data.item;
isPlaying.value = data.is_playing;
} else {
currentTrack.value = null;
isPlaying.value = false;
}
} catch (err) {
console.error('Error parsing SSE data:', err);
// Fail silently
}
};
eventSource.onerror = (event) => {
console.error('Spotify SSE error:', event);
// Fallback to polling if SSE fails
if (eventSource.readyState === EventSource.CLOSED) {
console.log('SSE connection closed, falling back to polling');
startPolling();
}
};
// Cleanup on unmount
return () => {
eventSource.close();
};
}, []);
// Fallback polling function if SSE fails
const startPolling = () => {
const fetchCurrentTrack = async () => {
try {
const response = await fetch('/api/spotify/current', {
credentials: 'include'
});
if (!response.ok) {
throw new Error('Failed to fetch Spotify data');
}
const data: SpotifyResponse = await response.json();
if (data.is_playing && data.item) {
currentTrack.value = data.item;
isPlaying.value = data.is_playing;
} else {
currentTrack.value = null;
isPlaying.value = false;
}
} catch (err) {
// Fail silently
}
};
// Fetch immediately
fetchCurrentTrack();
// Then fetch every 10 seconds (fallback polling)
const interval = setInterval(fetchCurrentTrack, 10000);
return () => clearInterval(interval);
};
const getTooltipText = () => {
if (currentTrack.value && isPlaying.value) {
const artists = currentTrack.value.artists.map(artist => artist.name).join(', ');
return `♪ ${currentTrack.value.name} by ${artists} (click to open in Spotify)`;
}
return "Spotify";
};
const getSpotifyUrl = () => {
// If we have a current track with external URL, use that
if (currentTrack.value && isPlaying.value && currentTrack.value.external_urls?.spotify) {
return currentTrack.value.external_urls.spotify;
}
// Otherwise, use the provided profile URL or fallback to general Spotify
return profileUrl;
};
return (
<div className="tooltip tooltip-top" data-tip={getTooltipText()}>
<a
href={getSpotifyUrl()}
target="_blank"
rel="noopener noreferrer"
aria-label="Spotify"
className="hover:text-primary transition-colors relative inline-block"
>
<div
className={`transition-transform duration-1000 ${
isPlaying.value ? 'animate-spin' : ''
}`}
style={{
animation: isPlaying.value ? 'spin 3s linear infinite' : 'none'
}}
>
<SpotifySVG className="w-6 h-6" />
</div>
{isPlaying.value && (
<div className="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
)}
</a>
</div>
);
}

117
src/pages/api/spotify/current.ts Normal file
View File

@ -0,0 +1,117 @@
import type { APIRoute } from 'astro';
// Helper function to refresh the access token
async function refreshSpotifyToken(refreshToken: string, clientId: string, clientSecret: string) {
const response = await fetch('https://accounts.spotify.com/api/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': `Basic ${btoa(`${clientId}:${clientSecret}`)}`,
},
body: new URLSearchParams({
grant_type: 'refresh_token',
refresh_token: refreshToken,
}),
});
if (!response.ok) {
throw new Error('Failed to refresh token');
}
return await response.json();
}
export const GET: APIRoute = async ({ request }) => {
try {
const clientId = import.meta.env.SPOTIFY_CLIENT_ID;
const clientSecret = import.meta.env.SPOTIFY_CLIENT_SECRET;
let accessToken = import.meta.env.SPOTIFY_ACCESS_TOKEN;
const refreshToken = import.meta.env.SPOTIFY_REFRESH_TOKEN;
if (!clientId || !clientSecret || !refreshToken) {
throw new Error('Missing Spotify credentials. Make sure SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET, and SPOTIFY_REFRESH_TOKEN are set.');
}
// Try to fetch current track with existing token
let spotifyResponse = await fetch('https://api.spotify.com/v1/me/player/currently-playing', {
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json',
},
});
// If token is expired (401), refresh it
if (spotifyResponse.status === 401) {
console.log('Access token expired, refreshing...');
try {
const tokenData = await refreshSpotifyToken(refreshToken, clientId, clientSecret);
accessToken = tokenData.access_token;
// Note: In a real app, you'd want to save this new token somewhere
// For now, it will work until the next restart
console.log('Token refreshed successfully');
// Retry the request with new token
spotifyResponse = await fetch('https://api.spotify.com/v1/me/player/currently-playing', {
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json',
},
});
} catch (refreshError) {
console.error('Failed to refresh token:', refreshError);
throw new Error('Token refresh failed');
}
}
if (spotifyResponse.status === 204) {
// Nothing is currently playing
return new Response(JSON.stringify({
is_playing: false,
item: null
}), {
status: 200,
headers: {
'Content-Type': 'application/json',
},
});
}
if (!spotifyResponse.ok) {
throw new Error(`Spotify API returned ${spotifyResponse.status}`);
}
const data = await spotifyResponse.json();
return new Response(JSON.stringify({
is_playing: data.is_playing,
item: data.item ? {
name: data.item.name,
artists: data.item.artists,
is_playing: data.is_playing,
external_urls: data.item.external_urls
} : null
}), {
status: 200,
headers: {
'Content-Type': 'application/json',
},
});
} catch (error) {
console.error('Spotify API Error:', error);
// Return a fallback response
return new Response(JSON.stringify({
is_playing: false,
item: null,
error: 'Unable to fetch Spotify data'
}), {
status: 200, // Return 200 to avoid client-side errors
headers: {
'Content-Type': 'application/json',
},
});
}
};

190
src/pages/api/spotify/stream.ts Normal file
View File

@ -0,0 +1,190 @@
import type { APIRoute } from 'astro';
// Helper function to refresh the access token
async function refreshSpotifyToken(refreshToken: string, clientId: string, clientSecret: string) {
const response = await fetch('https://accounts.spotify.com/api/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': `Basic ${btoa(`${clientId}:${clientSecret}`)}`,
},
body: new URLSearchParams({
grant_type: 'refresh_token',
refresh_token: refreshToken,
}),
});
if (!response.ok) {
throw new Error('Failed to refresh token');
}
return await response.json();
}
// Function to fetch current track from Spotify
async function fetchCurrentTrack() {
try {
const clientId = import.meta.env.SPOTIFY_CLIENT_ID;
const clientSecret = import.meta.env.SPOTIFY_CLIENT_SECRET;
let accessToken = import.meta.env.SPOTIFY_ACCESS_TOKEN;
const refreshToken = import.meta.env.SPOTIFY_REFRESH_TOKEN;
if (!clientId || !clientSecret || !refreshToken) {
return null;
}
// Try to fetch current track with existing token
let spotifyResponse = await fetch('https://api.spotify.com/v1/me/player/currently-playing', {
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json',
},
});
// If token is expired (401), refresh it
if (spotifyResponse.status === 401) {
try {
const tokenData = await refreshSpotifyToken(refreshToken, clientId, clientSecret);
accessToken = tokenData.access_token;
// Retry the request with new token
spotifyResponse = await fetch('https://api.spotify.com/v1/me/player/currently-playing', {
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json',
},
});
} catch (refreshError) {
console.error('Failed to refresh token:', refreshError);
return null;
}
}
if (spotifyResponse.status === 204) {
// Nothing is currently playing
return {
is_playing: false,
item: null
};
}
if (!spotifyResponse.ok) {
return null;
}
const data = await spotifyResponse.json();
return {
is_playing: data.is_playing,
item: data.item ? {
name: data.item.name,
artists: data.item.artists,
is_playing: data.is_playing,
external_urls: data.item.external_urls
} : null
};
} catch (error) {
console.error('Spotify API Error:', error);
return null;
}
}
export const GET: APIRoute = async ({ request }) => {
// Set up Server-Sent Events
const encoder = new TextEncoder();
let controller: ReadableStreamDefaultController<Uint8Array>;
let isClosed = false;
let pollInterval: NodeJS.Timeout | null = null;
const stream = new ReadableStream({
start(ctrl) {
controller = ctrl;
},
cancel() {
// Client disconnected
console.log('SSE stream cancelled by client');
isClosed = true;
if (pollInterval) {
clearInterval(pollInterval);
pollInterval = null;
}
}
});
// Function to send SSE message
const sendMessage = (data: any) => {
if (isClosed) {
return; // Don't try to send if stream is closed
}
try {
const message = `data: ${JSON.stringify(data)}\n\n`;
controller.enqueue(encoder.encode(message));
} catch (error) {
if (error instanceof TypeError && error.message.includes('Controller is already closed')) {
console.log('SSE controller is closed, stopping polling');
isClosed = true;
if (pollInterval) {
clearInterval(pollInterval);
pollInterval = null;
}
} else {
console.error('Error sending SSE message:', error);
}
}
};
// Start polling and sending updates
let lastTrackData: any = null;
const poll = async () => {
if (isClosed) {
if (pollInterval) {
clearInterval(pollInterval);
pollInterval = null;
}
return;
}
try {
const currentTrack = await fetchCurrentTrack();
// Only send if data has changed and stream is still open
if (!isClosed && JSON.stringify(currentTrack) !== JSON.stringify(lastTrackData)) {
lastTrackData = currentTrack;
sendMessage(currentTrack || { is_playing: false, item: null });
}
} catch (error) {
if (!isClosed) {
console.error('Polling error:', error);
}
}
};
// Send initial data
poll();
// Poll every 3 seconds
pollInterval = setInterval(poll, 3000);
// Clean up when client disconnects (abort signal)
request.signal.addEventListener('abort', () => {
console.log('SSE request aborted');
isClosed = true;
if (pollInterval) {
clearInterval(pollInterval);
pollInterval = null;
}
});
return new Response(stream, {
headers: {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Cache-Control',
},
});
};