- );
-}
-// ── Artist Detail Modal ─────────────────────────────────────────────────────
-
-function ArtistDetail({ artistId, onClose, onDelete }) {
- const { closing, close } = useAnimatedClose(onClose);
- const [albums, setAlbums] = useState(null);
- const [artistInfo, setArtistInfo] = useState(null);
- const [loading, setLoading] = useState(true);
- const [selectedAlbums, setSelectedAlbums] = useState([]);
- const [searching, setSearching] = useState(false);
- const [searchResult, setSearchResult] = useState(null);
- const [fileTree, setFileTree] = useState(null);
- const [showFiles, setShowFiles] = useState(false);
- const [expandedFolder, setExpandedFolder] = useState(null);
- const [confirmDelete, setConfirmDelete] = useState(false);
- const [deleting, setDeleting] = useState(false);
- const [confirmDeleteAlbum, setConfirmDeleteAlbum] = useState(null);
- // Discover-more state
- const [discoverAlbums, setDiscoverAlbums] = useState(null);
- const [discoverLoading, setDiscoverLoading] = useState(false);
- const [showDiscover, setShowDiscover] = useState(false);
- const [discoverFilter, setDiscoverFilter] = useState('all'); // all|Album|EP|Single
- const [discoverSelected, setDiscoverSelected] = useState([]);
- const [addingExtras, setAddingExtras] = useState(false);
- const [discoverTextFilter, setDiscoverTextFilter] = useState('');
-
- useEffect(() => {
- setLoading(true);
- Promise.all([
- fetch(`/api/library/artists/${artistId}/albums`, { cache: 'no-store' }).then(r => r.ok ? r.json() : null),
- fetch(`/api/library/artists/${artistId}/files`, { cache: 'no-store' }).then(r => r.ok ? r.json() : null),
- ]).then(([albumData, fileData]) => {
- setAlbums(albumData?.albums || []);
- setArtistInfo(albumData?.artist || null);
- setFileTree(fileData);
- setLoading(false);
- }).catch(() => setLoading(false));
- }, [artistId]);
-
- const loadDiscover = async () => {
- if (!artistInfo?.artistName) return;
- setShowDiscover(true);
- if (discoverAlbums) return;
- setDiscoverLoading(true);
- try {
- const url = `/api/lookup/music/albums?artistName=${encodeURIComponent(artistInfo.artistName)}&foreignArtistId=${encodeURIComponent(artistInfo.foreignArtistId || '')}`;
- const data = await fetch(url, { cache: 'no-store' }).then(r => r.ok ? r.json() : []);
- // Dedupe against albums already in Lidarr (normalized title match)
- const norm = s => (s || '').toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '')
- .replace(/\s*\(.*?\)\s*/g, ' ').replace(/\s*\[.*?\]\s*/g, ' ')
- .replace(/ - (single|ep)$/i, '').replace(/[^a-z0-9\s]/g, '')
- .replace(/\s+/g, ' ').trim();
- const existing = new Set((albums || []).map(a => norm(a.title)));
- const filtered = (Array.isArray(data) ? data : []).filter(a => !existing.has(norm(a.title)));
- setDiscoverAlbums(filtered);
- } catch (e) {
- setDiscoverAlbums([]);
- }
- setDiscoverLoading(false);
- };
-
- const submitExtras = async () => {
- if (discoverSelected.length === 0 || !discoverAlbums) return;
- setAddingExtras(true);
- setSearchResult(null);
- try {
- const titles = discoverAlbums
- .filter(a => discoverSelected.includes(a.id))
- .map(a => a.title.replace(/ - Single$/, ''));
- const resp = await fetch(`/api/library/artists/${artistId}/albums/add`, {
- method: 'POST', headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ selectedAlbumTitles: titles }),
- });
- const data = await resp.json();
- if (resp.ok) {
- setSearchResult({ success: true,
- message: `Adding ${titles.length} album(s) — ${data.monitored} matched in Lidarr, ${data.unmatched?.length || 0} via Soulseek` });
- setDiscoverSelected([]);
- // Refresh library albums after a delay
- setTimeout(() => {
- fetch(`/api/library/artists/${artistId}/albums`, { cache: 'no-store' })
- .then(r => r.ok ? r.json() : null)
- .then(d => { if (d?.albums) setAlbums(d.albums); });
- // Force re-fetch discover (some moved to library)
- setDiscoverAlbums(null);
- }, 4000);
- } else {
- setSearchResult({ success: false, message: data.error || 'Add failed' });
- }
- } catch (e) {
- setSearchResult({ success: false, message: e.message });
- }
- setAddingExtras(false);
- };
-
- const handleDownload = async () => {
- if (selectedAlbums.length === 0) return;
- setSearching(true);
- setSearchResult(null);
- try {
- const resp = await fetch('/api/command/search', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ service: 'lidarr', id: artistId, albumIds: selectedAlbums }),
- });
- const data = await resp.json();
- setSearchResult(resp.ok ? { success: true, message: `Search triggered for ${selectedAlbums.length} album(s)` } : { success: false, message: data.error });
- } catch (err) { setSearchResult({ success: false, message: err.message }); }
- setSearching(false);
- };
-
- const isAlbumComplete = a => a.trackFileCount > 0 && a.trackFileCount >= a.trackCount && a.trackCount > 0;
- const missingAlbums = albums?.filter(a => !isAlbumComplete(a)) || [];
- const downloadedAlbums = albums?.filter(a => isAlbumComplete(a)) || [];
- const allAlbumsComplete = !loading && albums?.length > 0 && missingAlbums.length === 0;
-
- const handleDeleteAlbumFiles = async (albumId) => {
- try {
- await fetch(`/api/delete/album/${albumId}/files`, { method: 'DELETE' });
- // Refresh album list
- const data = await fetch(`/api/library/artists/${artistId}/albums`, { cache: 'no-store' }).then(r => r.json());
- setAlbums(data?.albums || []);
- setSearchResult({ success: true, message: 'Album files removed from disk' });
- } catch (err) { setSearchResult({ success: false, message: err.message }); }
- };
-
- return (
-
-
e.stopPropagation()}>
-
-
Albums
-
-
-
-
-
- {confirmDelete && (
-
-
Delete this artist?
-
-
-
-
-
-
- )}
-
- {loading ? (
-
- progress_activity
-
- ) : albums.length === 0 ? (
-
No albums found
- ) : (
-
- {albums.map(a => {
- const isMissing = a.trackFileCount < a.trackCount;
- const isSelected = selectedAlbums.includes(a.id);
- return (
-
- {!isAlbumComplete(a) ? (
-
setSelectedAlbums(prev => isSelected ? prev.filter(id => id !== a.id) : [...prev, a.id])}
- className="w-3.5 h-3.5 rounded border-border-medium text-accent-blue focus:ring-accent-blue/30 cursor-pointer flex-none"
- />
- ) : (
-
check_circle
- )}
-
-
-
{a.title}
-
- {a.releaseDate ? new Date(a.releaseDate).getFullYear() : 'Unknown'}
- {' · '}
- 0 ? 'text-accent-green' : 'text-accent-orange'}>
- {a.trackFileCount}/{a.trackCount} tracks
-
- {a.sizeOnDisk > 0 && ` · ${formatBytes(a.sizeOnDisk)}`}
-
-
- {a.percentOfTracks > 0 && (
-
-
-
= 100 ? '#16a34a' : '#d97706' }} />
-
-
{Math.round(a.percentOfTracks)}%
-
- )}
- {isAlbumComplete(a) && (
- confirmDeleteAlbum === a.id ? (
-
-
-
-
- ) : (
-
- )
- )}
-
- );
- })}
-
- )}
-
- {/* Discover more section */}
- {!loading && artistInfo?.artistName && (
-
-
- {showDiscover && (
-
- {discoverLoading ? (
-
- progress_activity
-
- ) : !discoverAlbums || discoverAlbums.length === 0 ? (
-
No additional releases found from iTunes/MusicBrainz.
- ) : (
- <>
-
-
-
-
-
-
-
-
-
-
- {['all', 'Album', 'EP', 'Single'].map(t => {
- const count = t === 'all' ? discoverAlbums.length : discoverAlbums.filter(a => a.albumType === t).length;
- return (
-
- );
- })}
-
-
- search
- setDiscoverTextFilter(e.target.value)}
- placeholder="Filter releases..."
- className="w-full pl-7 pr-2 py-1.5 text-[11px] bg-[#e8e8ed]/50 border-none rounded-xl text-text-primary placeholder:text-text-muted/50 focus:outline-none focus:ring-2 focus:ring-[#007AFF]/30"
- />
-
-
- {discoverAlbums
- .filter(a => discoverFilter === 'all' || a.albumType === discoverFilter)
- .filter(a => !discoverTextFilter || a.title.toLowerCase().includes(discoverTextFilter.toLowerCase()))
- .map(a => {
- const isSel = discoverSelected.includes(a.id);
- return (
-
- );
- })}
-
-
-
-
-
-
- )}
-
- )}
-
- )}
- {/* File tree section */}
- {!loading && fileTree && (
-
-
- {showFiles && (
-
- {fileTree.folders?.length === 0 ? (
-
No files found on disk
- ) : (
-
- {fileTree.folders.map(folder => (
-
-
- {expandedFolder === folder.name && (
-
- {folder.files.map((f, fi) => (
-
-
- {f.name.endsWith('.flac') ? 'audio_file' : f.name.endsWith('.mp3') ? 'audio_file' : 'description'}
-
- {f.name}
- {formatBytes(f.size)}
-
- ))}
-
- )}
-
- ))}
-
- )}
-
- )}
-
- )}
- {/* Footer: completion or download controls */}
- {!loading && albums?.length > 0 && (
-
- {allAlbumsComplete ? (
-
-
check_circle
-
-
All albums downloaded
-
{downloadedAlbums.length} album{downloadedAlbums.length !== 1 ? 's' : ''} · click trash icon to remove files
-
-
- ) : (
- <>
- {searchResult && (
-
- {searchResult.message}
-
- )}
-
-
- {selectedAlbums.length} album(s) selected · {missingAlbums.length} missing
- {selectedAlbums.length === 0 && }
-
-
-
-
- )}
-
- )}
-
-
- );
-}
-
-// ── Add Media Panel ─────────────────────────────────────────────────────────
-
-function AddPanel({ item, mediaType, onClose, onAdded }) {
- const { closing, close } = useAnimatedClose(onClose);
- const [profiles, setProfiles] = useState(null);
- const [profileError, setProfileError] = useState(null);
- const [loading, setLoading] = useState(true);
- const [adding, setAdding] = useState(false);
- const [result, setResult] = useState(null);
- const [config, setConfig] = useState({});
- const [selectedSeasons, setSelectedSeasons] = useState([]);
- const [lookupAlbums, setLookupAlbums] = useState(null);
- const [albumsLoading, setAlbumsLoading] = useState(false);
- const [selectedAlbumIds, setSelectedAlbumIds] = useState([]);
- const [albumFilter, setAlbumFilter] = useState("");
- // Manual add is a two-step flow: create the arr record first, then browse releases against that new id.
- const [manualStep, setManualStep] = useState(null); // null | 'adding' | 'browse'
- const [addedId, setAddedId] = useState(null);
- const handlePanelClose = useCallback(() => {
- if (manualStep === 'browse' && addedId && onAdded) onAdded({ mediaType, id: addedId, title: item?.title || item?.artistName });
- close();
- }, [manualStep, addedId, onAdded, item, close, mediaType]);
-
- useEffect(() => {
- apiFetch(`/api/profiles/${mediaType}`)
- .then(data => {
- setProfiles(data);
- setProfileError(null);
- if (data) {
- const defaults = {};
- if (data.qualityProfiles?.length) {
- defaults.qualityProfileId = selectDefaultQualityProfileId(data.qualityProfiles, mediaType);
- }
- if (data.rootFolders?.length) defaults.rootFolderPath = data.rootFolders[0].path;
- if (data.metadataProfiles?.length) defaults.metadataProfileId = data.metadataProfiles[0].id;
- if (data.minimumAvailabilities?.length) defaults.minimumAvailability = data.minimumAvailabilities[2]?.value || data.minimumAvailabilities[0].value;
- if (data.seriesTypes?.length) defaults.seriesType = data.seriesTypes[0].value;
- if (data.monitorOptions?.length) defaults.monitorOption = data.monitorOptions[0].value;
- setConfig(defaults);
- }
- setLoading(false);
- })
- .catch((err) => { setProfileError(err.message); setLoading(false); });
- // Pre-select all seasons
- if (item.seasons) setSelectedSeasons(item.seasons.filter(s => s.seasonNumber > 0).map(s => s.seasonNumber));
- }, [mediaType, item]);
-
- const handleManualAdd = async () => {
- setManualStep('adding');
- setResult(null);
- try {
- let body = { ...config, monitored: true };
- if (mediaType === 'movie') {
- body.tmdbId = item.tmdbId;
- body.searchForMovie = false;
- } else {
- body.tvdbId = item.tvdbId;
- body.searchForMissingEpisodes = false;
- if (selectedSeasons.length > 0 && item.seasons?.length) body.selectedSeasons = selectedSeasons;
- }
- const data = await apiPost(`/api/add/${mediaType}`, body);
- if (data.success) {
- setAddedId(data.id);
- setManualStep('browse');
- } else {
- setResult({ success: false, message: data.error || 'Failed to add' });
- setManualStep(null);
- }
- } catch (err) {
- setResult({ success: false, message: err.message });
- setManualStep(null);
- }
- };
-
- // Fetch albums for music artists
- useEffect(() => {
- if (mediaType !== 'music' || !item.foreignArtistId) return;
- setAlbumsLoading(true);
- apiFetch(`/api/lookup/music/albums?artistName=${encodeURIComponent(item.artistName)}&foreignArtistId=${encodeURIComponent(item.foreignArtistId || "")}`)
- .then(albums => {
- setLookupAlbums(albums);
- setSelectedAlbumIds(albums.filter(a => a.albumType !== 'Single').map(a => a.id));
- setAlbumsLoading(false);
- })
- .catch(() => { setLookupAlbums([]); setAlbumsLoading(false); });
- }, [mediaType, item.foreignArtistId, item.artistName]);
-
- const handleAdd = async () => {
- setAdding(true);
- setResult(null);
- try {
- let body = { ...config, monitored: true };
- if (mediaType === 'movie') {
- body.tmdbId = item.tmdbId;
- body.searchForMovie = true;
- } else if (mediaType === 'series') {
- body.tvdbId = item.tvdbId;
- body.searchForMissingEpisodes = true;
- if (selectedSeasons.length > 0 && item.seasons?.length) {
- body.selectedSeasons = selectedSeasons;
- }
- } else {
- body.foreignArtistId = item.foreignArtistId;
- body.artistName = item.artistName;
- body.searchForMissingAlbums = true;
- if (lookupAlbums?.length > 0) {
- body.selectedAlbumTitles = lookupAlbums
- .filter(a => selectedAlbumIds.includes(a.id))
- .map(a => a.title.replace(/ - Single$/, ''));
- }
- }
- const data = await apiPost(`/api/add/${mediaType}`, body);
- if (data.success) {
- setResult({ success: true, message: data.albumsMonitored ? `Added "${data.artistName}" — ${data.albumsMonitored}/${data.totalAlbums} albums monitored, searching Soulseek...` : `Added "${data.title || data.artistName}" — searching for downloads...` });
- setAdding(false);
- if (onAdded) onAdded({ mediaType, id: data.id, title: data.artistName || data.title || title });
- return;
- } else {
- setResult({ success: false, message: data.error || 'Failed to add' });
- }
- } catch (err) { setResult({ success: false, message: err.message }); }
- setAdding(false);
- };
-
- const rating = extractRating(item.ratings);
- const title = mediaType === 'music' ? item.artistName : item.title;
- const fallbackIcon = mediaType === 'movie' ? 'movie' : mediaType === 'series' ? 'tv' : 'album';
- const albumsAndEPs = lookupAlbums?.filter(a => a.albumType !== 'Single') || [];
- const albumsAndEPIds = albumsAndEPs.map(a => a.id);
- const allAlbumsAndEPsSelected = albumsAndEPIds.length > 0 && albumsAndEPIds.every(id => selectedAlbumIds.includes(id));
- const toggleAlbumsAndEPsSelection = () => {
- setSelectedAlbumIds(current => (
- allAlbumsAndEPsSelected ? current.filter(id => !albumsAndEPIds.includes(id)) : Array.from(new Set([...current, ...albumsAndEPIds]))
- ));
- };
-
- return (
-
-
e.stopPropagation()}>
- {/* Header */}
-
-
-
-
{title}
-
- {item.year && {item.year}}
- {item.network && · {item.network}}
- {item.studio && · {item.studio}}
- {item.disambiguation && · {item.disambiguation}}
- {rating && (
-
- star{rating}
-
- )}
-
- {item.overview &&
{item.overview}
}
- {item.genres?.length > 0 && (
-
- {item.genres.slice(0, 4).map(g => {g})}
-
- )}
-
-
-
-
- {/* Config */}
-
- {loading ? (
-
- progress_activity
-
- ) : !profiles ? (
-
{profileError || 'Failed to load profiles'}
- ) : (
- <>
-
- {profiles.qualityProfiles?.length > 0 && (
-
-
- {profiles.minimumAvailabilities && (
-
- {/* Season selection for TV */}
- {item.seasons && (
-
- )}
- {/* Album selection for Music */}
- {mediaType === 'music' && albumsLoading && (
-
- progress_activity
- Loading discography...
-
- )}
- {mediaType === 'music' && !albumsLoading && lookupAlbums && lookupAlbums.length > 0 && (
-
-
-
-
-
-
-
-
-
- search
- setAlbumFilter(e.target.value)}
- placeholder="Filter albums..."
- className="w-full pl-7 pr-2 py-1.5 text-[11px] bg-[#e8e8ed]/50 border-none rounded-xl text-text-primary placeholder:text-text-muted/50 focus:outline-none focus:ring-2 focus:ring-[#007AFF]/30"
- />
-
-
- {lookupAlbums.filter(a => !albumFilter || a.title.toLowerCase().includes(albumFilter.toLowerCase())).map(a => (
-
- ))}
-
-
- )}
-
- )}
-
- {result && (
-
-
- {result.success ? 'check_circle' : 'error'}
- {result.message}
-
-
- )}
-
- {!result?.success && manualStep !== 'browse' && (
-
-
- {mediaType !== 'music' && (
-
- )}
-
- )}
- {manualStep === 'browse' && addedId && (
-
-
- Manual Search
-
-
-
This title is already added to your library. Closing this panel keeps it monitored so you can come back later.
-
{
- setResult({ success: true, message: `Added "${title}" — release grabbed, downloading shortly` });
- if (onAdded) onAdded({ mediaType, id: addedId, title });
- setManualStep(null);
- }}
- />
-
- )}
-
-
-
- );
-}
-
-// ── Library Card Components ─────────────────────────────────────────────────
-
-function _SeriesCard({ series, onClick, queued }) {
- const total = series.totalEpisodeCount || 0;
- const have = series.episodeFileCount || 0;
- const isComplete = total > 0 && have >= total;
- const pct = total > 0 ? Math.min(100, Math.round((have / total) * 100)) : 0;
- const badgeLabel = total === 0 ? null : isComplete ? 'Complete' : `${have}/${total} eps`;
- const barColor = isComplete ? '#30D158' : '#FF9F0A';
-
- return (
-
-
-
-
-
- {/* QUEUED badge */}
- {queued && (
-
- QUEUED
-
- )}
-
- {/* Completion bar */}
- {total > 0 && (
-
- )}
-
-
- {series.title.toUpperCase()}
-
-
- {series.seasonCount > 0 && (
-
- {series.seasonCount} Season{series.seasonCount !== 1 ? 's' : ''}
-
- )}
- {badgeLabel && (
-
- {badgeLabel}
-
- )}
-
-
-
-
-
- );
-}
-const SeriesCard = memo(_SeriesCard, (a, b) => a.series === b.series && a.queued === b.queued);
-
-
-function _MovieCard({ movie, onClick, queued }) {
- return (
-
-
-
-
-
- {/* QUEUED badge (top-left) */}
- {queued && (
-
- QUEUED
-
- )}
- {/* Downloaded / Downloading / Missing badge (top-right) */}
-
- {movie.hasFile ? 'DOWNLOADED' : queued ? 'DOWNLOADING' : 'MISSING'}
-
-
-
- {movie.title.toUpperCase()}
-
-
- {[movie.quality, movie.year && String(movie.year)].filter(Boolean).join(' · ') || (movie.year && String(movie.year)) || ''}
-
-
-
-
- );
-}
-const MovieCard = memo(_MovieCard, (a, b) => a.movie === b.movie && a.queued === b.queued);
-
-
-
-function _ArtistCard({ artist, onClick }) {
- return (
-
-
-
-
-
-
-
- {artist.artistName.toUpperCase()}
-
- {artist.albumCount > 0 && (
-
0 && artist.downloadedAlbumCount < artist.albumCount ? 'rgba(255,159,10,0.9)' : 'rgba(235,235,245,0.55)', letterSpacing: '0.03em' }}>
- {artist.downloadedAlbumCount > 0 ? `${artist.downloadedAlbumCount}/${artist.albumCount}` : artist.albumCount} album{artist.albumCount !== 1 ? 's' : ''}
-
- )}
-
-
-
- );
-}
-const ArtistCard = memo(_ArtistCard, (a, b) => a.artist === b.artist);
-
-
-
-// ── Lookup Result Card ──────────────────────────────────────────────────────
-
-const ResultCard = memo(function ResultCard({ item, mediaType, onClick }) {
- const rating = extractRating(item.ratings);
- const isAlbum = mediaType === 'music-album';
- const isMusic = mediaType === 'music' || isAlbum;
- const title = isAlbum ? item.title : (mediaType === 'music' ? item.artistName : item.title);
- const subtitle = isAlbum ? item.artistName : null;
- const fallbackIcon = mediaType === 'movie' ? 'movie' : mediaType === 'series' ? 'tv' : 'album';
- const imgHeight = isMusic ? 160 : 280;
- return (
-
-
-
-
- {item.inLibrary && !isAlbum && (
-
-
- checkIN LIBRARY
-
-
- )}
- {isAlbum && item.albumType && (
-
- {item.albumType.toUpperCase()}
-
- )}
-
-
-
{title}
- {subtitle &&
{subtitle}
}
-
- {item.releaseDate && {new Date(item.releaseDate).getFullYear()}}
- {item.year && !item.releaseDate && {item.year}}
- {item.network && · {item.network}}
- {item.studio && · {item.studio}}
- {item.seasonCount && · {item.seasonCount}S}
- {item.disambiguation && · {item.disambiguation}}
- {rating && (
-
- star{rating}
-
- )}
-
- {!isAlbum && item.overview &&
{item.overview}
}
-
-
- );
-});
-
-// ── Movie Download Trigger ──────────────────────────────────────────────────
-
-function MovieDownloadPanel({ movie, onClose, onDelete }) {
- const { closing, close } = useAnimatedClose(onClose);
- const [searching, setSearching] = useState(false);
- const [result, setResult] = useState(null);
- const [confirmDelete, setConfirmDelete] = useState(false);
- const [deleting, setDeleting] = useState(false);
- const [manualMode, setManualMode] = useState(false);
- const [fileInfo, setFileInfo] = useState(null);
-
- useEffect(() => {
- if (!movie.hasFile) return;
- fetch(`/api/library/movie/${movie.id}/file`, { cache: 'no-store' })
- .then(r => r.ok ? r.json() : null)
- .then(data => setFileInfo(data))
- .catch(() => {});
- }, [movie.id, movie.hasFile]);
-
- const handleSearch = async () => {
- setSearching(true);
- setResult(null);
- try {
- const resp = await fetch('/api/command/search', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ service: 'radarr', id: movie.id }),
- });
- const data = await resp.json();
- setResult(resp.ok ? { success: true, message: 'Radarr is now searching for this movie' } : { success: false, message: data.error });
- } catch (err) { setResult({ success: false, message: err.message }); }
- setSearching(false);
- };
-
- return (
-
-
e.stopPropagation()}>
-
-
-
-
{movie.title} {movie.year && `(${movie.year})`}
-
{movie.hasFile ? `Downloaded · ${movie.quality || 'Unknown quality'}` : 'Missing from disk'}
- {movie.sizeOnDisk > 0 &&
{formatBytes(movie.sizeOnDisk)}
}
- {fileInfo && (
-
- {fileInfo.resolution && (
-
- {fileInfo.resolution && {fileInfo.resolution}}
- {fileInfo.videoCodec && {fileInfo.videoCodec}}
- {fileInfo.dynamicRange && {fileInfo.dynamicRange}}
- {fileInfo.audioCodec && {fileInfo.audioCodec}{fileInfo.audioChannels ? ` ${fileInfo.audioChannels}ch` : ''}}
- {fileInfo.runTime && {fileInfo.runTime}}
-
- )}
- {fileInfo.path && (
-
- 📁 {fileInfo.path}
-
- )}
-
- )}
-
-
-
-
-
-
- {confirmDelete && (
-
-
Delete this movie?
-
-
-
-
-
-
- )}
-
- {result && (
-
- {result.message}
-
- )}
-
-
-
-
- {manualMode && (
-
setResult({ success: true, message: 'Release grabbed — downloading shortly' })}
- />
- )}
-
-
-
- );
-}
-
-// ── Main Library Component ──────────────────────────────────────────────────
-
-export default function Library({
- externalQuery,
- onExternalQueryChange,
- serviceStatus = {},
- onOpenSettings,
- onAdded,
-}) {
- const [mode, setMode] = useState('library'); // 'library' or 'add'
- const [query, setQuery] = useState(externalQuery || '');
- const [activeType, setActiveType] = useState('all');
- const [results, setResults] = useState({ series: [], movies: [], artists: [] });
- const [lookupResults, setLookupResults] = useState([]);
- const [musicSections, setMusicSections] = useState(null); // { artists, albums, singles, topCategory }
- const [loading, setLoading] = useState(false);
- const [initialLoaded, setInitialLoaded] = useState(false);
- const [libraryError, setLibraryError] = useState(null);
- const [lookupError, setLookupError] = useState(null);
- const [libraryServiceStates, setLibraryServiceStates] = useState(null);
- const [detailView, setDetailView] = useState(null);
- const [addPanel, setAddPanel] = useState(null);
- const [addType, setAddType] = useState('movie');
- const [queuedSeriesIds, setQueuedSeriesIds] = useState(new Set());
- const [queuedMovieIds, setQueuedMovieIds] = useState(new Set());
- const [refreshing, setRefreshing] = useState(false);
- const autoOpenedAddOnEmptyLibrary = useRef(false);
- const addPanelHandledRef = useRef(false);
- const debounceRef = useRef(null);
- const inputRef = useRef(null);
- const libraryRequestRef = useRef(0);
- const lookupRequestRef = useRef(0);
- const libraryFailureRef = useRef({ count: 0, lastGoodAt: null });
- const latestSearchRef = useRef({ query: externalQuery || '', activeType: 'all' });
-
- // Sync external header query → local query (when header search bar is typed into)
- useEffect(() => {
- if (externalQuery !== undefined && externalQuery !== query) {
- setQuery(externalQuery);
- setMode('library');
- }
- }, [externalQuery]);
-
- const serviceAvailability = useMemo(() => ({
- series: ['up', 'ready'].includes(serviceStatus.sonarr?.status),
- movie: ['up', 'ready'].includes(serviceStatus.radarr?.status),
- music: ['up', 'ready'].includes(serviceStatus.lidarr?.status),
- }), [serviceStatus]);
- const hasLibraryServices = serviceAvailability.series || serviceAvailability.movie || serviceAvailability.music;
-
- const availableLibraryFilters = useMemo(() => TYPE_FILTERS.filter((filter) => {
- if (filter.key === 'all') return serviceAvailability.series || serviceAvailability.movie || serviceAvailability.music;
- if (filter.key === 'series') return serviceAvailability.series;
- if (filter.key === 'movie') return serviceAvailability.movie;
- if (filter.key === 'music') return serviceAvailability.music;
- if (filter.key === 'missing') return serviceAvailability.series || serviceAvailability.movie;
- return true;
- }), [serviceAvailability]);
-
- const availableAddTypes = useMemo(() => (
- [{ key: 'movie', label: 'Movies', icon: 'movie' }, { key: 'series', label: 'TV', icon: 'tv' }, { key: 'music', label: 'Music', icon: 'album' }]
- .filter((filter) => serviceAvailability[filter.key])
- ), [serviceAvailability]);
-
- useEffect(() => {
- latestSearchRef.current = { query, activeType };
- }, [query, activeType]);
-
- useEffect(() => {
- if (availableLibraryFilters.some(filter => filter.key === activeType)) return;
- setActiveType(availableLibraryFilters[0]?.key || 'all');
- }, [availableLibraryFilters, activeType]);
-
- useEffect(() => {
- if (availableAddTypes.some(filter => filter.key === addType)) return;
- setAddType(availableAddTypes[0]?.key || 'movie');
- }, [availableAddTypes, addType]);
-
- // Library search
- const doLibrarySearch = useCallback(async (q, type) => {
- if (!hasLibraryServices) {
- setLoading(false);
- setInitialLoaded(true);
- return;
- }
- const requestId = ++libraryRequestRef.current;
- setLoading(true);
- setLibraryError(null);
- try {
- const data = await apiFetch(`/api/library/search?q=${encodeURIComponent(q)}&type=${type}`);
- if (requestId !== libraryRequestRef.current) return;
- setResults({
- series: Array.isArray(data.series) ? data.series : [],
- movies: Array.isArray(data.movies) ? data.movies : [],
- artists: Array.isArray(data.artists) ? data.artists : [],
- });
- setLibraryServiceStates(data.serviceStates || null);
- libraryFailureRef.current = { count: 0, lastGoodAt: Date.now() };
- } catch (err) {
- if (requestId !== libraryRequestRef.current) return;
- const message = String(err?.message || 'Library request failed');
- const transientFailure =
- message.startsWith('backoff:') ||
- message.includes('Failed to fetch') ||
- message.includes('NetworkError') ||
- message.includes('Load failed');
- const shouldRetryMessage = transientFailure || isSetupAdjacentError(err);
- const nextFailureCount = libraryFailureRef.current.count + 1;
- const hasLoadedSuccessfully = Boolean(libraryFailureRef.current.lastGoodAt);
- libraryFailureRef.current = {
- ...libraryFailureRef.current,
- count: nextFailureCount,
- };
- if (transientFailure && (initialLoaded || hasLoadedSuccessfully)) {
- setLibraryError(null);
- return;
- }
- if (transientFailure && nextFailureCount < 3) {
- setLibraryError(null);
- return;
- }
- setLibraryError(shouldRetryMessage
- ? Object.assign(new Error('Reconnecting to the library…'), err, { message: 'Reconnecting to the library…' })
- : err);
- } finally {
- if (requestId === libraryRequestRef.current) {
- setLoading(false);
- setInitialLoaded(true);
- }
- }
- }, [hasLibraryServices, initialLoaded]);
-
- // Lookup search (add mode)
- const doLookupSearch = useCallback(async (q, type) => {
- if (!q.trim()) {
- setLookupResults([]);
- setMusicSections(null);
- setLookupError(null);
- return;
- }
- const requestId = ++lookupRequestRef.current;
- setLoading(true);
- setLookupError(null);
- const endpoint = type === 'movie' ? 'movie' : type === 'series' ? 'series' : 'music';
- try {
- const data = await apiFetch(`/api/lookup/${endpoint}?term=${encodeURIComponent(q)}`);
- if (requestId !== lookupRequestRef.current) return;
- if (type === 'music' && data && !Array.isArray(data)) {
- // Preserve grouped sections for rendering, but flatten them for shared empty/loading handling.
- setMusicSections(data);
- setLookupResults([...(data.artists || []), ...(data.albums || []), ...(data.singles || [])]);
- } else {
- setMusicSections(null);
- setLookupResults(Array.isArray(data) ? data : []);
- }
- } catch (err) {
- if (requestId !== lookupRequestRef.current) return;
- setLookupResults([]);
- setMusicSections(null);
- setLookupError(err);
- } finally {
- if (requestId === lookupRequestRef.current) setLoading(false);
- }
- }, []);
-
- // Fetch download queue for badge display
- const fetchQueue = useCallback(async () => {
- try {
- const items = await apiFetch('/api/arr-queue');
- const sIds = new Set();
- const mIds = new Set();
- // Materialize queue membership once so library cards can do cheap badge lookups.
- for (const item of items) {
- if (item.service === 'sonarr' && item.seriesId) sIds.add(item.seriesId);
- if (item.service === 'radarr' && item.movieId) mIds.add(item.movieId);
- }
- setQueuedSeriesIds(sIds);
- setQueuedMovieIds(mIds);
- } catch {}
- }, []);
-
- // Manual refresh handler
- const handleRefresh = useCallback(() => {
- if (!hasLibraryServices) return;
- setRefreshing(true);
- apiFetch('/api/library/refresh')
- .then(() => {
- doLibrarySearch(query, activeType);
- fetchQueue();
- })
- .catch((err) => setLibraryError(err))
- .finally(() => setRefreshing(false));
- }, [query, activeType, hasLibraryServices, doLibrarySearch, fetchQueue]);
-
- // Initial load
- useEffect(() => {
- if (!hasLibraryServices) {
- setLibraryError(null);
- setResults({ series: [], movies: [], artists: [] });
- setLibraryServiceStates(null);
- setInitialLoaded(true);
- setLoading(false);
- return;
- }
- doLibrarySearch(latestSearchRef.current.query, latestSearchRef.current.activeType);
- fetchQueue();
- const poll = setInterval(() => {
- doLibrarySearch(latestSearchRef.current.query, latestSearchRef.current.activeType);
- fetchQueue();
- }, 15000);
- return () => clearInterval(poll);
- }, [doLibrarySearch, fetchQueue, hasLibraryServices]);
-
- // Debounced search
- useEffect(() => {
- clearTimeout(debounceRef.current);
- if (mode === 'library') {
- if (!hasLibraryServices) return;
- // The mount effect already loads the default library view; skip that duplicate fetch.
- if (!initialLoaded) return;
- debounceRef.current = setTimeout(() => doLibrarySearch(query, activeType), 300);
- } else {
- if (!query.trim()) { setLookupResults([]); setLookupError(null); return; }
- debounceRef.current = setTimeout(() => doLookupSearch(query, addType), 400);
- }
- return () => clearTimeout(debounceRef.current);
- }, [query, activeType, mode, addType, initialLoaded, doLibrarySearch, doLookupSearch, hasLibraryServices]);
-
- // Reset on mode change — going to 'add' keeps the query so it pre-fills the lookup
- useEffect(() => {
- setLookupResults([]);
- setMusicSections(null);
- setLookupError(null);
- if (mode === 'library') {
- setQuery('');
- setLibraryError(null);
- if (hasLibraryServices) doLibrarySearch('', activeType);
- else {
- setInitialLoaded(true);
- setLoading(false);
- setResults({ series: [], movies: [], artists: [] });
- }
- }
- }, [mode, activeType, doLibrarySearch, hasLibraryServices]);
-
- // Compute missing / wanted items for the "Missing" filter
- const { missingSeries, missingMovies } = useMemo(() => ({
- missingSeries: results.series
- .filter(s => s.monitored && s.totalEpisodeCount > 0 && s.episodeFileCount < s.totalEpisodeCount)
- .sort((a, b) => (b.totalEpisodeCount - b.episodeFileCount) - (a.totalEpisodeCount - a.episodeFileCount)),
- missingMovies: results.movies.filter(m => m.monitored && !m.hasFile),
- }), [results.series, results.movies]);
-
- const isMissingFilter = activeType === 'missing';
-
- // Determine what to show given the active filter
- const visibleSeries = isMissingFilter ? missingSeries : (activeType === 'all' || activeType === 'series' ? results.series : []);
- const visibleMovies = isMissingFilter ? missingMovies : (activeType === 'all' || activeType === 'movie' ? results.movies : []);
- const visibleArtists = isMissingFilter ? [] : (activeType === 'all' || activeType === 'music' ? results.artists : []);
-
- const totalLibrary = visibleSeries.length + visibleMovies.length + visibleArtists.length;
- const effectiveServiceStates = {
- series: libraryServiceStates?.series || { status: serviceAvailability.series ? 'ready' : 'unconfigured', error: null },
- movies: libraryServiceStates?.movies || { status: serviceAvailability.movie ? 'ready' : 'unconfigured', error: null },
- artists: libraryServiceStates?.artists || { status: serviceAvailability.music ? 'ready' : 'unconfigured', error: null },
- };
- const activeLibraryIssue = activeType === 'series'
- ? effectiveServiceStates.series
- : activeType === 'movie'
- ? effectiveServiceStates.movies
- : activeType === 'music'
- ? effectiveServiceStates.artists
- : null;
- const libraryModeUnavailable = availableLibraryFilters.length === 0;
- const addModeUnavailable = availableAddTypes.length === 0;
- const unavailableServices = [
- !serviceAvailability.series && 'TV',
- !serviceAvailability.movie && 'Movies',
- !serviceAvailability.music && 'Music',
- ].filter(Boolean);
- const isLibraryEmptyWelcome = initialLoaded && !loading && !query.trim() && !isMissingFilter && activeType === 'all' && totalLibrary === 0 && !libraryModeUnavailable && !libraryError && !isServiceIssueStatus(activeLibraryIssue?.status) && hasLibraryServices && availableAddTypes.length > 0;
-
- const jumpToAddMode = useCallback(() => {
- if (addModeUnavailable) {
- onOpenSettings?.();
- return;
- }
- const typeMap = { series: 'series', movie: 'movie', music: 'music' };
- if (typeMap[activeType]) setAddType(typeMap[activeType]);
- setMode('add');
- }, [addModeUnavailable, activeType, onOpenSettings]);
-
- useEffect(() => {
- if (!isLibraryEmptyWelcome || autoOpenedAddOnEmptyLibrary.current || mode !== 'library') return;
- const typeMap = { series: 'series', movie: 'movie', music: 'music' };
- if (typeMap[activeType]) setAddType(typeMap[activeType]);
- else if (availableAddTypes[0]?.key) setAddType(availableAddTypes[0].key);
- setMode('add');
- autoOpenedAddOnEmptyLibrary.current = true;
- }, [activeType, isLibraryEmptyWelcome, mode, availableAddTypes]);
-
- useEffect(() => {
- if (addPanel) addPanelHandledRef.current = false;
- }, [addPanel]);
-
- const handlePanelAdded = useCallback((payload) => {
- if (addPanelHandledRef.current) return;
- addPanelHandledRef.current = true;
- setAddPanel(null);
- doLibrarySearch('', 'all');
- onAdded?.(payload);
- }, [doLibrarySearch, onAdded]);
-
- return (
-
- {/* Search header */}
-
- {/* Mode toggle */}
-
-
-
-
-
- {/* Search + filters */}
-
-
- search
- { setQuery(e.target.value); onExternalQueryChange?.(e.target.value); }}
- placeholder={mode === 'library'
- ? (libraryModeUnavailable ? 'Configure Radarr, Sonarr, or Lidarr in backend .env to browse the library' : 'Search your library...')
- : (addModeUnavailable ? 'No add services are configured in backend .env' : `Search for ${addType === 'movie' ? 'movies' : addType === 'series' ? 'TV shows' : 'artists'} to add...`)}
- className="search-input w-full pl-10 pr-10 py-2.5 bg-bg-card border border-border-subtle rounded-xl text-[13px] text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent-blue focus:ring-1 focus:ring-accent-blue/30"
- style={{ opacity: mode === 'library' ? (libraryModeUnavailable ? 0.6 : 1) : (addModeUnavailable ? 0.6 : 1) }}
- />
- {query && (
-
- )}
-
- {mode === 'library' && (
-
- )}
-
- {/* Type filter */}
-
- {mode === 'library' ? (
- availableLibraryFilters.map(f => (
-
- ))
- ) : (
- availableAddTypes.map(f => (
-
- ))
- )}
-
-
- {(((unavailableServices.length > 0) && !(mode === 'library' && initialLoaded && totalLibrary === 0 && libraryModeUnavailable) && !(mode === 'add' && addModeUnavailable))
- || libraryError || lookupError || isServiceIssueStatus(activeLibraryIssue?.status)) && (
-
- {unavailableServices.length > 0 && (
-
- Unavailable right now: {unavailableServices.join(', ')}.
- {' '}This stack still reads manual service config from backend `.env` values.
-
-
- )}
- {libraryError && mode === 'library' &&
}
- {lookupError && mode === 'add' &&
}
- {isServiceIssueStatus(activeLibraryIssue?.status) && activeLibraryIssue?.error && mode === 'library' && (
-
{activeLibraryIssue.error}
- )}
-
- )}
- {mode === 'library' && initialLoaded && (
-
- {loading ? 'Searching...' : isMissingFilter
- ? `${totalLibrary} item${totalLibrary !== 1 ? 's' : ''} need attention`
- : `${totalLibrary} result${totalLibrary !== 1 ? 's' : ''}`}
-
- )}
-
-
- {/* Library Results */}
- {mode === 'library' && (
-
- {!initialLoaded && loading && (
-
-
progress_activity
-
Loading library…
-
- )}
- {visibleSeries.length > 0 && (
-
-
-
{isMissingFilter ? 'Incomplete TV Shows' : 'TV Shows'}
- {visibleSeries.length}
-
-
- {visibleSeries.map(s => setDetailView({ type: 'series', id: s.id })} queued={queuedSeriesIds.has(s.id)} />)}
-
-
- )}
- {visibleMovies.length > 0 && (
-
-
-
{isMissingFilter ? 'Missing Films' : 'Films'}
- {visibleMovies.length}
-
-
- {visibleMovies.map(m => setDetailView({ type: 'movie', data: m })} queued={queuedMovieIds.has(m.id)} />)}
-
-
- )}
- {visibleArtists.length > 0 && (
-
-
-
Music
- {visibleArtists.length}
-
-
- {visibleArtists.map(a =>
setDetailView({ type: 'artist', id: a.id })} />)}
-
-
- )}
- {initialLoaded && !loading && totalLibrary === 0 && (
-
- {libraryModeUnavailable || activeLibraryIssue?.status === 'unconfigured' ? (
-
-
-
- tune
-
-
-
-
Connect your library services
-
- Radarr / Sonarr / Lidarr
-
-
-
- This view is ready, but the backend does not have library endpoints configured yet. Once those services are connected, browsing and missing-item triage will populate here automatically.
-
-
-
-
Configure
-
Add the Arr URLs and API keys in backend `.env`.
-
-
-
Restart
-
Restart the API so the new service bindings are picked up.
-
-
-
Refresh
-
Return here to browse the live catalog and missing items.
-
-
-
-
-
-
-
-
- ) : (
-
-
- {isLibraryEmptyWelcome ? 'playlist_add' : libraryError || isServiceIssueStatus(activeLibraryIssue?.status) ? 'cloud_off' : isMissingFilter ? 'task_alt' : 'search_off'}
-
-
- {isLibraryEmptyWelcome
- ? 'Your library is empty.'
- : libraryError || isServiceIssueStatus(activeLibraryIssue?.status)
- ? 'Library data is temporarily unavailable for this view.'
- : isMissingFilter
- ? 'Nothing missing — library is complete!'
- : `No media found${query ? ` for "${query}"` : ''}`}
-
- {libraryError || isServiceIssueStatus(activeLibraryIssue?.status) ? (
-
- Existing results stay visible when possible, but this request did not complete cleanly.
-
-
- ) : isLibraryEmptyWelcome ? (
-
- Get started by searching and adding something to your library.
-
-
- ) : !isMissingFilter && (
-
Try a different search, or switch to
- )}
-
- )}
-
- )}
-
- )}
-
- {/* Add New Results */}
- {mode === 'add' && (
-
- {addModeUnavailable && (
-
-
-
-
- settings
-
-
-
-
Enable acquisition services
-
- Required for Add New
-
-
-
- Add mode pulls live results from Radarr, Sonarr, or Lidarr. Until at least one of those services is configured, search stays disabled to avoid sending you into a dead-end flow.
-
-
-
-
Endpoint
-
Point the backend at the Arr service URL.
-
-
-
Auth
-
Provide the matching API key in backend `.env`.
-
-
-
Return
-
Refresh this view to start searching the live catalog.
-
-
-
-
-
-
-
-
-
- )}
- {loading && (
-
- progress_activity
-
- )}
- {!addModeUnavailable && !loading && query.trim() && lookupResults.length === 0 && (
-
-
search_off
-
No results for "{query}"
-
- )}
- {!addModeUnavailable && !loading && !query.trim() && (
-
-
-
-
-
- {addType === 'movie' ? 'movie' : addType === 'series' ? 'tv' : 'album'}
-
-
-
-
-
- Add {addType === 'movie' ? 'films' : addType === 'series' ? 'TV shows' : 'music'}
-
-
- Powered by {addType === 'movie' ? 'Radarr' : addType === 'series' ? 'Sonarr' : 'Lidarr'}
-
-
-
- Search by title, artist, or release name. Existing library matches stay visible so you can avoid duplicates and jump straight into the next acquisition.
-
-
-
-
Search
-
Use the field above to query the live catalog.
-
-
-
Review
-
Check quality, year, and library status before adding.
-
-
-
Queue
-
Send the selection into the pipeline and track it from Downloads.
-
-
-
-
-
-
- )}
- {!addModeUnavailable && !loading && lookupResults.length > 0 && (
-
- {addType === 'music' && musicSections ? (() => {
- // Smart section ordering based on topCategory
- const sectionOrder = musicSections.topCategory === 'albums'
- ? ['albums', 'artists', 'singles']
- : musicSections.topCategory === 'singles'
- ? ['singles', 'artists', 'albums']
- : ['artists', 'albums', 'singles'];
- const sectionDefs = {
- artists: { label: 'Artists', items: musicSections.artists, icon: 'person' },
- albums: { label: 'Albums', items: musicSections.albums, icon: 'album' },
- singles: { label: 'Singles & EPs', items: musicSections.singles, icon: 'music_note' },
- };
- return sectionOrder.map(key => {
- const { label, items, icon } = sectionDefs[key];
- if (!items || items.length === 0) return null;
- return (
-
-
- {icon}
-
{label}
- ({items.length})
-
-
- {items.map((item, i) => (
- key === 'artists' ? setAddPanel(item) : setAddPanel({ ...item, _isAlbum: true, _albumType: key })}
- />
- ))}
-
-
- );
- });
- })() : (
-
-
-
{lookupResults.length} result{lookupResults.length !== 1 ? 's' : ''}
-
- Source: {addType === 'movie' ? 'Radarr' : addType === 'series' ? 'Sonarr' : 'Lidarr'}
-
-
-
- {lookupResults.map((item, i) => (
- setAddPanel(item)} />
- ))}
-
-
- )}
-
- )}
-
- )}
-
- {/* Modals */}
- {detailView?.type === 'series' &&
setDetailView(null)} onDelete={() => { setDetailView(null); doLibrarySearch('', activeType); }} />}
- {detailView?.type === 'artist' && setDetailView(null)} onDelete={() => { setDetailView(null); doLibrarySearch('', activeType); }} />}
- {detailView?.type === 'movie' && setDetailView(null)} onDelete={() => { setDetailView(null); doLibrarySearch('', activeType); }} />}
- {addPanel && setAddPanel(null)} onAdded={handlePanelAdded} />}
-
- );
-}
+export { default } from './library/LibraryView';
diff --git a/frontend/src/ManualSearchModal.jsx b/frontend/src/ManualSearchModal.jsx
index 65fd041..a0aa39e 100644
--- a/frontend/src/ManualSearchModal.jsx
+++ b/frontend/src/ManualSearchModal.jsx
@@ -1,7 +1,6 @@
import { useState, useEffect, useRef, useCallback, memo } from 'react';
import { formatBytes, detectQualityLabel } from './utils';
-
-const QUALITY_ORDER = { '4K': 0, '1080p': 1, '720p': 2, '480p': 3, 'HDTV': 4, 'WEB': 5, 'BluRay': 6, 'CAM': 7, 'Other': 8 };
+import { QUALITY_ORDER } from './constants';
const prefersReducedMotion = () =>
typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
@@ -10,13 +9,38 @@ const ResultRow = memo(function ResultRow({ r, isGrabbing, isGrabbed, anyGrabbin
return (
|
- {r.title}
- {r.indexer}{r.rejections?.length > 0 && ` · ⚠ ${r.rejections[0]}`}
+
+ {r.title}
+
+
+ {r.indexer}
+ {r.rejections?.length > 0 && ` · ⚠ ${r.rejections[0]}`}
+
|
{r.quality} |
- {formatBytes(r.size)} |
+
+ {formatBytes(r.size)}
+ |
- = 10 ? '#30d158' : r.seeders >= 3 ? '#ff9f0a' : '#ff453a', fontWeight: 700, fontFamily: 'monospace' }}>{r.seeders}
+ = 10 ? '#30d158' : r.seeders >= 3 ? '#ff9f0a' : '#ff453a',
+ fontWeight: 700,
+ fontFamily: 'monospace',
+ }}
+ >
+ {r.seeders}
+
/ {r.leechers}
|
@@ -26,7 +50,19 @@ const ResultRow = memo(function ResultRow({ r, isGrabbing, isGrabbed, anyGrabbin
|
@@ -34,14 +70,6 @@ const ResultRow = memo(function ResultRow({ r, isGrabbing, isGrabbed, anyGrabbin
);
});
-/**
- * Full-screen modal for manual torrent/release searching and grabbing.
- * @param {Object} target - { service, title, retryId, seriesId, movieId, seasonNumbers }
- * @param {Array} results - Release objects from the search API
- * @param {boolean} loading - Whether a search is in progress
- * @param {Function} onClose - Called when the modal should close
- * @param {Function} onGrab - Called with a release object to grab
- */
export default function ManualSearchModal({ target, results, loading, onClose, onGrab }) {
const [sortBy, setSortBy] = useState('seeders');
const [sortDir, setSortDir] = useState('desc');
@@ -58,7 +86,7 @@ export default function ManualSearchModal({ target, results, loading, onClose, o
const closeTimerRef = useRef(null);
const reduced = prefersReducedMotion();
- // Kick open one frame later so the enter transition has a closed starting point.
+ // Kick the open state one frame later so the enter transition has a closed starting point.
useEffect(() => {
const id = requestAnimationFrame(() => setOpen(true));
return () => cancelAnimationFrame(id);
@@ -66,45 +94,68 @@ export default function ManualSearchModal({ target, results, loading, onClose, o
const requestClose = useCallback(() => {
if (closing) return;
- if (reduced) { onClose(); return; }
+ if (reduced) {
+ onClose();
+ return;
+ }
setClosing(true);
setOpen(false);
closeTimerRef.current = setTimeout(() => onClose(), 200);
}, [closing, onClose, reduced]);
- useEffect(() => () => { if (closeTimerRef.current) clearTimeout(closeTimerRef.current); }, []);
+ useEffect(
+ () => () => {
+ if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+ },
+ [],
+ );
// Keep focus inside the dialog while it is mounted.
useEffect(() => {
- const handleKey = (e) => {
- if (e.key === 'Escape') { e.stopPropagation(); requestClose(); return; }
+ const handleKey = e => {
+ if (e.key === 'Escape') {
+ e.stopPropagation();
+ requestClose();
+ return;
+ }
if (e.key === 'Tab' && dialogRef.current) {
const focusables = dialogRef.current.querySelectorAll(
- 'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+ 'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
);
if (focusables.length === 0) return;
const first = focusables[0];
const last = focusables[focusables.length - 1];
- if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
- else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+ if (e.shiftKey && document.activeElement === first) {
+ e.preventDefault();
+ last.focus();
+ } else if (!e.shiftKey && document.activeElement === last) {
+ e.preventDefault();
+ first.focus();
+ }
}
};
document.addEventListener('keydown', handleKey);
- // initial focus
const t = setTimeout(() => dialogRef.current?.focus(), 50);
- return () => { document.removeEventListener('keydown', handleKey); clearTimeout(t); };
+ return () => {
+ document.removeEventListener('keydown', handleKey);
+ clearTimeout(t);
+ };
}, [requestClose]);
- const allQualities = [...new Set(results.map(r => detectQualityLabel(r)))]
- .sort((a, b) => (QUALITY_ORDER[a] ?? 99) - (QUALITY_ORDER[b] ?? 99));
+ const allQualities = [...new Set(results.map(r => detectQualityLabel(r)))].sort(
+ (a, b) => (QUALITY_ORDER[a] ?? 99) - (QUALITY_ORDER[b] ?? 99),
+ );
- const toggleSort = (col) => {
- if (sortBy === col) setSortDir(d => d === 'desc' ? 'asc' : 'desc');
- else { setSortBy(col); setSortDir('desc'); }
+ const toggleSort = col => {
+ if (sortBy === col) setSortDir(d => (d === 'desc' ? 'asc' : 'desc'));
+ else {
+ setSortBy(col);
+ setSortDir('desc');
+ }
};
- const toggleQuality = (q) => {
- setQualityFilters(prev => prev.includes(q) ? prev.filter(x => x !== q) : [...prev, q]);
+ const toggleQuality = q => {
+ setQualityFilters(prev => (prev.includes(q) ? prev.filter(x => x !== q) : [...prev, q]));
setShowCount(50);
};
@@ -117,7 +168,8 @@ export default function ManualSearchModal({ target, results, loading, onClose, o
let cmp = 0;
if (sortBy === 'seeders') cmp = (b.seeders || 0) - (a.seeders || 0);
else if (sortBy === 'size') cmp = (b.size || 0) - (a.size || 0);
- else if (sortBy === 'quality') cmp = (QUALITY_ORDER[detectQualityLabel(a)] ?? 99) - (QUALITY_ORDER[detectQualityLabel(b)] ?? 99);
+ else if (sortBy === 'quality')
+ cmp = (QUALITY_ORDER[detectQualityLabel(a)] ?? 99) - (QUALITY_ORDER[detectQualityLabel(b)] ?? 99);
else cmp = (b.seeders || 0) - (a.seeders || 0) || (b.size || 0) - (a.size || 0);
return sortDir === 'asc' ? -cmp : cmp;
});
@@ -125,21 +177,46 @@ export default function ManualSearchModal({ target, results, loading, onClose, o
const visible = sorted.slice(0, showCount);
const hasMore = sorted.length > showCount;
- const handleGrabClick = useCallback((r) => {
- // Serialize grabs so repeat clicks cannot submit multiple releases at once.
- if (grabbingGuid) return;
- setGrabbingGuid(r.guid);
- setGrabResult(null);
- onGrab(r)
- .then(() => { setGrabResult({ success: true, title: r.title }); setGrabbingGuid(null); })
- .catch((err) => { setGrabError({ title: r.title, message: err?.message || 'Grab failed' }); setTimeout(() => setGrabError(null), 5000); setGrabbingGuid(null); });
- }, [grabbingGuid, onGrab]);
+ // Serialize grabs so repeated clicks cannot submit multiple releases at once.
+ const handleGrabClick = useCallback(
+ r => {
+ if (grabbingGuid) return;
+ setGrabbingGuid(r.guid);
+ setGrabResult(null);
+ setGrabError(null);
+ onGrab(r)
+ .then(() => {
+ setGrabError(null);
+ setGrabResult({ success: true, title: r.title });
+ setGrabbingGuid(null);
+ })
+ .catch(err => {
+ setGrabError({ title: r.title, message: err?.message || 'Grab failed' });
+ setTimeout(() => setGrabError(null), 5000);
+ setGrabbingGuid(null);
+ });
+ },
+ [grabbingGuid, onGrab],
+ );
const SortBtn = ({ col, label }) => {
const active = sortBy === col;
return (
-