+
+
+ {movie.title} +
+
+
conductor.dispatch({ type: 'SELECT_MOVIE', payload: id })}
@@ -75,15 +99,15 @@ export function MovieDetailModal({
);
}
-// ==================== SUB-COMPONENTS (vollständig, typisiert) ====================
+// ==================== SUB-COMPONENTS ====================
function HeroSection({ movie }: { movie: Movie }) {
return (
-
+
+
+ {/* Persönliche Sektion: Bewertung + Notizen + Tags. Nur sichtbar, sobald der Film
+ tatsächlich in der Library liegt — vor dem Hinzufügen gibt es nichts zu speichern. */}
+ {movie.source === 'database' && (
+
+
+
+
+
+
{movie.trailerKey ? (
)}
-
-
);
}
@@ -127,9 +146,8 @@ function ActionButtons({
const [showListCreation, setShowListCreation] = useState(false);
return (
-
-
+
- {movie.title} -
-
-
- {/* Play Trailer */}
+
+
{movie.trailerKey ? (
)}
- {/* Add to Library */}
{isInLibrary ? (
)}
- {/* Share */}
- {/* Add to List */}
{
conductor.dispatch({ type: 'ADD_TO_LIST', payload: { listId, movie } });
- onShowToast('Zum Liste hinzugefügt', 'success');
+ onShowToast('Zur Liste hinzugefügt', 'success');
}}
onCreateNewList={() => setShowListCreation(true)}
/>
@@ -217,23 +232,272 @@ function ListMenu({
);
}
-// Placeholder-Sub-Components (ersetze später mit vollem Original-Code)
-function MetadataRow({ movie }: { movie: Movie }) { return
+
+ );
+}
+
+function MetadataGrid({ movie }: { movie: Movie }) {
+ const items: { label: string; value: string | null }[] = [
+ { label: 'Regie', value: movie.director || null },
+ { label: 'Genres', value: movie.genres?.join(', ') || null },
+ { label: 'Veröffentlichung', value: movie.releaseDate || null },
+ ];
+ const filtered = items.filter(i => i.value);
+ if (filtered.length === 0) return null;
+ return (
+
+ {filtered.map(i => (
+
+ );
+}
+
+function CastSection({ cast }: { cast?: CastMember[] }) {
+ if (!cast?.length) return null;
+ return (
+
+
+ );
+}
+
+function WatchProvidersSection({ watchProviders }: { watchProviders?: Movie['watchProviders'] }) {
+ const flat = watchProviders?.flatrate || [];
+ const rent = watchProviders?.rent || [];
+ const buy = watchProviders?.buy || [];
+ if (flat.length === 0 && rent.length === 0 && buy.length === 0) return null;
+
+ const renderRow = (label: string, items: WatchProvider[]) =>
+ items.length === 0 ? null : (
+
+
+ );
+}
+
function RecommendationsSection({ recommendations, onSelectMovie }: { recommendations?: Movie[]; onSelectMovie: (id: string) => void }) {
+ if (!recommendations?.length) return null;
return (
-
{movie.releaseDate} • {movie.runtime} min
; }
-function PlotSection({ movie }: { movie: Movie }) { return {movie.overview}
; }
-function MetadataGrid({ movie }: { movie: Movie }) { return {/* Genres, Rating etc. */}
; }
-function CastSection({ cast }: { cast?: CastMember[] }) { return {cast?.slice(0, 6).map(c =>
; }
-function WatchProvidersSection({ watchProviders }: any) { return {c.name}
)}Watch Providers (später ausbauen)
; }
+function MetadataRow({ movie }: { movie: Movie }) {
+ const year = movie.releaseDate?.slice(0, 4);
+ const parts: string[] = [];
+ if (year) parts.push(year);
+ if (movie.runtime) parts.push(`${movie.runtime} min`);
+ if (movie.mediaType) parts.push(movie.mediaType === 'tv' ? 'Serie' : 'Film');
+ return (
+
+ {parts.map((p, i) => (
+ {p}
+ ))}
+ {movie.voteAverage != null && (
+
+ ★ {movie.voteAverage.toFixed(1)}
+
+ )}
+ {!!movie.tags?.length && (
+
+ );
+}
+
+function PlotSection({ movie }: { movie: Movie }) {
+ if (!movie.overview) return null;
+ return (
+
+ {movie.tags!.slice(0, 4).map(tag => (
+
+ #{tag}
+
+ ))}
+
+ )}
+ Handlung
+{movie.overview}
+
+
+ ))}
+ {i.label}
+ {i.value}
+ Besetzung
+
+ {cast.slice(0, 6).map(c => (
+
+
+ {c.profilePath ? (
+ 
+ ) : (
+
+ ))}
+ No image
+ )}
+ {c.name}
+ {c.character}
+
+
+ );
+ return (
+ {label}
+
+ {items.slice(0, 6).map(p => (
+ 
+ ))}
+
+ Wo zu sehen
+ {renderRow('Streaming', flat)} + {renderRow('Leihen', rent)} + {renderRow('Kaufen', buy)} +
-
+
+ );
+}
+
+// ==================== Personal: Rating + Notes + Tags ====================
+
+function PersonalSection({
+ movie,
+ conductor,
+ onShowToast,
+}: {
+ movie: Movie;
+ conductor: MovieConductor;
+ onShowToast: (message: string, type: 'success' | 'error' | 'info') => void;
+}) {
+ const [rating, setRating] = useState(movie.userRating ?? null);
+ const [notes, setNotes] = useState(movie.notes ?? '');
+ const [tagInput, setTagInput] = useState('');
+ const [tags, setTags] = useState(movie.tags ?? []);
+ const [savingNotes, setSavingNotes] = useState(false);
+
+ // Re-sync if a different movie is selected.
+ useEffect(() => {
+ setRating(movie.userRating ?? null);
+ setNotes(movie.notes ?? '');
+ setTags(movie.tags ?? []);
+ }, [movie.id]);
+
+ const persistRating = (value: number | null) => {
+ setRating(value);
+ conductor.dispatch({ type: 'UPDATE_USER_RATING', payload: { id: movie.id, userRating: value } });
+ };
+
+ const persistNotes = async () => {
+ setSavingNotes(true);
+ await conductor.dispatch({ type: 'UPDATE_NOTES', payload: { id: movie.id, notes } });
+ setSavingNotes(false);
+ onShowToast('Notiz gespeichert', 'success');
+ };
+
+ const addTag = (raw: string) => {
+ const cleaned = raw.trim().replace(/^#+/, '').toLowerCase();
+ if (!cleaned || tags.includes(cleaned)) return;
+ const next = [...tags, cleaned].slice(0, 12);
+ setTags(next);
+ setTagInput('');
+ conductor.dispatch({ type: 'UPDATE_TAGS', payload: { id: movie.id, tags: next } });
+ };
+
+ const removeTag = (tag: string) => {
+ const next = tags.filter(t => t !== tag);
+ setTags(next);
+ conductor.dispatch({ type: 'UPDATE_TAGS', payload: { id: movie.id, tags: next } });
+ };
+
+ return (
+
+
+
+
+ {/* Rating */}
+
Ähnliche Filme
+Ähnliche Filme
- {recommendations?.slice(0, 5).map(rec => (
-
+ onSelectMovie(rec.id)} className="cursor-pointer">
- 
+ {recommendations.slice(0, 5).map(rec => (
+
- onSelectMovie(rec.id)} className="cursor-pointer group">
+ {rec.posterPath ? (
+ 
+ ) : (
+
))}
No image
+ )}
+ {rec.title}
+
+
+ {/* Rating */}
+
+
+
+ {/* Notes */}
+
+
+
+ {Array.from({ length: 10 }, (_, i) => i + 1).map(i => {
+ const active = rating !== null && i <= rating;
+ return (
+
+ );
+ })}
+ {rating !== null && (
+
+ )}
+
+
+
Notiz
+