siftlode/frontend/src/components/DownloadButton.tsx

import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Download } from "lucide-react";
import clsx from "clsx";
import DownloadDialog from "./DownloadDialog";
import { api, type Me } from "../lib/api";

// Self-contained download affordance for a video card / the player. Hidden for the demo account
// (downloads spend server disk + need a real identity). Reflects the video's current state from
// the shared per-user download index (one polled query shared across every card).
export default function DownloadButton({
  videoId,
  title,
  className,
}: {
  videoId: string;
  title?: string | null;
  className?: string;
}) {
  const { t } = useTranslation();
  const qc = useQueryClient();
  const me = qc.getQueryData<Me>(["me"]);
  const isDemo = !!me?.is_demo;

  const indexQ = useQuery({
    queryKey: ["download-index"],
    queryFn: api.downloadIndex,
    enabled: !isDemo,
    staleTime: 10000,
  });
  const [open, setOpen] = useState(false);

  if (isDemo) return null;

  const status = indexQ.data?.[videoId];
  const downloaded = status === "done";
  const inQueue = status === "queued" || status === "running" || status === "paused";
  const label = downloaded
    ? t("downloads.button.downloaded")
    : inQueue
      ? t("downloads.button.queued")
      : t("downloads.button.label");

  return (
    <>
      <button
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          setOpen(true);
        }}
        title={label}
        className={clsx(
          className ?? "p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg",
          (downloaded || inQueue) && "text-accent"
        )}
      >
        <Download className={clsx("w-4 h-4", inQueue && "animate-pulse")} />
      </button>
      {open && (
        <DownloadDialog source={videoId} title={title} onClose={() => setOpen(false)} />
      )}
    </>
  );
}