@itsmrtr/bunkoshelf 1.7.0 → 1.8.0

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

@@ -1,9 +1,10 @@
 import Image from "next/image";
+import { DownloadIcon } from "lucide-react";
 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 +57,8 @@ export default function SeriesContent({
 
   const isWesternReading =
     meta.mangaStyle === "YesLTR" || meta.mangaStyle === "No";
+  const isOfflineCover = coverImage?.startsWith("/offline/") ?? false;
+  const canDownloadOriginal = process.env.LIB_PROVIDER === "cloud";
 
   return (
     <div className="p-4">
@@ -63,14 +66,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>
@@ -204,6 +212,15 @@ export default function SeriesContent({
             <Separator />
             <div className="flex flex-wrap items-center gap-4">
               <ScanSeriesButton seriesId={serieData.id as string} intl={intl} />
+              {canDownloadOriginal && (
+                <a
+                  href={`/api/library/download/series/${encodeURIComponent(serieData.slug as string)}`}
+                  className="text-xs uppercase cursor-pointer hover:underline flex flex-row items-center gap-1"
+                >
+                  <DownloadIcon size={11} className="mb-0.5" />
+                  {intl.manga.downloadSeries as string}
+                </a>
+              )}
               <DeleteMangaItem
                 intl={intl}
                 type="series"

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

@@ -1,10 +1,11 @@
 import Image from "next/image";
 import Link from "next/link";
+import { DownloadIcon } from "lucide-react";
 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 +71,29 @@ 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;
+  const canDownloadOriginal = process.env.LIB_PROVIDER === "cloud";
 
   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>
@@ -197,6 +206,15 @@ export default function VolumesContent({
               <Separator />
               <div className="flex flex-wrap items-center gap-4">
                 <ScanSeriesButton volumeId={volume.id as string} intl={intl} />
+                {canDownloadOriginal && (
+                  <a
+                    href={`/api/library/download/${encodeURIComponent(volume.slug as string)}`}
+                    className="text-xs uppercase cursor-pointer hover:underline flex flex-row items-center gap-1"
+                  >
+                    <DownloadIcon size={11} className="mb-0.5" />
+                    {intl.manga.downloadVolume as string}
+                  </a>
+                )}
                 <DeleteMangaItem
                   intl={intl}
                   slug={volume.slug as string}

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

@@ -38,8 +38,22 @@ function ProgressRing({ value }: { value: number }) {
 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 [isOnline, setIsOnline] = useState(false);
   const offline = intl.offline as Record<string, string> | undefined;
 
+  useEffect(() => {
+    const updateOnlineStatus = () => setIsOnline(navigator.onLine);
+
+    updateOnlineStatus();
+    window.addEventListener("online", updateOnlineStatus);
+    window.addEventListener("offline", updateOnlineStatus);
+
+    return () => {
+      window.removeEventListener("online", updateOnlineStatus);
+      window.removeEventListener("offline", updateOnlineStatus);
+    };
+  }, []);
+
   useEffect(() => {
     if (!userId || !volumeId) return;
     const load = () => void getDownload(userId, volumeId).then(setDownload);
@@ -107,11 +121,10 @@ export default function OfflineDownloadButton({ userId, section, slug, volumeId,
   };
 
   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}
+      disabled={!userId || (!isOnline && !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",