Kyoo/front/src/components/item-list.tsx

import { useState } from "react";
import { Platform, View } from "react-native";
import { percent, px, rem, useYoshiki } from "yoshiki/native";
import type { KyooImage, WatchStatusV } from "~/models";
import {
	GradientImageBackground,
	Heading,
	Link,
	P,
	Poster,
	PosterBackground,
	Skeleton,
	imageBorderRadius,
	important,
	ts,
} from "~/primitives";
import type { Layout } from "~/query";
import { ItemWatchStatus } from "./item-helpers";

export const ItemList = ({
	href,
	slug,
	type,
	name,
	subtitle,
	thumbnail,
	poster,
	watchStatus,
	unseenEpisodesCount,
	...props
}: {
	href: string;
	slug: string;
	type: "movie" | "show" | "collection";
	name: string;
	subtitle: string | null;
	poster: KyooImage | null;
	thumbnail: KyooImage | null;
	watchStatus: WatchStatusV | null;
	unseenEpisodesCount: number | null;
}) => {
	const { css } = useYoshiki("line");
	const [moreOpened, setMoreOpened] = useState(false);

	return (
		<GradientImageBackground
			src={thumbnail}
			alt={name}
			quality="medium"
			as={Link}
			href={moreOpened ? undefined : href}
			onLongPress={() => setMoreOpened(true)}
			{...css(
				{
					alignItems: "center",
					justifyContent: "space-evenly",
					flexDirection: "row",
					height: ItemList.layout.size,
					borderRadius: px(imageBorderRadius),
					overflow: "hidden",
					marginX: ItemList.layout.gap,
					child: {
						more: {
							opacity: 0,
						},
					},
					fover: {
						title: {
							textDecorationLine: "underline",
						},
						more: {
							opacity: 100,
						},
					},
				},
				props,
			)}
		>
			<View
				{...css({
					width: { xs: "50%", lg: "30%" },
				})}
			>
				<View
					{...css({
						flexDirection: "row",
						justifyContent: "center",
					})}
				>
					<Heading
						{...css([
							"title",
							{
								textAlign: "center",
								fontSize: rem(2),
								letterSpacing: rem(0.002),
								fontWeight: "900",
								textTransform: "uppercase",
							},
						])}
					>
						{name}
					</Heading>
					{type !== "collection" && (
						<ItemContext
							type={type}
							slug={slug}
							status={watchStatus}
							isOpen={moreOpened}
							setOpen={(v) => setMoreOpened(v)}
							{...css([
								{
									// I dont know why marginLeft gets overwritten by the margin: px(2) so we important
									marginLeft: important(ts(2)),
									bg: (theme) => theme.darkOverlay,
								},
								"more",
								Platform.OS === "web" && moreOpened && { opacity: important(100) },
							])}
						/>
					)}
				</View>
				{subtitle && (
					<P
						{...css({
							textAlign: "center",
							marginRight: ts(4),
						})}
					>
						{subtitle}
					</P>
				)}
			</View>
			<PosterBackground src={poster} alt="" quality="low" layout={{ height: percent(80) }}>
				<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
			</PosterBackground>
		</GradientImageBackground>
	);
};

ItemList.Loader = (props: object) => {
	const { css } = useYoshiki();

	return (
		<View
			{...css(
				{
					alignItems: "center",
					justifyContent: "space-evenly",
					flexDirection: "row",
					height: ItemList.layout.size,
					borderRadius: px(imageBorderRadius),
					overflow: "hidden",
					bg: (theme) => theme.dark.background,
					marginX: ItemList.layout.gap,
				},
				props,
			)}
		>
			<View
				{...css({
					width: { xs: "50%", lg: "30%" },
					flexDirection: "column",
					justifyContent: "center",
				})}
			>
				<Skeleton {...css({ height: rem(2), alignSelf: "center" })} />
				<Skeleton {...css({ width: rem(5), alignSelf: "center" })} />
			</View>
			<Poster.Loader layout={{ height: percent(80) }} />
		</View>
	);
};

ItemList.layout = {
	numColumns: 1,
	size: 300,
	layout: "vertical",
	gap: ts(2),
} satisfies Layout;