mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-05-24 02:02:36 -04:00
Add part of collection card on details page
This commit is contained in:
parent
e788dea8a4
commit
a825912ad3
@ -24,6 +24,7 @@ import { withImages, ResourceP, imageFn } from "../traits";
|
||||
import { Genre } from "./genre";
|
||||
import { StudioP } from "./studio";
|
||||
import { Status } from "./show";
|
||||
import { CollectionP } from "./collection";
|
||||
|
||||
export const MovieP = withImages(
|
||||
ResourceP.extend({
|
||||
@ -75,7 +76,10 @@ export const MovieP = withImages(
|
||||
* The studio that made this movie.
|
||||
*/
|
||||
studio: StudioP.optional().nullable(),
|
||||
|
||||
/**
|
||||
* The collection this movie is part of.
|
||||
*/
|
||||
collections: z.array(CollectionP).optional(),
|
||||
/**
|
||||
* The links to see a movie or an episode.
|
||||
*/
|
||||
|
@ -25,6 +25,7 @@ import { Genre } from "./genre";
|
||||
import { SeasonP } from "./season";
|
||||
import { StudioP } from "./studio";
|
||||
import { BaseEpisodeP } from "./episode.base";
|
||||
import { CollectionP } from "./collection";
|
||||
|
||||
/**
|
||||
* The enum containing show's status.
|
||||
@ -86,6 +87,10 @@ export const ShowP = withImages(
|
||||
* The studio that made this show.
|
||||
*/
|
||||
studio: StudioP.optional().nullable(),
|
||||
/**
|
||||
* The collection this movie is part of.
|
||||
*/
|
||||
collections: z.array(CollectionP).optional(),
|
||||
/**
|
||||
* The list of seasons of this show.
|
||||
*/
|
||||
|
71
front/packages/ui/src/details/collection.tsx
Normal file
71
front/packages/ui/src/details/collection.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
/*
|
||||
* 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 { KyooImage } from "@kyoo/models";
|
||||
import { H2, ImageBackground, Link, P, focusReset, ts } from "@kyoo/primitives";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { 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" },
|
||||
},
|
||||
})}
|
||||
>
|
||||
<ImageBackground
|
||||
src={thumbnail}
|
||||
alt=""
|
||||
quality="medium"
|
||||
gradient={{ colors: [theme.darkOverlay, theme.darkOverlay] }}
|
||||
{...css({
|
||||
padding: ts(3),
|
||||
})}
|
||||
>
|
||||
<H2 {...css("title")}>
|
||||
{t("show.partOf")} {name}
|
||||
</H2>
|
||||
<P {...css({ textAlign: "justify" })}>{overview}</P>
|
||||
</ImageBackground>
|
||||
</Link>
|
||||
);
|
||||
};
|
@ -69,6 +69,7 @@ import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
|
||||
import Theaters from "@material-symbols/svg-400/rounded/theaters-fill.svg";
|
||||
import { Rating } from "../components/rating";
|
||||
import { displayRuntime } from "./episode";
|
||||
import { PartOf } from "./collection";
|
||||
|
||||
export const TitleLine = ({
|
||||
isLoading,
|
||||
@ -406,6 +407,19 @@ export const Header = ({
|
||||
tags={data?.tags}
|
||||
{...css({ paddingTop: { xs: 0, md: ts(2) } })}
|
||||
/>
|
||||
{data?.collections && (
|
||||
<Container {...css({ marginY: ts(2) })}>
|
||||
{data.collections.map((x) => (
|
||||
<PartOf
|
||||
key={x.id}
|
||||
name={x.name}
|
||||
overview={x.overview}
|
||||
thumbnail={x.thumbnail}
|
||||
href={x.href}
|
||||
/>
|
||||
))}
|
||||
</Container>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Fetch>
|
||||
|
@ -28,7 +28,7 @@ const query = (slug: string): QueryIdentifier<Movie> => ({
|
||||
parser: MovieP,
|
||||
path: ["movies", slug],
|
||||
params: {
|
||||
fields: ["studio"],
|
||||
fields: ["studio", "collections"],
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -81,7 +81,7 @@ const query = (slug: string): QueryIdentifier<Show> => ({
|
||||
parser: ShowP,
|
||||
path: ["shows", slug],
|
||||
params: {
|
||||
fields: ["studio", "firstEpisode"],
|
||||
fields: ["studio", "firstEpisode", "collections"],
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -224,7 +224,7 @@ export const Navbar = (props: Stylable) => {
|
||||
props,
|
||||
)}
|
||||
>
|
||||
<View {...css({ flexDirection: "row" })}>
|
||||
<View {...css({ flexDirection: "row", alignItems: "center" })}>
|
||||
<NavbarTitle {...css({ marginX: ts(2) })} />
|
||||
<A
|
||||
href="/browse"
|
||||
|
@ -17,7 +17,8 @@
|
||||
"episode-none": "There is no episodes in this season",
|
||||
"episodeNoMetadata": "No metadata available",
|
||||
"tags": "Tags",
|
||||
"jumpToSeason": "Jump to season"
|
||||
"jumpToSeason": "Jump to season",
|
||||
"partOf": "Part of the"
|
||||
},
|
||||
"browse": {
|
||||
"sortby": "Sort by {{key}}",
|
||||
|
@ -17,7 +17,8 @@
|
||||
"episode-none": "Il n'y a pas d'épisodes dans cette saison",
|
||||
"episodeNoMetadata": "Aucune metadonnée disponible",
|
||||
"tags": "Tags",
|
||||
"jumpToSeason": "Aller sur une saison"
|
||||
"jumpToSeason": "Aller sur une saison",
|
||||
"partOf": "Fait parti de"
|
||||
},
|
||||
"browse": {
|
||||
"sortby": "Trier par {{key}}",
|
||||
|
Loading…
x
Reference in New Issue
Block a user