Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Split image backround and gradient image background

Browse Source
This commit is contained in:
Zoe Roux 2024-05-24 11:53:32 +02:00
parent cc50444384
commit 95086777af
No known key found for this signature in database
8 changed files with 108 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
front/packages/primitives/src/image/index.tsx
View File

@ -22,6 +22,7 @@ import { LinearGradient, type LinearGradientProps } from "expo-linear-gradient";
import type { ComponentProps, ComponentType, ReactElement, ReactNode } from "react";
import { type ImageStyle, View, type ViewProps, type ViewStyle } from "react-native";
import { percent } from "yoshiki/native";
import { useYoshiki } from "yoshiki/native";
import { imageBorderRadius } from "../constants";
import { ContrastArea } from "../themes";
import type { ImageLayout, Props, YoshikiEnhanced } from "./base-image";
@ -53,51 +54,50 @@ export const PosterBackground = ({
...props
}: Omit<ComponentProps<typeof ImageBackground>, "layout"> & { style?: ImageStyle } & {
layout: YoshikiEnhanced<{ width: ImageStyle["width"] } | { height: ImageStyle["height"] }>;
}) => (
<ImageBackground
alt={alt!}
layout={{ aspectRatio: 2 / 3, ...layout }}
hideLoad={false}
gradient={false}
{...props}
/>
);
}) => {
const { css } = useYoshiki();
return (
<ImageBackground
alt={alt!}
layout={{ aspectRatio: 2 / 3, ...layout }}
{...css({ borderRadius: imageBorderRadius }, props)}
/>
);
};
type ImageBackgroundProps = {
children?: ReactNode;
containerStyle?: YoshikiEnhanced<ViewStyle>;
imageStyle?: YoshikiEnhanced<ImageStyle>;
layout?: ImageLayout;
contrast?: "light" | "dark" | "user";
};
export const ImageBackground = <AsProps = ViewProps>({
src,
alt,
quality,
gradient = true,
as,
children,
containerStyle,
imageStyle,
forcedLoading,
hideLoad = true,
contrast = "dark",
layout,
contrast = "dark",
imageSibling,
...asProps
}: {
as?: ComponentType<AsProps>;
gradient?: Partial<LinearGradientProps> | boolean;
children?: ReactNode;
containerStyle?: YoshikiEnhanced<ViewStyle>;
imageStyle?: YoshikiEnhanced<ImageStyle>;
hideLoad?: boolean;
contrast?: "light" | "dark" | "user";
layout?: ImageLayout;
imageSibling?: ReactElement;
} & AsProps &
ImageBackgroundProps &
Props) => {
const Container = as ?? View;
return (
<ContrastArea contrastText mode={contrast}>
{({ css, theme }) => (
<Container
{...(css(
[layout, { borderRadius: imageBorderRadius, overflow: "hidden" }],
asProps,
) as AsProps)}
>
{({ css }) => (
<Container {...(css([layout, { overflow: "hidden" }], asProps) as AsProps)}>
<View
{...css([
{
@ -112,36 +112,18 @@ export const ImageBackground = <AsProps = ViewProps>({
containerStyle,
])}
>
{(src || !hideLoad) && (
{src && (
<Image
src={src}
quality={quality}
forcedLoading={forcedLoading}
alt={alt!}
layout={{ width: percent(100), height: percent(100) }}
Err={hideLoad ? null : undefined}
{...(css([{ borderWidth: 0, borderRadius: 0 }, imageStyle]) as {
style: ImageStyle;
})}
/>
)}
{gradient && (
<LinearGradient
start={{ x: 0, y: 0.25 }}
end={{ x: 0, y: 1 }}
colors={["transparent", theme.darkOverlay]}
{...css(
{
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
},
typeof gradient === "object" ? gradient : undefined,
)}
/>
)}
{imageSibling}
</View>
{children}
</Container>
@ -149,3 +131,40 @@ export const ImageBackground = <AsProps = ViewProps>({
</ContrastArea>
);
};
export const GradientImageBackground = <AsProps = ViewProps>({
contrast = "dark",
gradient,
...props
}: {
as?: ComponentType<AsProps>;
gradient?: Partial<LinearGradientProps>;
} & AsProps &
ImageBackgroundProps &
Props) => {
const { css, theme } = useYoshiki();
return (
<ImageBackground
contrast={contrast}
imageSibling={
<LinearGradient
start={{ x: 0, y: 0.25 }}
end={{ x: 0, y: 1 }}
colors={["transparent", theme[contrast].darkOverlay]}
{...css(
{
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
},
typeof gradient === "object" ? gradient : undefined,
)}
/>
}
{...(props as any)}
/>
);
};

13
front/packages/ui/src/browse/list.tsx
View File

@ -20,8 +20,8 @@
import type { KyooImage, WatchStatusV } from "@kyoo/models";
import {
GradientImageBackground,
Heading,
ImageBackground,
Link,
P,
Poster,
@ -33,7 +33,6 @@ import {
} from "@kyoo/primitives";
import { useState } from "react";
import { Platform, View } from "react-native";
import type { Stylable } from "yoshiki";
import { percent, px, rem, useYoshiki } from "yoshiki/native";
import { ItemContext } from "../components/context-menus";
import type { Layout } from "../fetch";
@ -65,19 +64,13 @@ export const ItemList = ({
const [moreOpened, setMoreOpened] = useState(false);
return (
<ImageBackground
<GradientImageBackground
src={thumbnail}
alt={name}
quality="medium"
as={Link}
href={moreOpened ? undefined : href}
onLongPress={() => setMoreOpened(true)}
containerStyle={{
borderRadius: px(imageBorderRadius),
}}
imageStyle={{
borderRadius: px(imageBorderRadius),
}}
{...css(
{
alignItems: "center",
@ -162,7 +155,7 @@ export const ItemList = ({
<PosterBackground src={poster} alt="" quality="low" layout={{ height: percent(80) }}>
<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
</PosterBackground>
</ImageBackground>
</GradientImageBackground>
);
};

14
front/packages/ui/src/collection/index.tsx
View File

@ -27,7 +27,15 @@ import {
type QueryPage,
getDisplayDate,
} from "@kyoo/models";
import { Container, Head, ImageBackground, P, Skeleton, ts, usePageStyle } from "@kyoo/primitives";
import {
Container,
GradientImageBackground,
Head,
P,
Skeleton,
ts,
usePageStyle,
} from "@kyoo/primitives";
import { forwardRef } from "react";
import { useTranslation } from "react-i18next";
import { Platform, View, type ViewProps } from "react-native";
@ -50,7 +58,7 @@ const Header = ({ slug }: { slug: string }) => {
<>
<Head title={data?.name} description={data?.overview} image={data?.thumbnail?.high} />
<ImageBackground
<GradientImageBackground
src={data?.thumbnail}
quality="high"
alt=""
@ -70,7 +78,7 @@ const Header = ({ slug }: { slug: string }) => {
studio={null}
{...css(ShowHeader.childStyle)}
/>
</ImageBackground>
</GradientImageBackground>
<Container
{...css({

21
front/packages/ui/src/details/collection.tsx
View File

@ -25,7 +25,16 @@ import {
type QueryIdentifier,
useInfiniteFetch,
} from "@kyoo/models";
import { Container, H2, ImageBackground, Link, P, focusReset, ts } from "@kyoo/primitives";
import {
Container,
GradientImageBackground,
H2,
ImageBackground,
Link,
P,
focusReset,
ts,
} from "@kyoo/primitives";
import { useTranslation } from "react-i18next";
import { type Theme, useYoshiki } from "yoshiki/native";
import { ErrorView } from "../errors";
@ -59,11 +68,15 @@ export const PartOf = ({
},
})}
>
<ImageBackground
<GradientImageBackground
src={thumbnail}
alt=""
quality="medium"
gradient={{ colors: [theme.darkOverlay, theme.darkOverlay] }}
gradient={{
colors: [theme.darkOverlay, "transparent"],
start: { x: 0, y: 0 },
end: { x: 1, y: 0 },
}}
{...css({
padding: ts(3),
})}
@ -72,7 +85,7 @@ export const PartOf = ({
{t("show.partOf")} {name}
</H2>
<P {...css({ textAlign: "justify" })}>{overview}</P>
</ImageBackground>
</GradientImageBackground>
</Link>
);
};

8
front/packages/ui/src/details/episode.tsx
View File

@ -30,6 +30,7 @@ import {
Skeleton,
SubP,
focusReset,
imageBorderRadius,
important,
tooltip,
ts,
@ -98,6 +99,7 @@ export const EpisodeBox = ({
borderColor: (theme) => theme.background,
borderWidth: ts(0.5),
borderStyle: "solid",
borderRadius: imageBorderRadius,
},
more: {
opacity: 0,
@ -123,9 +125,8 @@ export const EpisodeBox = ({
src={thumbnail}
quality="low"
alt=""
gradient={false}
layout={{ width: percent(100), aspectRatio: 16 / 9 }}
{...(css("poster") as any)}
{...css("poster")}
>
{(watchedPercent || watchedStatus === WatchStatusV.Completed) && (
<ItemProgress watchPercent={watchedPercent ?? 100} />
@ -254,12 +255,11 @@ export const EpisodeLine = ({
src={thumbnail}
quality="low"
alt=""
gradient={false}
layout={{
width: percent(18),
aspectRatio: 16 / 9,
}}
{...(css({ flexShrink: 0, m: ts(1) }) as { style: ImageStyle })}
{...css({ flexShrink: 0, m: ts(1) })}
>
{(watchedPercent || watchedStatus === WatchStatusV.Completed) && (
<>

6
front/packages/ui/src/details/header.tsx
View File

@ -35,13 +35,13 @@ import {
Chip,
Container,
DottedSeparator,
GradientImageBackground,
H1,
H2,
HR,
Head,
IconButton,
IconFab,
ImageBackground,
LI,
Link,
Menu,
@ -509,7 +509,7 @@ export const Header = ({
{({ isLoading, ...data }) => (
<>
<Head title={data?.name} description={data?.overview} image={data?.thumbnail?.high} />
<ImageBackground
<GradientImageBackground
src={data?.thumbnail}
quality="high"
alt=""
@ -531,7 +531,7 @@ export const Header = ({
watchStatus={data?.watchStatus?.status ?? null}
{...css(Header.childStyle)}
/>
</ImageBackground>
</GradientImageBackground>
<Description
isLoading={isLoading}
overview={data?.overview}

4
front/packages/ui/src/downloads/page.tsx
View File

@ -86,13 +86,11 @@ const DownloadedItem = ({
src={image}
quality="low"
alt=""
gradient={false}
hideLoad={false}
layout={{
width: percent(25),
aspectRatio: kind === "episode" ? 16 / 9 : 2 / 3,
}}
{...(css({ flexShrink: 0, m: ts(1) }) as { style: ImageStyle })}
{...css({ flexShrink: 0, m: ts(1) })}
>
{/* {(watchedPercent || watchedStatus === WatchStatusV.Completed) && ( */}
{/* <> */}

5
front/packages/ui/src/home/header.tsx
View File

@ -20,6 +20,7 @@
import { type KyooImage, type LibraryItem, LibraryItemP, type QueryIdentifier } from "@kyoo/models";
import {
GradientImageBackground,
H1,
H2,
IconButton,
@ -60,7 +61,7 @@ export const Header = ({
const { t } = useTranslation();
return (
<ImageBackground
<GradientImageBackground
src={thumbnail}
alt=""
quality="high"
@ -108,7 +109,7 @@ export const Header = ({
)}
</Skeleton>
</View>
</ImageBackground>
</GradientImageBackground>
);
};