Show episode metadata on episode page

src/api/ApiClient.ts

@@ -30,7 +30,7 @@ export class ApiClient extends RequestClient {
         });
     }
 
-    public async listEpisodes(contentId: string): Promise<Instalment> {
+    public async listEpisodes(contentId: string): Promise<Instalment[]> {
         return await this.request(`api/v1/content/${contentId}/episodes`, {
             method: "GET"
         });

src/api/models/Instalment.ts

@@ -6,3 +6,37 @@ export interface Instalment {
     airDate: string | null,
     content: Content
 }
+
+export function sortInstalments(instalments: Instalment[]): Instalment[] {
+    return instalments.sort((a, b) => {
+        if (a.season !== b.season) {
+            if (a.season === null) return 1;
+            if (b.season === null) return -1;
+            return compareNumericStrings(a.season, b.season);
+        } else if (a.episode !== b.episode) {
+            if (a.episode === null) return 1;
+            if (b.episode === null) return -1;
+            return compareNumericStrings(a.episode, b.episode);
+        } else {
+            if (a.airDate === null) return 1;
+            if (b.airDate === null) return -1;
+            return compareDateStrings(a.airDate, b.airDate);
+        }
+    })
+}
+
+function compareDateStrings(a: string, b: string) {
+    return new Date(a).getTime() - new Date(b).getTime();
+}
+
+function compareNumericStrings(a: string, b: string) {
+    if (isNumeric(a) && isNumeric(b)) {
+        return parseFloat(a) - parseFloat(b);
+    } else {
+        return a.localeCompare(b);
+    }
+}
+
+function isNumeric(data: string): boolean {
+    return !isNaN(data as any as number) && !isNaN(parseFloat(data))
+}

src/routes/main/MainPage.tsx

@@ -61,7 +61,7 @@ export function MainPage(props: Props) {
                                         const episodeTitle = getLocalizedName(episode.content, locale);
                                         const episodeDescription = getLocalizedDescription(episode.content, locale);
                                         return (
-                                            <li>
+                                            <li key={episode.content.ids.uuid}>
                                                 <p>
                                                     <strong>S{episode.season}E{episode.episode}</strong> – {episode.airDate}
                                                 </p>

src/routes/player/Player.tsx

-import {useState} from "react";
+import {Fragment, useEffect, useState} from "react";
 import {createUseStyles} from "react-jss";
 import {Link} from "react-router-dom";
 import {ContentMeta} from "../../api/models/dto/ContentMeta";
@@ -17,6 +17,8 @@ import {Subtitle} from "../../api/models/Subtitle";
 import {MousePosition} from "../../util/mouse/MousePosition";
 import {VideoProvider} from "./video/VideoContext";
 import {SubtitleRenderer} from "./subtitles/SubtitleRenderer";
+import {useApiClient} from "../../api/ApiClientContext";
+import {Instalment, sortInstalments} from "../../api/models/Instalment";
 
 interface Props {
     meta: ContentMeta,
@@ -26,10 +28,20 @@ interface Props {
 export function Player(
     {meta, media}: Props
 ) {
+    const apiClient = useApiClient();
     const {content, instalment} = meta;
     const classes = useStyles();
     const locale = useLocale();
 
+    const [relatedInstalments, setRelatedInstalments] = useState<Instalment[]>([]);
+    useEffect(() => {
+        setRelatedInstalments([]);
+        if (instalment?.content.ids.uuid !== undefined) {
+            apiClient.listEpisodes(instalment.content.ids.uuid)
+                .then(result => setRelatedInstalments(sortInstalments(result)));
+        }
+    }, [apiClient, instalment]);
+
     const name = getLocalizedName(content, locale);
     const description = getLocalizedDescription(content, locale);
     const rating = getLocalizedRating(content, locale);
@@ -58,7 +70,34 @@ export function Player(
                 <p>{rating?.certification}</p>
                 <strong>{description?.tagline}</strong>
                 <p>{description?.overview}</p>
-                <p>{instalment?.content && getLocalizedName(instalment?.content, locale)?.name}</p>
+                {instalment?.content && (
+                    <Fragment>
+                        <h3>{getLocalizedName(instalment.content, locale)?.name}</h3>
+                        <ol>
+                            {relatedInstalments.map(episode => {
+                                const episodeTitle = getLocalizedName(episode.content, locale);
+                                const episodeDescription = getLocalizedDescription(episode.content, locale);
+                                return (
+                                    <li key={episode.content.ids.uuid}>
+                                        <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>
+                                        {episode.content.ids.uuid !== meta.content.ids.uuid ? (
+                                            <p>
+                                                <Link to={"/player/" + episode.content.ids.uuid}>Play</Link>
+                                            </p>
+                                        ) : (
+                                            <p><u>Playing</u></p>
+                                        )}
+                                    </li>
+                                )
+                            })}
+                        </ol>
+                    </Fragment>
+                )}
                 <div className={classes.player}>
                     <div className={classes.playerCanvas}>
                         <VideoElement