Minor bugfixes

src/api/models/Episode.ts

 import {Title} from "./Title";
 
 export interface Episode {
-    seasonNumber: string | null,
-    episodeNumber: string | null,
+    season: string | null,
+    episode: string | null,
     airDate: string | null,
     title: Title
 }

src/api/models/dto/TitleMeta.ts

+import {Episode} from "../Episode";
 import {Title} from "../Title";
 
 export interface TitleMeta {
     title: Title,
-    show: Title | null,
-    episodes: Title[],
+    show: Episode | null,
 }

src/routes/main/MainPage.tsx

@@ -2,6 +2,7 @@ import React, {useEffect, useState} from "react";
 import {createUseStyles} from "react-jss";
 import {Link} from "react-router-dom";
 import {useApiClient} from "../../api/ApiClientContext";
+import {Episode} from "../../api/models/Episode";
 import {getLocalizedDescription, getLocalizedName, getLocalizedRating, Title} from "../../api/models/Title";
 import {Locale} from "../../util/locale/Locale";
 import {sortLexicallyAsc} from "../../util/sort/sortLexically";
@@ -20,6 +21,16 @@ export function MainPage(props: Props) {
         language: "en",
         region: "DE",
     };
+    const [episodes, setEpisodes] = useState<{ [key: string]: Episode[] }>({});
+    const titlesToLoad = data?.filter(it => it.kind === "show" && episodes[it.ids.uuid] === undefined);
+    useEffect(() => {
+        if (titlesToLoad?.length !== undefined && titlesToLoad.length > 0) {
+            const titlesBeingLoaded = Object.fromEntries(titlesToLoad?.map(it => [it.ids.uuid, []]) || []);
+            setEpisodes({...titlesBeingLoaded, ...episodes});
+            Promise.all(titlesToLoad?.map(it => apiClient.listEpisodes(it.ids.uuid).then(eps => [it.ids.uuid, eps])) || [])
+                .then(it => setEpisodes({...Object.fromEntries(it), ...episodes}));
+        }
+    }, [apiClient, episodes, titlesToLoad]);
 
     const classes = useStyles();
 
@@ -39,9 +50,32 @@ export function MainPage(props: Props) {
                             <p><strong>{rating?.certification}</strong></p>
                             <p><strong>{description?.tagline}</strong></p>
                             <p>{description?.overview}</p>
+                            {item.kind === "movie" && (
                                 <p>
                                     <Link to={"/player/" + item.ids.uuid}>Play</Link>
                                 </p>
+                            )}
+                            {item.kind === "show" && (
+                                <ul>
+                                    {episodes[item.ids.uuid]?.map(episode => {
+                                        const episodeTitle = getLocalizedName(episode.title, locale);
+                                        const episodeDescription = getLocalizedDescription(episode.title, locale);
+                                        return (
+                                            <li>
+                                                <p>
+                                                    <strong>S{episode.season}E{episode.episode}</strong> – {episode.airDate}
+                                                </p>
+                                                <p><strong>{episodeTitle?.name}</strong></p>
+                                                <p><strong>{episodeDescription?.tagline}</strong></p>
+                                                <p>{episodeDescription?.overview}</p>
+                                                <p>
+                                                    <Link to={"/player/" + episode.title.ids.uuid}>Play</Link>
+                                                </p>
+                                            </li>
+                                        )
+                                    })}
+                                </ul>
+                            )}
                             {poster && (
                                 <img
                                     className={classes.poster}

src/routes/player/Player.tsx

@@ -17,7 +17,7 @@ interface Props {
 
 export function Player(props: Props) {
     const {media} = props;
-    const {title, show, episodes} = props.title;
+    const {title, show} = props.title;
 
     const classes = useStyles();
     const locale = useLocale();
@@ -44,6 +44,7 @@ export function Player(props: Props) {
         <div>
             <Link to="/">Back</Link>
             <p>{name?.name}</p>
+            <p>{show && getLocalizedName(show.title, locale)?.name}</p>
             {video}
             <p style={{fontVariant: "tabular-nums"}}>{formatDuration(position)} / {formatDuration(duration)}</p>
             <SeekBar