Ceratic/mystuff_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add routing, cast API conversion, and filters

Browse Source 
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
2026-04-10 13:46:52 +02:00
parent a610ce304e
commit f5c3e96823
12 changed files with 830 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
package-lock.json generated
View File

@@ -21,6 +21,7 @@
"motion": "^12.38.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.14.0",
"shadcn": "^4.2.0",
"tailwind-merge": "^3.5.0",
"tw-animate-css": "^1.4.0",
@@ -5846,6 +5847,57 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.0.tgz",
"integrity": "sha512-m/xR9N4LQLmAS0ZhkY2nkPA1N7gQ5TUVa5n8TgANuDTARbn1gt+zLPXEm7W0XDTbrQ2AJSJKhoa6yx1D8BcpxQ==",
"license": "MIT",
"dependencies": {
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
},
"node_modules/react-router-dom": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.0.tgz",
"integrity": "sha512-2G3ajSVSZMEtmTjIklRWlNvo8wICEpLihfD/0YMDxbWK2UyP5EGfnoIn9AIQGnF3G/FX0MRbHXdFcD+rL1ZreQ==",
"license": "MIT",
"dependencies": {
"react-router": "7.14.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
},
"node_modules/react-router/node_modules/cookie": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
"license": "MIT",
"engines": {
"node": ">=18"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/express"
}
},
"node_modules/recast": {
"version": "0.23.11",
"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
@@ -6146,6 +6198,12 @@
"node": ">= 0.8.0"
}
},
"node_modules/set-cookie-parser": {
"version": "2.7.2",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
"license": "MIT"
},
"node_modules/setprototypeof": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",

1
package.json
View File

@@ -24,6 +24,7 @@
"motion": "^12.38.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.14.0",
"shadcn": "^4.2.0",
"tailwind-merge": "^3.5.0",
"tw-animate-css": "^1.4.0",

213
src/App.tsx
View File

@@ -5,6 +5,7 @@
import { useState, useMemo, useEffect } from 'react';
import { LayoutGroup } from 'motion/react';
import { BrowserRouter, Routes, Route, useNavigate, useSearchParams, useParams, useLocation } from 'react-router-dom';
import Header from './components/Header';
import BrowseView from './components/BrowseView';
import DetailView from './components/DetailView';
@@ -14,19 +15,23 @@ import AddMediaView from './components/AddMediaView';
import ImporterView from './components/ImporterView';
import { MOCK_MEDIA, DETAIL_MEDIA } from './data';
import { Media, Staff, MediaCategory } from './types';
import { fetchAllMedia, fetchMediaById } from './api';
import { fetchAllMedia, fetchMediaById, fetchCastById, convertApiCastToStaff } from './api';
export default function App() {
const [currentView, setCurrentView] = useState<'browse' | 'detail' | 'cast' | 'castDetail' | 'add' | 'import'>('browse');
const [activeCategory, setActiveCategory] = useState<MediaCategory>('Anime');
function AppContent() {
const navigate = useNavigate();
const location = useLocation();
const [searchParams, setSearchParams] = useSearchParams();
const [activeCategory, setActiveCategory] = useState<MediaCategory>(
(searchParams.get('category') as MediaCategory) || 'Anime'
);
const [selectedMedia, setSelectedMedia] = useState<Media | null>(null);
const [selectedPerson, setSelectedPerson] = useState<Staff | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const [searchQuery, setSearchQuery] = useState(searchParams.get('search') || '');
const [enabledCategories, setEnabledCategories] = useState<MediaCategory[]>(['Anime', 'Movies', 'TV Series', 'Music', 'Books', 'Consoles', 'Games', 'Adult']);
const [customMedia, setCustomMedia] = useState<Media[]>([]);
const [adultMedia, setAdultMedia] = useState<Media[]>([]);
// Load media from API on component mount
// Load media from API on component mount (only when not on cast routes)
const [apiMedia, setApiMedia] = useState<Media[]>([]);
useEffect(() => {
@@ -38,8 +43,12 @@ export default function App() {
console.error('Failed to load media from API:', error);
}
};
loadMediaFromApi();
}, []);
// Only load media if not on cast routes
if (!location.pathname.startsWith('/cast')) {
loadMediaFromApi();
}
}, [location.pathname]);
const toggleCategory = (category: MediaCategory) => {
setEnabledCategories(prev => {
@@ -59,17 +68,18 @@ export default function App() {
const handleCategoryChange = (category: MediaCategory) => {
setActiveCategory(category);
setCurrentView('browse');
setSearchParams({ category });
navigate('/');
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const handleAddMediaView = () => {
setCurrentView('add');
navigate('/add');
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const handleImporterView = () => {
setCurrentView('import');
navigate('/import');
window.scrollTo({ top: 0, behavior: 'smooth' });
};
@@ -168,17 +178,17 @@ export default function App() {
// For non-adult media, use the original media
setSelectedMedia(media);
}
setCurrentView('detail');
navigate(`/media/${media.id}`);
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const handleBack = () => {
setCurrentView('browse');
navigate('/');
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const handleCastClick = () => {
setCurrentView('cast');
navigate('/cast');
window.scrollTo({ top: 0, behavior: 'smooth' });
};
@@ -192,76 +202,73 @@ export default function App() {
occupations: ['Voice Actor', 'Singer', 'Narrator']
};
setSelectedPerson(enrichedPerson);
setCurrentView('castDetail');
navigate(`/cast/${person.id}`);
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const handleSearch = (query: string) => {
setSearchQuery(query);
if (currentView !== 'browse' && currentView !== 'cast') {
setCurrentView('browse');
const params = new URLSearchParams(searchParams);
if (query) {
params.set('search', query);
} else {
params.delete('search');
}
setSearchParams(params);
navigate('/');
};
return (
<div className="min-h-screen bg-white font-sans selection:bg-[#6d28d9]/20 selection:text-[#6d28d9]">
<Header
onBrowse={handleBack}
onCast={handleCastClick}
onAddMedia={handleAddMediaView}
onImporter={handleImporterView}
onSearch={handleSearch}
activeCategory={activeCategory}
onCategoryChange={handleCategoryChange}
enabledCategories={enabledCategories}
onToggleCategory={toggleCategory}
transparent={currentView === 'detail' || currentView === 'castDetail'}
transparent={location.pathname.startsWith('/media/') || location.pathname.startsWith('/cast/')}
/>
<main>
<LayoutGroup>
{currentView === 'browse' ? (
<BrowseView
mediaList={filteredMedia}
onMediaClick={handleMediaClick}
activeCategory={activeCategory}
/>
) : currentView === 'cast' ? (
<CastView
staffList={allStaff}
onPersonClick={handlePersonClick}
/>
) : currentView === 'castDetail' ? (
selectedPerson && (
<CastDetailView
person={selectedPerson}
onBack={handleCastClick}
onMediaClick={(id) => {
const media = allMedia.find(m => m.id === id);
if (media) handleMediaClick(media);
}}
relatedMedia={allMedia.filter(m => m.staff?.some(s => s.id === selectedPerson.id))}
<Routes>
<Route path="/" element={
<BrowseView
mediaList={filteredMedia}
onMediaClick={handleMediaClick}
activeCategory={activeCategory}
/>
)
) : currentView === 'add' ? (
<AddMediaView
activeCategory={activeCategory}
onBack={handleBack}
onAddComplete={handleAddMedia}
/>
) : currentView === 'import' ? (
<ImporterView
onBack={handleBack}
/>
) : (
selectedMedia && (
<DetailView
media={selectedMedia}
onBack={handleBack}
} />
<Route path="/media/:id" element={
<MediaDetailRoute
selectedMedia={selectedMedia}
setSelectedMedia={setSelectedMedia}
allMedia={allMedia}
onPersonClick={handlePersonClick}
/>
)
)}
} />
<Route path="/cast" element={
<CastView
onPersonClick={handlePersonClick}
enabledCategories={enabledCategories}
/>
} />
<Route path="/cast/:id" element={
<CastDetailRoute
selectedPerson={selectedPerson}
setSelectedPerson={setSelectedPerson}
/>
} />
<Route path="/add" element={
<AddMediaView
activeCategory={activeCategory}
onAddComplete={handleAddMedia}
/>
} />
<Route path="/import" element={
<ImporterView />
} />
</Routes>
</LayoutGroup>
</main>
@@ -285,3 +292,87 @@ export default function App() {
</div>
);
}
// Helper component for media detail route
function MediaDetailRoute({ selectedMedia, setSelectedMedia, allMedia, onPersonClick }: any) {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
useEffect(() => {
const loadMedia = async () => {
if (id) {
// First check if media is in allMedia
const media = allMedia.find(m => m.id === id);
if (media) {
setSelectedMedia(media);
} else {
// If not found, fetch from API
try {
const fetchedMedia = await fetchMediaById(id);
if (fetchedMedia) {
setSelectedMedia(fetchedMedia);
} else {
navigate('/');
}
} catch (error) {
console.error('Failed to fetch media:', error);
navigate('/');
}
}
}
};
loadMedia();
}, [id, allMedia]);
if (!selectedMedia) return null;
return (
<DetailView
media={selectedMedia}
onPersonClick={onPersonClick}
/>
);
}
// Helper component for cast detail route
function CastDetailRoute({ selectedPerson, setSelectedPerson }: any) {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
useEffect(() => {
const loadCast = async () => {
if (id) {
try {
const castData = await fetchCastById(id);
if (castData) {
const person = convertApiCastToStaff(castData);
setSelectedPerson(person);
} else {
navigate('/cast');
}
} catch (error) {
console.error('Failed to load cast:', error);
navigate('/cast');
}
}
};
loadCast();
}, [id]);
if (!selectedPerson) return null;
return (
<CastDetailView
person={selectedPerson}
relatedMedia={[]}
/>
);
}
export default function App() {
return (
<BrowserRouter>
<AppContent />
</BrowserRouter>
);
}

71
src/api.ts
View File

@@ -111,6 +111,7 @@ export interface CreateStaffInput {
export interface ApiCastItem {
id: number;
name: string;
cleanname?: string;
photo: string | null;
bio: string | null;
birthDate: string | null;
@@ -119,6 +120,33 @@ export interface ApiCastItem {
updatedAt: string;
occupations?: string[];
filmography?: ApiCastMediaItem[];
media_types?: string[];
bust_size?: number | null;
cup_size?: string | null;
waist_size?: number | null;
hip_size?: number | null;
height?: number | null;
weight?: number | null;
hair_color?: string | null;
eye_color?: string | null;
ethnicity?: string | null;
adult_specifics?: {
id: number;
cast_id: number;
bust_size?: number | null;
cup_size?: string | null;
waist_size?: number | null;
hip_size?: number | null;
height?: number | null;
weight?: number | null;
hair_color?: string | null;
eye_color?: string | null;
ethnicity?: string | null;
tattoos?: string | null;
piercings?: string | null;
measurements?: string | null;
shoe_size?: number | null;
};
}
export interface ApiCastMediaItem {
@@ -129,7 +157,7 @@ export interface ApiCastMediaItem {
category: string | null;
type: string;
role: string;
characterName: string | null;
characterName?: string | null;
}
export interface CreateCastInput {
@@ -144,6 +172,43 @@ export interface CreateCastInput {
export interface UpdateCastInput extends Partial<CreateCastInput> {}
export function convertApiCastToStaff(apiItem: ApiCastItem): Staff {
return {
id: apiItem.id.toString(),
name: apiItem.name,
cleanname: apiItem.cleanname,
role: apiItem.occupations?.[0] || 'Actor',
photo: normalizeUrl(apiItem.photo) || `https://picsum.photos/seed/cast-${apiItem.id}/200/200`,
bio: apiItem.bio || undefined,
birthDate: apiItem.birthDate || undefined,
birthPlace: apiItem.birthPlace || undefined,
occupations: apiItem.occupations || ['Actor'],
createdAt: apiItem.createdAt,
updatedAt: apiItem.updatedAt,
bust_size: apiItem.bust_size,
cup_size: apiItem.cup_size,
waist_size: apiItem.waist_size,
hip_size: apiItem.hip_size,
height: apiItem.height,
weight: apiItem.weight,
hair_color: apiItem.hair_color,
eye_color: apiItem.eye_color,
ethnicity: apiItem.ethnicity,
filmography: apiItem.filmography?.map(item => ({
id: item.id,
title: item.title,
year: item.year,
poster: normalizeUrl(item.poster) || `https://picsum.photos/seed/${item.id}/400/600`,
category: item.category,
type: item.type,
role: item.role,
characterName: item.characterName
})),
media_types: apiItem.media_types,
adult_specifics: apiItem.adult_specifics
};
}
export function convertApiToMedia(apiItem: ApiMediaItem): Media {
// Convert staff from API to Media staff format
const staff: Staff[] = (apiItem.staff || []).map((staffMember) => ({
@@ -360,7 +425,7 @@ export async function deleteMedia(id: number | string): Promise<boolean> {
}
// Cast API Functions
export async function fetchAllCast(page: number = 1, limit: number = 100000): Promise<ApiCastItem[]> {
export async function fetchAllCast(page: number = 1, limit: number = 100000): Promise<Staff[]> {
try {
const response = await fetch(`${BASE_URL}/api/cast?page=${page}&limit=${limit}`);
if (!response.ok) {
@@ -369,7 +434,7 @@ export async function fetchAllCast(page: number = 1, limit: number = 100000): Pr
const data: ApiResponse<PaginatedResponse<ApiCastItem>> = await response.json();
if (data.success && data.data.items) {
return data.data.items;
return data.data.items.map(convertApiCastToStaff);
}
return [];
} catch (error) {

7
src/components/AddMediaView.tsx
View File

@@ -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} />

255
src/components/CastDetailView.tsx
View File

@@ -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>

296
src/components/CastView.tsx
View File

@@ -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;
}
return list.sort((a, b) => a[sortBy].localeCompare(b[sortBy]));
}, [staffList, searchQuery, sortBy]);
// 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());
});
// 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>

7
src/components/DetailView.tsx
View File

@@ -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} />

40
src/components/Header.tsx
View File

@@ -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}

6
src/components/ImporterView.tsx
View File

@@ -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} />

24
src/lib/stashappImporter.ts
View File

@@ -1,6 +1,7 @@
export interface StashAPPConfig {
url: string;
apiKey?: string;
blacklist?: ['/AI/', 'temp', 'backup'];
}
export interface ImportProgress {
@@ -127,6 +128,13 @@ export interface StashAPPPerformersResponse {
export type LogCallback = (message: string) => void;
export type ProgressCallback = (progress: Partial<ImportProgress>) => void;
function isPathBlacklisted(filePath: string, blacklist: string[]): boolean {
if (!blacklist || blacklist.length === 0) {
return false;
}
return blacklist.some(pattern => filePath.includes(pattern));
}
export async function updateActorsFromStashAPP(
config: StashAPPConfig,
logCallback: LogCallback,
@@ -457,7 +465,7 @@ export async function importFromStashAPP(
`,
variables: {
filter: {
per_page: 100,
per_page: 20000,
sort: "date",
direction: "DESC"
}
@@ -616,6 +624,20 @@ export async function importFromStashAPP(
for (let i = 0; i < scenes.length; i++) {
const scene = scenes[i];
// Check if scene is blacklisted
if (config.blacklist && config.blacklist.length > 0) {
const isBlacklisted = scene.files && scene.files.some(file =>
isPathBlacklisted(file.path, config.blacklist!)
);
if (isBlacklisted) {
logCallback(`⊘ Skipped blacklisted scene: ${scene.title}`);
progressCallback({
current: uniquePerformers.length + i + 1
});
continue;
}
}
// Check for duplicate
if (existingTitles.has(scene.title)) {
logCallback(`⊘ Skipped duplicate: ${scene.title}`);

48
src/types.ts
View File

@@ -40,14 +40,58 @@ export interface Episode {
export interface Staff {
id: string;
name: string;
cleanname?: string;
role: string;
photo: string;
characterName: string;
characterImage: string;
characterName?: string;
characterImage?: string;
mediaId?: string;
mediaTitle?: string;
bio?: string;
birthDate?: string;
birthPlace?: string;
occupations?: string[];
createdAt?: string;
updatedAt?: string;
bust_size?: number | null;
cup_size?: string | null;
waist_size?: number | null;
hip_size?: number | null;
height?: number | null;
weight?: number | null;
hair_color?: string | null;
eye_color?: string | null;
ethnicity?: string | null;
filmography?: CastMediaItem[];
media_types?: string[];
adult_specifics?: AdultSpecifics;
}
export interface CastMediaItem {
id: number;
title: string;
year: number;
poster: string | null;
category: string | null;
type: string;
role: string;
characterName?: string | null;
}
export interface AdultSpecifics {
id: number;
cast_id: number;
bust_size?: number | null;
cup_size?: string | null;
waist_size?: number | null;
hip_size?: number | null;
height?: number | null;
weight?: number | null;
hair_color?: string | null;
eye_color?: string | null;
ethnicity?: string | null;
tattoos?: string | null;
piercings?: string | null;
measurements?: string | null;
shoe_size?: number | null;
}