Froidefond Julien
57bc82703d
Add Prowlarr indexer integration (step 1: config + manual search). Allows searching for comics/ebooks releases on Prowlarr indexers directly from the series detail page, with download links and per-volume search for missing books. - Backend: new prowlarr module with search and test endpoints - Migration: add prowlarr settings (url, api_key, categories) - Settings UI: Prowlarr config card with test connection button - ProwlarrSearchModal: auto-search on open, missing volumes shortcuts - Fix series.readCount i18n plural parameter on series pages Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
267 lines
12 KiB
TypeScript
267 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { Icon } from "./ui";
|
|
import type { ProwlarrRelease, ProwlarrSearchResponse } from "../../lib/api";
|
|
import { useTranslation } from "../../lib/i18n/context";
|
|
|
|
interface MissingBookItem {
|
|
title: string | null;
|
|
volume_number: number | null;
|
|
external_book_id: string | null;
|
|
}
|
|
|
|
interface ProwlarrSearchModalProps {
|
|
seriesName: string;
|
|
missingBooks: MissingBookItem[] | null;
|
|
}
|
|
|
|
function formatSize(bytes: number): string {
|
|
if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(1) + " GB";
|
|
if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + " MB";
|
|
if (bytes >= 1024) return (bytes / 1024).toFixed(0) + " KB";
|
|
return bytes + " B";
|
|
}
|
|
|
|
export function ProwlarrSearchModal({ seriesName, missingBooks }: ProwlarrSearchModalProps) {
|
|
const { t } = useTranslation();
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isConfigured, setIsConfigured] = useState<boolean | null>(null);
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
const [results, setResults] = useState<ProwlarrRelease[]>([]);
|
|
const [query, setQuery] = useState("");
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// Check if Prowlarr is configured on mount
|
|
useEffect(() => {
|
|
fetch("/api/settings/prowlarr")
|
|
.then((r) => (r.ok ? r.json() : null))
|
|
.then((data) => {
|
|
setIsConfigured(!!(data && data.api_key && data.api_key.trim()));
|
|
})
|
|
.catch(() => setIsConfigured(false));
|
|
}, []);
|
|
|
|
const doSearch = useCallback(async (searchSeriesName: string, volumeNumber?: number) => {
|
|
setIsSearching(true);
|
|
setError(null);
|
|
setResults([]);
|
|
try {
|
|
const body: { series_name: string; volume_number?: number } = { series_name: searchSeriesName };
|
|
if (volumeNumber !== undefined) body.volume_number = volumeNumber;
|
|
const resp = await fetch("/api/prowlarr/search", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(body),
|
|
});
|
|
const data = await resp.json();
|
|
if (data.error) {
|
|
setError(data.error);
|
|
} else {
|
|
const searchResp = data as ProwlarrSearchResponse;
|
|
setResults(searchResp.results);
|
|
setQuery(searchResp.query);
|
|
}
|
|
} catch {
|
|
setError(t("prowlarr.searchError"));
|
|
} finally {
|
|
setIsSearching(false);
|
|
}
|
|
}, [t]);
|
|
|
|
function handleOpen() {
|
|
setIsOpen(true);
|
|
setResults([]);
|
|
setError(null);
|
|
setQuery("");
|
|
// Auto-search the series on open
|
|
doSearch(seriesName);
|
|
}
|
|
|
|
function handleClose() {
|
|
setIsOpen(false);
|
|
}
|
|
|
|
// Don't render button if not configured
|
|
if (isConfigured === false) return null;
|
|
if (isConfigured === null) return null;
|
|
|
|
const modal = isOpen
|
|
? createPortal(
|
|
<>
|
|
<div
|
|
className="fixed inset-0 bg-black/30 backdrop-blur-sm z-50"
|
|
onClick={handleClose}
|
|
/>
|
|
<div className="fixed inset-0 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-card border border-border/50 rounded-xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-y-auto animate-in fade-in zoom-in-95 duration-200">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-5 py-4 border-b border-border/50 bg-muted/30 sticky top-0 z-10">
|
|
<h3 className="font-semibold text-foreground">{t("prowlarr.modalTitle")}</h3>
|
|
<button type="button" onClick={handleClose}>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="text-muted-foreground hover:text-foreground">
|
|
<path d="M4 4L12 12M12 4L4 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-5 space-y-4">
|
|
{/* Missing volumes + re-search */}
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => doSearch(seriesName)}
|
|
disabled={isSearching}
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-primary/50 bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50 transition-colors"
|
|
>
|
|
<Icon name="search" size="sm" />
|
|
{seriesName}
|
|
</button>
|
|
{missingBooks && missingBooks.length > 0 && missingBooks.map((book, i) => (
|
|
<button
|
|
key={i}
|
|
type="button"
|
|
onClick={() => doSearch(seriesName, book.volume_number ?? undefined)}
|
|
disabled={isSearching}
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-border bg-muted/30 hover:bg-muted/50 disabled:opacity-50 transition-colors"
|
|
>
|
|
<Icon name="search" size="sm" />
|
|
{book.title || `Vol. ${book.volume_number}`}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Searching indicator */}
|
|
{isSearching && (
|
|
<div className="flex items-center gap-2 text-muted-foreground text-sm">
|
|
<Icon name="spinner" size="sm" className="animate-spin" />
|
|
{t("prowlarr.searching")}
|
|
</div>
|
|
)}
|
|
|
|
{/* Results */}
|
|
{!isSearching && results.length > 0 && (
|
|
<div>
|
|
<p className="text-sm text-muted-foreground mb-3">
|
|
{t("prowlarr.resultCount", { count: results.length, plural: results.length !== 1 ? "s" : "" })}
|
|
{query && <span className="ml-1 text-xs opacity-70">({query})</span>}
|
|
</p>
|
|
<div className="overflow-x-auto rounded-lg border border-border">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="bg-muted/50 text-left">
|
|
<th className="px-3 py-2 font-medium text-muted-foreground">{t("prowlarr.columnTitle")}</th>
|
|
<th className="px-3 py-2 font-medium text-muted-foreground">{t("prowlarr.columnIndexer")}</th>
|
|
<th className="px-3 py-2 font-medium text-muted-foreground text-right">{t("prowlarr.columnSize")}</th>
|
|
<th className="px-3 py-2 font-medium text-muted-foreground text-center">{t("prowlarr.columnSeeders")}</th>
|
|
<th className="px-3 py-2 font-medium text-muted-foreground text-center">{t("prowlarr.columnLeechers")}</th>
|
|
<th className="px-3 py-2 font-medium text-muted-foreground">{t("prowlarr.columnProtocol")}</th>
|
|
<th className="px-3 py-2 font-medium text-muted-foreground text-right"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
{results.map((release, i) => (
|
|
<tr key={release.guid || i} className="hover:bg-muted/20 transition-colors">
|
|
<td className="px-3 py-2 max-w-[400px]">
|
|
<span className="truncate block" title={release.title}>
|
|
{release.title}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-2 text-muted-foreground whitespace-nowrap">
|
|
{release.indexer || "—"}
|
|
</td>
|
|
<td className="px-3 py-2 text-right text-muted-foreground whitespace-nowrap">
|
|
{release.size > 0 ? formatSize(release.size) : "—"}
|
|
</td>
|
|
<td className="px-3 py-2 text-center">
|
|
{release.seeders != null ? (
|
|
<span className={release.seeders > 0 ? "text-green-500 font-medium" : "text-muted-foreground"}>
|
|
{release.seeders}
|
|
</span>
|
|
) : "—"}
|
|
</td>
|
|
<td className="px-3 py-2 text-center text-muted-foreground">
|
|
{release.leechers != null ? release.leechers : "—"}
|
|
</td>
|
|
<td className="px-3 py-2">
|
|
{release.protocol && (
|
|
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
|
|
release.protocol === "torrent"
|
|
? "bg-blue-500/15 text-blue-600"
|
|
: "bg-amber-500/15 text-amber-600"
|
|
}`}>
|
|
{release.protocol}
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-3 py-2">
|
|
<div className="flex items-center justify-end gap-1.5">
|
|
{release.downloadUrl && (
|
|
<a
|
|
href={release.downloadUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center justify-center w-7 h-7 rounded-md text-primary hover:bg-primary/10 transition-colors"
|
|
title={t("prowlarr.download")}
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M8 2v8M4 7l4 4 4-4M2 13h12" />
|
|
</svg>
|
|
</a>
|
|
)}
|
|
{release.infoUrl && (
|
|
<a
|
|
href={release.infoUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:bg-muted/50 transition-colors"
|
|
title={t("prowlarr.info")}
|
|
>
|
|
<Icon name="externalLink" size="sm" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* No results */}
|
|
{!isSearching && !error && query && results.length === 0 && (
|
|
<p className="text-sm text-muted-foreground">{t("prowlarr.noResults")}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>,
|
|
document.body,
|
|
)
|
|
: null;
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={handleOpen}
|
|
className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border border-border bg-card text-muted-foreground hover:text-foreground hover:border-primary/50 transition-colors"
|
|
>
|
|
<Icon name="search" size="sm" />
|
|
{t("prowlarr.searchButton")}
|
|
</button>
|
|
{modal}
|
|
</>
|
|
);
|
|
}
|