muse/web/components/track-row.tsx

"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { Play, Pause } from "lucide-react";
import { api, mmss, type Track } from "@/lib/api";
import { usePlayer } from "@/components/player";
import { useToast } from "@/components/toast";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function TrackRow({
  track,
  index,
  showNumber,
  showArtist = true,
  showAlbum = true,
  onAlbum,
  onArtist,
  onQueued,
}: {
  track: Track;
  index: number;
  showNumber?: boolean;
  showArtist?: boolean;
  showAlbum?: boolean;
  onAlbum?: (id: number) => void;
  onArtist?: (id: number) => void;
  onQueued?: () => void;
}) {
  const { playing, toggle } = usePlayer();
  const toast = useToast();
  const [state, setState] = React.useState<"idle" | "busy" | "done">("idle");

  const isPlaying = playing === track.deezer_id;

  const queue = async () => {
    setState("busy");
    try {
      await api.request(track);
      setState("done");
      toast(`Queued ${track.artist} — ${track.title}`);
      onQueued?.();
    } catch (e) {
      setState("idle");
      toast(`Could not queue: ${(e as Error).message}`, true);
    }
  };

  const facts: React.ReactNode[] = [];
  if (showAlbum && track.album)
    facts.push(
      track.album_id && onAlbum ? (
        <button
          key="al"
          onClick={() => onAlbum(track.album_id!)}
          className="hover:text-accent hover:underline cursor-pointer"
        >
          {track.album}
        </button>
      ) : (
        <span key="al">{track.album}</span>
      ),
    );
  if (track.year) facts.push(<span key="yr">{track.year}</span>);
  if (track.genre) facts.push(<span key="gn">{track.genre}</span>);

  return (
    <motion.div
      layout
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: Math.min(index * 0.022, 0.4), type: "spring", stiffness: 380, damping: 34 }}
      whileHover={{ y: -1 }}
      className={cn(
        "card rounded-card flex items-center gap-3 py-2.5 pl-2.5 pr-3",
        "transition-colors hover:bg-[var(--surface-2)] hover:border-edge-hi",
        isPlaying && "border-accent-line bg-accent-soft",
      )}
    >
      {showNumber && (
        <div className="w-6 shrink-0 text-right text-callout text-dim tabular-nums">
          {track.track ?? ""}
        </div>
      )}

      <button
        onClick={() => toggle(track)}
        disabled={!track.preview}
        aria-label={track.preview ? `Preview ${track.title}` : "No preview available"}
        className={cn(
          "relative w-[50px] h-[50px] shrink-0 rounded-[9px] overflow-hidden bg-faint group",
          track.preview ? "cursor-pointer" : "cursor-default",
        )}
      >
        {track.cover && (
          /* eslint-disable-next-line @next/next/no-img-element */
          <img
            src={track.cover}
            alt=""
            loading="lazy"
            className="w-full h-full object-cover"
            onError={(e) => (e.currentTarget.style.visibility = "hidden")}
          />
        )}
        {track.preview && (
          <div
            className={cn(
              "absolute inset-0 grid place-items-center bg-black/50 text-white",
              "transition-opacity duration-200",
              isPlaying ? "opacity-100" : "opacity-0 group-hover:opacity-100",
            )}
          >
            {isPlaying ? (
              <Pause className="w-[18px] h-[18px] fill-current" />
            ) : (
              <Play className="w-[18px] h-[18px] fill-current" />
            )}
          </div>
        )}
      </button>

      <div className="flex-1 min-w-0">
        <div className="text-body font-semibold tracking-[-0.15px] clamp1">
          {track.title}
          {track.explicit && (
            <span className="ml-1.5 align-[1px] inline-block rounded-[3px] border border-edge bg-faint px-1 text-[9px] font-bold text-dim">
              E
            </span>
          )}
        </div>
        <div className="mt-px text-callout text-dim clamp1">
          {showArtist && track.artist_id && onArtist ? (
            <button
              onClick={() => onArtist(track.artist_id!)}
              className="hover:text-accent hover:underline cursor-pointer"
            >
              {track.artist}
            </button>
          ) : showArtist ? (
            <span>{track.artist}</span>
          ) : null}
          {facts.map((f, i) => (
            <React.Fragment key={i}>
              {(showArtist || i > 0) && <span className="mx-1.5 opacity-50">·</span>}
              {f}
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="hidden sm:block shrink-0 text-callout text-dim tabular-nums">
        {track.length ? mmss(track.length) : ""}
      </div>

      <Button
        variant="outline"
        size="pill"
        onClick={queue}
        disabled={state !== "idle"}
        className={cn(
          "shrink-0",
          state === "done" && "border-ok/50 text-ok bg-ok/10 hover:bg-ok/10 hover:text-ok hover:border-ok/50",
        )}
      >
        {state === "idle" ? "Get" : state === "busy" ? "…" : "Queued"}
      </Button>
    </motion.div>
  );
}