@itsmrtr/bunkoshelf 1.6.0 → 1.7.0

package/dist/src/components/pwa/OfflineGate.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { CloudOffIcon, DownloadIcon, LibraryBigIcon } from "lucide-react";
+import Link from "next/link";
+import MangaReader from "@/components/reader/MangaReader";
+import MangaCard from "@/components/ui/MangaCard";
+import { enqueueOfflineOperation, getOfflineImages, getReadyVolumes, offlinePageUrl, updateOfflineVolume, type OfflineVolume } from "@/lib/client/offlineLibrary";
+import type { Dictionary, Locale } from "@/lib/types";
+import { usePwa } from "./PwaProvider";
+
+function OfflineUnavailable({ intl }: { intl: Dictionary }) {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen gap-4 p-4">
+      <CloudOffIcon size={64} />
+      <h2 className="font-roboto text-center">{(intl.offline?.unavailable as string) || "No disponible sin conexión"}</h2>
+    </div>
+  );
+}
+
+function OfflineVolumeReader({ volume, intl, userId }: { volume: OfflineVolume; intl: Dictionary; userId: string }) {
+  const [open, setOpen] = useState(false);
+  const [images, setImages] = useState<string[]>([]);
+  const openReader = async () => {
+    setImages(await getOfflineImages(userId, volume.id));
+    setOpen(true);
+  };
+  const closeReader = async () => {
+    const saved = localStorage.getItem(`reader-progress:${volume.slug}`);
+    if (saved) {
+      const { lastPage, totalPages, lastReadAt } = JSON.parse(saved) as { lastPage: number; totalPages: number; lastReadAt: string };
+      const now = new Date();
+      const date = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+      await updateOfflineVolume(userId, volume.id, { lastPage, totalPages, isRead: lastPage >= totalPages - 1 });
+      await enqueueOfflineOperation(userId, "progress", { volumeSlug: volume.slug, lastPage, totalPages, lastReadAt, date });
+    }
+    setOpen(false);
+  };
+  return (
+    <>
+      <button onClick={openReader} className="flex items-center font-bold px-5 py-2 rounded-lg leading-none uppercase text-sand bg-lilah border border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl cursor-pointer transition-all duration-300">
+        <DownloadIcon size={20} className="mr-2" />
+        {intl.manga.read as string}
+      </button>
+      <MangaReader
+        isOpen={open}
+        onClose={() => void closeReader()}
+        slug={volume.slug}
+        intl={intl}
+        isYoureiMode={false}
+        readingDirection={volume.mangaStyle === "YesLTR" || volume.mangaStyle === "No" ? "ltr" : "rtl"}
+        coverSrc={offlinePageUrl(userId, volume.id, -1)}
+        mangaTitle={volume.title}
+        volumeId={volume.id}
+        communityRating={typeof volume.metadata.communityRating === "number" ? volume.metadata.communityRating : null}
+        initialPersonalRating={null}
+        offlineImages={images}
+      />
+    </>
+  );
+}
+
+function OfflineLibrary({ path, lang, intl, userId }: { path: string; lang: Locale; intl: Dictionary; userId: string }) {
+  const [volumes, setVolumes] = useState<OfflineVolume[] | null>(null);
+  useEffect(() => {
+    const load = () => void getReadyVolumes(userId).then(setVolumes);
+    load();
+    window.addEventListener("bunko:offline-change", load);
+    return () => window.removeEventListener("bunko:offline-change", load);
+  }, [userId]);
+  if (!volumes) return null;
+
+  const section = path.includes(`/${lang}/others`) || path.includes("/favorites/others") ? "others" : "manga";
+  const favoritesOnly = path.includes("/favorites/");
+  const scoped = volumes.filter((volume) => volume.section === section && (!favoritesOnly || volume.isFavorite));
+  const volumeSlug = path.match(/\/volume\/([^/]+)/)?.[1];
+  const seriesSlug = !volumeSlug && path.match(new RegExp(`/${section}/([^/?]+)`))?.[1];
+  const selectedVolume = volumeSlug ? scoped.find((volume) => volume.slug === volumeSlug) : null;
+  const selectedSeries = seriesSlug && !["series", "volumes", "toread"].includes(seriesSlug)
+    ? scoped.filter((volume) => volume.seriesSlug === seriesSlug)
+    : null;
+
+  if (selectedVolume) {
+    return (
+      <div className="p-4">
+        <section className="flex flex-col md:flex-row">
+          <div className="w-full md:w-5/12 2xl:w-1/3 px-16 md:px-0">
+            {/* Offline blobs cannot pass through Next image optimization. */}
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={offlinePageUrl(userId, selectedVolume.id, -1)} alt={selectedVolume.title} className="w-full h-auto object-contain rounded-lg" />
+          </div>
+          <div className="w-full md:w-7/12 2xl:w-2/3 2xl:pl-4">
+            <h1 className="text-2xl leading-11 md:text-3xl md:leading-14">{selectedVolume.title}</h1>
+            {!selectedVolume.isOneshot && <Link href={`/${lang}/${section}/${selectedVolume.seriesSlug}`} className="block py-2 italic hover:underline">{intl.manga.series as string} {selectedVolume.seriesTitle}</Link>}
+            <div className="mt-4"><OfflineVolumeReader volume={selectedVolume} intl={intl} userId={userId} /></div>
+          </div>
+        </section>
+      </div>
+    );
+  }
+
+  if (selectedSeries) {
+    if (!selectedSeries.length) return <OfflineUnavailable intl={intl} />;
+    return <OfflineGrid volumes={selectedSeries} lang={lang} intl={intl} userId={userId} section={section} title={selectedSeries[0].seriesTitle} />;
+  }
+  if (!scoped.length) return <OfflineUnavailable intl={intl} />;
+  const isSeriesListing = path.endsWith("/series") || (favoritesOnly && !path.endsWith("/volumes"));
+  const listing = isSeriesListing ? Array.from(new Map(scoped.map((volume) => [volume.seriesId, volume])).values()) : scoped;
+  return <OfflineGrid volumes={listing} lang={lang} intl={intl} userId={userId} section={section} title={isSeriesListing ? intl.manga.allSeries as string : intl.manga.allVolumes as string} series={isSeriesListing} />;
+}
+
+function OfflineGrid({ volumes, lang, intl, userId, section, title, series = false }: { volumes: OfflineVolume[]; lang: Locale; intl: Dictionary; userId: string; section: string; title: string; series?: boolean }) {
+  return (
+    <section className="p-4 mt-4">
+      <h2 className="flex items-center text-base md:text-lg mb-4"><LibraryBigIcon size={28} className="mr-2" />{title}</h2>
+      <div className="grid grid-cols-2 md:grid-cols-5 2xl:grid-cols-7 gap-4">
+        {volumes.map((volume) => <MangaCard key={volume.id} title={series ? volume.seriesTitle : volume.title} href={series ? `/${lang}/${section}/${volume.seriesSlug}` : `/${lang}/${section}/volume/${volume.slug}`} isSeries={series} isOneshot={volume.isOneshot} volumeCount={series ? volumes.filter((item) => item.seriesId === volume.seriesId).length : null} cover={offlinePageUrl(userId, volume.id, -1)} isDragging={false} seriesSlug={series ? volume.seriesSlug : null} offlineSeriesId={series ? volume.seriesId : null} offlineVolumeId={series ? null : volume.id} intl={intl} />)}
+      </div>
+    </section>
+  );
+}
+
+export default function OfflineGate({ children, lang, intl, userId }: { children: React.ReactNode; lang: Locale; intl: Dictionary; userId?: string }) {
+  const { online } = usePwa();
+  const [path, setPath] = useState("");
+  useEffect(() => {
+    const sync = () => setPath(`${window.location.pathname}${window.location.search}`);
+    sync();
+    window.addEventListener("popstate", sync);
+    window.addEventListener("bunko:offline-navigate", sync);
+    return () => {
+      window.removeEventListener("popstate", sync);
+      window.removeEventListener("bunko:offline-navigate", sync);
+    };
+  }, []);
+  if (online) return children;
+  if (!userId) return <OfflineUnavailable intl={intl} />;
+  if (path.includes(`/${lang}/manga`) || path.includes(`/${lang}/others`) || path.includes("/favorites/") || path.includes(`/${lang}/search`) || path.includes(`/${lang}/catalog`)) return <OfflineLibrary path={path} lang={lang} intl={intl} userId={userId} />;
+  return <OfflineUnavailable intl={intl} />;
+}

package/dist/src/components/pwa/PwaProvider.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { createContext, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { useRouter } from "next/navigation";
+import { flushOfflineOperations, getReadyVolumes, resumeOfflineDownloads } from "@/lib/client/offlineLibrary";
+
+interface PwaContextValue {
+  online: boolean;
+  offlineSlugs: Set<string>;
+  offlineVolumeIds: Set<string>;
+  offlineSeriesIds: Set<string>;
+}
+
+const PwaContext = createContext<PwaContextValue>({
+  online: true,
+  offlineSlugs: new Set(),
+  offlineVolumeIds: new Set(),
+  offlineSeriesIds: new Set(),
+});
+const RELOAD_KEY = "bunko-sw-reload";
+
+function subscribe(callback: () => void) {
+  window.addEventListener("online", callback);
+  window.addEventListener("offline", callback);
+  return () => {
+    window.removeEventListener("online", callback);
+    window.removeEventListener("offline", callback);
+  };
+}
+
+export default function PwaProvider({ userId, children }: { userId?: string; children: React.ReactNode }) {
+  const online = useSyncExternalStore(subscribe, () => navigator.onLine, () => true);
+  const router = useRouter();
+  const [offlineSlugs, setOfflineSlugs] = useState<Set<string>>(new Set());
+  const [offlineVolumeIds, setOfflineVolumeIds] = useState<Set<string>>(new Set());
+  const [offlineSeriesIds, setOfflineSeriesIds] = useState<Set<string>>(new Set());
+  const wasOnline = useRef(online);
+
+  useEffect(() => {
+    if (!("serviceWorker" in navigator) || !window.isSecureContext) return;
+    navigator.serviceWorker.register("/sw.js")
+      .then((registration) => registration.update().catch(() => {}))
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    if (!("serviceWorker" in navigator)) return;
+    const reload = () => {
+      if (sessionStorage.getItem(RELOAD_KEY) === "1") return;
+      sessionStorage.setItem(RELOAD_KEY, "1");
+      window.location.reload();
+    };
+    const clear = () => sessionStorage.removeItem(RELOAD_KEY);
+    navigator.serviceWorker.addEventListener("controllerchange", reload);
+    window.addEventListener("load", clear);
+    return () => {
+      navigator.serviceWorker.removeEventListener("controllerchange", reload);
+      window.removeEventListener("load", clear);
+    };
+  }, []);
+
+  useEffect(() => {
+    const reconnected = !wasOnline.current && online;
+    wasOnline.current = online;
+    if (!userId || !online) return;
+    void (async () => {
+      await resumeOfflineDownloads(userId);
+      await flushOfflineOperations(userId);
+      if (reconnected) router.refresh();
+    })();
+  }, [online, router, userId]);
+
+  useEffect(() => {
+    if (!userId) {
+      setOfflineSlugs(new Set());
+      setOfflineVolumeIds(new Set());
+      setOfflineSeriesIds(new Set());
+      return;
+    }
+    const load = () => {
+      void getReadyVolumes(userId).then((volumes) => {
+        setOfflineSlugs(new Set(volumes.map((volume) => volume.slug)));
+        setOfflineVolumeIds(new Set(volumes.map((volume) => volume.id)));
+        setOfflineSeriesIds(new Set(volumes.map((volume) => volume.seriesId)));
+      });
+    };
+    load();
+    window.addEventListener("bunko:offline-change", load);
+    return () => window.removeEventListener("bunko:offline-change", load);
+  }, [userId]);
+
+  useEffect(() => {
+    document.documentElement.dataset.offline = online ? "false" : "true";
+  }, [online]);
+
+  useEffect(() => {
+    const intercept = (event: MouseEvent) => {
+      if (navigator.onLine || event.defaultPrevented || event.button !== 0) return;
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      const target = event.target instanceof Element ? event.target.closest("a[href]") : null;
+      if (!(target instanceof HTMLAnchorElement)) return;
+      const url = new URL(target.href);
+      if (url.origin !== window.location.origin) return;
+      event.preventDefault();
+      window.history.pushState({}, "", `${url.pathname}${url.search}`);
+      window.dispatchEvent(new Event("bunko:offline-navigate"));
+    };
+    document.addEventListener("click", intercept, true);
+    return () => document.removeEventListener("click", intercept, true);
+  }, []);
+
+  const value = useMemo(
+    () => ({ online, offlineSlugs, offlineVolumeIds, offlineSeriesIds }),
+    [offlineSeriesIds, offlineSlugs, offlineVolumeIds, online],
+  );
+  return <PwaContext.Provider value={value}>{children}</PwaContext.Provider>;
+}
+
+export function usePwa() {
+  return useContext(PwaContext);
+}

package/dist/src/components/reader/MangaReader.tsx

@@ -26,6 +26,7 @@ interface MangaReaderProps {
   volumeId: string;
   communityRating: number | null;
   initialPersonalRating: number | null;
+  offlineImages?: string[];
 }
 
 export default function MangaReader({
@@ -42,6 +43,7 @@ export default function MangaReader({
   volumeId,
   communityRating,
   initialPersonalRating,
+  offlineImages,
 }: MangaReaderProps) {
   const modalRef = useRef<HTMLDivElement>(null);
   const wakeLockRef = useRef<WakeLockSentinel | null>(null);
@@ -66,6 +68,11 @@ export default function MangaReader({
       setLoading(true);
       setShowFinishScreen(false);
       try {
+        if (offlineImages?.length) {
+          setImages(offlineImages);
+          setCurrentIndex(0);
+          return;
+        }
         const response = await fetch("/api/reader/manga", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -109,7 +116,7 @@ export default function MangaReader({
     }
 
     fetchPages();
-  }, [isOpen, slug, isYoureiMode, isRTL]);
+  }, [isOpen, slug, isYoureiMode, isRTL, offlineImages]);
 
   useEffect(() => {
     if (!isYoureiMode && images.length > 0) {

package/dist/src/components/ui/MangaCard.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import Image from "next/image";
 import clsx from "clsx";
 import { useRef } from "react";
+import { CloudIcon } from "lucide-react";
+import { usePwa } from "@/components/pwa/PwaProvider";
 import type { DictionarySection } from "@/lib/types";
 
 interface MangaCardProps {
@@ -20,6 +22,8 @@ interface MangaCardProps {
   className?: string;
   seriesSlug?: string | null;
   progressRatio?: number | null;
+  offlineVolumeId?: string | null;
+  offlineSeriesId?: string | null;
 }
 
 export default function MangaCard({
@@ -36,13 +40,22 @@ export default function MangaCard({
   className,
   seriesSlug,
   progressRatio,
+  offlineVolumeId,
+  offlineSeriesId,
 }: MangaCardProps) {
   const t = intl;
   const ratio = progressRatio ?? 0;
   const touchStart = useRef<{ x: number; y: number } | null>(null);
   const hasTouchMoved = useRef(false);
+  const { offlineSlugs, offlineVolumeIds, offlineSeriesIds } = usePwa();
 
   const manga = t.manga as DictionarySection;
+  const volumeSlug = href.split("?")[0].split("/").pop();
+  const isOfflineAvailable = isSeries
+    ? !!offlineSeriesId && offlineSeriesIds.has(offlineSeriesId)
+    : !!offlineVolumeId && offlineVolumeIds.has(offlineVolumeId)
+      ? true
+      : !!volumeSlug && offlineSlugs.has(volumeSlug);
 
   return (
     <Link
@@ -95,6 +108,39 @@ export default function MangaCard({
           className="object-cover z-0"
         />
 
+        <div className="absolute top-2 right-2 z-10 flex items-center gap-1">
+          {isSeries && volumeCount != null && (
+            <span className="bg-neutral-700 text-[10px] leading-none uppercase py-1 px-1.5 rounded">
+              {volumeCount} {manga.volumes as string}
+            </span>
+          )}
+          {isSeries && onGoing && (
+            <span className="bg-cyan-500 text-white text-[10px] leading-none uppercase py-1 px-1.5 rounded">
+              {manga.onGoing as string}
+            </span>
+          )}
+          {isSeries && onPause && (
+            <span className="bg-yellow-500 text-onix text-[10px] leading-none uppercase py-1 px-1.5 rounded">
+              {manga.hiatus as string}
+            </span>
+          )}
+          {isSeries && isOfflineAvailable && (
+            <span className="bg-neutral-700 p-1 rounded" title="Offline">
+              <CloudIcon size={12} />
+            </span>
+          )}
+          {!isSeries && isOneshot && (
+            <span className="bg-neutral-700 text-[10px] leading-none uppercase py-1 px-1.5 rounded">
+              Oneshot
+            </span>
+          )}
+          {!isSeries && isOfflineAvailable && (
+            <span className="bg-neutral-700 p-1 rounded" title="Offline">
+              <CloudIcon size={12} />
+            </span>
+          )}
+        </div>
+
         {ratio > 0 && (
           <div className="absolute bottom-0 left-0 w-full h-1.5 bg-blackamber/50">
             <div
@@ -105,40 +151,16 @@ export default function MangaCard({
         )}
       </div>
 
-      <div className="flex flex-col justify-between p-3 h-24 rounded-b-lg border border-blackamber bg-onix group-hover:bg-blackamber">
+      <div className="flex items-center p-2.5 h-14 rounded-b-lg border border-blackamber bg-onix group-hover:bg-blackamber">
         <h3
+          title={title ?? ""}
           className={clsx(
-            "line-clamp-3 group-hover:text-lilah transition-all duration-300",
+            "min-w-0 w-full truncate group-hover:text-lilah transition-all duration-300",
             className
           )}
         >
           {title}
         </h3>
-
-        <div className="relative flex items-end justify-between gap-1">
-          {isSeries && volumeCount != null && (
-            <>
-              <p className="mt-2 text-xs uppercase text-neutral-500">
-                {volumeCount} {manga.volumes as string}
-              </p>
-              {onGoing && (
-                <span className="bg-cyan-500 text-white text-xs uppercase py-0.5 px-1 rounded">
-                  {manga.onGoing as string}
-                </span>
-              )}
-              {onPause && (
-                <span className="bg-yellow-500 text-onix text-xs uppercase py-0.5 px-1 rounded">
-                  {manga.hiatus as string}
-                </span>
-              )}
-            </>
-          )}
-          {isOneshot && (
-            <span className="bg-lilah text-xs uppercase py-0.5 px-1 rounded">
-              Oneshot
-            </span>
-          )}
-        </div>
       </div>
     </Link>
   );

package/dist/src/lib/auth/verifySession.ts

@@ -27,7 +27,7 @@ export async function verifySession(): Promise<Session | null> {
     const token = cookiesInstance.get("yomimono_key")?.value;
     if (!token) return null;
 
-    return resolveSession(token);
+    return await resolveSession(token);
   } catch (error) {
     if (error && typeof error === "object" && "digest" in error) {
       throw error;