/* * Kyoo - A portable and vast media library solution. * Copyright (c) Kyoo. * * See AUTHORS.md and LICENSE file in the project root for full license information. * * Kyoo is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * any later version. * * Kyoo is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with Kyoo. If not, see . */ import { type Collection, CollectionP, type LibraryItem, LibraryItemP, type QueryIdentifier, type QueryPage, getDisplayDate, } from "@kyoo/models"; 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"; import { percent, px, useYoshiki } from "yoshiki/native"; import { ItemGrid } from "../browse/grid"; import { Header as ShowHeader, TitleLine } from "../details/header"; import { SvgWave } from "../details/show"; import { Fetch } from "../fetch"; import { InfiniteFetch } from "../fetch-infinite"; import { ItemDetails } from "../home/recommended"; import { DefaultLayout } from "../layout"; const Header = ({ slug }: { slug: string }) => { const { css } = useYoshiki(); const { t } = useTranslation(); return ( {({ isLoading, ...data }) => ( <> {isLoading || (

{data.overview ?? t("show.noOverview")}

)} )} ); }; Header.query = (slug: string): QueryIdentifier => ({ parser: CollectionP, path: ["collections", slug], }); const CollectionHeader = forwardRef(function ShowHeader( { children, slug, ...props }, ref, ) { const { css, theme } = useYoshiki(); return ( theme.variant.background }, Platform.OS === "web" && { flexGrow: 1, flexShrink: 1, // @ts-ignore Web only property overflowY: "auto" as any, }, ], props, )} >

{children} ); }); const query = (slug: string): QueryIdentifier => ({ parser: LibraryItemP, path: ["collections", slug, "items"], infinite: true, params: { fields: ["firstEpisode", "episodesCount", "watchStatus"], }, }); export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => { const { css } = useYoshiki(); const pageStyle = usePageStyle(); return ( ( )} Loader={ItemDetails.Loader} /> ); }; CollectionPage.getLayout = { Layout: DefaultLayout, props: { transparent: true } }; CollectionPage.getFetchUrls = ({ slug }) => [query(slug), Header.query(slug)];