125 lines
3.3 KiB
TypeScript
125 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* SaveOfflineButton — sits beside "Copy link to this page" in PageHeader.
|
|
*
|
|
* Saves the current page (and, for transcripts, its audio) for offline
|
|
* reading/listening via lib/offline. Shows idle → saving(%) → saved states and
|
|
* lets the user remove a saved copy. Renders nothing when the browser can't
|
|
* support offline storage.
|
|
*/
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { Check, Download, Loader2, Trash2 } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
isSaved as isSavedFn,
|
|
offlineSupported,
|
|
pageKey,
|
|
removeOffline,
|
|
saveOffline,
|
|
type OfflineDescriptor,
|
|
} from "@/lib/offline";
|
|
|
|
type State = "idle" | "saving" | "saved";
|
|
|
|
export function SaveOfflineButton({
|
|
descriptor,
|
|
}: {
|
|
descriptor: OfflineDescriptor;
|
|
}) {
|
|
const [supported, setSupported] = useState(false);
|
|
const [state, setState] = useState<State>("idle");
|
|
const [pct, setPct] = useState<number | null>(null);
|
|
const keyRef = useRef<string>("");
|
|
|
|
useEffect(() => {
|
|
if (!offlineSupported()) return;
|
|
setSupported(true);
|
|
keyRef.current = pageKey();
|
|
let alive = true;
|
|
isSavedFn(keyRef.current).then((saved) => {
|
|
if (alive && saved) setState("saved");
|
|
});
|
|
return () => {
|
|
alive = false;
|
|
};
|
|
}, []);
|
|
|
|
if (!supported) return null;
|
|
|
|
async function onClick() {
|
|
if (state === "saving") return;
|
|
|
|
if (state === "saved") {
|
|
// Toggle off — remove the offline copy.
|
|
try {
|
|
await removeOffline(keyRef.current);
|
|
setState("idle");
|
|
toast("Removed from offline", { duration: 1800 });
|
|
} catch {
|
|
toast.error("Couldn't remove the offline copy", { duration: 3000 });
|
|
}
|
|
return;
|
|
}
|
|
|
|
setState("saving");
|
|
setPct(descriptor.audioUrl ? 0 : null);
|
|
try {
|
|
const res = await saveOffline(descriptor, (f) =>
|
|
setPct(Math.round(f * 100)),
|
|
);
|
|
setState("saved");
|
|
if (res.audioError) {
|
|
toast(res.audioError, { duration: 4000 });
|
|
} else {
|
|
toast("Saved for offline", { duration: 1800 });
|
|
}
|
|
} catch {
|
|
setState("idle");
|
|
toast.error("Couldn't save this page offline", { duration: 3000 });
|
|
} finally {
|
|
setPct(null);
|
|
}
|
|
}
|
|
|
|
const label =
|
|
state === "saving"
|
|
? pct !== null
|
|
? `Saving… ${pct}%`
|
|
: "Saving…"
|
|
: state === "saved"
|
|
? "Saved offline"
|
|
: "Save offline";
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
aria-label={label}
|
|
title={
|
|
state === "saved" ? "Remove offline copy" : "Save this page for offline use"
|
|
}
|
|
className={cn(
|
|
"inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs transition-colors",
|
|
state === "saved"
|
|
? "text-foreground border-primary/40 hover:text-destructive hover:border-destructive/40 group"
|
|
: "border-border text-muted-foreground hover:text-foreground hover:bg-muted",
|
|
)}
|
|
>
|
|
{state === "saving" ? (
|
|
<Loader2 className="size-3.5 animate-spin" />
|
|
) : state === "saved" ? (
|
|
<>
|
|
<Check className="size-3.5 text-primary group-hover:hidden" />
|
|
<Trash2 className="size-3.5 hidden group-hover:block" />
|
|
</>
|
|
) : (
|
|
<Download className="size-3.5" />
|
|
)}
|
|
{label}
|
|
</button>
|
|
);
|
|
}
|