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

SSE Fixes
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m27s
Details

Browse Source
This commit is contained in:
Atridad Lahiji
2025-06-19 23:48:18 -06:00
parent 41614a49a8
commit a6336e293c
2 changed files with 115 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/SpotifyIcon.tsx
View File

@ -21,18 +21,20 @@ interface SpotifyIconProps {
// Spotify SVG icon component // Spotify SVG icon component
const SpotifySVG = ({ className }: { className?: string }) => ( const SpotifySVG = ({ className }: { className?: string }) => (
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="currentColor" fill="currentColor"
className={className} className={className}
width="24" width="24"
height="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"/> <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> </svg>
); );
export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }: SpotifyIconProps) { export default function SpotifyIcon({
profileUrl = "https://open.spotify.com",
}: SpotifyIconProps) {
const currentTrack = useSignal<SpotifyTrack | null>(null); const currentTrack = useSignal<SpotifyTrack | null>(null);
const isPlaying = useSignal(false); const isPlaying = useSignal(false);
const isDynamicEnabled = useSignal(false); const isDynamicEnabled = useSignal(false);
@ -42,15 +44,19 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
// First, check if Spotify is properly configured // First, check if Spotify is properly configured
const checkConfiguration = async () => { const checkConfiguration = async () => {
try { try {
const response = await fetch('/api/spotify/config'); const response = await fetch("/api/spotify/config");
if (!response.ok) { if (!response.ok) {
throw new Error(`Spotify config endpoint returned status ${response.status}`); throw new Error(
`Spotify config endpoint returned status ${response.status}`,
);
} }
const { configured } = await response.json(); const { configured } = await response.json();
if (!configured) { if (!configured) {
if (!hasLoggedError.value) { if (!hasLoggedError.value) {
console.warn('[Spotify] Dynamic features disabled: missing or invalid environment variables.'); console.warn(
"[Spotify] Dynamic features disabled: missing or invalid environment variables.",
);
hasLoggedError.value = true; hasLoggedError.value = true;
} }
isDynamicEnabled.value = false; isDynamicEnabled.value = false;
@ -60,7 +66,10 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
initializeSpotifyConnection(); initializeSpotifyConnection();
} catch (error: any) { } catch (error: any) {
if (!hasLoggedError.value) { if (!hasLoggedError.value) {
console.error('[Spotify] Could not enable dynamic features:', error?.message || error); console.error(
"[Spotify] Could not enable dynamic features:",
error?.message || error,
);
hasLoggedError.value = true; hasLoggedError.value = true;
} }
isDynamicEnabled.value = false; isDynamicEnabled.value = false;
@ -72,42 +81,71 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
const initializeSpotifyConnection = () => { const initializeSpotifyConnection = () => {
// Set up Server-Sent Events connection // Set up Server-Sent Events connection
const eventSource = new EventSource('/api/spotify/stream'); const eventSource = new EventSource("/api/spotify/stream");
eventSource.onopen = () => { eventSource.onopen = () => {
// Only log on first open // Only log on first open
if (!hasLoggedError.value) { if (!hasLoggedError.value) {
console.info('[Spotify] SSE connected for dynamic icon.'); console.info("[Spotify] SSE connected for dynamic icon.");
} }
}; };
eventSource.onmessage = (event) => { eventSource.onmessage = (event) => {
try { try {
const data: SpotifyResponse = JSON.parse(event.data); const message = JSON.parse(event.data);
if (data.is_playing && data.item) {
currentTrack.value = data.item; // Handle different message types
isPlaying.value = data.is_playing; if (message.type === "keepalive") {
} else { // Just a keepalive, no need to do anything
currentTrack.value = null; return;
isPlaying.value = false; }
if (message.type === "track" && message.data) {
const data: SpotifyResponse = message.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) { } catch (err) {
if (!hasLoggedError.value) { if (!hasLoggedError.value) {
console.error('[Spotify] Error parsing SSE data:', err); console.error(
"[Spotify] Error parsing SSE data:",
err,
"Raw data:",
event.data,
);
hasLoggedError.value = true; hasLoggedError.value = true;
} }
// Fail silently - will revert to static mode // Fail silently - will revert to static mode
} }
}; };
eventSource.onerror = (event) => { eventSource.onerror = (event) => {
if (!hasLoggedError.value) { if (!hasLoggedError.value) {
console.error('[Spotify] SSE connection error. Falling back to static icon.'); console.error(
"[Spotify] SSE connection error. Falling back to static icon.",
{
readyState: eventSource.readyState,
url: eventSource.url,
event: event,
},
);
hasLoggedError.value = true; hasLoggedError.value = true;
} }
// If SSE fails, we just fall back to static mode
// Close the connection to prevent retries
eventSource.close();
// Set to static mode
isDynamicEnabled.value = false;
currentTrack.value = null;
isPlaying.value = false;
}; };
// Cleanup on unmount // Cleanup on unmount
return () => { return () => {
eventSource.close(); eventSource.close();
@ -116,7 +154,9 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
const getTooltipText = () => { const getTooltipText = () => {
if (isDynamicEnabled.value && currentTrack.value && isPlaying.value) { if (isDynamicEnabled.value && currentTrack.value && isPlaying.value) {
const artists = currentTrack.value.artists.map(artist => artist.name).join(', '); const artists = currentTrack.value.artists
.map((artist) => artist.name)
.join(", ");
return `♪ ${currentTrack.value.name} by ${artists} (click to open in Spotify)`; return `♪ ${currentTrack.value.name} by ${artists} (click to open in Spotify)`;
} }
return "Spotify"; return "Spotify";
@ -124,7 +164,12 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
const getSpotifyUrl = () => { const getSpotifyUrl = () => {
// If we have a current track with external URL, use that // If we have a current track with external URL, use that
if (isDynamicEnabled.value && currentTrack.value && isPlaying.value && currentTrack.value.external_urls?.spotify) { if (
isDynamicEnabled.value &&
currentTrack.value &&
isPlaying.value &&
currentTrack.value.external_urls?.spotify
) {
return currentTrack.value.external_urls.spotify; return currentTrack.value.external_urls.spotify;
} }
// Otherwise, use the provided profile URL or fallback to general Spotify // Otherwise, use the provided profile URL or fallback to general Spotify
@ -140,12 +185,15 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
aria-label="Spotify" aria-label="Spotify"
className="hover:text-primary transition-colors relative inline-block" className="hover:text-primary transition-colors relative inline-block"
> >
<div <div
className={`transition-transform duration-1000 ${ className={`transition-transform duration-1000 ${
isDynamicEnabled.value && isPlaying.value ? 'animate-spin' : '' isDynamicEnabled.value && isPlaying.value ? "animate-spin" : ""
}`} }`}
style={{ style={{
animation: isDynamicEnabled.value && isPlaying.value ? 'spin 3s linear infinite' : 'none' animation:
isDynamicEnabled.value && isPlaying.value
? "spin 3s linear infinite"
: "none",
}} }}
> >
<SpotifySVG className="w-6 h-6" /> <SpotifySVG className="w-6 h-6" />
@ -156,4 +204,4 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
</a> </a>
</div> </div>
); );
} }

45
src/pages/api/spotify/stream.ts
View File

@ -132,15 +132,15 @@ export const GET: APIRoute = async ({ request }) => {
const stream = new ReadableStream({ const stream = new ReadableStream({
start(ctrl) { start(ctrl) {
controller = ctrl; controller = ctrl;
// Send initial data immediately to establish connection
const message = `data: ${JSON.stringify({ type: "connected", timestamp: Date.now() })}\n\n`;
controller.enqueue(encoder.encode(message));
}, },
cancel() { cancel() {
// Client disconnected // Client disconnected
console.log("SSE stream cancelled by client"); console.log("SSE stream cancelled by client");
isClosed = true; isClosed = true;
if (pollInterval) { cleanup();
clearInterval(pollInterval);
pollInterval = null;
}
}, },
}); });
@ -196,7 +196,11 @@ export const GET: APIRoute = async ({ request }) => {
JSON.stringify(currentTrack) !== JSON.stringify(lastTrackData) JSON.stringify(currentTrack) !== JSON.stringify(lastTrackData)
) { ) {
lastTrackData = currentTrack; lastTrackData = currentTrack;
sendMessage(currentTrack || { is_playing: false, item: null }); sendMessage({
type: "track",
data: currentTrack || { is_playing: false, item: null },
timestamp: Date.now(),
});
} }
} catch (error) { } catch (error) {
if (!isClosed) { if (!isClosed) {
@ -205,29 +209,48 @@ export const GET: APIRoute = async ({ request }) => {
} }
}; };
// Send initial data // Send initial data immediately
poll(); poll();
// Poll every 3 seconds // Poll every 3 seconds
pollInterval = setInterval(poll, 3000); pollInterval = setInterval(poll, 3000);
// Clean up when client disconnects (abort signal) // Send keepalive every 30 seconds to prevent connection timeout
request.signal.addEventListener("abort", () => { const keepaliveInterval = setInterval(() => {
console.log("SSE request aborted"); if (!isClosed) {
isClosed = true; sendMessage({ type: "keepalive", timestamp: Date.now() });
}
}, 30000);
// Clean up keepalive interval too
const cleanup = () => {
if (pollInterval) { if (pollInterval) {
clearInterval(pollInterval); clearInterval(pollInterval);
pollInterval = null; pollInterval = null;
} }
if (keepaliveInterval) {
clearInterval(keepaliveInterval);
}
};
// Clean up when client disconnects (abort signal)
request.signal.addEventListener("abort", () => {
console.log("SSE request aborted");
isClosed = true;
cleanup();
}); });
return new Response(stream, { return new Response(stream, {
headers: { headers: {
"Content-Type": "text/event-stream", "Content-Type": "text/event-stream",
"Cache-Control": "no-cache", "Cache-Control": "no-cache, no-store, must-revalidate",
Connection: "keep-alive", Connection: "keep-alive",
"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "Cache-Control", "Access-Control-Allow-Headers": "Cache-Control",
"X-Accel-Buffering": "no",
"CF-Cache-Status": "BYPASS",
"Transfer-Encoding": "chunked",
Vary: "Accept-Encoding",
}, },
}); });
} catch (error) { } catch (error) {