Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make header transparent in details page

Browse Source
This commit is contained in:
Zoe Roux 2025-07-08 00:20:47 +02:00
parent 0d4e8d5a62
commit 3f1c027019
No known key found for this signature in database
1 changed files with 102 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
front/src/ui/details/header.tsx
View File

@ -4,6 +4,7 @@ import MoreHoriz from "@material-symbols/svg-400/rounded/more_horiz.svg";
import MovieInfo from "@material-symbols/svg-400/rounded/movie_info.svg"; import MovieInfo from "@material-symbols/svg-400/rounded/movie_info.svg";
import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg"; import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
import Theaters from "@material-symbols/svg-400/rounded/theaters-fill.svg"; import Theaters from "@material-symbols/svg-400/rounded/theaters-fill.svg";
import { Stack } from "expo-router";
import { Fragment } from "react"; import { Fragment } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { type ImageStyle, Platform, View } from "react-native"; import { type ImageStyle, Platform, View } from "react-native";
@ -487,95 +488,108 @@ export const Header = ({
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Fetch <>
query={Header.query(kind, slug)} <Stack.Screen
Loader={() => <p>loading</p>} options={{
Render={(data) => ( headerTransparent: true,
<> headerStyle: { backgroundColor: undefined },
<Head }}
title={data.name} />
description={data.description} <Fetch
image={data.thumbnail?.high} query={Header.query(kind, slug)}
/> Loader={() => <p>loading</p>}
<GradientImageBackground Render={(data) => (
src={data.thumbnail} <>
quality="high" <Head
alt="" title={data.name}
layout={{ description={data.description}
width: percent(100), image={data.thumbnail?.high}
height: {
xs: vh(40),
sm: min(vh(60), px(750)),
md: min(vh(60), px(680)),
lg: vh(70),
},
}}
{...(css({
minHeight: { xs: px(350), sm: px(300), md: px(400), lg: px(600) },
}) as any)}
>
<TitleLine
kind={kind}
slug={slug}
name={data.name}
tagline={data.tagline}
date={getDisplayDate(data)}
rating={data.rating}
runtime={data.kind === "movie" ? data.runtime : null}
poster={data.poster}
studios={data.kind !== "collection" ? data.studios : null}
playHref={data.kind !== "collection" ? data.playHref : null}
trailerUrl={data.kind !== "collection" ? data.trailerUrl : null}
watchStatus={
data.kind !== "collection" ? data.watchStatus?.status! : null
}
{...css({
marginTop: {
xs: max(vh(20), px(200)),
sm: vh(45),
md: max(vh(30), px(150)),
lg: max(vh(35), px(200)),
},
})}
/> />
</GradientImageBackground> <GradientImageBackground
<Description src={data.thumbnail}
description={data?.description} quality="high"
genres={data?.genres} alt=""
tags={data?.tags} layout={{
{...css({ paddingTop: { xs: 0, md: ts(2) } })} width: percent(100),
/> height: {
<Container xs: vh(40),
{...css({ sm: min(vh(60), px(750)),
flexWrap: "wrap", md: min(vh(60), px(680)),
flexDirection: "row", lg: vh(70),
alignItems: "center", },
marginTop: ts(0.5), }}
})} {...(css({
> minHeight: {
<P {...css({ marginRight: ts(0.5), textAlign: "center" })}> xs: px(350),
{t("show.links")}: sm: px(300),
</P> md: px(400),
{Object.entries(data.externalId!) lg: px(600),
.filter(([_, data]) => data.link) },
.map(([name, data]) => ( }) as any)}
<Chip >
key={name} <TitleLine
label={name} kind={kind}
href={data.link} slug={slug}
target="_blank" name={data.name}
size="small" tagline={data.tagline}
outline date={getDisplayDate(data)}
{...css({ m: ts(0.5) })} rating={data.rating}
/> runtime={data.kind === "movie" ? data.runtime : null}
))} poster={data.poster}
</Container> studios={data.kind !== "collection" ? data.studios : null}
{/* {type === "show" && ( */} playHref={data.kind !== "collection" ? data.playHref : null}
{/* <ShowWatchStatusCard {...(data?.watchStatus as any)} /> */} trailerUrl={data.kind !== "collection" ? data.trailerUrl : null}
{/* )} */} watchStatus={
</> data.kind !== "collection" ? data.watchStatus?.status! : null
)} }
/> {...css({
marginTop: {
xs: max(vh(20), px(200)),
sm: vh(45),
md: max(vh(30), px(150)),
lg: max(vh(35), px(200)),
},
})}
/>
</GradientImageBackground>
<Description
description={data?.description}
genres={data?.genres}
tags={data?.tags}
{...css({ paddingTop: { xs: 0, md: ts(2) } })}
/>
<Container
{...css({
flexWrap: "wrap",
flexDirection: "row",
alignItems: "center",
marginTop: ts(0.5),
})}
>
<P {...css({ marginRight: ts(0.5), textAlign: "center" })}>
{t("show.links")}:
</P>
{Object.entries(data.externalId!)
.filter(([_, data]) => data.link)
.map(([name, data]) => (
<Chip
key={name}
label={name}
href={data.link}
target="_blank"
size="small"
outline
{...css({ m: ts(0.5) })}
/>
))}
</Container>
{/* {type === "show" && ( */}
{/* <ShowWatchStatusCard {...(data?.watchStatus as any)} /> */}
{/* )} */}
</>
)}
/>
</>
); );
}; };