mirror of
https://github.com/zoriya/Kyoo.git
synced 2026-04-07 09:41:56 -04:00
wip: Create /collections/{id} page
This commit is contained in:
Zoe Roux
parent
ce79d709ff
commit
01f5b44b60
3
front/src/app/(app)/collections/[slug].tsx
Normal file
3
front/src/app/(app)/collections/[slug].tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import { CollectionDetails } from "~/ui/details";
|
||||
|
||||
export default CollectionDetails;
|
||||
@ -159,7 +159,10 @@ const toQueryKey = (query: {
|
||||
...query.path,
|
||||
query.params
|
||||
? `?${Object.entries(query.params)
|
||||
.filter(([_, v]) => v !== undefined)
|
||||
.filter(
|
||||
([_, v]) =>
|
||||
v !== undefined && (Array.isArray(v) ? v.length > 0 : true),
|
||||
)
|
||||
.map(([k, v]) => `${k}=${Array.isArray(v) ? v.join(",") : v}`)
|
||||
.join("&")}`
|
||||
: undefined,
|
||||
|
||||
@ -1,132 +1,30 @@
|
||||
/*
|
||||
* 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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import { useState } from "react";
|
||||
import Animated from "react-native-reanimated";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { useQueryState } from "~/utils";
|
||||
import { HeaderBackground, useScrollNavbar } from "../navbar";
|
||||
import { Header } from "./header";
|
||||
|
||||
/** biome-ignore-all lint/correctness/noUnusedImports: TODO */
|
||||
|
||||
import {
|
||||
type Collection,
|
||||
CollectionP,
|
||||
type KyooImage,
|
||||
type QueryIdentifier,
|
||||
useInfiniteFetch,
|
||||
} from "@kyoo/models";
|
||||
import {
|
||||
Container,
|
||||
focusReset,
|
||||
GradientImageBackground,
|
||||
H2,
|
||||
ImageBackground,
|
||||
Link,
|
||||
P,
|
||||
ts,
|
||||
} from "@kyoo/primitives";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { type Theme, useYoshiki } from "yoshiki/native";
|
||||
|
||||
export const PartOf = ({
|
||||
name,
|
||||
overview,
|
||||
thumbnail,
|
||||
href,
|
||||
}: {
|
||||
name: string;
|
||||
overview: string | null;
|
||||
thumbnail: KyooImage | null;
|
||||
href: string;
|
||||
}) => {
|
||||
const { css, theme } = useYoshiki("part-of-collection");
|
||||
const { t } = useTranslation();
|
||||
export const CollectionDetails = () => {
|
||||
const [slug] = useQueryState("slug", undefined!);
|
||||
const insets = useSafeAreaInsets();
|
||||
const [imageHeight, setHeight] = useState(300);
|
||||
const { scrollHandler, headerProps } = useScrollNavbar({ imageHeight });
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
{...css({
|
||||
borderRadius: 16,
|
||||
overflow: "hidden",
|
||||
borderWidth: ts(0.5),
|
||||
borderStyle: "solid",
|
||||
borderColor: (theme) => theme.background,
|
||||
fover: {
|
||||
self: { ...focusReset, borderColor: (theme: Theme) => theme.accent },
|
||||
title: { textDecorationLine: "underline" },
|
||||
},
|
||||
})}
|
||||
>
|
||||
<GradientImageBackground
|
||||
src={thumbnail}
|
||||
alt=""
|
||||
quality="medium"
|
||||
gradient={{
|
||||
colors: [theme.darkOverlay, "transparent"],
|
||||
start: { x: 0, y: 0 },
|
||||
end: { x: 1, y: 0 },
|
||||
}}
|
||||
{...css({
|
||||
padding: ts(3),
|
||||
})}
|
||||
<>
|
||||
<HeaderBackground {...headerProps} />
|
||||
<Animated.ScrollView
|
||||
onScroll={scrollHandler}
|
||||
scrollEventThrottle={16}
|
||||
contentContainerStyle={{ paddingBottom: insets.bottom }}
|
||||
>
|
||||
<H2 {...css("title")}>
|
||||
{t("show.partOf")} {name}
|
||||
</H2>
|
||||
<P {...css({ textAlign: "justify" })}>{overview}</P>
|
||||
</GradientImageBackground>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export const DetailsCollections = ({
|
||||
type,
|
||||
slug,
|
||||
}: {
|
||||
type: "movie" | "show";
|
||||
slug: string;
|
||||
}) => {
|
||||
const { items } = useInfiniteFetch(DetailsCollections.query(type, slug));
|
||||
const { css } = useYoshiki();
|
||||
|
||||
// Since most items dont have collections, not having a skeleton reduces layout shifts.
|
||||
if (!items) return null;
|
||||
|
||||
return (
|
||||
<Container {...css({ marginY: ts(2) })}>
|
||||
{items.map((x) => (
|
||||
<PartOf
|
||||
key={x.id}
|
||||
name={x.name}
|
||||
overview={x.overview}
|
||||
thumbnail={x.thumbnail}
|
||||
href={x.href}
|
||||
<Header
|
||||
kind="collection"
|
||||
slug={slug}
|
||||
onImageLayout={(e) => setHeight(e.nativeEvent.layout.height)}
|
||||
/>
|
||||
))}
|
||||
</Container>
|
||||
</Animated.ScrollView>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
DetailsCollections.query = (
|
||||
type: "movie" | "show",
|
||||
slug: string,
|
||||
): QueryIdentifier<Collection> => ({
|
||||
parser: CollectionP,
|
||||
path: [type, slug, "collections"],
|
||||
params: {
|
||||
limit: 0,
|
||||
},
|
||||
infinite: true,
|
||||
});
|
||||
|
||||
@ -380,7 +380,7 @@ export const Header = ({
|
||||
slug,
|
||||
onImageLayout,
|
||||
}: {
|
||||
kind: "movie" | "serie";
|
||||
kind: "movie" | "serie" | "collection";
|
||||
slug: string;
|
||||
onImageLayout?: ViewProps["onLayout"];
|
||||
}) => {
|
||||
@ -458,6 +458,9 @@ Header.query = (
|
||||
parser: Show,
|
||||
path: ["api", `${kind}s`, slug],
|
||||
params: {
|
||||
with: ["studios", ...(kind === "serie" ? ["firstEntry", "nextEntry"] : [])],
|
||||
with: [
|
||||
...(kind !== "collection" ? ["studios"] : []),
|
||||
...(kind === "serie" ? ["firstEntry", "nextEntry"] : []),
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
export { CollectionDetails } from "./collection";
|
||||
export { MovieDetails } from "./movie";
|
||||
export { SerieDetails } from "./serie";
|
||||
|
||||
110
front/src/ui/details/part-of.tsx
Normal file
110
front/src/ui/details/part-of.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
import {
|
||||
type Collection,
|
||||
CollectionP,
|
||||
type KyooImage,
|
||||
type QueryIdentifier,
|
||||
useInfiniteFetch,
|
||||
} from "@kyoo/models";
|
||||
import {
|
||||
Container,
|
||||
focusReset,
|
||||
GradientImageBackground,
|
||||
H2,
|
||||
ImageBackground,
|
||||
Link,
|
||||
P,
|
||||
ts,
|
||||
} from "@kyoo/primitives";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { type Theme, useYoshiki } from "yoshiki/native";
|
||||
|
||||
export const PartOf = ({
|
||||
name,
|
||||
overview,
|
||||
thumbnail,
|
||||
href,
|
||||
}: {
|
||||
name: string;
|
||||
overview: string | null;
|
||||
thumbnail: KyooImage | null;
|
||||
href: string;
|
||||
}) => {
|
||||
const { css, theme } = useYoshiki("part-of-collection");
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
{...css({
|
||||
borderRadius: 16,
|
||||
overflow: "hidden",
|
||||
borderWidth: ts(0.5),
|
||||
borderStyle: "solid",
|
||||
borderColor: (theme) => theme.background,
|
||||
fover: {
|
||||
self: { ...focusReset, borderColor: (theme: Theme) => theme.accent },
|
||||
title: { textDecorationLine: "underline" },
|
||||
},
|
||||
})}
|
||||
>
|
||||
<GradientImageBackground
|
||||
src={thumbnail}
|
||||
alt=""
|
||||
quality="medium"
|
||||
gradient={{
|
||||
colors: [theme.darkOverlay, "transparent"],
|
||||
start: { x: 0, y: 0 },
|
||||
end: { x: 1, y: 0 },
|
||||
}}
|
||||
{...css({
|
||||
padding: ts(3),
|
||||
})}
|
||||
>
|
||||
<H2 {...css("title")}>
|
||||
{t("show.partOf")} {name}
|
||||
</H2>
|
||||
<P {...css({ textAlign: "justify" })}>{overview}</P>
|
||||
</GradientImageBackground>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export const DetailsCollections = ({
|
||||
type,
|
||||
slug,
|
||||
}: {
|
||||
type: "movie" | "show";
|
||||
slug: string;
|
||||
}) => {
|
||||
const { items } = useInfiniteFetch(DetailsCollections.query(type, slug));
|
||||
const { css } = useYoshiki();
|
||||
|
||||
// Since most items dont have collections, not having a skeleton reduces layout shifts.
|
||||
if (!items) return null;
|
||||
|
||||
return (
|
||||
<Container {...css({ marginY: ts(2) })}>
|
||||
{items.map((x) => (
|
||||
<PartOf
|
||||
key={x.id}
|
||||
name={x.name}
|
||||
overview={x.overview}
|
||||
thumbnail={x.thumbnail}
|
||||
href={x.href}
|
||||
/>
|
||||
))}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
DetailsCollections.query = (
|
||||
type: "movie" | "show",
|
||||
slug: string,
|
||||
): QueryIdentifier<Collection> => ({
|
||||
parser: CollectionP,
|
||||
path: [type, slug, "collections"],
|
||||
params: {
|
||||
limit: 0,
|
||||
},
|
||||
infinite: true,
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user