muse/web/components/album-view.tsx

"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { api, mmss, type AlbumHeader, type Track } from "@/lib/api";
import { tint } from "@/lib/colour";
import { Hero } from "@/components/hero";
import { TrackRow } from "@/components/track-row";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/toast";
import { Skeletons } from "@/components/skeletons";

export function AlbumView({
  id,
  onArtist,
  onQueued,
}: {
  id: number;
  onArtist: (id: number) => void;
  onQueued?: () => void;
}) {
  const toast = useToast();
  const [data, setData] = React.useState<{ album: AlbumHeader; tracks: Track[] } | null>(null);
  const [err, setErr] = React.useState<string | null>(null);
  const [batch, setBatch] = React.useState<"idle" | "busy" | "done">("idle");
  const [queued, setQueued] = React.useState(0);

  React.useEffect(() => {
    let live = true;
    setData(null);
    setErr(null);
    setBatch("idle");
    api
      .album(id)
      .then((d) => {
        if (!live) return;
        setData(d);
        void tint(d.album.cover_big ?? d.album.cover);
      })
      .catch((e) => live && setErr((e as Error).message));
    return () => {
      live = false;
    };
  }, [id]);

  if (err) return <div className="py-12 text-center text-dim">Could not load album: {err}</div>;
  if (!data) return <Skeletons n={8} />;

  const { album, tracks } = data;

  const getAll = async () => {
    setBatch("busy");
    try {
      const d = await api.requestBatch(tracks);
      setQueued(d.queued);
      setBatch("done");
      toast(`Queued ${d.queued} tracks from ${album.title}`);
      onQueued?.();
    } catch (e) {
      setBatch("idle");
      toast(`Could not queue album: ${(e as Error).message}`, true);
    }
  };

  return (
    <>
      <Hero
        kind={album.record_type ?? "Album"}
        title={album.title}
        art={album.cover_big ?? album.cover}
        by={
          album.artist_id ? (
            <button
              onClick={() => onArtist(album.artist_id!)}
              className="border-b border-edge-hi hover:text-accent hover:border-accent-line cursor-pointer"
            >
              {album.artist}
            </button>
          ) : (
            album.artist
          )
        }
        facts={[
          album.year,
          album.genres?.[0],
          album.label,
          album.nb_tracks ? `${album.nb_tracks} tracks` : null,
          album.duration ? mmss(album.duration * 1000) : null,
        ]}
        actions={
          <Button onClick={getAll} disabled={batch !== "idle"}>
            {batch === "idle"
              ? `Get all ${tracks.length} tracks`
              : batch === "busy"
                ? "Queueing…"
                : `Queued ${queued}`}
          </Button>
        }
      />

      <motion.div layout className="flex flex-col gap-[7px]">
        {tracks.map((t, i) => (
          <TrackRow
            key={t.deezer_id}
            track={t}
            index={i}
            showNumber
            showArtist={false}
            showAlbum={false}
            onQueued={onQueued}
          />
        ))}
      </motion.div>
    </>
  );
}