SSE Fixes

2025-06-19 23:48:18 -06:00
parent 41614a49a8
commit a6336e293c
2 changed files with 115 additions and 44 deletions
--- a/src/components/SpotifyIcon.tsx
+++ b/src/components/SpotifyIcon.tsx
@ -28,11 +28,13 @@ const SpotifySVG = ({ className }: { className?: string }) => (
    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"/>
+    <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) {
+export default function SpotifyIcon({
+  profileUrl = "https://open.spotify.com",
+}: SpotifyIconProps) {
  const currentTrack = useSignal<SpotifyTrack | null>(null);
  const isPlaying = 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
    const checkConfiguration = async () => {
      try {
-        const response = await fetch('/api/spotify/config');
+        const response = await fetch("/api/spotify/config");
        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();

        if (!configured) {
          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;
          }
          isDynamicEnabled.value = false;
@ -60,7 +66,10 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
        initializeSpotifyConnection();
      } catch (error: any) {
        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;
        }
        isDynamicEnabled.value = false;
@ -72,18 +81,27 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:

  const initializeSpotifyConnection = () => {
    // Set up Server-Sent Events connection
-    const eventSource = new EventSource('/api/spotify/stream');
+    const eventSource = new EventSource("/api/spotify/stream");

    eventSource.onopen = () => {
      // Only log on first open
      if (!hasLoggedError.value) {
-        console.info('[Spotify] SSE connected for dynamic icon.');
+        console.info("[Spotify] SSE connected for dynamic icon.");
      }
    };

    eventSource.onmessage = (event) => {
      try {
-        const data: SpotifyResponse = JSON.parse(event.data);
+        const message = JSON.parse(event.data);
+
+        // Handle different message types
+        if (message.type === "keepalive") {
+          // Just a keepalive, no need to do anything
+          return;
+        }
+
+        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;
@ -91,9 +109,15 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
            currentTrack.value = null;
            isPlaying.value = false;
          }
+        }
      } catch (err) {
        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;
        }
        // Fail silently - will revert to static mode
@ -102,10 +126,24 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:

    eventSource.onerror = (event) => {
      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;
      }
-      // 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
@ -116,7 +154,9 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:

  const getTooltipText = () => {
    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 "Spotify";
@ -124,7 +164,12 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:

  const getSpotifyUrl = () => {
    // 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;
    }
    // Otherwise, use the provided profile URL or fallback to general Spotify
@ -142,10 +187,13 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
      >
        <div
          className={`transition-transform duration-1000 ${
-            isDynamicEnabled.value && isPlaying.value ? 'animate-spin' : ''
+            isDynamicEnabled.value && isPlaying.value ? "animate-spin" : ""
          }`}
          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" />
--- a/src/pages/api/spotify/stream.ts
+++ b/src/pages/api/spotify/stream.ts
@ -132,15 +132,15 @@ export const GET: APIRoute = async ({ request }) => {
    const stream = new ReadableStream({
      start(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() {
        // Client disconnected
        console.log("SSE stream cancelled by client");
        isClosed = true;
-        if (pollInterval) {
-          clearInterval(pollInterval);
-          pollInterval = null;
-        }
+        cleanup();
      },
    });

@ -196,7 +196,11 @@ export const GET: APIRoute = async ({ request }) => {
          JSON.stringify(currentTrack) !== JSON.stringify(lastTrackData)
        ) {
          lastTrackData = currentTrack;
-          sendMessage(currentTrack || { is_playing: false, item: null });
+          sendMessage({
+            type: "track",
+            data: currentTrack || { is_playing: false, item: null },
+            timestamp: Date.now(),
+          });
        }
      } catch (error) {
        if (!isClosed) {
@ -205,29 +209,48 @@ export const GET: APIRoute = async ({ request }) => {
      }
    };

-    // Send initial data
+    // Send initial data immediately
    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;
+    // Send keepalive every 30 seconds to prevent connection timeout
+    const keepaliveInterval = setInterval(() => {
+      if (!isClosed) {
+        sendMessage({ type: "keepalive", timestamp: Date.now() });
+      }
+    }, 30000);
+
+    // Clean up keepalive interval too
+    const cleanup = () => {
      if (pollInterval) {
        clearInterval(pollInterval);
        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, {
      headers: {
        "Content-Type": "text/event-stream",
-        "Cache-Control": "no-cache",
+        "Cache-Control": "no-cache, no-store, must-revalidate",
        Connection: "keep-alive",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Cache-Control",
+        "X-Accel-Buffering": "no",
+        "CF-Cache-Status": "BYPASS",
+        "Transfer-Encoding": "chunked",
+        Vary: "Accept-Encoding",
      },
    });
  } catch (error) {