diff --git a/src/components/AddMediaView.tsx b/src/components/AddMediaView.tsx index c85ad2d..0494160 100644 --- a/src/components/AddMediaView.tsx +++ b/src/components/AddMediaView.tsx @@ -38,6 +38,29 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC const [isSubmitting, setIsSubmitting] = useState(false); const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle'); const [errorMessage, setErrorMessage] = useState(''); + const [staff, setStaff] = useState>([]); + + const addStaffMember = () => { + const nameInput = document.getElementById('staffName') as HTMLInputElement; + const roleInput = document.getElementById('staffRole') as HTMLInputElement; + const characterInput = document.getElementById('staffCharacter') as HTMLInputElement; + const photoInput = document.getElementById('staffPhoto') as HTMLInputElement; + + if (nameInput?.value && roleInput?.value) { + setStaff(prev => [...prev, { + name: nameInput.value, + role: roleInput.value, + characterName: characterInput?.value || undefined, + photo: photoInput?.value || undefined + }]); + + // Clear the form + if (nameInput) nameInput.value = ''; + if (roleInput) roleInput.value = ''; + if (characterInput) characterInput.value = ''; + if (photoInput) photoInput.value = ''; + } + }; // Update category, default aspect ratio, and default type when activeCategory changes useEffect(() => { @@ -108,7 +131,13 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC releaseDate: newMedia.releaseDate || null, genres: newMedia.genres ? newMedia.genres.split(',').map(g => g.trim()) : [], tags: newMedia.tags ? newMedia.tags.split(',').map(t => t.trim()) : [], - studios: newMedia.studios ? newMedia.studios.split(',').map(s => s.trim()) : [] + studios: newMedia.studios ? newMedia.studios.split(',').map(s => s.trim()) : [], + staff: staff.length > 0 ? staff.map(s => ({ + name: s.name, + role: s.role, + characterName: s.characterName || null, + photo: s.photo || null + })) : undefined }; try { @@ -138,6 +167,7 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC tags: '', studios: '' }); + setStaff([]); } } catch (error) { setSubmitStatus('error'); @@ -409,6 +439,112 @@ export default function AddMediaView({ activeCategory, enabledCategories, onAddC className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]" /> + + {/* Cast/Staff Section */} + {(newMedia.category === 'Anime' || newMedia.category === 'Movies' || newMedia.category === 'TV Series' || newMedia.category === 'Adult') && ( +
+
+ +
+ + {/* Staff List */} + {staff.length > 0 && ( +
+ {staff.map((member, index) => ( +
+ {member.photo && ( + {member.name} + )} +
+

{member.name}

+

{member.role}{member.characterName ? ` as ${member.characterName}` : ''}

+
+ +
+ ))} +
+ )} + + {/* Add Staff Form */} +
+
+ + { + if (e.key === 'Enter') { + e.preventDefault(); + const input = e.target as HTMLInputElement; + const roleInput = document.getElementById('staffRole') as HTMLInputElement; + if (input.value && roleInput?.value) { + addStaffMember(); + } + } + }} + /> +
+
+
+ + { + if (e.key === 'Enter') { + e.preventDefault(); + const input = e.target as HTMLInputElement; + const nameInput = document.getElementById('staffName') as HTMLInputElement; + if (input.value && nameInput?.value) { + addStaffMember(); + } + } + }} + /> +
+
+ + +
+
+
+ + +
+ +
+
+ )}