mirror of
https://github.com/kikootwo/ReadMeABook.git
synced 2026-06-02 20:30:10 +00:00
Add series browsing, search, and detail UI
Introduce full support for Audible series exploration: API routes, frontend pages, components, hooks, and integrations. Key changes: - Prisma: add Audiobook.seriesAsin for linking audiobooks to series detail pages. - Backend: add /api/series/search and /api/series/[asin] routes that require auth; scrape Audible series data and enrich books with library availability. - Integrations/services: add audible-series integration and update request/HTTP services to support the workflow. - Frontend: add /series and /series/[asin] pages, new components (SeriesCard, SeriesGrid, SeriesDetailCard, SimilarSeriesRow) and wire them to a new useSeries hook; update AudiobookDetailsModal to show/link series; add Series link to Header. - Misc: extend audiobook types with series fields and add seriesLabels to language-config for scraping. These changes enable users to search for series, view series metadata and books, and navigate between audiobook and series detail pages.
This commit is contained in:
kikootwo
@@ -176,6 +176,7 @@ model Audiobook {
|
||||
year Int? // Release year extracted from releaseDate
|
||||
series String? // Book series name (e.g., "The Mistborn Saga")
|
||||
seriesPart String? @map("series_part") // Series position (e.g., "1", "1.5", "Book 1")
|
||||
seriesAsin String? @map("series_asin") // Audible series ASIN for linking to series detail page
|
||||
|
||||
// Request tracking
|
||||
status String @default("requested") // requested, downloading, processing, completed, failed
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* Component: Series Detail API Route
|
||||
* Documentation: documentation/integrations/audible.md
|
||||
*/
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { getCurrentUser } from '@/lib/middleware/auth';
|
||||
import { RMABLogger } from '@/lib/utils/logger';
|
||||
import { scrapeSeriesPage } from '@/lib/integrations/audible-series';
|
||||
import { enrichAudiobooksWithMatches } from '@/lib/utils/audiobook-matcher';
|
||||
|
||||
const logger = RMABLogger.create('API.Series.Detail');
|
||||
|
||||
/**
|
||||
* GET /api/series/{asin}
|
||||
* Fetch series detail: metadata + books (enriched with availability) + similar series
|
||||
*/
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ asin: string }> }
|
||||
) {
|
||||
try {
|
||||
const currentUser = getCurrentUser(request);
|
||||
if (!currentUser) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Unauthorized', message: 'Authentication required' },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
const { asin } = await params;
|
||||
|
||||
if (!asin || !/^[A-Z0-9]{10}$/.test(asin)) {
|
||||
return NextResponse.json(
|
||||
{ error: 'ValidationError', message: 'Valid series ASIN is required' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
logger.info(`Fetching series detail: ${asin}`);
|
||||
|
||||
const detail = await scrapeSeriesPage(asin);
|
||||
if (!detail) {
|
||||
return NextResponse.json(
|
||||
{ error: 'NotFound', message: 'Series not found' },
|
||||
{ status: 404 }
|
||||
);
|
||||
}
|
||||
|
||||
// Enrich books with library availability and request status
|
||||
const userId = currentUser.sub || undefined;
|
||||
const enrichedBooks = await enrichAudiobooksWithMatches(detail.books, userId);
|
||||
|
||||
logger.info(`Series detail complete: "${detail.title}" (${enrichedBooks.length} books)`);
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
series: {
|
||||
...detail,
|
||||
books: enrichedBooks,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('Failed to fetch series detail', {
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
});
|
||||
return NextResponse.json(
|
||||
{ error: 'FetchError', message: 'Failed to fetch series details' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* Component: Series Search API Route
|
||||
* Documentation: documentation/integrations/audible.md
|
||||
*/
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { getCurrentUser } from '@/lib/middleware/auth';
|
||||
import { RMABLogger } from '@/lib/utils/logger';
|
||||
import { searchForSeries } from '@/lib/integrations/audible-series';
|
||||
|
||||
const logger = RMABLogger.create('API.Series.Search');
|
||||
|
||||
/**
|
||||
* GET /api/series/search?q=game+of+thrones
|
||||
* Search for audiobook series on Audible, de-duplicate, and return enriched summaries
|
||||
*/
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
// Require authentication
|
||||
const currentUser = getCurrentUser(request);
|
||||
if (!currentUser) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Unauthorized', message: 'Authentication required' },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
const query = request.nextUrl.searchParams.get('q');
|
||||
|
||||
if (!query || query.trim().length === 0) {
|
||||
return NextResponse.json(
|
||||
{ error: 'ValidationError', message: 'Search query is required' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
logger.info(`Searching series: "${query}"`);
|
||||
|
||||
const series = await searchForSeries(query.trim());
|
||||
|
||||
logger.info(`Series search complete: "${query}" -> ${series.length} results`);
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
series,
|
||||
query: query.trim(),
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('Failed to search series', {
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
});
|
||||
return NextResponse.json(
|
||||
{ error: 'SearchError', message: 'Failed to search series' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* Component: Series Detail Page
|
||||
* Documentation: documentation/frontend/components.md
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { use, useCallback } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { Header } from '@/components/layout/Header';
|
||||
import { AudiobookGrid } from '@/components/audiobooks/AudiobookGrid';
|
||||
import { SeriesDetailCard, SeriesDetailSkeleton } from '@/components/series/SeriesDetailCard';
|
||||
import { SimilarSeriesRow, SimilarSeriesSkeleton } from '@/components/series/SimilarSeriesRow';
|
||||
import { useSeriesDetail } from '@/lib/hooks/useSeries';
|
||||
import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
|
||||
import { CardSizeControls } from '@/components/ui/CardSizeControls';
|
||||
import { SquareCoversToggle } from '@/components/ui/SquareCoversToggle';
|
||||
import { usePreferences } from '@/contexts/PreferencesContext';
|
||||
|
||||
export default function SeriesDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ asin: string }>;
|
||||
}) {
|
||||
const { asin } = use(params);
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const fromSeriesTitle = searchParams.get('from');
|
||||
const { series, isLoading: seriesLoading } = useSeriesDetail(asin);
|
||||
const { cardSize, setCardSize, squareCovers, setSquareCovers } = usePreferences();
|
||||
|
||||
const handleBack = useCallback(() => {
|
||||
// Use browser back if we came from within the app, otherwise fallback to /series
|
||||
if (window.history.length > 1) {
|
||||
router.back();
|
||||
} else {
|
||||
router.push('/series');
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<div className="min-h-screen">
|
||||
<Header />
|
||||
|
||||
<main className="container mx-auto px-4 py-6 sm:py-8 max-w-7xl space-y-8">
|
||||
{/* Back navigation */}
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
{fromSeriesTitle ? `Back to ${fromSeriesTitle}` : 'Back to Series'}
|
||||
</button>
|
||||
|
||||
{/* Series Detail Card */}
|
||||
{seriesLoading ? (
|
||||
<SeriesDetailSkeleton squareCovers={squareCovers} />
|
||||
) : series ? (
|
||||
<SeriesDetailCard series={series} squareCovers={squareCovers} />
|
||||
) : (
|
||||
<div className="text-center py-16 space-y-4">
|
||||
<svg className="mx-auto h-16 w-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400">Series not found</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Similar Series */}
|
||||
{seriesLoading ? (
|
||||
<SimilarSeriesSkeleton squareCovers={squareCovers} />
|
||||
) : series && series.similarSeries.length > 0 ? (
|
||||
<SimilarSeriesRow series={series.similarSeries} currentSeriesTitle={series.title} squareCovers={squareCovers} />
|
||||
) : null}
|
||||
|
||||
{/* Books Section */}
|
||||
{series && (
|
||||
<div className="space-y-6">
|
||||
{/* Sticky Books Header */}
|
||||
<div className="sticky top-14 sm:top-16 z-30">
|
||||
<div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl px-4 sm:px-6 py-3 border border-gray-200/50 dark:border-gray-700/50 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-1 h-6 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full" />
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 truncate">
|
||||
Books in Series
|
||||
</h2>
|
||||
{series.books.length > 0 && (
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400 hidden sm:inline whitespace-nowrap">
|
||||
({series.books.length} title{series.books.length !== 1 ? 's' : ''})
|
||||
</span>
|
||||
)}
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
<SquareCoversToggle enabled={squareCovers} onToggle={setSquareCovers} />
|
||||
<CardSizeControls size={cardSize} onSizeChange={setCardSize} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Books Grid */}
|
||||
<AudiobookGrid
|
||||
audiobooks={series.books}
|
||||
isLoading={seriesLoading}
|
||||
emptyMessage={`No books found for ${series.title}`}
|
||||
cardSize={cardSize}
|
||||
squareCovers={squareCovers}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
/**
|
||||
* Component: Series Page
|
||||
* Documentation: documentation/frontend/components.md
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { Suspense, useState, useEffect, useCallback } from 'react';
|
||||
import { useSearchParams, useRouter } from 'next/navigation';
|
||||
import { Header } from '@/components/layout/Header';
|
||||
import { SeriesGrid } from '@/components/series/SeriesGrid';
|
||||
import { useSeriesSearch } from '@/lib/hooks/useSeries';
|
||||
import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
|
||||
import { CardSizeControls } from '@/components/ui/CardSizeControls';
|
||||
import { SquareCoversToggle } from '@/components/ui/SquareCoversToggle';
|
||||
import { usePreferences } from '@/contexts/PreferencesContext';
|
||||
|
||||
function SeriesPageContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const initialQuery = searchParams.get('q') || '';
|
||||
|
||||
const [query, setQuery] = useState(initialQuery);
|
||||
const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
|
||||
const { cardSize, setCardSize, squareCovers, setSquareCovers } = usePreferences();
|
||||
|
||||
// Debounce search query and sync to URL
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedQuery(query);
|
||||
// Update URL without adding history entries
|
||||
const trimmed = query.trim();
|
||||
if (trimmed) {
|
||||
router.replace(`/series?q=${encodeURIComponent(trimmed)}`, { scroll: false });
|
||||
} else {
|
||||
router.replace('/series', { scroll: false });
|
||||
}
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [query, router]);
|
||||
|
||||
const { series, isLoading } = useSeriesSearch(debouncedQuery);
|
||||
|
||||
const handleSearch = useCallback((e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<div className="min-h-screen">
|
||||
<Header />
|
||||
|
||||
<main className="container mx-auto px-4 py-8 max-w-7xl space-y-8">
|
||||
{/* Page Header */}
|
||||
<div className="text-center space-y-4">
|
||||
<h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100">
|
||||
Browse Series
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Search for your favorite audiobook series
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Search Form */}
|
||||
<form onSubmit={handleSearch} className="max-w-3xl mx-auto">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||||
<svg
|
||||
className="h-5 w-5 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search by series name..."
|
||||
className="w-full pl-12 pr-12 py-4 text-lg border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400"
|
||||
autoFocus
|
||||
/>
|
||||
{query && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setQuery('')}
|
||||
className="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Results */}
|
||||
{debouncedQuery ? (
|
||||
<div className="space-y-6">
|
||||
{/* Sticky Results Header */}
|
||||
<div className="sticky top-14 sm:top-16 z-30 mb-4 sm:mb-6">
|
||||
<div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl px-4 sm:px-6 py-3 border border-gray-200/50 dark:border-gray-700/50 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-1 h-6 bg-gradient-to-b from-emerald-500 to-teal-500 rounded-full" />
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 truncate">
|
||||
Series
|
||||
</h2>
|
||||
{!isLoading && series.length > 0 && (
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400 hidden sm:inline whitespace-nowrap">
|
||||
({series.length} result{series.length !== 1 ? 's' : ''})
|
||||
</span>
|
||||
)}
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
<SquareCoversToggle enabled={squareCovers} onToggle={setSquareCovers} />
|
||||
<CardSizeControls size={cardSize} onSizeChange={setCardSize} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Series Grid */}
|
||||
<SeriesGrid
|
||||
series={series}
|
||||
isLoading={!!isLoading}
|
||||
emptyMessage={`No series found for "${debouncedQuery}"`}
|
||||
cardSize={cardSize}
|
||||
squareCovers={squareCovers}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
/* Empty State */
|
||||
<div className="text-center py-16 space-y-4">
|
||||
<svg
|
||||
className="mx-auto h-16 w-16 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400">
|
||||
Start typing to search for series
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-500">
|
||||
Search by series name to discover audiobook collections
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</ProtectedRoute>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SeriesPage() {
|
||||
return (
|
||||
<Suspense>
|
||||
<SeriesPageContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -307,6 +307,24 @@ export function AudiobookDetailsModal({
|
||||
Narrated by {audiobook.narrator}
|
||||
</p>
|
||||
)}
|
||||
{audiobook.series && (
|
||||
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
{audiobook.seriesAsin ? (
|
||||
<Link
|
||||
href={`/series/${audiobook.seriesAsin}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}}
|
||||
className="hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
|
||||
>
|
||||
{audiobook.series}{audiobook.seriesPart ? `, Book ${audiobook.seriesPart}` : ''}
|
||||
</Link>
|
||||
) : (
|
||||
<span>{audiobook.series}{audiobook.seriesPart ? `, Book ${audiobook.seriesPart}` : ''}</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Status Badge */}
|
||||
{status.type !== 'none' && (
|
||||
|
||||
@@ -166,6 +166,12 @@ export function Header() {
|
||||
>
|
||||
Authors
|
||||
</Link>
|
||||
<Link
|
||||
href="/series"
|
||||
className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
>
|
||||
Series
|
||||
</Link>
|
||||
{showBookDate && (
|
||||
<Link
|
||||
href="/bookdate"
|
||||
@@ -277,6 +283,13 @@ export function Header() {
|
||||
>
|
||||
Authors
|
||||
</Link>
|
||||
<Link
|
||||
href="/series"
|
||||
onClick={() => setShowMobileMenu(false)}
|
||||
className="px-3 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
|
||||
>
|
||||
Series
|
||||
</Link>
|
||||
{showBookDate && (
|
||||
<Link
|
||||
href="/bookdate"
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
/**
|
||||
* Component: Series Card
|
||||
* Documentation: documentation/frontend/components.md
|
||||
*
|
||||
* Premium "Cover First" design - metadata integrated into the cover overlay.
|
||||
* Rating badge top-left, book count top-right, tags in bottom gradient overlay.
|
||||
* Only the title lives below the cover, ensuring consistent row heights in the grid.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { SeriesSummary } from '@/lib/hooks/useSeries';
|
||||
|
||||
interface SeriesCardProps {
|
||||
series: SeriesSummary;
|
||||
squareCovers?: boolean;
|
||||
}
|
||||
|
||||
export function SeriesCard({ series, squareCovers = false }: SeriesCardProps) {
|
||||
const visibleTags = series.tags.slice(0, 2);
|
||||
const hasTags = visibleTags.length > 0;
|
||||
const hasRating = series.rating != null && series.rating > 0;
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={`/series/${series.asin}`}
|
||||
className="group outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent rounded-2xl block"
|
||||
aria-label={`View ${series.title} series`}
|
||||
>
|
||||
{/* Cover Container — The Hero */}
|
||||
<div
|
||||
className={`
|
||||
relative overflow-hidden rounded-xl
|
||||
w-full ${squareCovers ? 'aspect-square' : 'aspect-[2/3]'}
|
||||
shadow-lg shadow-black/20 dark:shadow-black/40
|
||||
group-hover:shadow-xl group-hover:shadow-black/30 dark:group-hover:shadow-black/55
|
||||
transform group-hover:scale-[1.02] group-hover:-translate-y-0.5
|
||||
transition-all duration-300 ease-out
|
||||
`}
|
||||
>
|
||||
{/* Cover Art or Fallback */}
|
||||
{series.coverArtUrl ? (
|
||||
<Image
|
||||
src={series.coverArtUrl}
|
||||
alt=""
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-emerald-600 to-teal-800 dark:from-emerald-700 dark:to-teal-900 flex items-center justify-center">
|
||||
<svg
|
||||
className="w-1/3 h-1/3 text-white/40"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.2}
|
||||
d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Top-row badges — Rating (left) + Book count (right) */}
|
||||
{/* Rating Badge — top-left, matches AudiobookCard pattern exactly */}
|
||||
{hasRating && (
|
||||
<div className="
|
||||
absolute top-2.5 left-2.5
|
||||
flex items-center gap-1 px-2 py-1
|
||||
rounded-lg bg-black/50 backdrop-blur-md
|
||||
text-white text-xs font-medium
|
||||
transition-opacity duration-300 group-hover:opacity-0
|
||||
">
|
||||
<svg className="w-3.5 h-3.5 text-amber-400 shrink-0" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
<span>{series.rating!.toFixed(1)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Book count badge — top-right */}
|
||||
{series.bookCount > 0 && (
|
||||
<div className="
|
||||
absolute top-2.5 right-2.5
|
||||
px-2 py-1
|
||||
text-[11px] font-bold rounded-lg
|
||||
bg-black/50 backdrop-blur-md
|
||||
text-white
|
||||
transition-opacity duration-300 group-hover:opacity-0
|
||||
">
|
||||
{series.bookCount} {series.bookCount === 1 ? 'Book' : 'Books'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bottom gradient overlay — always present, deepens on hover */}
|
||||
<div className={`
|
||||
absolute inset-x-0 bottom-0
|
||||
transition-all duration-300
|
||||
${hasTags
|
||||
? 'h-20 bg-gradient-to-t from-black/75 via-black/30 to-transparent group-hover:h-24 group-hover:from-black/85'
|
||||
: 'h-10 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100'
|
||||
}
|
||||
`} />
|
||||
|
||||
{/* Tag pills — pinned to bottom of cover, inside gradient */}
|
||||
{hasTags && (
|
||||
<div className="
|
||||
absolute inset-x-0 bottom-0
|
||||
flex items-end gap-1.5 p-2.5
|
||||
pointer-events-none
|
||||
">
|
||||
{visibleTags.map(tag => (
|
||||
<span
|
||||
key={tag}
|
||||
className="
|
||||
inline-block px-2.5 py-0.5
|
||||
text-[10px] font-medium
|
||||
rounded-full
|
||||
bg-black/30 backdrop-blur-md
|
||||
text-white/90
|
||||
ring-1 ring-white/15
|
||||
transition-opacity duration-300
|
||||
"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Below-cover: title only — fixed, predictable height across all cards */}
|
||||
<div className="mt-2.5 px-0.5">
|
||||
<h3 className="
|
||||
font-semibold text-[14px] leading-snug
|
||||
text-gray-900 dark:text-gray-100
|
||||
line-clamp-2
|
||||
group-hover:text-emerald-600 dark:group-hover:text-emerald-400
|
||||
transition-colors duration-200
|
||||
">
|
||||
{series.title}
|
||||
</h3>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
/**
|
||||
* Component: Series Detail Card
|
||||
* Documentation: documentation/frontend/components.md
|
||||
*
|
||||
* Hero section for the series detail page with rectangular cover image,
|
||||
* title, book count, rating, collapsible description, and tag pills.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { SeriesDetail } from '@/lib/hooks/useSeries';
|
||||
|
||||
interface SeriesDetailCardProps {
|
||||
series: SeriesDetail;
|
||||
squareCovers?: boolean;
|
||||
}
|
||||
|
||||
export function SeriesDetailCard({ series, squareCovers = false }: SeriesDetailCardProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const hasLongDescription = (series.description?.length || 0) > 300;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-6 sm:gap-8">
|
||||
{/* Rectangular Cover */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className={`relative w-36 sm:w-44 lg:w-52 ${squareCovers ? 'aspect-square' : 'aspect-[2/3]'} rounded-xl overflow-hidden shadow-xl shadow-black/20 dark:shadow-black/40`}>
|
||||
{series.books[0]?.coverArtUrl ? (
|
||||
<Image
|
||||
src={series.books[0].coverArtUrl}
|
||||
alt={series.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 640px) 144px, (max-width: 1024px) 176px, 208px"
|
||||
priority
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-emerald-100 to-teal-200 dark:from-emerald-900 dark:to-teal-900 flex items-center justify-center">
|
||||
<svg className="w-1/3 h-1/3 text-emerald-400 dark:text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Series Info */}
|
||||
<div className="flex-1 min-w-0 text-center sm:text-left">
|
||||
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{series.title}
|
||||
</h1>
|
||||
|
||||
{/* Meta row: book count + rating */}
|
||||
<div className="mt-3 flex flex-wrap items-center justify-center sm:justify-start gap-3">
|
||||
{series.bookCount > 0 && (
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 text-sm font-medium rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-300">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
||||
</svg>
|
||||
{series.bookCount} Book{series.bookCount !== 1 ? 's' : ''}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{series.rating != null && series.rating > 0 && (
|
||||
<span className="inline-flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
<svg className="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
{series.rating.toFixed(1)}
|
||||
{series.ratingCount != null && series.ratingCount > 0 && (
|
||||
<span className="text-gray-400 dark:text-gray-500">
|
||||
({series.ratingCount.toLocaleString()})
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tag Pills */}
|
||||
{series.tags.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap justify-center sm:justify-start gap-2">
|
||||
{series.tags.map(tag => (
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-block px-3 py-1 text-xs font-medium rounded-full bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-300"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Audible Link */}
|
||||
{series.audibleUrl && (
|
||||
<a
|
||||
href={series.audibleUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-3 inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
|
||||
>
|
||||
View on Audible
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{series.description && (
|
||||
<div className="mt-4">
|
||||
<p
|
||||
className={`text-sm sm:text-base text-gray-600 dark:text-gray-400 leading-relaxed whitespace-pre-line ${
|
||||
!expanded && hasLongDescription ? 'line-clamp-4' : ''
|
||||
}`}
|
||||
>
|
||||
{series.description}
|
||||
</p>
|
||||
{hasLongDescription && (
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="mt-1 text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors"
|
||||
>
|
||||
{expanded ? 'Show less' : 'Read more'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SeriesDetailSkeleton({ squareCovers = false }: { squareCovers?: boolean }) {
|
||||
return (
|
||||
<div className="animate-pulse flex flex-col sm:flex-row items-center sm:items-start gap-6 sm:gap-8">
|
||||
{/* Cover skeleton */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className={`w-36 sm:w-44 lg:w-52 ${squareCovers ? 'aspect-square' : 'aspect-[2/3]'} rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 relative overflow-hidden`}>
|
||||
<div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info skeleton */}
|
||||
<div className="flex-1 min-w-0 text-center sm:text-left space-y-4">
|
||||
<div className="h-9 bg-gray-200 dark:bg-gray-700 rounded-lg w-64 mx-auto sm:mx-0" />
|
||||
<div className="flex gap-2 justify-center sm:justify-start">
|
||||
<div className="h-7 w-24 bg-gray-200 dark:bg-gray-700 rounded-full" />
|
||||
<div className="h-7 w-20 bg-gray-200 dark:bg-gray-700 rounded-full" />
|
||||
</div>
|
||||
<div className="flex gap-2 justify-center sm:justify-start">
|
||||
<div className="h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded-full" />
|
||||
<div className="h-6 w-24 bg-gray-200 dark:bg-gray-700 rounded-full" />
|
||||
<div className="h-6 w-16 bg-gray-200 dark:bg-gray-700 rounded-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-full" />
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6" />
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-4/6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* Component: Series Grid
|
||||
* Documentation: documentation/frontend/components.md
|
||||
*
|
||||
* Grid layout for series cards with loading skeletons and empty state.
|
||||
* Uses the same responsive column system as AudiobookGrid since
|
||||
* series cards use rectangular (2:3) aspect ratios like book covers.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { SeriesCard } from './SeriesCard';
|
||||
import { SeriesSummary } from '@/lib/hooks/useSeries';
|
||||
|
||||
interface SeriesGridProps {
|
||||
series: SeriesSummary[];
|
||||
isLoading?: boolean;
|
||||
emptyMessage?: string;
|
||||
cardSize?: number;
|
||||
squareCovers?: boolean;
|
||||
}
|
||||
|
||||
function getGridClasses(size: number): string {
|
||||
const sizeMap: Record<number, string> = {
|
||||
1: 'grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10',
|
||||
2: 'grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-9',
|
||||
3: 'grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8',
|
||||
4: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7',
|
||||
5: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6',
|
||||
6: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5',
|
||||
7: 'grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
|
||||
8: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
|
||||
9: 'grid-cols-1 sm:grid-cols-2',
|
||||
};
|
||||
return sizeMap[size] || sizeMap[5];
|
||||
}
|
||||
|
||||
export function SeriesGrid({
|
||||
series,
|
||||
isLoading = false,
|
||||
emptyMessage = 'No series found',
|
||||
cardSize = 5,
|
||||
squareCovers = false,
|
||||
}: SeriesGridProps) {
|
||||
const gridClasses = getGridClasses(cardSize);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className={`grid ${gridClasses} gap-4 sm:gap-5 lg:gap-6`}>
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<SeriesSkeletonCard key={i} index={i} squareCovers={squareCovers} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (series.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-6">
|
||||
<svg className="w-10 h-10 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-500 dark:text-gray-400 text-lg">{emptyMessage}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`grid ${gridClasses} gap-4 sm:gap-5 lg:gap-6`}>
|
||||
{series.map(s => (
|
||||
<SeriesCard key={s.asin} series={s} squareCovers={squareCovers} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SeriesSkeletonCard({ index = 0, squareCovers = false }: { index?: number; squareCovers?: boolean }) {
|
||||
return (
|
||||
<div
|
||||
className="animate-pulse"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
{/* Rectangular cover skeleton */}
|
||||
<div className={`relative overflow-hidden rounded-xl w-full ${squareCovers ? 'aspect-square' : 'aspect-[2/3]'} bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800`}>
|
||||
<div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
</div>
|
||||
|
||||
{/* Text skeleton */}
|
||||
<div className="mt-3 px-1 flex flex-col items-center space-y-2">
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded-lg w-4/5" />
|
||||
<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded-lg w-3/5" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
/**
|
||||
* Component: Similar Series Row
|
||||
* Documentation: documentation/frontend/components.md
|
||||
*
|
||||
* Horizontal scrollable carousel of similar series cards.
|
||||
* Desktop: left/right nav arrows. Mobile: drag-to-scroll.
|
||||
* Each card navigates to the series detail page.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import React, { useRef, useState, useEffect, useCallback } from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { SimilarSeries } from '@/lib/hooks/useSeries';
|
||||
|
||||
interface SimilarSeriesRowProps {
|
||||
series: SimilarSeries[];
|
||||
currentSeriesTitle?: string;
|
||||
squareCovers?: boolean;
|
||||
}
|
||||
|
||||
export function SimilarSeriesRow({ series, currentSeriesTitle, squareCovers = false }: SimilarSeriesRowProps) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
||||
const [canScrollRight, setCanScrollRight] = useState(false);
|
||||
|
||||
const checkScroll = useCallback(() => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
setCanScrollLeft(el.scrollLeft > 4);
|
||||
setCanScrollRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 4);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
checkScroll();
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
el.addEventListener('scroll', checkScroll, { passive: true });
|
||||
const observer = new ResizeObserver(checkScroll);
|
||||
observer.observe(el);
|
||||
return () => {
|
||||
el.removeEventListener('scroll', checkScroll);
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [checkScroll, series]);
|
||||
|
||||
const scroll = (direction: 'left' | 'right') => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
const scrollAmount = el.clientWidth * 0.7;
|
||||
el.scrollBy({
|
||||
left: direction === 'left' ? -scrollAmount : scrollAmount,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
};
|
||||
|
||||
if (series.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-1 h-6 bg-gradient-to-b from-emerald-500 to-teal-500 rounded-full" />
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
Similar Series
|
||||
</h2>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
({series.length})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative group">
|
||||
{/* Left arrow */}
|
||||
{canScrollLeft && (
|
||||
<button
|
||||
onClick={() => scroll('left')}
|
||||
className="hidden md:flex absolute left-0 top-1/2 -translate-y-1/2 -translate-x-3 z-10 w-10 h-10 bg-white dark:bg-gray-800 rounded-full shadow-lg items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all opacity-0 group-hover:opacity-100"
|
||||
aria-label="Scroll left"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Scrollable row */}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="flex gap-4 sm:gap-5 overflow-x-auto scrollbar-hide pb-2 scroll-smooth"
|
||||
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
|
||||
>
|
||||
{series.map(s => (
|
||||
<Link
|
||||
key={s.asin}
|
||||
href={`/series/${s.asin}${currentSeriesTitle ? `?from=${encodeURIComponent(currentSeriesTitle)}` : ''}`}
|
||||
className="flex-shrink-0 w-20 sm:w-24 group/card outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 rounded-xl"
|
||||
>
|
||||
{/* Cover */}
|
||||
<div className={`relative w-20 ${squareCovers ? 'h-20 sm:w-24 sm:h-24' : 'h-[120px] sm:w-24 sm:h-36'} rounded-lg overflow-hidden shadow-md shadow-black/15 dark:shadow-black/30 group-hover/card:shadow-lg group-hover/card:scale-[1.04] group-hover/card:-translate-y-0.5 transition-all duration-300`}>
|
||||
{s.coverArtUrl ? (
|
||||
<Image
|
||||
src={s.coverArtUrl}
|
||||
alt=""
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="96px"
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-emerald-100 to-teal-200 dark:from-emerald-900 dark:to-teal-900 flex items-center justify-center">
|
||||
<span className="text-lg font-bold text-emerald-400 dark:text-emerald-300">
|
||||
{s.title.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<p className="mt-2 text-xs sm:text-sm font-medium text-center text-gray-700 dark:text-gray-300 line-clamp-2 group-hover/card:text-emerald-600 dark:group-hover/card:text-emerald-400 transition-colors">
|
||||
{s.title}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right arrow */}
|
||||
{canScrollRight && (
|
||||
<button
|
||||
onClick={() => scroll('right')}
|
||||
className="hidden md:flex absolute right-0 top-1/2 -translate-y-1/2 translate-x-3 z-10 w-10 h-10 bg-white dark:bg-gray-800 rounded-full shadow-lg items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all opacity-0 group-hover:opacity-100"
|
||||
aria-label="Scroll right"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Fade edges */}
|
||||
{canScrollLeft && (
|
||||
<div className="hidden md:block absolute left-0 top-0 bottom-2 w-8 bg-gradient-to-r from-white dark:from-gray-900 to-transparent pointer-events-none z-[5]" />
|
||||
)}
|
||||
{canScrollRight && (
|
||||
<div className="hidden md:block absolute right-0 top-0 bottom-2 w-8 bg-gradient-to-l from-white dark:from-gray-900 to-transparent pointer-events-none z-[5]" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SimilarSeriesSkeleton({ squareCovers = false }: { squareCovers?: boolean }) {
|
||||
return (
|
||||
<div className="space-y-3 animate-pulse">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-1 h-6 bg-gray-300 dark:bg-gray-600 rounded-full" />
|
||||
<div className="h-7 w-40 bg-gray-200 dark:bg-gray-700 rounded-lg" />
|
||||
</div>
|
||||
<div className="flex gap-4 sm:gap-5 overflow-hidden">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} className="flex-shrink-0 w-20 sm:w-24" style={{ animationDelay: `${i * 50}ms` }}>
|
||||
<div className={`w-20 ${squareCovers ? 'h-20 sm:w-24 sm:h-24' : 'h-[120px] sm:w-24 sm:h-36'} rounded-lg bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 relative overflow-hidden`}>
|
||||
<div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
</div>
|
||||
<div className="mt-2 h-3 bg-gray-200 dark:bg-gray-700 rounded w-4/5 mx-auto" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -31,6 +31,8 @@ export interface ScrapingConfig {
|
||||
languageLabels: string[];
|
||||
/** Release date field labels */
|
||||
releaseDateLabels: string[];
|
||||
/** Series label prefixes used to find series links in search results */
|
||||
seriesLabels: string[];
|
||||
/** Accepted language values for filtering (lowercase) */
|
||||
acceptedLanguageValues: string[];
|
||||
/** Regex patterns that match hour portions in runtime strings */
|
||||
@@ -80,6 +82,7 @@ const ENGLISH_CONFIG: LanguageConfig = {
|
||||
lengthLabels: ['Length:'],
|
||||
languageLabels: ['Language:'],
|
||||
releaseDateLabels: ['Release date:'],
|
||||
seriesLabels: ['Series:'],
|
||||
acceptedLanguageValues: ['english'],
|
||||
runtimeHourPatterns: [/(\d+)\s*hrs?/i, /(\d+)\s*hours?/i],
|
||||
runtimeMinutePatterns: [/(\d+)\s*mins?/i, /(\d+)\s*minutes?/i],
|
||||
@@ -112,6 +115,7 @@ const GERMAN_CONFIG: LanguageConfig = {
|
||||
lengthLabels: ['Spieldauer:', 'Dauer:', 'L\u00e4nge:'],
|
||||
languageLabels: ['Sprache:'],
|
||||
releaseDateLabels: ['Erscheinungsdatum:'],
|
||||
seriesLabels: ['Serie:', 'Reihe:'],
|
||||
acceptedLanguageValues: ['deutsch', 'german'],
|
||||
runtimeHourPatterns: [/(\d+)\s*Std\.?/i, /(\d+)\s*Stunden?/i],
|
||||
runtimeMinutePatterns: [/(\d+)\s*Min\.?/i, /(\d+)\s*Minuten?/i],
|
||||
@@ -145,6 +149,7 @@ const SPANISH_CONFIG: LanguageConfig = {
|
||||
lengthLabels: ['Duraci\u00f3n:'],
|
||||
languageLabels: ['Idioma:'],
|
||||
releaseDateLabels: ['Fecha de lanzamiento:'],
|
||||
seriesLabels: ['Serie:'],
|
||||
acceptedLanguageValues: ['espa\u00f1ol', 'spanish'],
|
||||
runtimeHourPatterns: [/(\d+)\s*h\b/i, /(\d+)\s*horas?/i],
|
||||
runtimeMinutePatterns: [/(\d+)\s*min/i, /(\d+)\s*minutos?/i],
|
||||
|
||||
@@ -20,6 +20,9 @@ export interface Audiobook {
|
||||
releaseDate?: string;
|
||||
rating?: number;
|
||||
genres?: string[];
|
||||
series?: string; // Series name (e.g., "A Song of Ice and Fire")
|
||||
seriesPart?: string; // Position in series (e.g., "1", "1.5")
|
||||
seriesAsin?: string; // Audible ASIN for the series (links to /series/{asin})
|
||||
isAvailable?: boolean; // Set by real-time matching against plex_library
|
||||
plexGuid?: string | null;
|
||||
dbId?: string | null;
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* Component: Series Fetching Hooks
|
||||
* Documentation: documentation/frontend/components.md
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import useSWR from 'swr';
|
||||
import { authenticatedFetcher } from '@/lib/utils/api';
|
||||
import { Audiobook } from './useAudiobooks';
|
||||
|
||||
export interface SeriesSummary {
|
||||
asin: string;
|
||||
title: string;
|
||||
bookCount: number;
|
||||
rating?: number;
|
||||
ratingCount?: number;
|
||||
tags: string[];
|
||||
coverArtUrl?: string;
|
||||
audibleUrl: string;
|
||||
}
|
||||
|
||||
export interface SimilarSeries {
|
||||
asin: string;
|
||||
title: string;
|
||||
bookCount?: number;
|
||||
coverArtUrl?: string;
|
||||
}
|
||||
|
||||
export interface SeriesDetail {
|
||||
asin: string;
|
||||
title: string;
|
||||
bookCount: number;
|
||||
rating?: number;
|
||||
ratingCount?: number;
|
||||
description?: string;
|
||||
tags: string[];
|
||||
books: Audiobook[];
|
||||
similarSeries: SimilarSeries[];
|
||||
audibleUrl: string;
|
||||
}
|
||||
|
||||
export function useSeriesSearch(query: string) {
|
||||
const shouldFetch = query && query.length > 0;
|
||||
const endpoint = shouldFetch
|
||||
? `/api/series/search?q=${encodeURIComponent(query)}`
|
||||
: null;
|
||||
|
||||
const { data, error, isLoading } = useSWR(endpoint, authenticatedFetcher, {
|
||||
revalidateOnFocus: false,
|
||||
dedupingInterval: 30000,
|
||||
});
|
||||
|
||||
return {
|
||||
series: (data?.series || []) as SeriesSummary[],
|
||||
query: data?.query || '',
|
||||
isLoading: shouldFetch && isLoading,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
export function useSeriesDetail(asin: string | null) {
|
||||
const endpoint = asin ? `/api/series/${asin}` : null;
|
||||
|
||||
const { data, error, isLoading } = useSWR(endpoint, authenticatedFetcher, {
|
||||
revalidateOnFocus: false,
|
||||
dedupingInterval: 300000, // Cache for 5 minutes
|
||||
});
|
||||
|
||||
return {
|
||||
series: (data?.series || null) as SeriesDetail | null,
|
||||
isLoading,
|
||||
error,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,515 @@
|
||||
/**
|
||||
* Component: Audible Series Scraping
|
||||
* Documentation: documentation/integrations/audible.md
|
||||
*
|
||||
* Standalone series scraping module. Uses the AudibleService fetch wrapper
|
||||
* for HTTP requests and Cheerio for HTML parsing.
|
||||
* Kept separate from audible.service.ts to avoid bloating the main service.
|
||||
*/
|
||||
|
||||
import * as cheerio from 'cheerio';
|
||||
import { getAudibleService, AudibleAudiobook } from './audible.service';
|
||||
import { AUDIBLE_REGIONS } from '../types/audible';
|
||||
import {
|
||||
getLanguageForRegion,
|
||||
buildContainsSelector,
|
||||
stripPrefixes,
|
||||
} from '../constants/language-config';
|
||||
import { RMABLogger } from '../utils/logger';
|
||||
import { randomDelay } from '../utils/scrape-resilience';
|
||||
|
||||
const logger = RMABLogger.create('Audible.Series');
|
||||
|
||||
const AUDIBLE_PAGE_SIZE = 50;
|
||||
const MAX_SERIES_RESULTS = 15;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface SeriesSummary {
|
||||
asin: string;
|
||||
title: string;
|
||||
bookCount: number;
|
||||
rating?: number;
|
||||
ratingCount?: number;
|
||||
tags: string[];
|
||||
coverArtUrl?: string;
|
||||
audibleUrl: string;
|
||||
}
|
||||
|
||||
export interface SimilarSeries {
|
||||
asin: string;
|
||||
title: string;
|
||||
bookCount?: number;
|
||||
coverArtUrl?: string;
|
||||
}
|
||||
|
||||
export interface SeriesDetail {
|
||||
asin: string;
|
||||
title: string;
|
||||
bookCount: number;
|
||||
rating?: number;
|
||||
ratingCount?: number;
|
||||
description?: string;
|
||||
tags: string[];
|
||||
books: AudibleAudiobook[];
|
||||
similarSeries: SimilarSeries[];
|
||||
audibleUrl: string;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Search: extract series links from Audible search results
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Search for series by scraping Audible search results and extracting
|
||||
* series links. De-duplicates by ASIN, then scrapes each unique series
|
||||
* page in parallel (capped at MAX_SERIES_RESULTS).
|
||||
*/
|
||||
export async function searchForSeries(query: string): Promise<SeriesSummary[]> {
|
||||
const service = getAudibleService();
|
||||
const region = service.getRegion();
|
||||
const baseUrl = service.getBaseUrl();
|
||||
const langConfig = getLanguageForRegion(region);
|
||||
const seriesLabels = langConfig.scraping.seriesLabels;
|
||||
|
||||
logger.info(`Searching series for "${query}" (region: ${region})`);
|
||||
|
||||
// Step 1: Fetch search results page
|
||||
let $: cheerio.CheerioAPI;
|
||||
try {
|
||||
const { data: response } = await service.fetch('/search', {
|
||||
params: {
|
||||
ipRedirectOverride: 'true',
|
||||
keywords: query,
|
||||
pageSize: AUDIBLE_PAGE_SIZE,
|
||||
},
|
||||
});
|
||||
$ = cheerio.load(response.data);
|
||||
} catch (error) {
|
||||
logger.error('Series search fetch failed', {
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
});
|
||||
return [];
|
||||
}
|
||||
|
||||
// Step 2: Extract unique series ASINs from search results
|
||||
// Series links appear inside spans containing locale-specific "Series:" text
|
||||
const seriesMap = new Map<string, { title: string; coverArtUrl?: string }>();
|
||||
|
||||
$('.s-result-item, .productListItem').each((_index, element) => {
|
||||
if (seriesMap.size >= MAX_SERIES_RESULTS) return false;
|
||||
|
||||
const $el = $(element);
|
||||
|
||||
// Find the span containing a series label (e.g. "Series:")
|
||||
const seriesSelector = buildContainsSelector('span', seriesLabels);
|
||||
const seriesContainer = $el.find(seriesSelector).first();
|
||||
if (seriesContainer.length === 0) return;
|
||||
|
||||
// Look for series link within or near the series label container
|
||||
// The series link is a child or sibling: <a href="/series/Name/B006K1QER6">
|
||||
const parentEl = seriesContainer.parent();
|
||||
const seriesLink = parentEl.find('a[href*="/series/"]').first();
|
||||
if (seriesLink.length === 0) return;
|
||||
|
||||
const href = seriesLink.attr('href') || '';
|
||||
const asinMatch = href.match(/\/series\/[^/]*\/([A-Z0-9]{10})/);
|
||||
if (!asinMatch) return;
|
||||
|
||||
const asin = asinMatch[1];
|
||||
if (seriesMap.has(asin)) return;
|
||||
|
||||
const title = seriesLink.text().trim();
|
||||
if (!title) return;
|
||||
|
||||
// Use the first book's cover as representative image
|
||||
const coverArtUrl = $el.find('img').first().attr('src')?.replace(/\._.*_\./, '._SL500_.') || undefined;
|
||||
|
||||
seriesMap.set(asin, { title, coverArtUrl });
|
||||
});
|
||||
|
||||
if (seriesMap.size === 0) {
|
||||
logger.info(`No series found for "${query}"`);
|
||||
return [];
|
||||
}
|
||||
|
||||
logger.info(`Found ${seriesMap.size} unique series, scraping detail pages...`);
|
||||
|
||||
// Step 3: Scrape each series page in parallel (with rate limiting)
|
||||
const entries = Array.from(seriesMap.entries());
|
||||
const BATCH_SIZE = 5;
|
||||
const results: SeriesSummary[] = [];
|
||||
|
||||
for (let i = 0; i < entries.length; i += BATCH_SIZE) {
|
||||
const batch = entries.slice(i, i + BATCH_SIZE);
|
||||
const batchResults = await Promise.all(
|
||||
batch.map(async ([asin, meta]) => {
|
||||
try {
|
||||
const detail = await scrapeSeriesPageSummary(asin);
|
||||
if (!detail) return null;
|
||||
return {
|
||||
...detail,
|
||||
coverArtUrl: detail.coverArtUrl || meta.coverArtUrl,
|
||||
audibleUrl: `${baseUrl}/series/${asin}`,
|
||||
} as SeriesSummary;
|
||||
} catch (error) {
|
||||
logger.warn(`Failed to scrape series ${asin}`, {
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
});
|
||||
// Return a minimal result from search data
|
||||
return {
|
||||
asin,
|
||||
title: meta.title,
|
||||
bookCount: 0,
|
||||
tags: [],
|
||||
coverArtUrl: meta.coverArtUrl,
|
||||
audibleUrl: `${baseUrl}/series/${asin}`,
|
||||
} as SeriesSummary;
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
results.push(...batchResults.filter((r): r is SeriesSummary => r !== null));
|
||||
|
||||
// Rate limit between batches
|
||||
if (i + BATCH_SIZE < entries.length) {
|
||||
await new Promise(resolve => setTimeout(resolve, randomDelay(1500, 3000)));
|
||||
}
|
||||
}
|
||||
|
||||
logger.info(`Series search complete: "${query}" -> ${results.length} results`);
|
||||
return results;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Series page scraping (summary - for search results)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Scrape a series page for summary data (title, book count, rating, tags).
|
||||
* Used during search to enrich each series result.
|
||||
*/
|
||||
async function scrapeSeriesPageSummary(asin: string): Promise<Omit<SeriesSummary, 'audibleUrl'> | null> {
|
||||
const service = getAudibleService();
|
||||
|
||||
try {
|
||||
const { data: response } = await service.fetch(`/series/${asin}`, {
|
||||
params: { ipRedirectOverride: 'true' },
|
||||
});
|
||||
const $ = cheerio.load(response.data);
|
||||
|
||||
return parseSeriesPageSummary($, asin);
|
||||
} catch (error) {
|
||||
logger.warn(`Failed to fetch series page ${asin}`, {
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
});
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse summary fields from a series page's Cheerio document.
|
||||
*/
|
||||
function parseSeriesPageSummary(
|
||||
$: cheerio.CheerioAPI,
|
||||
asin: string
|
||||
): Omit<SeriesSummary, 'audibleUrl'> {
|
||||
// Title - from h1
|
||||
const title = $('h1').first().text().trim() || '';
|
||||
|
||||
// Book count - multiple strategies, most specific first
|
||||
let bookCount = 0;
|
||||
|
||||
// Primary: adbl-metadata[slot="child-count"] in the page header (NOT inside carousels)
|
||||
// Filter out carousel items by excluding those inside adbl-product-carousel
|
||||
$('adbl-metadata[slot="child-count"]').each((_i, el) => {
|
||||
if (bookCount > 0) return false;
|
||||
const $el = $(el);
|
||||
// Skip if inside a carousel (those are similar-series counts)
|
||||
if ($el.closest('adbl-product-carousel').length > 0) return;
|
||||
const text = $el.text().trim();
|
||||
const match = text.match(/(\d+)/);
|
||||
if (match) bookCount = parseInt(match[1]);
|
||||
});
|
||||
|
||||
// Secondary: text matching in spans/headings for "X books/titles/Titel/libros/Bucher"
|
||||
if (bookCount === 0) {
|
||||
const countText = $('span:contains("book"), span:contains("title"), span:contains("Titel"), span:contains("libro"), span:contains("Buch"), span:contains("B\u00fccher")')
|
||||
.text().trim();
|
||||
const countMatch = countText.match(/(\d+)\s*(books?|titles?|Titel|libros?|B(?:uch|\u00fccher))/i);
|
||||
if (countMatch) {
|
||||
bookCount = parseInt(countMatch[1]);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: count product items on the page
|
||||
if (bookCount === 0) {
|
||||
bookCount = $('.productListItem, .bc-list-item[data-asin]').length;
|
||||
}
|
||||
|
||||
// Rating
|
||||
const { rating, ratingCount } = parseSeriesRating($);
|
||||
|
||||
// Tags/genres: primary from adbl-chip web components, fallback to legacy links
|
||||
const tags: string[] = [];
|
||||
const addTag = (text: string) => {
|
||||
const tag = text.trim();
|
||||
if (tag && tag.length >= 2 && tag.length <= 50 && !tags.includes(tag)) {
|
||||
tags.push(tag);
|
||||
}
|
||||
};
|
||||
|
||||
// Primary: adbl-chip.related-tag elements (modern Audible layout)
|
||||
$('adbl-chip.related-tag').each((_i, el) => {
|
||||
addTag($(el).text());
|
||||
});
|
||||
|
||||
// Fallback: legacy category and tag links
|
||||
if (tags.length === 0) {
|
||||
$('a[href*="/cat/"], a[href*="/tag/"]').each((_i, el) => {
|
||||
addTag($(el).text());
|
||||
});
|
||||
}
|
||||
|
||||
// Cover art from first book image
|
||||
const coverArtUrl = $('.productListItem img, .bc-list-item img').first()
|
||||
.attr('src')?.replace(/\._.*_\./, '._SL500_.') || undefined;
|
||||
|
||||
return { asin, title, bookCount, rating, ratingCount, tags: tags.slice(0, 5), coverArtUrl };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Series page scraping (full detail)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Scrape a series page for full detail data including books and similar series.
|
||||
* Used by the detail API endpoint.
|
||||
*/
|
||||
export async function scrapeSeriesPage(asin: string): Promise<SeriesDetail | null> {
|
||||
const service = getAudibleService();
|
||||
const region = service.getRegion();
|
||||
const baseUrl = service.getBaseUrl();
|
||||
const langConfig = getLanguageForRegion(region);
|
||||
|
||||
logger.info(`Scraping series detail page: ${asin}`);
|
||||
|
||||
try {
|
||||
const { data: response } = await service.fetch(`/series/${asin}`, {
|
||||
params: { ipRedirectOverride: 'true', pageSize: AUDIBLE_PAGE_SIZE },
|
||||
});
|
||||
const $ = cheerio.load(response.data);
|
||||
|
||||
// Parse summary fields
|
||||
const summary = parseSeriesPageSummary($, asin);
|
||||
|
||||
// Description
|
||||
const description = $('.bc-expander-content').first().text().trim() ||
|
||||
$('[class*="productPublisherSummary"]').first().text().trim() ||
|
||||
undefined;
|
||||
|
||||
// Parse all books from the series page
|
||||
const books = parseSeriesBooks($, langConfig.scraping.authorPrefixes, langConfig.scraping.narratorPrefixes);
|
||||
|
||||
// Use actual book count if we got more from scraping
|
||||
const bookCount = Math.max(summary.bookCount, books.length);
|
||||
|
||||
// Parse similar series ("Listeners also enjoyed" or similar section)
|
||||
const similarSeries = parseSimilarSeries($);
|
||||
|
||||
logger.info(`Series detail complete: "${summary.title}" (${books.length} books, ${similarSeries.length} similar)`);
|
||||
|
||||
return {
|
||||
asin,
|
||||
title: summary.title,
|
||||
bookCount,
|
||||
rating: summary.rating,
|
||||
ratingCount: summary.ratingCount,
|
||||
description,
|
||||
tags: summary.tags,
|
||||
books,
|
||||
similarSeries,
|
||||
audibleUrl: `${baseUrl}/series/${asin}`,
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error(`Failed to scrape series detail ${asin}`, {
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
});
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Parsing helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Extract rating and rating count from a series page.
|
||||
*
|
||||
* Real HTML uses:
|
||||
* <div aria-label="4.5 out of 5 stars" class="bc-review-stars ...">
|
||||
* <span class="series-rating bc-color-secondary">8,704 ratings</span>
|
||||
*/
|
||||
function parseSeriesRating($: cheerio.CheerioAPI): { rating?: number; ratingCount?: number } {
|
||||
let rating: number | undefined;
|
||||
let ratingCount: number | undefined;
|
||||
|
||||
// Primary: aria-label on div.bc-review-stars (e.g. "4.5 out of 5 stars")
|
||||
const starsDiv = $('div.bc-review-stars');
|
||||
let ariaLabel = starsDiv.attr('aria-label') || '';
|
||||
|
||||
// Fallback: any element with aria-label containing rating pattern
|
||||
if (!ariaLabel) {
|
||||
const fallbackEl = $('[aria-label*="out of"], [aria-label*="von 5"], [aria-label*="de 5"]').first();
|
||||
ariaLabel = fallbackEl.attr('aria-label') || '';
|
||||
}
|
||||
|
||||
// Extract numeric rating from aria-label (handles "4.5 out of 5", "4,5 von 5", "4,5 de 5")
|
||||
const ratingMatch = ariaLabel.match(/(\d+[.,]?\d*)\s*(?:out of|von|de)\s*5/i);
|
||||
if (ratingMatch) {
|
||||
rating = parseFloat(ratingMatch[1].replace(',', '.'));
|
||||
}
|
||||
|
||||
// Rating count from span.series-rating (e.g. "8,704 ratings")
|
||||
const seriesRatingSpan = $('span.series-rating').first();
|
||||
let countText = seriesRatingSpan.text().trim();
|
||||
|
||||
// Fallback: look in broader context for rating count text
|
||||
if (!countText) {
|
||||
const fallbackContainer = $('[class*="rating"], .ratingsLabel').first();
|
||||
countText = fallbackContainer.text().trim();
|
||||
}
|
||||
|
||||
const countMatch = countText.match(/([\d,.]+)\s*(?:ratings?|Bewertungen?|calificaciones?)/i);
|
||||
if (countMatch) {
|
||||
ratingCount = parseInt(countMatch[1].replace(/[.,]/g, ''));
|
||||
}
|
||||
|
||||
return { rating, ratingCount };
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse all books from a series page's product list items.
|
||||
*/
|
||||
function parseSeriesBooks(
|
||||
$: cheerio.CheerioAPI,
|
||||
authorPrefixes: string[],
|
||||
narratorPrefixes: string[]
|
||||
): AudibleAudiobook[] {
|
||||
const books: AudibleAudiobook[] = [];
|
||||
const seenAsins = new Set<string>();
|
||||
|
||||
$('.productListItem, .bc-list-item').each((_index, element) => {
|
||||
const $el = $(element);
|
||||
|
||||
// Extract ASIN
|
||||
const bookAsin = $el.attr('data-asin') ||
|
||||
$el.find('li').attr('data-asin') ||
|
||||
$el.find('a[href*="/pd/"]').attr('href')?.match(/\/pd\/[^/]+\/([A-Z0-9]{10})/)?.[1] ||
|
||||
$el.find('a[href*="/ac/"]').attr('href')?.match(/\/ac\/[^/]+\/([A-Z0-9]{10})/)?.[1] ||
|
||||
$el.find('a').attr('href')?.match(/\/(?:pd|ac)\/[^/]+\/([A-Z0-9]{10})/)?.[1] || '';
|
||||
|
||||
if (!bookAsin || seenAsins.has(bookAsin)) return;
|
||||
seenAsins.add(bookAsin);
|
||||
|
||||
// Title
|
||||
const title = $el.find('h2').first().text().trim() ||
|
||||
$el.find('h3 a').first().text().trim() ||
|
||||
$el.find('.bc-heading a').first().text().trim() ||
|
||||
'';
|
||||
|
||||
if (!title) return;
|
||||
|
||||
// Author
|
||||
const authorLink = $el.find('a[href*="/author/"]').first();
|
||||
const authorText = authorLink.text().trim() ||
|
||||
$el.find('.authorLabel').text().trim() ||
|
||||
'';
|
||||
const authorHref = authorLink.attr('href') || '';
|
||||
const authorAsinMatch = authorHref.match(/\/author\/[^/]+\/([A-Z0-9]{10})/);
|
||||
|
||||
// Narrator
|
||||
const narratorText = $el.find('a[href*="searchNarrator="]').first().text().trim() ||
|
||||
$el.find('.narratorLabel').text().trim() ||
|
||||
'';
|
||||
|
||||
// Cover art
|
||||
const coverArtUrl = $el.find('img').first().attr('src')?.replace(/\._.*_\./, '._SL500_.') || '';
|
||||
|
||||
// Rating
|
||||
const ratingText = $el.find('.ratingsLabel').text().trim() ||
|
||||
$el.find('.a-icon-star span').first().text().trim();
|
||||
const ratingMatch = ratingText ? ratingText.match(/(\d+[.,]?\d*)/) : null;
|
||||
const rating = ratingMatch ? parseFloat(ratingMatch[1].replace(',', '.')) : undefined;
|
||||
|
||||
books.push({
|
||||
asin: bookAsin,
|
||||
title,
|
||||
author: stripPrefixes(authorText, authorPrefixes),
|
||||
authorAsin: authorAsinMatch?.[1] || undefined,
|
||||
narrator: stripPrefixes(narratorText, narratorPrefixes),
|
||||
coverArtUrl,
|
||||
rating,
|
||||
});
|
||||
});
|
||||
|
||||
return books;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse similar series from the "Listeners also enjoyed" carousel.
|
||||
*
|
||||
* Real HTML uses web components:
|
||||
* <adbl-product-carousel id="SeriestoSeries">
|
||||
* <adbl-product-grid-item>
|
||||
* <div class="adbl-impression-emitted" data-asin="B0CGS1LPWJ">
|
||||
* <adbl-metadata slot="title"><a>Hockey Guys</a></adbl-metadata>
|
||||
* <adbl-metadata slot="child-count">3 titles</adbl-metadata>
|
||||
* </adbl-product-grid-item>
|
||||
*/
|
||||
function parseSimilarSeries($: cheerio.CheerioAPI): SimilarSeries[] {
|
||||
const similar: SimilarSeries[] = [];
|
||||
const seenAsins = new Set<string>();
|
||||
|
||||
// Scope to the SeriestoSeries carousel to avoid picking up other series links
|
||||
const carousel = $('adbl-product-carousel#SeriestoSeries');
|
||||
if (carousel.length === 0) return similar;
|
||||
|
||||
carousel.find('adbl-product-grid-item').each((_i, el) => {
|
||||
if (similar.length >= 15) return false;
|
||||
|
||||
const $el = $(el);
|
||||
|
||||
// Extract ASIN: prefer data-asin on impression div, fallback to series href
|
||||
let asin = $el.find('.adbl-impression-emitted, .adbl-asin-impression').first().attr('data-asin') || '';
|
||||
if (!asin) {
|
||||
const seriesHref = $el.find('a[href*="/series/"]').first().attr('href') || '';
|
||||
const hrefMatch = seriesHref.match(/\/series\/[^/]*\/([A-Z0-9]{10})/);
|
||||
if (hrefMatch) asin = hrefMatch[1];
|
||||
}
|
||||
if (!asin || !/^[A-Z0-9]{10}$/.test(asin)) return;
|
||||
if (seenAsins.has(asin)) return;
|
||||
seenAsins.add(asin);
|
||||
|
||||
// Title from metadata slot
|
||||
const title = $el.find('adbl-metadata[slot="title"] a').first().text().trim() ||
|
||||
$el.find('adbl-metadata[slot="title"]').first().text().trim() || '';
|
||||
if (!title || title.length > 200) return;
|
||||
|
||||
// Book count from child-count slot (e.g. "3 titles")
|
||||
const countText = $el.find('adbl-metadata[slot="child-count"]').first().text().trim();
|
||||
const countMatch = countText.match(/(\d+)/);
|
||||
const bookCount = countMatch ? parseInt(countMatch[1]) : undefined;
|
||||
|
||||
// Cover image from adbl-collection-image
|
||||
const coverArtUrl = $el.find('adbl-collection-image img').first().attr('src')?.replace(/\._.*_\./, '._SL500_.') ||
|
||||
$el.find('img').first().attr('src')?.replace(/\._.*_\./, '._SL500_.') ||
|
||||
undefined;
|
||||
|
||||
similar.push({ asin, title, bookCount, coverArtUrl });
|
||||
});
|
||||
|
||||
return similar;
|
||||
}
|
||||
@@ -48,6 +48,7 @@ export interface AudibleAudiobook {
|
||||
genres?: string[];
|
||||
series?: string;
|
||||
seriesPart?: string;
|
||||
seriesAsin?: string;
|
||||
}
|
||||
|
||||
export interface AudibleSearchResult {
|
||||
@@ -77,6 +78,22 @@ export class AudibleService {
|
||||
return this.baseUrl;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current Audible region code
|
||||
*/
|
||||
public getRegion(): AudibleRegion {
|
||||
return this.region;
|
||||
}
|
||||
|
||||
/**
|
||||
* Public fetch wrapper for external scraping modules (e.g. audible-series.ts).
|
||||
* Ensures the service is initialized and delegates to fetchWithRetry.
|
||||
*/
|
||||
public async fetch(url: string, config: any = {}): Promise<{ data: any; meta: FetchResultMeta }> {
|
||||
await this.initialize();
|
||||
return this.fetchWithRetry(url, config);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the language config for the current region
|
||||
*/
|
||||
@@ -749,6 +766,7 @@ export class AudibleService {
|
||||
genres: data.genres?.map((g: any) => typeof g === 'string' ? g : g.name).slice(0, 5) || undefined,
|
||||
series: data.seriesPrimary?.name || undefined,
|
||||
seriesPart: data.seriesPrimary?.position || undefined,
|
||||
seriesAsin: data.seriesPrimary?.asin || undefined,
|
||||
};
|
||||
|
||||
// Ensure cover art URL is high quality
|
||||
@@ -765,7 +783,8 @@ export class AudibleService {
|
||||
rating: result.rating,
|
||||
genreCount: result.genres?.length || 0,
|
||||
series: result.series,
|
||||
seriesPart: result.seriesPart
|
||||
seriesPart: result.seriesPart,
|
||||
seriesAsin: result.seriesAsin
|
||||
});
|
||||
|
||||
return result;
|
||||
|
||||
@@ -84,6 +84,7 @@ export async function createRequestForUser(
|
||||
let year: number | undefined;
|
||||
let series: string | undefined;
|
||||
let seriesPart: string | undefined;
|
||||
let seriesAsin: string | undefined;
|
||||
try {
|
||||
const audibleService = getAudibleService();
|
||||
const audnexusData = await audibleService.getAudiobookDetails(audiobook.asin);
|
||||
@@ -100,6 +101,7 @@ export async function createRequestForUser(
|
||||
}
|
||||
if (audnexusData?.series) series = audnexusData.series;
|
||||
if (audnexusData?.seriesPart) seriesPart = audnexusData.seriesPart;
|
||||
if (audnexusData?.seriesAsin) seriesAsin = audnexusData.seriesAsin;
|
||||
} catch (error) {
|
||||
logger.warn(`Failed to fetch Audnexus data for ASIN ${audiobook.asin}: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
||||
}
|
||||
@@ -121,6 +123,7 @@ export async function createRequestForUser(
|
||||
year,
|
||||
series,
|
||||
seriesPart,
|
||||
seriesAsin,
|
||||
status: 'requested',
|
||||
},
|
||||
});
|
||||
@@ -134,6 +137,7 @@ export async function createRequestForUser(
|
||||
if (year) updates.year = year;
|
||||
if (series) updates.series = series;
|
||||
if (seriesPart) updates.seriesPart = seriesPart;
|
||||
if (seriesAsin) updates.seriesAsin = seriesAsin;
|
||||
|
||||
if (Object.keys(updates).length > 0) {
|
||||
audiobookRecord = await prisma.audiobook.update({
|
||||
|
||||
Reference in New Issue
Block a user