fix: offline-content renamed to downloads
This commit is contained in:
gosangam
@@ -0,0 +1,219 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* /downloads — the reader's device-local offline library.
|
||||
*
|
||||
* Lists everything saved via the header's "Save offline" button and lets them
|
||||
* open (offline-capable) or remove each item. Items link with a plain <a> (a
|
||||
* hard navigation) so the service worker can serve the cached HTML document
|
||||
* when there's no network — a soft client navigation would try the network and
|
||||
* fail. This page also doubles as the SW's offline navigation fallback.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
|
||||
import {
|
||||
BookOpen,
|
||||
FileText,
|
||||
HardDriveDownload,
|
||||
Mail,
|
||||
Mic,
|
||||
Newspaper,
|
||||
Trash2,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
listOffline,
|
||||
offlineSupported,
|
||||
removeOffline,
|
||||
usageBytes,
|
||||
type OfflineItem,
|
||||
type OfflineType,
|
||||
} from "@/lib/offline";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const TYPE_META: Record<OfflineType, { label: string; icon: React.ReactNode }> = {
|
||||
verse: { label: "Verse", icon: <BookOpen className="size-4" /> },
|
||||
prose: { label: "Chapter", icon: <BookOpen className="size-4" /> },
|
||||
letter: { label: "Letter", icon: <Mail className="size-4" /> },
|
||||
magazine: { label: "Magazine", icon: <Newspaper className="size-4" /> },
|
||||
transcript: { label: "Transcript", icon: <Mic className="size-4" /> },
|
||||
journal: { label: "Journal", icon: <FileText className="size-4" /> },
|
||||
essay: { label: "Essay", icon: <FileText className="size-4" /> },
|
||||
document: { label: "Document", icon: <FileText className="size-4" /> },
|
||||
};
|
||||
|
||||
function formatBytes(n: number): string {
|
||||
if (!n || n < 1024) return `${n || 0} B`;
|
||||
const units = ["KB", "MB", "GB"];
|
||||
let v = n / 1024;
|
||||
let i = 0;
|
||||
while (v >= 1024 && i < units.length - 1) {
|
||||
v /= 1024;
|
||||
i++;
|
||||
}
|
||||
return `${v.toFixed(v >= 10 ? 0 : 1)} ${units[i]}`;
|
||||
}
|
||||
|
||||
function formatDate(ms: number): string {
|
||||
try {
|
||||
return new Date(ms).toLocaleDateString(undefined, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
// External-store readers for the two client-only, non-React values. Using
|
||||
// useSyncExternalStore (instead of setState-in-an-effect) is SSR-safe and
|
||||
// avoids the "setState synchronously within an effect" cascade warning.
|
||||
function subscribeOnline(cb: () => void) {
|
||||
window.addEventListener("online", cb);
|
||||
window.addEventListener("offline", cb);
|
||||
return () => {
|
||||
window.removeEventListener("online", cb);
|
||||
window.removeEventListener("offline", cb);
|
||||
};
|
||||
}
|
||||
const noopSubscribe = () => () => {};
|
||||
|
||||
export default function DownloadsPage() {
|
||||
const [items, setItems] = useState<OfflineItem[] | null>(null);
|
||||
const [usage, setUsage] = useState<number | null>(null);
|
||||
|
||||
// Client-only reads via external stores (SSR snapshot → server-safe default).
|
||||
const online = useSyncExternalStore(
|
||||
subscribeOnline,
|
||||
() => navigator.onLine,
|
||||
() => true,
|
||||
);
|
||||
const supported = useSyncExternalStore(
|
||||
noopSubscribe,
|
||||
() => offlineSupported(),
|
||||
() => false,
|
||||
);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setItems(await listOffline());
|
||||
setUsage(await usageBytes());
|
||||
}, []);
|
||||
|
||||
// Load the library once mounted. The setState calls happen after an await
|
||||
// (asynchronously), not synchronously in the effect body.
|
||||
useEffect(() => {
|
||||
if (!offlineSupported()) return;
|
||||
void refresh();
|
||||
}, [refresh]);
|
||||
|
||||
async function remove(key: string) {
|
||||
await removeOffline(key);
|
||||
await refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="border-b border-border bg-card/85 backdrop-blur px-4 sm:px-6 py-5">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-foreground">Offline library</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Pages and lectures you’ve saved to read or listen to without a
|
||||
connection. Stored on this device.
|
||||
</p>
|
||||
<div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5",
|
||||
online ? "text-muted-foreground" : "text-amber-600",
|
||||
)}
|
||||
>
|
||||
{online ? (
|
||||
<Wifi className="size-3.5" />
|
||||
) : (
|
||||
<WifiOff className="size-3.5" />
|
||||
)}
|
||||
{online ? "Online" : "Offline"}
|
||||
</span>
|
||||
{usage !== null && (
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<HardDriveDownload className="size-3.5" />
|
||||
{formatBytes(usage)} used
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
|
||||
{!supported ? (
|
||||
<p className="py-16 text-center text-sm text-muted-foreground">
|
||||
This browser doesn’t support offline saving.
|
||||
</p>
|
||||
) : items === null ? (
|
||||
<p className="py-16 text-center text-sm text-muted-foreground">
|
||||
Loading…
|
||||
</p>
|
||||
) : items.length === 0 ? (
|
||||
<div className="py-16 text-center">
|
||||
<HardDriveDownload className="mx-auto size-8 text-muted-foreground/50" />
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
Nothing saved yet. Tap{" "}
|
||||
<span className="font-medium text-foreground">Save offline</span>{" "}
|
||||
on any chapter, letter, magazine, or transcript to keep it here.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="space-y-2.5">
|
||||
{items.map((item) => {
|
||||
const meta = TYPE_META[item.type] ?? TYPE_META.document;
|
||||
return (
|
||||
<li
|
||||
key={item.key}
|
||||
className="flex items-start gap-3 rounded-xl border border-border bg-card px-4 py-3.5 sm:px-5 sm:py-4 transition-colors hover:bg-muted/50"
|
||||
>
|
||||
{/* Hard navigation so the SW can serve the cached document offline. */}
|
||||
<a
|
||||
href={item.href}
|
||||
className="flex min-w-0 flex-1 items-start gap-3"
|
||||
>
|
||||
<span className="mt-0.5 shrink-0 text-muted-foreground">
|
||||
{meta.icon}
|
||||
</span>
|
||||
<span className="min-w-0">
|
||||
<span className="line-clamp-2 text-[15px] sm:text-base font-medium text-foreground">
|
||||
{item.title}
|
||||
</span>
|
||||
<span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
||||
<span className="rounded bg-muted px-1.5 py-0.5">
|
||||
{meta.label}
|
||||
</span>
|
||||
{item.audioKey && (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Mic className="size-3" /> audio
|
||||
</span>
|
||||
)}
|
||||
<span>{formatDate(item.savedAt)}</span>
|
||||
<span>· {formatBytes(item.bytes)}</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove(item.key)}
|
||||
aria-label={`Remove ${item.title} from offline`}
|
||||
title="Remove from offline"
|
||||
className="-mr-1 mt-0.5 shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user