Front: Home Page Header: Use Logo

zoriya · Aug 7, 2024 · deaeb77 · deaeb77
1 parent ddc3e8f
commit deaeb77
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 9 deletions.
diff --git a/front/packages/ui/src/home/header.tsx b/front/packages/ui/src/home/header.tsx
@@ -25,17 +25,17 @@ import {
 	H2,
 	IconButton,
 	IconFab,
-	ImageBackground,
 	Link,
 	P,
+	Poster,
 	Skeleton,
 	tooltip,
 	ts,
 } from "@kyoo/primitives";
 import Info from "@material-symbols/svg-400/rounded/info.svg";
 import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
+import { Image, ImageProps, View } from "react-native";
 import { percent, rem, useYoshiki } from "yoshiki/native";
 import { Header as DetailsHeader } from "../details/header";
 import type { WithLoading } from "../fetch";
@@ -44,6 +44,7 @@ export const Header = ({
 	isLoading,
 	name,
 	thumbnail,
+	logo,
 	overview,
 	tagline,
 	link,
@@ -52,13 +53,15 @@ export const Header = ({
 }: WithLoading<{
 	name: string;
 	thumbnail: KyooImage | null;
+	logo: KyooImage | null;
 	overview: string | null;
 	tagline: string | null;
 	link: string | null;
 	infoLink: string;
 }>) => {
 	const { css } = useYoshiki();
 	const { t } = useTranslation();
+	console.log(logo);
 
 	return (
 		<GradientImageBackground
@@ -68,14 +71,37 @@ export const Header = ({
 			{...css(DetailsHeader.containerStyle, props)}
 		>
 			<View
-				{...css({ width: { md: percent(70) }, position: "absolute", bottom: 0, margin: ts(2) })}
+				{...css({
+					width: { xs: percent(70), md: percent(70) },
+					position: "absolute",
+					bottom: 0,
+					margin: ts(2),
+				})}
 			>
 				<Skeleton {...css({ width: rem(8), height: rem(2.5) })}>
-					{isLoading || (
-						<H1 numberOfLines={4} {...css({ fontSize: { xs: rem(2), sm: rem(3) } })}>
-							{name}
-						</H1>
-					)}
+					{isLoading ||
+						(logo != null ? (
+							<View
+								{...css({
+									width: { xs: percent(100), md: percent(50), lg: percent(40) },
+									aspectRatio: 3,
+								})}
+							>
+								<Image
+									resizeMode="contain"
+									defaultSource={{ uri: logo.medium }}
+									source={{ uri: logo.medium }}
+									alt={name}
+									{...(css({
+										flex: 1,
+									}) as ImageProps)}
+								/>
+							</View>
+						) : (
+							<H1 numberOfLines={4} {...css({ fontSize: { xs: rem(2), sm: rem(3) } })}>
+								{name}
+							</H1>
+						))}
 				</Skeleton>
 				<View {...css({ flexDirection: "row", alignItems: "center" })}>
 					{link !== null && (
@@ -97,7 +123,11 @@ export const Header = ({
 						{...css({ marginRight: ts(2) })}
 					/>
 					<Skeleton
-						{...css({ width: rem(25), height: rem(2), display: { xs: "none", sm: "flex" } })}
+						{...css({
+							width: rem(25),
+							height: rem(2),
+							display: { xs: "none", sm: "flex" },
+						})}
 					>
 						{isLoading || <H2 {...css({ display: { xs: "none", sm: "flex" } })}>{tagline}</H2>}
 					</Skeleton>

diff --git a/front/packages/ui/src/home/index.tsx b/front/packages/ui/src/home/index.tsx
@@ -64,6 +64,7 @@ export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => {
 						tagline={"tagline" in x ? x.tagline : null}
 						overview={x.overview}
 						thumbnail={x.thumbnail}
+						logo={x.logo}
 						link={x.kind !== "collection" && !x.isLoading ? x.playHref : undefined}
 						infoLink={x.href}
 					/>