Add routing, cast API conversion, and filters
Introduce client-side routing and cast API support. Key changes: - Add react-router-dom dependency and wire BrowserRouter in App. - Convert App to route-based structure (/, /media/:id, /cast, /cast/:id, /add, /import) with MediaDetailRoute and CastDetailRoute helpers. - Extend API types for cast items and add convertApiCastToStaff; fetchAllCast now returns Staff[] (mapped via converter). - Update components to use react-router hooks (useNavigate, useParams, useLocation, Link/NavLink): Header links, DetailView, CastDetailView, AddMediaView, ImporterView and others now navigate via routes. - Enhance CastView: fetch cast list, loading state, persistent search/sort/filter controls, filtering by occupations/media types and enabled categories, improved pagination and UI controls. - Update stashapp importer: add configurable blacklist check to skip scenes, increase per_page for queries. These changes consolidate navigation, improve cast data handling from the API, and add richer filtering and importer controls.
This commit is contained in:
Lars Behrends
@@ -3,17 +3,18 @@ import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { createMedia, type CreateMediaInput } from '@/api';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface AddMediaViewProps {
|
||||
activeCategory: MediaCategory;
|
||||
onBack: () => void;
|
||||
onAddComplete: () => void;
|
||||
}
|
||||
|
||||
export default function AddMediaView({ activeCategory, onBack, onAddComplete }: AddMediaViewProps) {
|
||||
export default function AddMediaView({ activeCategory, onAddComplete }: AddMediaViewProps) {
|
||||
const navigate = useNavigate();
|
||||
const [newMedia, setNewMedia] = useState({
|
||||
title: '',
|
||||
year: '',
|
||||
@@ -149,7 +150,7 @@ export default function AddMediaView({ activeCategory, onBack, onAddComplete }:
|
||||
<div className="pt-24 pb-12 px-6 max-w-[1200px] mx-auto">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={onBack}
|
||||
onClick={() => navigate('/')}
|
||||
className="mb-6 gap-2 text-zinc-600 hover:text-zinc-900"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
import { Staff, Media } from '@/types';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { motion } from 'motion/react';
|
||||
import { ArrowLeft, Calendar, MapPin, Briefcase, Film, User } from 'lucide-react';
|
||||
import { ArrowLeft, Calendar, MapPin, Briefcase, Film, User, Ruler, Palette, Eye } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
interface CastDetailViewProps {
|
||||
person: Staff;
|
||||
onBack: () => void;
|
||||
onMediaClick: (mediaId: string) => void;
|
||||
relatedMedia: Media[];
|
||||
}
|
||||
|
||||
export default function CastDetailView({ person, onBack, onMediaClick, relatedMedia }: CastDetailViewProps) {
|
||||
export default function CastDetailView({ person, relatedMedia }: CastDetailViewProps) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleMediaClick = (mediaId: string) => {
|
||||
navigate(`/media/${mediaId}`);
|
||||
};
|
||||
return (
|
||||
<div className="min-h-screen bg-white pb-20">
|
||||
{/* Hero Section */}
|
||||
@@ -63,7 +67,7 @@ export default function CastDetailView({ person, onBack, onMediaClick, relatedMe
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onBack}
|
||||
onClick={() => navigate(-1)}
|
||||
className="absolute top-24 left-6 bg-white/20 hover:bg-white/40 text-white rounded-full backdrop-blur-md"
|
||||
>
|
||||
<ArrowLeft size={24} />
|
||||
@@ -107,96 +111,211 @@ export default function CastDetailView({ person, onBack, onMediaClick, relatedMe
|
||||
<p className="font-bold text-zinc-700">{person.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(person.ethnicity || person.adult_specifics?.ethnicity) && (
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
|
||||
<User size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Ethnicity</p>
|
||||
<p className="font-bold text-zinc-700">{person.adult_specifics?.ethnicity || person.ethnicity}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-50 rounded-3xl p-8 space-y-6">
|
||||
<h3 className="text-xl font-black text-zinc-900">Measurements</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
|
||||
<Ruler size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Height</p>
|
||||
<p className="font-bold text-zinc-700">{person.adult_specifics?.height || person.height} cm</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{(person.weight || person.adult_specifics?.weight) && (
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
|
||||
<Ruler size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Weight</p>
|
||||
<p className="font-bold text-zinc-700">{person.adult_specifics?.weight || person.weight} kg</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(person.adult_specifics?.measurements || person.bust_size || person.cup_size || person.waist_size || person.hip_size) && (
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
|
||||
<Ruler size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Measurements</p>
|
||||
<p className="font-bold text-zinc-700">
|
||||
{person.adult_specifics?.measurements || (
|
||||
<>
|
||||
{person.bust_size && `${person.bust_size}`}
|
||||
{person.cup_size && person.cup_size}
|
||||
{person.bust_size || person.cup_size ? '-' : ''}
|
||||
{person.waist_size && `${person.waist_size}`}
|
||||
{person.waist_size ? '-' : ''}
|
||||
{person.hip_size && `${person.hip_size}`}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(person.hair_color || person.adult_specifics?.hair_color) && (
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
|
||||
<Palette size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Hair Color</p>
|
||||
<p className="font-bold text-zinc-700">{person.adult_specifics?.hair_color || person.hair_color}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(person.eye_color || person.adult_specifics?.eye_color) && (
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
|
||||
<Eye size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Eye Color</p>
|
||||
<p className="font-bold text-zinc-700">{person.adult_specifics?.eye_color || person.eye_color}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{person.adult_specifics?.tattoos && (
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
|
||||
<Palette size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Tattoos</p>
|
||||
<p className="font-bold text-zinc-700">{person.adult_specifics.tattoos}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{person.adult_specifics?.piercings && (
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
|
||||
<Palette size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Piercings</p>
|
||||
<p className="font-bold text-zinc-700">{person.adult_specifics.piercings}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Bio & Roles */}
|
||||
<div className="lg:col-span-2 space-y-12">
|
||||
<section>
|
||||
<h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
|
||||
Biography
|
||||
</h2>
|
||||
<p className="text-zinc-600 leading-relaxed text-lg">
|
||||
{person.bio || `${person.name} is a talented ${person.role} known for their work in various media productions. They have brought numerous characters to life with their unique performances.`}
|
||||
</p>
|
||||
</section>
|
||||
{person.bio && (
|
||||
<section>
|
||||
<h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
|
||||
Biography
|
||||
</h2>
|
||||
<p className="text-zinc-600 leading-relaxed text-lg">
|
||||
{person.bio}
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
|
||||
<User className="text-[#6d28d9]" />
|
||||
Characters
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{relatedMedia.map(media => {
|
||||
const character = media.staff?.find(s => s.id === person.id);
|
||||
if (!character) return null;
|
||||
return (
|
||||
{person.filmography && person.filmography.length > 0 && (
|
||||
<section>
|
||||
<h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
|
||||
<User className="text-[#6d28d9]" />
|
||||
Characters
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{person.filmography.map(item => (
|
||||
<div
|
||||
key={`${media.id}-char`}
|
||||
key={`${item.id}-char`}
|
||||
className="flex items-center gap-4 p-4 rounded-2xl bg-zinc-50 border border-zinc-100"
|
||||
>
|
||||
<div className="w-20 h-20 rounded-xl overflow-hidden shrink-0 shadow-sm border-2 border-white">
|
||||
<img
|
||||
src={character.characterImage}
|
||||
alt={character.characterName}
|
||||
src={item.poster || person.photo}
|
||||
alt={item.title}
|
||||
className="w-full h-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Character</p>
|
||||
<h4 className="font-black text-zinc-900 truncate">{character.characterName}</h4>
|
||||
<h4 className="font-black text-zinc-900 truncate">{item.characterName || item.role}</h4>
|
||||
<button
|
||||
onClick={() => onMediaClick(media.id)}
|
||||
onClick={() => handleMediaClick(item.id.toString())}
|
||||
className="text-xs font-bold text-[#6d28d9] hover:underline mt-1 text-left"
|
||||
>
|
||||
in {media.title}
|
||||
in {item.title}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
|
||||
<Film className="text-[#6d28d9]" />
|
||||
Filmography
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{relatedMedia.map(media => (
|
||||
<div
|
||||
key={media.id}
|
||||
onClick={() => onMediaClick(media.id)}
|
||||
className="group flex items-center gap-4 p-4 rounded-2xl bg-white border border-zinc-100 hover:border-[#6d28d9]/30 hover:shadow-lg transition-all cursor-pointer"
|
||||
>
|
||||
<div className="w-16 h-20 rounded-lg overflow-hidden shrink-0 shadow-sm">
|
||||
<img
|
||||
src={media.poster}
|
||||
alt={media.title}
|
||||
className="w-full h-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h4 className="font-black text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">
|
||||
{media.title}
|
||||
</h4>
|
||||
<p className="text-xs font-bold text-zinc-400 uppercase tracking-wider mb-1">
|
||||
{media.year}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="text-[10px] font-bold py-0 h-5 border-zinc-200">
|
||||
{person.role}
|
||||
</Badge>
|
||||
{person.filmography && person.filmography.length > 0 && (
|
||||
<section>
|
||||
<h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
|
||||
<Film className="text-[#6d28d9]" />
|
||||
Filmography
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{person.filmography.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => handleMediaClick(item.id.toString())}
|
||||
className="group flex items-center gap-4 p-4 rounded-2xl bg-white border border-zinc-100 hover:border-[#6d28d9]/30 hover:shadow-lg transition-all cursor-pointer"
|
||||
>
|
||||
<div className="w-16 h-20 rounded-lg overflow-hidden shrink-0 shadow-sm">
|
||||
<img
|
||||
src={item.poster || person.photo}
|
||||
alt={item.title}
|
||||
className="w-full h-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h4 className="font-black text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-xs font-bold text-zinc-400 uppercase tracking-wider mb-1">
|
||||
{item.year || 'Unknown'}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="text-[10px] font-bold py-0 h-5 border-zinc-200">
|
||||
{item.role}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+265
-31
@@ -1,36 +1,159 @@
|
||||
import { Staff } from '@/types';
|
||||
import { Staff, MediaCategory } from '@/types';
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import { Search, ArrowUpDown, User, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Search, ArrowUpDown, User, ChevronLeft, ChevronRight, X, Filter } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { fetchAllCast } from '@/api';
|
||||
|
||||
interface CastViewProps {
|
||||
staffList: Staff[];
|
||||
onPersonClick: (person: Staff) => void;
|
||||
enabledCategories: MediaCategory[];
|
||||
}
|
||||
|
||||
export default function CastView({ staffList, onPersonClick }: CastViewProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [sortBy, setSortBy] = useState<'name' | 'role'>('name');
|
||||
export default function CastView({ onPersonClick, enabledCategories }: CastViewProps) {
|
||||
const navigate = useNavigate();
|
||||
const [staffList, setStaffList] = useState<Staff[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState(() => {
|
||||
return localStorage.getItem('castSearchQuery') || '';
|
||||
});
|
||||
const [sortBy, setSortBy] = useState<'name' | 'role' | 'birthDate' | 'height'>(() => {
|
||||
return (localStorage.getItem('castSortBy') as 'name' | 'role' | 'birthDate' | 'height') || 'name';
|
||||
});
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>(() => {
|
||||
return (localStorage.getItem('castSortOrder') as 'asc' | 'desc') || 'asc';
|
||||
});
|
||||
const [filterOccupation, setFilterOccupation] = useState<string>(() => {
|
||||
return localStorage.getItem('castFilterOccupation') || '';
|
||||
});
|
||||
const [filterMediaType, setFilterMediaType] = useState<string>(() => {
|
||||
return localStorage.getItem('castFilterMediaType') || '';
|
||||
});
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(12);
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
// Persist filters and sorts
|
||||
useEffect(() => {
|
||||
localStorage.setItem('castSearchQuery', searchQuery);
|
||||
}, [searchQuery]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('castSortBy', sortBy);
|
||||
}, [sortBy]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('castSortOrder', sortOrder);
|
||||
}, [sortOrder]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('castFilterOccupation', filterOccupation);
|
||||
}, [filterOccupation]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('castFilterMediaType', filterMediaType);
|
||||
}, [filterMediaType]);
|
||||
|
||||
const handleResetFilters = () => {
|
||||
setSearchQuery('');
|
||||
setSortBy('name');
|
||||
setSortOrder('asc');
|
||||
setFilterOccupation('');
|
||||
setFilterMediaType('');
|
||||
};
|
||||
|
||||
const hasActiveFilters = searchQuery || filterOccupation || filterMediaType || sortBy !== 'name' || sortOrder !== 'asc';
|
||||
|
||||
useEffect(() => {
|
||||
const loadCast = async () => {
|
||||
try {
|
||||
const cast = await fetchAllCast();
|
||||
setStaffList(cast);
|
||||
} catch (error) {
|
||||
console.error('Failed to load cast:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
loadCast();
|
||||
}, []);
|
||||
|
||||
const filteredStaff = useMemo(() => {
|
||||
let list = staffList.filter(s =>
|
||||
s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
s.role.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
s.mediaTitle?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
let list = staffList.filter(s => {
|
||||
// Hide actors without linked media
|
||||
if (!s.filmography || s.filmography.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Filter by enabled categories based on media_types
|
||||
if (s.media_types && s.media_types.length > 0) {
|
||||
const hasEnabledMediaType = s.media_types.some(type => {
|
||||
const category = type.charAt(0).toUpperCase() + type.slice(1);
|
||||
return enabledCategories.includes(category as MediaCategory);
|
||||
});
|
||||
if (!hasEnabledMediaType) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter by occupation
|
||||
if (filterOccupation && !s.occupations?.includes(filterOccupation)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Filter by media type
|
||||
if (filterMediaType && !s.media_types?.includes(filterMediaType)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
s.role.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
s.mediaTitle?.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
});
|
||||
|
||||
return list.sort((a, b) => a[sortBy].localeCompare(b[sortBy]));
|
||||
}, [staffList, searchQuery, sortBy]);
|
||||
// Sort
|
||||
list.sort((a, b) => {
|
||||
let comparison = 0;
|
||||
|
||||
if (sortBy === 'name' || sortBy === 'role') {
|
||||
comparison = a[sortBy].localeCompare(b[sortBy]);
|
||||
} else if (sortBy === 'birthDate') {
|
||||
const dateA = a.birthDate ? new Date(a.birthDate).getTime() : 0;
|
||||
const dateB = b.birthDate ? new Date(b.birthDate).getTime() : 0;
|
||||
comparison = dateA - dateB;
|
||||
} else if (sortBy === 'height') {
|
||||
const heightA = a.height || 0;
|
||||
const heightB = b.height || 0;
|
||||
comparison = heightA - heightB;
|
||||
}
|
||||
|
||||
return sortOrder === 'desc' ? -comparison : comparison;
|
||||
});
|
||||
|
||||
return list;
|
||||
}, [staffList, searchQuery, sortBy, sortOrder, filterOccupation, filterMediaType, enabledCategories]);
|
||||
|
||||
// Get unique occupations and media types for filters
|
||||
const uniqueOccupations = useMemo(() => {
|
||||
const occupations = new Set<string>();
|
||||
staffList.forEach(s => s.occupations?.forEach(o => occupations.add(o)));
|
||||
return Array.from(occupations).sort();
|
||||
}, [staffList]);
|
||||
|
||||
const uniqueMediaTypes = useMemo(() => {
|
||||
const mediaTypes = new Set<string>();
|
||||
staffList.forEach(s => s.media_types?.forEach(m => mediaTypes.add(m)));
|
||||
return Array.from(mediaTypes).sort();
|
||||
}, [staffList]);
|
||||
|
||||
// Reset to first page when filters or sorting change
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchQuery, sortBy, itemsPerPage]);
|
||||
}, [searchQuery, sortBy, sortOrder, filterOccupation, filterMediaType, itemsPerPage]);
|
||||
|
||||
const totalPages = Math.ceil(filteredStaff.length / itemsPerPage);
|
||||
|
||||
@@ -67,18 +190,127 @@ export default function CastView({ staffList, onPersonClick }: CastViewProps) {
|
||||
className="pl-10 w-full md:w-[300px] bg-zinc-100 border-none rounded-full h-11"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant={showFilters ? 'default' : 'outline'}
|
||||
size="icon"
|
||||
className={`rounded-full h-11 w-11 ${showFilters ? 'bg-[#6d28d9] text-white border-[#6d28d9]' : 'border-zinc-200'}`}
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
>
|
||||
<Filter size={20} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="rounded-full h-11 w-11 border-zinc-200"
|
||||
onClick={() => setSortBy(prev => prev === 'name' ? 'role' : 'name')}
|
||||
onClick={() => setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc')}
|
||||
>
|
||||
<ArrowUpDown size={20} />
|
||||
</Button>
|
||||
{hasActiveFilters && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full h-11 w-11 text-zinc-400 hover:text-zinc-900"
|
||||
onClick={handleResetFilters}
|
||||
title="Reset filters"
|
||||
>
|
||||
<X size={20} />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredStaff.length === 0 ? (
|
||||
{showFilters && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="bg-zinc-50 rounded-2xl p-6 mb-6"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label className="text-sm font-bold text-zinc-700 mb-2 block">Sort By</label>
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as any)}
|
||||
className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
|
||||
>
|
||||
<option value="name">Name</option>
|
||||
<option value="role">Role</option>
|
||||
<option value="birthDate">Birth Date</option>
|
||||
<option value="height">Height</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-bold text-zinc-700 mb-2 block">Occupation</label>
|
||||
<select
|
||||
value={filterOccupation}
|
||||
onChange={(e) => setFilterOccupation(e.target.value)}
|
||||
className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
|
||||
>
|
||||
<option value="">All Occupations</option>
|
||||
{uniqueOccupations.map(occ => (
|
||||
<option key={occ} value={occ}>{occ}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-bold text-zinc-700 mb-2 block">Media Type</label>
|
||||
<select
|
||||
value={filterMediaType}
|
||||
onChange={(e) => setFilterMediaType(e.target.value)}
|
||||
className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
|
||||
>
|
||||
<option value="">All Media Types</option>
|
||||
{uniqueMediaTypes.map(type => (
|
||||
<option key={type} value={type}>{type}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex items-center gap-2">
|
||||
{searchQuery && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
Search: {searchQuery}
|
||||
<button onClick={() => setSearchQuery('')} className="hover:text-zinc-900">
|
||||
<X size={12} />
|
||||
</button>
|
||||
</Badge>
|
||||
)}
|
||||
{filterOccupation && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
Occupation: {filterOccupation}
|
||||
<button onClick={() => setFilterOccupation('')} className="hover:text-zinc-900">
|
||||
<X size={12} />
|
||||
</button>
|
||||
</Badge>
|
||||
)}
|
||||
{filterMediaType && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
Media Type: {filterMediaType}
|
||||
<button onClick={() => setFilterMediaType('')} className="hover:text-zinc-900">
|
||||
<X size={12} />
|
||||
</button>
|
||||
</Badge>
|
||||
)}
|
||||
{(sortBy !== 'name' || sortOrder !== 'asc') && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
Sort: {sortBy} ({sortOrder})
|
||||
<button onClick={() => { setSortBy('name'); setSortOrder('asc'); }} className="hover:text-zinc-900">
|
||||
<X size={12} />
|
||||
</button>
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-zinc-400">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#6d28d9] mb-4" />
|
||||
<p className="text-lg font-bold">Loading cast...</p>
|
||||
</div>
|
||||
) : filteredStaff.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-zinc-400">
|
||||
<User size={48} className="mb-4 opacity-20" />
|
||||
<p className="text-lg font-bold">No cast members found</p>
|
||||
@@ -88,7 +320,7 @@ export default function CastView({ staffList, onPersonClick }: CastViewProps) {
|
||||
<AnimatePresence mode="popLayout">
|
||||
{paginatedStaff.map((person) => (
|
||||
<motion.div
|
||||
key={`${person.id}-${person.mediaId}`}
|
||||
key={person.id}
|
||||
layout
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
@@ -115,21 +347,23 @@ export default function CastView({ staffList, onPersonClick }: CastViewProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-50 rounded-xl p-3 flex items-center gap-3">
|
||||
<div className="w-10 h-12 rounded-lg overflow-hidden shrink-0 bg-white">
|
||||
<img
|
||||
src={person.characterImage}
|
||||
alt={person.characterName}
|
||||
className="w-full h-full object-contain"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
{person.filmography && person.filmography.length > 0 && (
|
||||
<div className="bg-zinc-50 rounded-xl p-3 flex items-center gap-3">
|
||||
<div className="w-10 h-12 rounded-lg overflow-hidden shrink-0 bg-white">
|
||||
<img
|
||||
src={person.filmography[0].poster || person.photo}
|
||||
alt={person.filmography[0].title}
|
||||
className="w-full h-full object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest leading-none mb-1">Latest Role</p>
|
||||
<p className="text-xs font-bold text-zinc-700 truncate">{person.filmography[0].title}</p>
|
||||
<p className="text-[10px] text-[#6d28d9] font-bold truncate mt-1">{person.filmography[0].role}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest leading-none mb-1">Character</p>
|
||||
<p className="text-xs font-bold text-zinc-700 truncate">{person.characterName}</p>
|
||||
<p className="text-[10px] text-[#6d28d9] font-bold truncate mt-1">in {person.mediaTitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Media, Staff } from '@/types';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Play,
|
||||
Bookmark,
|
||||
@@ -17,11 +18,11 @@ import { motion } from 'motion/react';
|
||||
|
||||
interface DetailViewProps {
|
||||
media: Media;
|
||||
onBack: () => void;
|
||||
onPersonClick: (person: Staff) => void;
|
||||
}
|
||||
|
||||
export default function DetailView({ media, onBack, onPersonClick }: DetailViewProps) {
|
||||
export default function DetailView({ media, onPersonClick }: DetailViewProps) {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-50">
|
||||
{/* Banner */}
|
||||
@@ -35,7 +36,7 @@ export default function DetailView({ media, onBack, onPersonClick }: DetailViewP
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-zinc-50 via-zinc-50/40 to-transparent" />
|
||||
|
||||
<button
|
||||
onClick={onBack}
|
||||
onClick={() => navigate(-1)}
|
||||
className="absolute top-24 left-6 p-2 bg-black/20 hover:bg-black/40 text-white rounded-full transition-colors z-10"
|
||||
>
|
||||
<ChevronLeft size={24} />
|
||||
|
||||
+18
-22
@@ -1,14 +1,11 @@
|
||||
import { Search, User, X, Plus, Download } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import React, { useState } from 'react';
|
||||
import { Link, NavLink } from 'react-router-dom';
|
||||
import { MediaCategory } from '@/types';
|
||||
import LibrarySettings from './LibrarySettings';
|
||||
|
||||
interface HeaderProps {
|
||||
onBrowse: () => void;
|
||||
onCast: () => void;
|
||||
onAddMedia: () => void;
|
||||
onImporter: () => void;
|
||||
onSearch: (query: string) => void;
|
||||
activeCategory: MediaCategory;
|
||||
onCategoryChange: (category: MediaCategory) => void;
|
||||
@@ -18,10 +15,6 @@ interface HeaderProps {
|
||||
}
|
||||
|
||||
export default function Header({
|
||||
onBrowse,
|
||||
onCast,
|
||||
onAddMedia,
|
||||
onImporter,
|
||||
onSearch,
|
||||
activeCategory,
|
||||
onCategoryChange,
|
||||
@@ -54,15 +47,15 @@ export default function Header({
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-8">
|
||||
<div
|
||||
className="text-2xl font-black text-white cursor-pointer flex items-center gap-1"
|
||||
onClick={onBrowse}
|
||||
<Link
|
||||
to="/"
|
||||
className="text-2xl font-black text-white flex items-center gap-1"
|
||||
>
|
||||
<div className="w-6 h-6 bg-white rounded-full flex items-center justify-center">
|
||||
<div className="w-3 h-3 bg-[#6d28d9] rounded-full" />
|
||||
</div>
|
||||
kyoo
|
||||
</div>
|
||||
</Link>
|
||||
<nav className="hidden md:flex items-center gap-6">
|
||||
{enabledCategories.map(cat => (
|
||||
<button
|
||||
@@ -77,12 +70,15 @@ export default function Header({
|
||||
</button>
|
||||
))}
|
||||
<div className="w-px h-4 bg-white/20 mx-2" />
|
||||
<button
|
||||
onClick={onCast}
|
||||
className="text-sm font-bold text-white/60 hover:text-white transition-colors uppercase tracking-wider"
|
||||
<NavLink
|
||||
to="/cast"
|
||||
className={({ isActive }) => cn(
|
||||
"text-sm font-bold transition-colors uppercase tracking-wider",
|
||||
isActive ? "text-white" : "text-white/60 hover:text-white"
|
||||
)}
|
||||
>
|
||||
CAST
|
||||
</button>
|
||||
</NavLink>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
@@ -105,18 +101,18 @@ export default function Header({
|
||||
>
|
||||
{isSearchOpen ? <X size={20} /> : <Search size={20} />}
|
||||
</button>
|
||||
<button
|
||||
onClick={onAddMedia}
|
||||
<Link
|
||||
to="/add"
|
||||
className="p-2 text-white/90 hover:text-white transition-colors"
|
||||
>
|
||||
<Plus size={20} />
|
||||
</button>
|
||||
<button
|
||||
onClick={onImporter}
|
||||
</Link>
|
||||
<Link
|
||||
to="/import"
|
||||
className="p-2 text-white/90 hover:text-white transition-colors"
|
||||
>
|
||||
<Download size={20} />
|
||||
</button>
|
||||
</Link>
|
||||
<LibrarySettings
|
||||
enabledCategories={enabledCategories}
|
||||
onToggleCategory={onToggleCategory}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeft, Download, Settings, RefreshCw, CheckCircle, XCircle, AlertCircle, Users, Film, Loader2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
@@ -6,7 +7,8 @@ import { importFromXBVR, XBVRConfig, ImportProgress } from '@/lib/xbvrImporter';
|
||||
import { importFromStashAPP, StashAPPConfig, updateActorsFromStashAPP } from '@/lib/stashappImporter';
|
||||
import { importFromPlaynite, PlayniteConfig } from '@/lib/playniteImporter';
|
||||
|
||||
export default function ImporterView({ onBack }: { onBack: () => void }) {
|
||||
export default function ImporterView() {
|
||||
const navigate = useNavigate();
|
||||
const [xbvrConfig, setXbvrConfig] = useState<XBVRConfig>({ url: import.meta.env.VITE_XBVR_URL || '' });
|
||||
const [stashappConfig, setStashappConfig] = useState<StashAPPConfig>({
|
||||
url: import.meta.env.VITE_STASHAPP_URL || '',
|
||||
@@ -159,7 +161,7 @@ export default function ImporterView({ onBack }: { onBack: () => void }) {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onBack}
|
||||
onClick={() => navigate('/')}
|
||||
className="text-zinc-600 hover:text-[#6d28d9]"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
|
||||
Reference in New Issue
Block a user