Style episodes in the news list

This commit is contained in:
Zoe Roux 2023-10-30 01:49:01 +01:00
parent 56a96540b4
commit 42869cb28f
3 changed files with 59 additions and 10 deletions

View File

@ -20,7 +20,7 @@
import { KyooImage } from "@kyoo/models"; import { KyooImage } from "@kyoo/models";
import { Link, Skeleton, Poster, ts, focusReset, P, SubP } from "@kyoo/primitives"; import { Link, Skeleton, Poster, ts, focusReset, P, SubP } from "@kyoo/primitives";
import { ImageStyle, Platform } from "react-native"; import { ImageStyle } from "react-native";
import { percent, px, Stylable, Theme, useYoshiki } from "yoshiki/native"; import { percent, px, Stylable, Theme, useYoshiki } from "yoshiki/native";
import { Layout, WithLoading } from "../fetch"; import { Layout, WithLoading } from "../fetch";

View File

@ -18,7 +18,7 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { focusReset, H6, Image, ImageProps, Link, P, Skeleton, ts } from "@kyoo/primitives"; import { focusReset, H6, Image, ImageProps, Link, P, Skeleton, SubP, ts } from "@kyoo/primitives";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ImageStyle, View } from "react-native"; import { ImageStyle, View } from "react-native";
import { Layout, WithLoading } from "../fetch"; import { Layout, WithLoading } from "../fetch";
@ -44,26 +44,71 @@ export const EpisodeBox = ({
overview, overview,
thumbnail, thumbnail,
isLoading, isLoading,
href,
...props ...props
}: Stylable & }: Stylable &
WithLoading<{ WithLoading<{
name: string | null; name: string | null;
overview: string; overview: string | null;
href: string;
thumbnail?: ImageProps["src"] | null; thumbnail?: ImageProps["src"] | null;
}>) => { }>) => {
const { css } = useYoshiki("episodebox");
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<View {...props}> <Link
href={href}
{...css(
{
child: {
poster: {
borderColor: (theme) => theme.background,
borderWidth: ts(0.5),
borderStyle: "solid",
},
},
fover: {
self: focusReset,
poster: {
borderColor: (theme: Theme) => theme.accent,
},
title: {
textDecorationLine: "underline",
},
},
},
props,
)}
>
<Image <Image
src={thumbnail} src={thumbnail}
quality="low" quality="low"
alt="" alt=""
layout={{ width: percent(100), aspectRatio: 16 / 9 }} layout={{ width: percent(100), aspectRatio: 16 / 9 }}
{...(css("poster") as any)}
/> />
<Skeleton>{isLoading || <P>{name ?? t("show.episodeNoMetadata")}</P>}</Skeleton> <Skeleton>
<Skeleton>{isLoading || <P>{overview}</P>}</Skeleton> {isLoading || (
</View> <P {...css([{ marginY: 0, textAlign: "center" }, "title"])}>
{name ?? t("show.episodeNoMetadata")}
</P>
)}
</Skeleton>
<Skeleton>
{isLoading || (
<SubP
numberOfLines={3}
{...css({
marginTop: 0,
textAlign: "center",
})}
>
{overview}
</SubP>
)}
</Skeleton>
</Link>
); );
}; };

View File

@ -37,7 +37,7 @@ import ChevronRight from "@material-symbols/svg-400/rounded/chevron_right-fill.s
import { InfiniteFetch, InfiniteFetchList } from "../fetch-infinite"; import { InfiniteFetch, InfiniteFetchList } from "../fetch-infinite";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Header } from "./genre"; import { Header } from "./genre";
import { EpisodeBox } from "../details/episode"; import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
export const NewsList = () => { export const NewsList = () => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -62,8 +62,12 @@ export const NewsList = () => {
) : ( ) : (
<EpisodeBox <EpisodeBox
isLoading={x.isLoading as any} isLoading={x.isLoading as any}
name={x.name} name={
overview={x.overview!} x.kind === NewsKind.Episode
? `${x.show!.name} ${episodeDisplayNumber(x)}`
: undefined
}
overview={x.name}
thumbnail={x.thumbnail} thumbnail={x.thumbnail}
/> />
) )