597 lines
18 KiB
TypeScript
597 lines
18 KiB
TypeScript
import { useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
ArrowLeft,
|
|
Bell,
|
|
BellOff,
|
|
BookOpen,
|
|
Calendar,
|
|
ChevronDown,
|
|
Database,
|
|
Heart,
|
|
MoreVertical,
|
|
Star,
|
|
} from "lucide-react";
|
|
import { useCallback } from "react";
|
|
import { useNavigate, useParams } from "react-router";
|
|
import { toast } from "sonner";
|
|
import { useGetManga } from "@/api/generated/catalog/catalog.ts";
|
|
import { useFetchAllContentImages, useFetchContentProviderContentList } from "@/api/generated/ingestion/ingestion.ts";
|
|
import {
|
|
useFollowManga,
|
|
useSetFavorite,
|
|
useSetUnfavorite,
|
|
useUnfollowManga,
|
|
} from "@/api/generated/user-interaction/user-interaction.ts";
|
|
import { ThemeToggle } from "@/components/ThemeToggle.tsx";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from "@/components/ui/collapsible.tsx";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu.tsx";
|
|
import { useAuth } from "@/contexts/AuthContext.tsx";
|
|
import { useUIState } from "@/contexts/UIStateContext.tsx";
|
|
import { MangaChapter } from "@/features/manga/MangaChapter.tsx";
|
|
import { useScrollPersistence } from "@/hooks/useScrollPersistence.ts";
|
|
import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
|
|
import { useGetProgress } from "@/api/generated/reading-progress/reading-progress.ts";
|
|
|
|
const Manga = () => {
|
|
const { isAuthenticated } = useAuth();
|
|
const navigate = useNavigate();
|
|
const params = useParams();
|
|
const mangaId = Number(params.mangaId);
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data: mangaData, queryKey, isLoading } = useGetManga(mangaId);
|
|
const { data: progressData } = useGetProgress(mangaId, {
|
|
query: { retry: false },
|
|
});
|
|
|
|
const { mutate, isPending: fetchPending } =
|
|
useFetchContentProviderContentList({
|
|
mutation: {
|
|
onSuccess: () => queryClient.invalidateQueries({ queryKey }),
|
|
},
|
|
});
|
|
|
|
const { mutate: fetchAllMutate, isPending: fetchAllPending } =
|
|
useFetchAllContentImages({
|
|
mutation: {
|
|
onSuccess: () => toast.success("Chapter import queued successfully."),
|
|
},
|
|
});
|
|
|
|
const isPending = fetchPending;
|
|
|
|
const { expandedProviderIds, toggleProviderId } = useUIState();
|
|
useScrollPersistence(`manga-${mangaId}`);
|
|
|
|
const { mutate: mutateFavorite, isPending: isPendingFavorite } =
|
|
useSetFavorite({
|
|
mutation: {
|
|
onSuccess: () => queryClient.invalidateQueries({ queryKey }),
|
|
},
|
|
});
|
|
|
|
const { mutate: mutateUnfavorite, isPending: isPendingUnfavorite } =
|
|
useSetUnfavorite({
|
|
mutation: {
|
|
onSuccess: () => queryClient.invalidateQueries({ queryKey }),
|
|
},
|
|
});
|
|
|
|
const isPendingFavoriteChange = isPendingFavorite || isPendingUnfavorite;
|
|
|
|
const handleFavoriteClick = useCallback(
|
|
(isFavorite: boolean) =>
|
|
isFavorite
|
|
? mutateUnfavorite({ mangaId: mangaData?.data?.id ?? -1 })
|
|
: mutateFavorite({ mangaId: mangaData?.data?.id ?? -1 }),
|
|
[mutateUnfavorite, mutateFavorite, mangaData?.data?.id],
|
|
);
|
|
|
|
const { mutate: mutateFollow, isPending: isPendingFollow } = useFollowManga({
|
|
mutation: {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey });
|
|
toast.success(
|
|
"We will notify you when new content if available for this manga.",
|
|
);
|
|
},
|
|
},
|
|
});
|
|
|
|
const { mutate: mutateUnfollow, isPending: isPendingUnfollow } =
|
|
useUnfollowManga({
|
|
mutation: {
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey });
|
|
toast.success(
|
|
"You will no longer received notifications for this manga.",
|
|
);
|
|
},
|
|
},
|
|
});
|
|
|
|
const isPendingFollowChange = isPendingFollow || isPendingUnfollow;
|
|
|
|
const handleFollowClick = useCallback(
|
|
(isFollowing: boolean) =>
|
|
isFollowing
|
|
? mutateUnfollow({ mangaId: mangaData?.data?.id ?? -1 })
|
|
: mutateFollow({ mangaId: mangaData?.data?.id ?? -1 }),
|
|
[mangaData?.data?.id, mutateUnfollow, mutateFollow],
|
|
);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Header */}
|
|
<header className="border-b border-border bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
|
|
<div className="px-8 py-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-6">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => navigate("/")}
|
|
className="gap-2"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Back to Library
|
|
</Button>
|
|
<h1 className="text-xl font-bold text-foreground">MangaMochi</h1>
|
|
</div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Content Shell */}
|
|
<main className="px-8 py-8">
|
|
<div className="mx-auto max-w-7xl">
|
|
<div className="grid gap-8 md:grid-cols-[300px_1fr]">
|
|
{/* Cover Skeleton */}
|
|
<Skeleton className="aspect-2/3 w-full rounded-lg md:sticky md:top-8" />
|
|
|
|
{/* Details Skeleton */}
|
|
<div className="space-y-6">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<Skeleton className="h-10 w-2/3" />
|
|
<div className="flex gap-4">
|
|
<Skeleton className="h-6 w-20" />
|
|
<Skeleton className="h-10 w-10" />
|
|
<Skeleton className="h-10 w-10" />
|
|
</div>
|
|
</div>
|
|
<Skeleton className="h-6 w-1/3" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-3/4" />
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<Skeleton key={i} className="h-20 w-full rounded-lg" />
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<Skeleton key={i} className="h-6 w-16 px-3 py-1" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-12">
|
|
<Skeleton className="mb-6 h-8 w-64" />
|
|
<div className="space-y-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<Skeleton key={i} className="h-20 w-full rounded-lg" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!mangaData?.data) {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-background">
|
|
<div className="text-center">
|
|
<h1 className="text-2xl font-bold text-foreground">
|
|
Manga not found
|
|
</h1>
|
|
<Button onClick={() => navigate("/")} className="mt-4">
|
|
Go back home
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const toggleProvider = (providerId: number) => {
|
|
toggleProviderId(providerId);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Header */}
|
|
<header className="border-b border-border bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
|
|
<div className="px-8 py-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-6">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => navigate("/")}
|
|
className="gap-2"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Back to Library
|
|
</Button>
|
|
<h1 className="text-xl font-bold text-foreground">MangaMochi</h1>
|
|
</div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Content */}
|
|
<main className="px-8 py-8">
|
|
<div className="mx-auto max-w-7xl">
|
|
{/* Manga Info Section */}
|
|
<div className="grid gap-8 md:grid-cols-[300px_1fr]">
|
|
{/* Cover */}
|
|
<div className="md:sticky md:top-24">
|
|
<div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-muted w-full">
|
|
<img
|
|
src={
|
|
(mangaData.data?.coverImageKey &&
|
|
import.meta.env.VITE_OMV_BASE_URL +
|
|
"/" +
|
|
mangaData.data?.coverImageKey) ||
|
|
"/placeholder.svg"
|
|
}
|
|
alt={mangaData.data?.title ?? ""}
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Details */}
|
|
<div className="space-y-6">
|
|
<div>
|
|
<div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<h1 className="text-balance text-3xl sm:text-4xl font-bold tracking-tight text-foreground">
|
|
{mangaData.data?.title}
|
|
</h1>
|
|
<div className="flex gap-2 items-center flex-wrap">
|
|
<Badge
|
|
variant="secondary"
|
|
className="border border-border bg-card text-foreground whitespace-nowrap"
|
|
>
|
|
{mangaData.data?.status}
|
|
</Badge>
|
|
{mangaData.data?.adult && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-red-500/50 bg-red-500/10 text-red-500"
|
|
>
|
|
18+
|
|
</Badge>
|
|
)}
|
|
|
|
{isAuthenticated && (
|
|
<div className="flex gap-2 ml-auto sm:ml-0">
|
|
<Button
|
|
size="icon"
|
|
variant="outline"
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
handleFollowClick(
|
|
mangaData?.data?.following || false,
|
|
);
|
|
}}
|
|
disabled={isPendingFollowChange}
|
|
>
|
|
{isPendingFollowChange ? (
|
|
<Spinner />
|
|
) : mangaData?.data?.following ? (
|
|
<BellOff className="h-4 w-4" />
|
|
) : (
|
|
<Bell className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
<Button
|
|
size="icon"
|
|
variant="outline"
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
handleFavoriteClick(
|
|
mangaData?.data?.favorite || false,
|
|
);
|
|
}}
|
|
disabled={isPendingFavoriteChange}
|
|
>
|
|
{isPendingFavoriteChange ? (
|
|
<Spinner />
|
|
) : (
|
|
<Heart
|
|
className={`h-4 w-4 transition-colors ${mangaData?.data?.favorite
|
|
? "fill-red-500 text-red-500"
|
|
: "text-muted-foreground hover:text-red-500"
|
|
}`}
|
|
/>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<p className="text-lg text-muted-foreground">
|
|
{mangaData.data?.authors.join(", ")}
|
|
</p>
|
|
|
|
{progressData &&
|
|
progressData.chapterId &&
|
|
progressData.pageNumber && (
|
|
<div className="pt-2">
|
|
<Button
|
|
size="lg"
|
|
variant="default"
|
|
className="group relative w-full sm:w-auto bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg transition-all hover:scale-[1.02] active:scale-[0.98] gap-2"
|
|
onClick={() =>
|
|
navigate(
|
|
`/manga/${mangaId}/chapter/${progressData.chapterId}`,
|
|
)
|
|
}
|
|
>
|
|
<BookOpen className="h-5 w-5 transition-transform group-hover:rotate-12" />
|
|
<div className="flex flex-col items-start leading-tight">
|
|
<span className="text-xs font-bold uppercase tracking-wider opacity-80">
|
|
Continue Reading
|
|
</span>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{mangaData.data?.alternativeTitles &&
|
|
mangaData.data?.alternativeTitles.length > 0 && (
|
|
<div>
|
|
<h3 className="mb-2 text-sm font-medium text-muted-foreground">
|
|
Alternative Titles
|
|
</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{mangaData.data?.alternativeTitles.map((title, index) => (
|
|
<span
|
|
key={index}
|
|
className="rounded-md bg-muted px-3 py-1 text-sm text-foreground"
|
|
>
|
|
{title}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<p
|
|
className="text-pretty text-justify leading-relaxed text-foreground"
|
|
dangerouslySetInnerHTML={{ __html: mangaData.data?.synopsis ?? "" }}
|
|
/>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{mangaData.data?.genres.map((genre) => (
|
|
<Badge
|
|
key={genre}
|
|
variant="outline"
|
|
className="border-border text-foreground"
|
|
>
|
|
{genre}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
|
|
<Star className="h-5 w-5 fill-primary text-primary" />
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Rating</p>
|
|
<p className="text-lg font-semibold text-foreground">
|
|
{mangaData.data?.score && mangaData.data?.score > 0
|
|
? mangaData.data?.score
|
|
: "-"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
|
|
<BookOpen className="h-5 w-5 text-primary" />
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Chapters</p>
|
|
<p className="text-lg font-semibold text-foreground">
|
|
{mangaData.data?.chapterCount &&
|
|
mangaData.data?.chapterCount > 0
|
|
? mangaData.data?.chapterCount
|
|
: "-"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{mangaData?.data?.publishedFrom && (
|
|
<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
|
|
<Calendar className="h-5 w-5 text-primary" />
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Published</p>
|
|
<p className="text-lg font-semibold text-foreground">
|
|
{formatToTwoDigitsDateRange(
|
|
mangaData.data.publishedFrom,
|
|
mangaData?.data?.publishedTo,
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
|
|
<Database className="h-5 w-5 text-primary" />
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Providers</p>
|
|
<p className="text-lg font-semibold text-foreground">
|
|
{mangaData.data?.providerCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-12">
|
|
<h2 className="mb-6 text-2xl font-bold text-foreground">
|
|
Chapters by Provider
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
{mangaData.data?.providers.length === 0 && (
|
|
<div className="flex justify-center">
|
|
<p className="text-foreground">
|
|
No providers available for this manga.
|
|
</p>
|
|
</div>
|
|
)}
|
|
{mangaData.data?.providers.map((provider) => (
|
|
<Card key={provider.id} className="border-border bg-card">
|
|
<Collapsible
|
|
open={expandedProviderIds.includes(provider.id ?? -1)}
|
|
onOpenChange={() => {
|
|
if (provider.chaptersAvailable > 0) {
|
|
toggleProvider(provider.id ?? -1);
|
|
}
|
|
}}
|
|
>
|
|
<CardContent className="flex items-center justify-between p-4">
|
|
<CollapsibleTrigger
|
|
asChild
|
|
className={`flex-1 ${provider.chaptersAvailable > 0 ? "cursor-pointer" : "cursor-default"}`}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<Database className="h-5 w-5 text-primary" />
|
|
<div className="text-left">
|
|
<p className="font-semibold text-foreground">
|
|
{provider.providerName}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground whitespace-nowrap">
|
|
{provider.chaptersDownloaded} downloaded •{" "}
|
|
{provider.chaptersAvailable} available
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CollapsibleTrigger>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<CollapsibleTrigger asChild>
|
|
<div
|
|
className={
|
|
provider.chaptersAvailable > 0
|
|
? "cursor-pointer"
|
|
: "invisible"
|
|
}
|
|
>
|
|
<ChevronDown
|
|
className={`h-5 w-5 text-muted-foreground transition-transform ${expandedProviderIds.includes(provider.id ?? -1)
|
|
? "rotate-180"
|
|
: ""
|
|
}`}
|
|
/>
|
|
</div>
|
|
</CollapsibleTrigger>
|
|
|
|
{provider.supportsChapterFetch && provider.active && (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
disabled={isPending || fetchAllPending}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{isPending || fetchAllPending ? (
|
|
<Spinner />
|
|
) : (
|
|
<MoreVertical className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{provider.chaptersAvailable > 0 && (
|
|
<DropdownMenuItem
|
|
onClick={(e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
fetchAllMutate({
|
|
mangaContentProviderId: provider.id ?? -1,
|
|
});
|
|
}}
|
|
className="gap-2"
|
|
>
|
|
<Database className="h-4 w-4" />
|
|
Fetch all from Provider
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuItem
|
|
onClick={(e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
mutate({
|
|
mangaContentProviderId: provider.id ?? -1,
|
|
});
|
|
}}
|
|
className="gap-2"
|
|
>
|
|
<Database className="h-4 w-4" />
|
|
Fetch list from Provider
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
<CollapsibleContent>
|
|
<MangaChapter
|
|
mangaId={mangaId}
|
|
mangaProviderId={provider.id ?? -1}
|
|
/>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Manga;
|