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

Removed spotify... its hard to maintain and also fuck spotify
Some checks failed
Docker Deploy / build-and-push (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Atridad Lahiji
2025-06-27 15:44:43 -06:00
parent 6c2f4e1b81
commit 9dbdd265ba
10 changed files with 16 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/SocialLinks.astro
View File

@@ -1,44 +1,31 @@
---
import { Icon } from "astro-icon/components";
import SpotifyIcon from "./SpotifyIcon";
import { socialLinks } from "../config/data";
// Helper function to check if icon is a string (Astro icon)
function isAstroIcon(icon: any): icon is string {
return typeof icon === "string";
}
// Helper function to check if icon is SpotifyIcon component
function isSpotifyIcon(icon: any): boolean {
return icon === SpotifyIcon;
}
---
<div class="flex flex-row gap-4 text-3xl">
{
socialLinks.map((link) => {
if (isSpotifyIcon(link.icon)) {
return <SpotifyIcon profileUrl={link.url} client:load />;
} else if (isAstroIcon(link.icon)) {
return (
<a
href={link.url}
target={
link.url.startsWith("http") ? "_blank" : undefined
}
rel={
link.url.startsWith("http")
? "noopener noreferrer"
: undefined
}
aria-label={link.ariaLabel}
class="hover:text-primary transition-colors"
>
<Icon name={link.icon} />
</a>
);
}
return null;
return (
<a
href={link.url}
target={link.url.startsWith("http") ? "_blank" : undefined}
rel={
link.url.startsWith("http")
? "noopener noreferrer"
: undefined
}
aria-label={link.ariaLabel}
class="hover:text-primary transition-colors"
>
<Icon name={link.icon} />
</a>
);
})
}
</div>

207
src/components/SpotifyIcon.tsx
View File

@@ -1,207 +0,0 @@
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);
const isDynamicEnabled = useSignal(false);
const hasLoggedError = useSignal(false);
useEffect(() => {
// First, check if Spotify is properly configured
const checkConfiguration = async () => {
try {
const response = await fetch("/api/spotify/config");
if (!response.ok) {
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.",
);
hasLoggedError.value = true;
}
isDynamicEnabled.value = false;
return;
}
isDynamicEnabled.value = true;
initializeSpotifyConnection();
} catch (error: any) {
if (!hasLoggedError.value) {
console.error(
"[Spotify] Could not enable dynamic features:",
error?.message || error,
);
hasLoggedError.value = true;
}
isDynamicEnabled.value = false;
}
};
checkConfiguration();
}, []);
const initializeSpotifyConnection = () => {
// Set up Server-Sent Events connection
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.");
}
};
eventSource.onmessage = (event) => {
try {
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;
} else {
currentTrack.value = null;
isPlaying.value = false;
}
}
} catch (err) {
if (!hasLoggedError.value) {
console.error(
"[Spotify] Error parsing SSE data:",
err,
"Raw data:",
event.data,
);
hasLoggedError.value = true;
}
// Fail silently - will revert to static mode
}
};
eventSource.onerror = (event) => {
if (!hasLoggedError.value) {
console.error(
"[Spotify] SSE connection error. Falling back to static icon.",
{
readyState: eventSource.readyState,
url: eventSource.url,
event: event,
},
);
hasLoggedError.value = true;
}
// Close the connection to prevent retries
eventSource.close();
// Set to static mode
isDynamicEnabled.value = false;
currentTrack.value = null;
isPlaying.value = false;
};
// Cleanup on unmount
return () => {
eventSource.close();
};
};
const getTooltipText = () => {
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)`;
}
return "Spotify";
};
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
) {
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 ${
isDynamicEnabled.value && isPlaying.value ? "animate-spin" : ""
}`}
style={{
animation:
isDynamicEnabled.value && isPlaying.value
? "spin 3s linear infinite"
: "none",
}}
>
<SpotifySVG className="w-6 h-6" />
</div>
{isDynamicEnabled.value && isPlaying.value && (
<div className="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
)}
</a>
</div>
);
}