Failsafe

src/components/SpotifyIcon.tsx

@@ -35,8 +35,34 @@ const SpotifySVG = ({ className }: { className?: string }) => (
 export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }: SpotifyIconProps) {
   const currentTrack = useSignal<SpotifyTrack | null>(null);
   const isPlaying = useSignal(false);
+  const isDynamicEnabled = useSignal(false);
 
   useEffect(() => {
+    // First, check if Spotify is properly configured
+    const checkConfiguration = async () => {
+      try {
+        const response = await fetch('/api/spotify/config');
+        const { configured } = await response.json();
+        
+        if (!configured) {
+          console.log('Spotify dynamic features disabled - missing or invalid environment variables');
+          isDynamicEnabled.value = false;
+          return;
+        }
+        
+        isDynamicEnabled.value = true;
+        initializeSpotifyConnection();
+        
+      } catch (error) {
+        console.log('Spotify dynamic features disabled - configuration check failed:', error);
+        isDynamicEnabled.value = false;
+      }
+    };
+
+    checkConfiguration();
+  }, []);
+
+  const initializeSpotifyConnection = () => {
     // Set up Server-Sent Events connection
     const eventSource = new EventSource('/api/spotify/stream');
     
@@ -75,7 +101,7 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
     return () => {
       eventSource.close();
     };
-  }, []);
+  };
 
   // Fallback polling function if SSE fails
   const startPolling = () => {
@@ -113,7 +139,7 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
   };
 
   const getTooltipText = () => {
-    if (currentTrack.value && isPlaying.value) {
+    if (isDynamicEnabled.value && 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)`;
     }
@@ -122,7 +148,7 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
 
   const getSpotifyUrl = () => {
     // If we have a current track with external URL, use that
-    if (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
@@ -140,15 +166,15 @@ export default function SpotifyIcon({ profileUrl = "https://open.spotify.com" }:
       >
         <div 
           className={`transition-transform duration-1000 ${
-            isPlaying.value ? 'animate-spin' : ''
+            isDynamicEnabled.value && isPlaying.value ? 'animate-spin' : ''
           }`}
           style={{
-            animation: isPlaying.value ? 'spin 3s linear infinite' : 'none'
+            animation: isDynamicEnabled.value && isPlaying.value ? 'spin 3s linear infinite' : 'none'
           }}
         >
           <SpotifySVG className="w-6 h-6" />
         </div>
-        {isPlaying.value && (
+        {isDynamicEnabled.value && isPlaying.value && (
           <div className="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
         )}
       </a>

src/pages/api/spotify/config.ts

@@ -0,0 +1,39 @@
+import type { APIRoute } from 'astro';
+
+export const GET: APIRoute = async () => {
+  try {
+    const clientId = import.meta.env.SPOTIFY_CLIENT_ID;
+    const clientSecret = import.meta.env.SPOTIFY_CLIENT_SECRET;
+    const refreshToken = import.meta.env.SPOTIFY_REFRESH_TOKEN;
+
+    const isConfigured = !!(clientId && clientSecret && refreshToken);
+    
+    if (!isConfigured) {
+      console.log('Spotify integration disabled - missing environment variables:', {
+        hasClientId: !!clientId,
+        hasClientSecret: !!clientSecret,
+        hasRefreshToken: !!refreshToken
+      });
+    }
+
+    return new Response(JSON.stringify({
+      configured: isConfigured
+    }), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+  } catch (error) {
+    console.error('Error checking Spotify configuration:', error);
+    return new Response(JSON.stringify({
+      configured: false
+    }), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+};