77 lines
3.2 KiB
TypeScript
77 lines
3.2 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import { useContext, useEffect } from "react";
|
|
import { toast } from "sonner";
|
|
import { QueueContext, getStatus } from "../contexts/queue-context";
|
|
import type { AlbumType } from "../types/spotify";
|
|
|
|
interface AlbumCardProps {
|
|
album: AlbumType;
|
|
onDownload?: () => void;
|
|
}
|
|
|
|
export const AlbumCard = ({ album, onDownload }: AlbumCardProps) => {
|
|
const context = useContext(QueueContext);
|
|
if (!context) throw new Error("useQueue must be used within a QueueProvider");
|
|
const { items } = context;
|
|
const queueItem = items.find(item => item.downloadType === "album" && item.spotifyId === album.id);
|
|
const status = queueItem ? getStatus(queueItem) : null;
|
|
|
|
useEffect(() => {
|
|
if (status === "queued") {
|
|
toast.success(`${album.name} queued.`);
|
|
} else if (status === "error") {
|
|
toast.error(`Failed to queue ${album.name}`);
|
|
}
|
|
}, [status, album.name]);
|
|
const imageUrl = album.images && album.images.length > 0 ? album.images[0].url : "/placeholder.jpg";
|
|
const subtitle = album.artists.map((artist) => artist.name).join(", ");
|
|
|
|
return (
|
|
<div className="group flex flex-col rounded-lg overflow-hidden bg-surface dark:bg-surface-secondary-dark hover:bg-surface-secondary dark:hover:bg-surface-muted-dark shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out hover:-translate-y-1 hover:scale-105">
|
|
<div className="relative">
|
|
<Link to="/album/$albumId" params={{ albumId: album.id }}>
|
|
<img src={imageUrl} alt={album.name} className="w-full aspect-square object-cover" />
|
|
{onDownload && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
onDownload();
|
|
}}
|
|
disabled={!!status && status !== "error"}
|
|
className="absolute bottom-2 right-2 p-2 bg-button-success hover:bg-button-success-hover text-button-success-text rounded-full transition-opacity shadow-lg opacity-0 group-hover:opacity-100 duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
title={
|
|
status
|
|
? status === "queued"
|
|
? "Album queued"
|
|
: status === "error"
|
|
? "Download album"
|
|
: "Downloading..."
|
|
: "Download album"
|
|
}
|
|
>
|
|
{status
|
|
? status === "queued"
|
|
? "Queued."
|
|
: status === "error"
|
|
? <img src="/download.svg" alt="Download" className="w-5 h-5 icon-inverse" />
|
|
: "Downloading..."
|
|
: <img src="/download.svg" alt="Download" className="w-5 h-5 icon-inverse" />
|
|
}
|
|
</button>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
<div className="p-4 flex-grow flex flex-col">
|
|
<Link
|
|
to="/album/$albumId"
|
|
params={{ albumId: album.id }}
|
|
className="font-semibold text-content-primary dark:text-content-primary-dark truncate block"
|
|
>
|
|
{album.name}
|
|
</Link>
|
|
{subtitle && <p className="text-sm text-content-secondary dark:text-content-secondary-dark mt-1 truncate">{subtitle}</p>}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|