peter
34297b696f
Extend lib/queryKeys.ts to the remaining ~34 key roots and migrate every remaining literal (queryKey: [...] AND the positional useLiveQuery keys) in 36 files. All ~200 React Query keys across the app now route through the factory; zero raw key literals remain outside queryKeys.ts. The heterogeneous composite plex keys (plex-library/facets/collections/ playlists carry a filters object, a ratingKeys array, or a union/group discriminator) take a variadic pass-through — the factory centralizes the ROOT string; single-id keys stay precisely typed. Nullable keys (thread, playlist, ytSearch) accept null so a null segment is preserved. Pure substitution — byte-identical key arrays, so TanStack prefix matching is unchanged. Gate green: typecheck (app+node+e2e), eslint (0 err), prettier, 68 vitest. Runtime-verified on a fresh dev server: Feed + Plex modules load, feed/facets/tags/my-status/plex-library/plex-facets/ plex-collections/plex-playlists all 200, full UI renders.
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { lazy, Suspense, useState } from "react";
|
|
import { qk } from "../lib/queryKeys";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { Download } from "lucide-react";
|
|
import clsx from "clsx";
|
|
// Lazy: the download dialog (+ its profile editor) loads only when a card's download button is
|
|
// clicked, so it never ships in the feed chunk for the majority who just browse.
|
|
const DownloadDialog = lazy(() => import("./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>(qk.me());
|
|
const isDemo = !!me?.is_demo;
|
|
|
|
const indexQ = useQuery({
|
|
queryKey: qk.downloadIndex(),
|
|
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 && (
|
|
<Suspense fallback={null}>
|
|
<DownloadDialog source={videoId} title={title} onClose={() => setOpen(false)} />
|
|
</Suspense>
|
|
)}
|
|
</>
|
|
);
|
|
}
|