From f40ad565be09098a171cae80172717dad6a10a87 Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Sun, 27 Sep 2020 16:07:34 +0200
Subject: [PATCH] Minor bugfixes
---
src/api/models/Episode.ts | 4 ++--
src/api/models/dto/TitleMeta.ts | 4 ++--
src/routes/main/MainPage.tsx | 40 ++++++++++++++++++++++++++++++---
src/routes/player/Player.tsx | 3 ++-
4 files changed, 43 insertions(+), 8 deletions(-)
diff --git a/src/api/models/Episode.ts b/src/api/models/Episode.ts
index 4afedae..2463d61 100644
--- a/src/api/models/Episode.ts
+++ b/src/api/models/Episode.ts
@@ -1,8 +1,8 @@
import {Title} from "./Title";
export interface Episode {
- seasonNumber: string | null,
- episodeNumber: string | null,
+ season: string | null,
+ episode: string | null,
airDate: string | null,
title: Title
}
diff --git a/src/api/models/dto/TitleMeta.ts b/src/api/models/dto/TitleMeta.ts
index d81fb59..a6883fb 100644
--- a/src/api/models/dto/TitleMeta.ts
+++ b/src/api/models/dto/TitleMeta.ts
@@ -1,7 +1,7 @@
+import {Episode} from "../Episode";
import {Title} from "../Title";
export interface TitleMeta {
title: Title,
- show: Title | null,
- episodes: Title[],
+ show: Episode | null,
}
diff --git a/src/routes/main/MainPage.tsx b/src/routes/main/MainPage.tsx
index e02075f..5b3d18a 100644
--- a/src/routes/main/MainPage.tsx
+++ b/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>
- <p>
- <Link to={"/player/" + item.ids.uuid}>Play</Link>
- </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}
diff --git a/src/routes/player/Player.tsx b/src/routes/player/Player.tsx
index 56e6aaa..59055a6 100644
--- a/src/routes/player/Player.tsx
+++ b/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
--
GitLab