updated

apis/personApi.ts

@@ -11,6 +11,12 @@ export type PersonHistoryEntry = {
   showId: number;
   seasonId: number;
   seasonNumber: number;
+  partner?: {
+    id: number;
+    name: string;
+    birthDate?: string;
+    imageUri: string | null;
+  } | null;
 };
 
 const PERSON_API_BASE = "http://45.157.177.99:8080/persons";
@@ -28,11 +34,25 @@ export async function getPersonHistory(
       console.warn("History expected array, got:", data);
       return [];
     }
-    return (data as PersonHistorySeasonRaw[]).map((s) => ({
+    return (data as PersonHistorySeasonRaw[]).map((season) => {
-      showId: s.show,
+      const me = season.seasonParticipants.find(
-      seasonId: s.seasonId,
+        (p) => p.person.personId === personId
-      seasonNumber: s.seasonNumber,
+      );
-    }));
+      let partner: PersonHistoryEntry["partner"] = null;
+      if (me?.partner?.person) {
+        partner = {
+          id: me.partner.person.personId,
+          name: me.partner.person.name,
+          imageUri: me.partner.person.imageUrl ?? null,
+        };
+      }
+      return {
+        showId: season.show,
+        seasonId: season.seasonId,
+        seasonNumber: season.seasonNumber,
+        partner,
+      };
+    });
   } catch (e) {
     console.error("getPersonHistory error:", e);
     return [];

apis/seasonApi.ts

@@ -58,7 +58,7 @@ export async function getSeason(
           : undefined,
         imageUri:
           p.person.imageUrl ??
-          "https://via.placeholder.com/300x400.png?text=No+Image",
+          `https://i.pravatar.cc/300?img=${Math.random() * 70}`,
       })
     );
     return {

apis/showApi.ts

@@ -52,6 +52,8 @@ export async function getShows(): Promise<Show[]> {
       concept: s.concept,
       running: s.running,
       logoUri: s.logoUrl ?? "",
+      startDate: s.startDate,
+      endDate: s.endDate,
     }));
   } catch (error) {
     console.error("Fetch error:", error);

app/(tabs)/index.tsx

@@ -99,7 +99,7 @@ export default function HomeScreen() {
                   <TouchableOpacity
                     key={serviceName}
                     style={{
-                      padding: 3,
+                      padding: 2,
                       backgroundColor: "hsl(221, 39%, 80%)",
                       borderRadius: 50,
                     }}

app/participant.tsx

@@ -4,12 +4,12 @@ import Ionicons from "@expo/vector-icons/Ionicons";
 import React, { useEffect, useMemo, useState } from "react";
 import { router, useLocalSearchParams } from "expo-router";
 import { usePersonContext } from "@/contexts/PersonContext";
+import * as WebBrowser from "expo-web-browser";
 import {
   ScrollView,
   GestureHandlerRootView,
 } from "react-native-gesture-handler";
 import { useShowContext } from "@/contexts/ShowContext";
-import { getPersonHistory } from "@/apis/personApi";
 
 export default function ParticipantScreen() {
   const { getPersonAppearances, isLoading, getError } = usePersonContext();
@@ -34,8 +34,9 @@ export default function ParticipantScreen() {
       const grouped = data.showIds.map((id) => ({
         showId: id,
         seasons: data.byShow[id],
+        partners: data.partnersByShow[id] || [],
       }));
-      setAppearances(grouped);
+      setAppearances(grouped as any);
     })();
     return () => {
       active = false;
@@ -44,14 +45,30 @@ export default function ParticipantScreen() {
 
   const resolved = useMemo(
     () =>
-      appearances
+      (appearances as any[])
         .map((a) => {
           const show = shows.find((s) => s.id === a.showId);
           if (!show) return null;
-          return { show, seasons: a.seasons };
+          return {
+            show,
+            seasons: a.seasons as number[],
+            partners: a.partners as {
+              seasonNumber: number;
+              partner?: { id: number; name: string; imageUrl?: string | null };
+            }[],
+          };
         })
         .filter(
-          (v): v is { show: (typeof shows)[number]; seasons: number[] } => !!v
+          (
+            v
+          ): v is {
+            show: (typeof shows)[number];
+            seasons: number[];
+            partners: {
+              seasonNumber: number;
+              partner?: { id: number; name: string; imageUrl?: string | null };
+            }[];
+          } => !!v
         ),
     [appearances, shows]
   );
@@ -75,12 +92,6 @@ export default function ParticipantScreen() {
           <View style={styles.dot} />
           <Text style={styles.participantInfo}>Köln</Text>
         </View>
-        <Image
-          source={{
-            uri: "https://www.fernseh-puls.com/wp-content/uploads/are-you-the-one-calvin-o-im-steckbrief-wir-stellen-euch-den-kandidaten-vor.jpg",
-          }}
-          style={styles.participantImage}
-        />
 
         <View style={styles.performedShowsSection}>
           <Text style={styles.performedShowsTitle}>Auftritte:</Text>
@@ -107,7 +118,13 @@ export default function ParticipantScreen() {
               marginTop: 15,
             }}
           >
-            {resolved.map(({ show, seasons }) => (
+            {resolved.map(({ show, seasons, partners }) => {
+              const seasonPartnerLines = partners.map((p) => {
+                const label = `Staffel ${p.seasonNumber}`;
+                if (!p.partner) return label;
+                return `${label} • Partner: ${p.partner.name}`;
+              });
+              return (
                 <TouchableOpacity key={show.id} style={styles.showContainer}>
                   <Image
                     source={{ uri: show.thumbnailUri }}
@@ -116,14 +133,16 @@ export default function ParticipantScreen() {
                   <Text style={styles.showTitle} numberOfLines={2}>
                     {show.title}
                   </Text>
-                <Text style={styles.showSeason} numberOfLines={1}>
+
-                  Staffel
+                  <Text
-                  {seasons.length === 1
+                    style={styles.showSeason}
-                    ? ` ${seasons[0]}`
+                    numberOfLines={seasonPartnerLines.length}
-                    : `n ${seasons.join(", ")}`}
+                  >
+                    {seasonPartnerLines.join("\n")}
                   </Text>
                 </TouchableOpacity>
-            ))}
+              );
+            })}
           </ScrollView>
         </View>
       </ScrollView>

app/showDetails.tsx

@@ -4,6 +4,7 @@ import ShowInfo from "@/components/ui/ShowInfo";
 import ParticipantDetails from "@/components/ParticipantDeatails";
 import React from "react";
 import { useSeasonContext } from "@/contexts/SeasonContext";
+import { getShowColors } from "@/constants/colors";
 import {
   Dimensions,
   Image,
@@ -12,7 +13,6 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import * as WebBrowser from "expo-web-browser";
 import styles from "./stackStyles/showDetailStyles";
 
 export default function ShowDetails() {
@@ -23,6 +23,8 @@ export default function ShowDetails() {
     genres,
     streamingService,
     id,
+    startDate,
+    endDate,
     logoUri,
   } = useLocalSearchParams();
   const [selectedParticipants, setSelectedParticipants] =
@@ -37,6 +39,8 @@ export default function ShowDetails() {
   const [pLoading, setPLoading] = React.useState(false);
   const [pError, setPError] = React.useState<string | null>(null);
 
+  const { tabColor, seasonColor } = getShowColors(Number(id));
+
   React.useEffect(() => {
     if (!showId) return;
     let active = true;
@@ -85,6 +89,8 @@ export default function ShowDetails() {
           seasons={seasonCount}
           participants={participants.length}
           streamingService={streamingService as string}
+          startDate={startDate as string}
+          endDate={endDate as string | null}
         />
 
         <View style={styles.showBannerLogoContainer}>
@@ -103,7 +109,7 @@ export default function ShowDetails() {
                 styles.infoLabel,
                 {
                   fontWeight: selectedParticipants ? "bold" : "normal",
-                  color: selectedParticipants ? "#199edb" : "hsl(0, 0%, 65%)",
+                  color: selectedParticipants ? tabColor : "hsl(0, 0%, 65%)",
                 },
               ]}
             >
@@ -142,7 +148,7 @@ export default function ShowDetails() {
                         {
                           backgroundColor:
                             selectedSeason === season
-                              ? "#199edb"
+                              ? seasonColor
                               : "hsl(0, 0%, 20%)",
                         },
                       ]}
@@ -172,7 +178,10 @@ export default function ShowDetails() {
               {participants.map((p) => (
                 <TouchableOpacity
                   key={p.id}
-                  style={styles.participantContainer}
+                  style={[
+                    styles.participantContainer,
+                    { backgroundColor: tabColor },
+                  ]}
                   onPress={() =>
                     router.push({
                       pathname: "/participant",
@@ -190,6 +199,8 @@ export default function ShowDetails() {
                       height: "100%",
                       borderRadius: 10,
                     }}
+                    resizeMode="cover"
+                    blurRadius={p.imageUri.includes("pravatar") ? 16 : 0}
                   />
                   <Text style={styles.participantLabel} numberOfLines={2}>
                     {p.name}

app/stackStyles/participantStyles.tsx

@@ -50,7 +50,7 @@ const styles = StyleSheet.create({
   },
   performedShowsSection: {
     width: "100%",
-    height: 375,
+    height: "100%",
     paddingLeft: 15,
     paddingBottom: 20,
     backgroundColor: "hsl(221, 39%, 0%)",

components/ui/ShowInfo.tsx

@@ -4,12 +4,16 @@ type ShowInfoProps = {
   seasons: number;
   participants: number;
   streamingService: string;
+  startDate: string;
+  endDate?: string | null;
 };
 
 const ShowInfo = ({
   seasons,
   participants,
   streamingService,
+  startDate,
+  endDate,
 }: ShowInfoProps) => {
   return (
     <View style={styles.showMainInfoSection}>

constants/colors.ts

@@ -0,0 +1,20 @@
+export type ShowDetailColors = {
+  tabColor: string;
+  seasonColor: string;
+};
+
+export const ShowColors: Record<number, ShowDetailColors> = {
+  1: { tabColor: "#009fe2", seasonColor: "#ec5691" },
+  2: { tabColor: "#ffffff", seasonColor: "#3fa8f3" },
+  3: { tabColor: "#ffffff", seasonColor: "#000000" },
+  4: { tabColor: "#8fb4f3", seasonColor: "#4b046c" },
+  5: { tabColor: "#ffffff", seasonColor: "#000000" },
+  6: { tabColor: "#ffffff", seasonColor: "#ff0000" },
+  7: { tabColor: "#25322c", seasonColor: "#957a45" },
+  8: { tabColor: "#ffffff", seasonColor: "#0179b5" },
+};
+
+export function getShowColors(showId: number): ShowDetailColors {
+  if (!showId) return { tabColor: "#009fe2", seasonColor: "#ec5691" };
+  return ShowColors[showId] || { tabColor: "#009fe2", seasonColor: "#ec5691" };
+}

contexts/PersonContext.tsx

@@ -11,6 +11,10 @@ type PersonAppearances = {
   raw: PersonHistoryEntry[];
   byShow: Record<number, number[]>;
   showIds: number[];
+  partnersByShow: Record<
+    number,
+    { seasonNumber: number; partner?: PersonHistoryEntry["partner"] }[]
+  >;
 };
 
 type PersonContextType = {
@@ -32,23 +36,34 @@ export const PersonProvider = ({ children }: { children: ReactNode }) => {
   const buildAppearances = (
     entries: PersonHistoryEntry[]
   ): PersonAppearances => {
-    const byShow: Record<number, Set<number>> = {};
+    const byShowSet: Record<number, Set<number>> = {};
+    const partnersByShow: PersonAppearances["partnersByShow"] = {};
     for (const e of entries) {
-      if (!byShow[e.showId]) byShow[e.showId] = new Set();
+      if (!byShowSet[e.showId]) byShowSet[e.showId] = new Set();
-      byShow[e.showId].add(e.seasonNumber);
+      byShowSet[e.showId].add(e.seasonNumber);
+      if (!partnersByShow[e.showId]) partnersByShow[e.showId] = [];
+      partnersByShow[e.showId].push({
+        seasonNumber: e.seasonNumber,
+        partner: e.partner ?? undefined,
+      });
     }
-    const byShowSorted: Record<number, number[]> = Object.fromEntries(
+    const byShow: Record<number, number[]> = Object.fromEntries(
-      Object.entries(byShow).map(([showId, seasonsSet]) => [
+      Object.entries(byShowSet).map(([showId, seasons]) => [
         Number(showId),
-        Array.from(seasonsSet).sort((a, b) => a - b),
+        Array.from(seasons).sort((a, b) => a - b),
       ])
     );
+
+    Object.values(partnersByShow).forEach((arr) =>
+      arr.sort((a, b) => a.seasonNumber - b.seasonNumber)
+    );
     return {
       raw: entries,
-      byShow: byShowSorted,
+      byShow,
-      showIds: Object.keys(byShowSorted)
+      showIds: Object.keys(byShow)
         .map(Number)
         .sort((a, b) => a - b),
+      partnersByShow,
     };
   };
 
@@ -65,7 +80,7 @@ export const PersonProvider = ({ children }: { children: ReactNode }) => {
         ...err,
         [personId]: e?.message || "Fehler beim Laden",
       }));
-      return { raw: [], byShow: {}, showIds: [] };
+      return { raw: [], byShow: {}, showIds: [], partnersByShow: {} };
     } finally {
       setLoading((l) => ({ ...l, [personId]: false }));
     }
@@ -90,7 +105,7 @@ export const PersonProvider = ({ children }: { children: ReactNode }) => {
   const getSeasonsForShow = useCallback(
     async (personId: number, showId: number) => {
       const app = await getPersonAppearances(personId);
-      return app.byShow[showId] || [];
+      return (app.byShow as Record<number, number[]>)[showId] || [];
     },
     [getPersonAppearances]
   );