@itsmrtr/bunkoshelf 1.6.0 → 1.7.1

package/dist/src/components/library/manga/ReadButtonsVolume.tsx

@@ -15,6 +15,8 @@ import { toggleVolumeFavorite } from "@/actions/favorites";
 import { updateReadState } from "@/actions/read";
 import { syncReadingProgress } from "@/actions/progress";
 import { sendPush } from "@/actions/web-push";
+import OfflineDownloadButton from "@/components/pwa/OfflineDownloadButton";
+import { enqueueOfflineOperation, getOfflineImages, updateOfflineVolume } from "@/lib/client/offlineLibrary";
 import {
   getLibraryRootHref,
   type LibrarySection,
@@ -34,6 +36,7 @@ interface ReadButtonsVolumeProps {
   communityRating: number | null;
   initialPersonalRating: number | null;
   section?: LibrarySection;
+  userId?: string;
 }
 
 export default function ReadButtonsVolume({
@@ -49,6 +52,7 @@ export default function ReadButtonsVolume({
   communityRating,
   initialPersonalRating,
   section = "manga",
+  userId,
 }: ReadButtonsVolumeProps) {
   const router = useRouter();
   const [isFavorite, setIsFavorite] = useState(initFavorite);
@@ -56,11 +60,16 @@ export default function ReadButtonsVolume({
   const [isLoading, setIsLoading] = useState(false);
   const [isReaderOpen, setIsReaderOpen] = useState(false);
   const [isYoureiMode, setIsYoureiMode] = useState(false);
+  const [offlineImages, setOfflineImages] = useState<string[] | undefined>();
 
   const readingDirection =
     mangaStyle === "YesLTR" || mangaStyle === "No" ? "ltr" : "rtl";
 
-  const openNormalReader = () => {
+  const openNormalReader = async () => {
+    if (userId) {
+      const localImages = await getOfflineImages(userId, volumeId);
+      if (localImages.length) setOfflineImages(localImages);
+    }
     setIsYoureiMode(false);
     setIsReaderOpen(true);
   };
@@ -88,6 +97,19 @@ export default function ReadButtonsVolume({
 
     setIsLoading(true);
     try {
+      if (!navigator.onLine && userId) {
+        const localImages = offlineImages?.length ? offlineImages : await getOfflineImages(userId, volumeId);
+        const totalPages = localImages.length;
+        if (!totalPages) return;
+        setOfflineImages(localImages);
+        const nextRead = !isRead;
+        const now = new Date();
+        const localDate = getLocalDateString();
+        await updateOfflineVolume(userId, volumeId, { isRead: nextRead, lastPage: nextRead ? totalPages - 1 : 0, totalPages });
+        await enqueueOfflineOperation(userId, "read", { volumeId, read: nextRead, totalPages, lastReadAt: now.toISOString(), firstRead: localDate });
+        setIsRead(nextRead);
+        return;
+      }
       const imagesRes = await fetch("/api/reader/manga", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -134,6 +156,13 @@ export default function ReadButtonsVolume({
 
     setIsLoading(true);
     try {
+      if (!navigator.onLine && userId) {
+        const nextFavorite = !isFavorite;
+        await updateOfflineVolume(userId, volumeId, { isFavorite: nextFavorite });
+        await enqueueOfflineOperation(userId, "favorite", { volumeId, favorite: nextFavorite });
+        setIsFavorite(nextFavorite);
+        return;
+      }
       const result = await toggleVolumeFavorite({
         volumeId,
         favorite: !isFavorite,
@@ -177,6 +206,13 @@ export default function ReadButtonsVolume({
           date: today,
         };
 
+        if (!navigator.onLine && userId) {
+          await updateOfflineVolume(userId, volumeId, { lastPage, totalPages, isRead: isFinished });
+          await enqueueOfflineOperation(userId, "progress", body);
+          if (isFinished) setIsRead(true);
+          return;
+        }
+
         const data = await syncReadingProgress(body);
 
         if (!data || !data.success) {
@@ -262,6 +298,8 @@ export default function ReadButtonsVolume({
         >
           {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
         </button>
+
+        <OfflineDownloadButton userId={userId} section={section} slug={slug} volumeId={volumeId} intl={intl} />
       </div>
 
       <MangaReader
@@ -278,6 +316,7 @@ export default function ReadButtonsVolume({
         volumeId={volumeId}
         communityRating={communityRating}
         initialPersonalRating={initialPersonalRating}
+        offlineImages={offlineImages}
       />
     </>
   );

package/dist/src/components/library/manga/SeriesContent.tsx

@@ -3,7 +3,7 @@ import MangaCard from "@/components/ui/MangaCard";
 import ReadButtonsSeries from "./ReadButtonsSeries";
 import MetadataPanel from "./MetadataPanel";
 import MangaSummary from "./MangaSummary";
-import { ageRatingMap } from "@/lib/utils";
+import { ageRatingMap } from "@/lib/mangaMetadata";
 import DeleteMangaItem from "./DeleteMangaItem";
 import ScanSeriesButton from "./ScanSeriesButton";
 import Separator from "@/components/ui/Separator";
@@ -56,6 +56,7 @@ export default function SeriesContent({
 
   const isWesternReading =
     meta.mangaStyle === "YesLTR" || meta.mangaStyle === "No";
+  const isOfflineCover = coverImage?.startsWith("/offline/") ?? false;
 
   return (
     <div className="p-4">
@@ -63,14 +64,19 @@ export default function SeriesContent({
         <div className="w-full md:w-5/12 2xl:w-1/3">
           {coverImage && (
             <div className="mb-8 md:mb-0 md:mr-4 px-16 md:px-0 md:sticky md:top-4 md:self-start">
-              <Image
-                src={coverImage || "/placeholder.svg?=v1"}
-                alt={`Cover for ${(serieData.title as string) || (serieData.filename as string)}`}
-                width={0}
-                height={0}
-                sizes="100vw"
-                className="w-full h-auto object-contain rounded-lg"
-              />
+              {isOfflineCover ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={coverImage} alt={`Cover for ${(serieData.title as string) || (serieData.filename as string)}`} className="w-full h-auto object-contain rounded-lg" />
+              ) : (
+                <Image
+                  src={coverImage || "/placeholder.svg?=v1"}
+                  alt={`Cover for ${(serieData.title as string) || (serieData.filename as string)}`}
+                  width={0}
+                  height={0}
+                  sizes="100vw"
+                  className="w-full h-auto object-contain rounded-lg"
+                />
+              )}
             </div>
           )}
         </div>
@@ -85,6 +91,9 @@ export default function SeriesContent({
             intl={intl}
             seriesId={serieData.id as string}
             initFavorite={isFavorite}
+            seriesSlug={serieData.slug as string}
+            section={section}
+            userId={user?.id}
           />
 
           <div className="mt-8">
@@ -172,6 +181,7 @@ export default function SeriesContent({
                   isDragging={false}
                   seriesSlug={null}
                   progressRatio={getVolumeProgressRatio(progress)}
+                  offlineVolumeId={volume.id as string}
                   intl={intl}
                   className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg"
                 />

package/dist/src/components/library/manga/VolumesContent.tsx

@@ -4,7 +4,7 @@ import ReadButtonsVolume from "./ReadButtonsVolume";
 import ReadingHistory from "./ReadingHistory";
 import MetadataPanel from "./MetadataPanel";
 import MangaSummary from "./MangaSummary";
-import { ageRatingMap } from "@/lib/utils";
+import { ageRatingMap } from "@/lib/mangaMetadata";
 import DeleteMangaItem from "./DeleteMangaItem";
 import ScanSeriesButton from "./ScanSeriesButton";
 import Separator from "@/components/ui/Separator";
@@ -70,21 +70,28 @@ export default function VolumesContent({
 
   const isWesternReading =
     meta.mangaStyle === "YesLTR" || meta.mangaStyle === "No";
+  const coverImage = volume.coverImage as string | undefined;
+  const isOfflineCover = coverImage?.startsWith("/offline/") ?? false;
 
   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">
-          {(volume.coverImage as string) && (
+          {coverImage && (
             <div className="mb-8 md:mb-0 md:mr-4 px-16 md:px-0 md:sticky md:top-4 md:self-start">
-              <Image
-                src={(volume.coverImage as string) || "/placeholder.svg?=v1"}
-                alt={`Cover for ${(volume.title as string) || (volume.filename as string)}`}
-                width={0}
-                height={0}
-                sizes="100vw"
-                className="w-full h-auto object-contain rounded-lg"
-              />
+              {isOfflineCover ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={coverImage} alt={`Cover for ${(volume.title as string) || (volume.filename as string)}`} className="w-full h-auto object-contain rounded-lg" />
+              ) : (
+                <Image
+                  src={coverImage || "/placeholder.svg?=v1"}
+                  alt={`Cover for ${(volume.title as string) || (volume.filename as string)}`}
+                  width={0}
+                  height={0}
+                  sizes="100vw"
+                  className="w-full h-auto object-contain rounded-lg"
+                />
+              )}
             </div>
           )}
         </div>
@@ -117,6 +124,7 @@ export default function VolumesContent({
             communityRating={meta.communityRating as number | null}
             initialPersonalRating={personalRating}
             section={section}
+            userId={user?.id}
           />
 
           <div className="mt-8">

package/dist/src/components/library/manga/grid/SeriesIndex.tsx

@@ -113,6 +113,7 @@ export default async function SeriesIndex({
               progressRatio={progressRatio}
               isDragging={false}
               seriesSlug={entry.slug}
+              offlineSeriesId={entry.id}
               intl={intl}
               className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg"
             />

package/dist/src/components/library/manga/grid/SeriesIndexFav.tsx

@@ -115,6 +115,7 @@ export default async function SeriesIndexFav({
               progressRatio={progressRatio}
               isDragging={false}
               seriesSlug={entry.slug}
+              offlineSeriesId={entry.id}
               intl={intl}
               className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg"
             />

package/dist/src/components/library/manga/row/HeroKeepRead.tsx

@@ -16,6 +16,8 @@ import {
   ChevronRightIcon,
 } from "lucide-react";
 import { getMangaVolumes } from "@/actions/library";
+import { getReadyVolumes, offlinePageUrl } from "@/lib/client/offlineLibrary";
+import { usePwa } from "@/components/pwa/PwaProvider";
 import type { Locale, Dictionary } from "@/lib/types";
 import type { MouseEvent as ReactMouseEvent, DragEvent } from "react";
 
@@ -24,6 +26,7 @@ interface HeroKeepReadProps {
   intl: Dictionary;
   section?: LibrarySection;
   scope?: LibraryScope;
+  offlineUserId?: string;
 }
 
 interface ReadingEntry {
@@ -45,6 +48,7 @@ export default function HeroKeepRead({
   intl,
   section = "manga",
   scope = "all",
+  offlineUserId,
 }: HeroKeepReadProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [entries, setEntries] = useState<ReadingEntry[]>([]);
@@ -53,9 +57,31 @@ export default function HeroKeepRead({
   const scrollStart = useRef(0);
   const hasDragged = useRef(false);
   const pathname = usePathname();
+  const { online } = usePwa();
 
   useEffect(() => {
     async function fetchReadingProgress() {
+      if (!online && offlineUserId) {
+        const data = await getReadyVolumes(offlineUserId, section);
+        const localEntries = data
+          .filter((volume) => volume.lastPage > 0 && volume.lastPage < volume.totalPages - 1)
+          .map((volume) => ({
+            id: volume.id,
+            slug: volume.slug,
+            title: volume.title,
+            isOneshot: volume.isOneshot,
+            coverImage: offlinePageUrl(offlineUserId, volume.id, -1),
+            meta: { title: volume.title },
+            lastPage: volume.lastPage,
+            totalPages: volume.totalPages,
+            lastReadAt: volume.downloadedAt ? new Date(volume.downloadedAt) : null,
+            progressRatio: volume.totalPages > 0 ? (volume.lastPage + 1) / volume.totalPages : 0,
+          }))
+          .sort((a, b) => (b.lastReadAt?.getTime() ?? 0) - (a.lastReadAt?.getTime() ?? 0));
+        setEntries(localEntries);
+        return;
+      }
+
       const result = await getMangaVolumes({ scope });
       if (!result || !result.success) return;
 
@@ -97,7 +123,7 @@ export default function HeroKeepRead({
     }
 
     fetchReadingProgress();
-  }, [pathname, scope]);
+  }, [offlineUserId, online, pathname, scope, section]);
 
   const handleMouseDown = (e: ReactMouseEvent<HTMLDivElement>) => {
     setIsDragging(true);
@@ -229,7 +255,7 @@ export default function HeroKeepRead({
           </section>
 
           <div className="sticky top-0 z-10 bg-pearl p-4">
-            <MangaNav lang={lang} intl={intl} section={section} scope={scope} />
+            <MangaNav lang={lang} intl={intl} section={section} scope={scope} offlineUserId={offlineUserId} />
           </div>
         </>
       )}

package/dist/src/components/library/manga/row/MangaRowCarousel.tsx

@@ -11,6 +11,7 @@ import type { Dictionary, Locale } from "@/lib/types";
 import type { MouseEvent as ReactMouseEvent, DragEvent, ReactNode } from "react";
 
 export interface VolEntry {
+  id?: string;
   slug: string;
   title: string;
   isOneshot: boolean;
@@ -130,6 +131,7 @@ export default function MangaRowCarousel({
               isDragging={isDragging}
               seriesSlug={null}
               progressRatio={entry.progressRatio ?? null}
+              offlineVolumeId={entry.id}
               className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-lg"
             />
           </div>

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

@@ -0,0 +1,124 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { DownloadIcon, Trash2Icon } from "lucide-react";
+import clsx from "clsx";
+import {
+  downloadSeriesBySlug,
+  downloadVolumeBySlug,
+  getDownload,
+  getReadyVolumes,
+  removeOfflineSeries,
+  removeOfflineVolume,
+  type OfflineDownload,
+} from "@/lib/client/offlineLibrary";
+import type { LibrarySection } from "@/lib/librarySection";
+import type { Dictionary } from "@/lib/types";
+
+interface OfflineDownloadButtonProps {
+  userId?: string;
+  section: LibrarySection;
+  slug: string;
+  volumeId?: string;
+  seriesId?: string;
+  intl: Dictionary;
+}
+
+function ProgressRing({ value }: { value: number }) {
+  const radius = 8;
+  const circumference = 2 * Math.PI * radius;
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
+      <circle cx="10" cy="10" r={radius} fill="none" stroke="currentColor" strokeOpacity=".3" strokeWidth="2" />
+      <circle cx="10" cy="10" r={radius} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" transform="rotate(-90 10 10)" strokeDasharray={circumference} strokeDashoffset={circumference * (1 - value)} />
+    </svg>
+  );
+}
+
+export default function OfflineDownloadButton({ userId, section, slug, volumeId, seriesId, intl }: OfflineDownloadButtonProps) {
+  const [download, setDownload] = useState<OfflineDownload | null>(null);
+  const [seriesProgress, setSeriesProgress] = useState<{ completed: number; total: number } | null>(null);
+  const offline = intl.offline as Record<string, string> | undefined;
+
+  useEffect(() => {
+    if (!userId || !volumeId) return;
+    const load = () => void getDownload(userId, volumeId).then(setDownload);
+    load();
+    window.addEventListener("bunko:offline-change", load);
+    return () => window.removeEventListener("bunko:offline-change", load);
+  }, [userId, volumeId]);
+
+  const isSeries = !!seriesId;
+  const isReady = isSeries
+    ? Boolean(seriesProgress && seriesProgress.completed === seriesProgress.total && seriesProgress.total)
+    : download?.status === "ready";
+  const progress = isSeries
+    ? seriesProgress ? seriesProgress.completed / seriesProgress.total : 0
+    : download?.totalPages ? download.completedPages / download.totalPages : 0;
+  const isDownloading = isSeries ? !!seriesProgress && !isReady : download?.status === "downloading" || download?.status === "queued";
+
+  useEffect(() => {
+    if (!userId || !seriesId) return;
+    const load = async () => {
+      const volumes = await getReadyVolumes(userId, section);
+      const ready = volumes.filter((volume) => volume.seriesId === seriesId).length;
+      if (ready) setSeriesProgress((current) => current?.total && current.completed < current.total ? { completed: ready, total: current.total } : { completed: ready, total: ready });
+    };
+    void load();
+    window.addEventListener("bunko:offline-change", load);
+    return () => window.removeEventListener("bunko:offline-change", load);
+  }, [section, seriesId, userId]);
+
+  const handleClick = async () => {
+    if (!userId) return;
+    if (isReady) {
+      const message = isSeries ? offline?.removeSeries : offline?.removeVolume;
+      if (!window.confirm(message || "¿Quieres eliminar esta descarga offline?")) return;
+      if (isSeries && seriesId) await removeOfflineSeries(userId, seriesId);
+      if (!isSeries && volumeId) await removeOfflineVolume(userId, volumeId);
+      setSeriesProgress(null);
+      setDownload(null);
+      return;
+    }
+    if (!navigator.onLine || isDownloading) return;
+    try {
+      if (isSeries && seriesId) {
+        if (!window.confirm(offline?.downloadSeries || "¿Quieres descargar todos los tomos de esta serie?")) return;
+        setSeriesProgress({ completed: 0, total: 1 });
+        await downloadSeriesBySlug(userId, section, slug, (completed, total) => setSeriesProgress({ completed, total }));
+      } else {
+        setDownload({
+          key: `${userId}:${volumeId}`,
+          userId,
+          volumeId: volumeId!,
+          status: "queued",
+          completedPages: 0,
+          totalPages: 0,
+          size: 0,
+          updatedAt: new Date().toISOString(),
+        });
+        await downloadVolumeBySlug(userId, section, slug, setDownload);
+      }
+    } catch (error) {
+      console.error("Offline download error:", error);
+      window.alert(offline?.downloadError || "No se pudo completar la descarga");
+      setSeriesProgress(null);
+    }
+  };
+
+  const title = isReady ? offline?.remove : isDownloading ? offline?.downloading : offline?.download;
+  const online = typeof navigator !== "undefined" && navigator.onLine;
+  return (
+    <button
+      onClick={handleClick}
+      disabled={!userId || (!online && !isReady) || isDownloading}
+      title={title || "Descargar para leer sin conexión"}
+      className={clsx(
+        "p-3 2xl:p-4 rounded-lg leading-none border transition-all duration-300 cursor-pointer",
+        isReady ? "text-onix bg-sand border-sand hover:bg-pearl hover:border-pearl" : "text-sand bg-blackamber border-blackamber hover:text-onix hover:bg-pearl hover:border-pearl",
+      )}
+    >
+      {isDownloading ? <ProgressRing value={progress} /> : isReady ? <Trash2Icon size={20} /> : <DownloadIcon size={20} />}
+    </button>
+  );
+}