Spotify integration

src/components/SocialLinks.astro

@@ -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>

src/components/SpotifyIcon.tsx

@@ -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>
+  );
+}