peter
6d8b7be6d8
The demo account — one shared user that whitelisted emails entered from the login page, reset on a schedule — goes end to end (owner decision, E34): demo.py and the reset job, users.is_demo and demo_whitelist (migration 0098 deletes the demo user, its audit rows, the reset job's override and notices, then drops the column and table; the downgrade restores the empty schema), the /auth/demo entry, the admin whitelist and reset, the Demo tab, the banner, the login page's "Try the demo", and every is_demo branch in routes, userscope, scheduler and the UI. require_human only ever refused the demo account, so its 87 uses become current_user (owner-approved); require_write_scope keeps its own check. The login page's "or" divider now shows only beside the Google button: without the demo entry under it, an instance without Google would have said "or" to nothing. A contract test (removedFeatures) fails on the word anywhere in the backend, frontend, e2e or scripts — seen red on a planted hit. Size ceilings tightened for the modules that shrank; admin.py is back under the limit.
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import { lazy, Suspense, useState } from "react";
|
|
import { qk } from "../lib/queryKeys";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useQuery } 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 } from "../lib/api";
|
|
import { IconButton } from "./ui/IconButton";
|
|
|
|
// Self-contained download affordance for a video card / the player. 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,
|
|
variant = "ghost",
|
|
size = "sm",
|
|
}: {
|
|
videoId: string;
|
|
title?: string | null;
|
|
variant?: "ghost" | "outline" | "overlay";
|
|
size?: "sm" | "md";
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const indexQ = useQuery({
|
|
queryKey: qk.downloadIndex(),
|
|
queryFn: api.downloadIndex,
|
|
staleTime: 10000,
|
|
});
|
|
const [open, setOpen] = useState(false);
|
|
|
|
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 (
|
|
<>
|
|
<IconButton
|
|
variant={variant}
|
|
size={size}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setOpen(true);
|
|
}}
|
|
label={label}
|
|
>
|
|
{/* The state is in the glyph: downloaded or queued is the accent, a running one pulses. */}
|
|
<Download
|
|
className={clsx((downloaded || inQueue) && "text-accent", inQueue && "animate-pulse")}
|
|
/>
|
|
</IconButton>
|
|
{open && (
|
|
<Suspense fallback={null}>
|
|
<DownloadDialog source={videoId} title={title} onClose={() => setOpen(false)} />
|
|
</Suspense>
|
|
)}
|
|
</>
|
|
);
|
|
}
|