diff --git a/front/packages/primitives/src/chip.tsx b/front/packages/primitives/src/chip.tsx
index a2e75a5a..2488dd00 100644
--- a/front/packages/primitives/src/chip.tsx
+++ b/front/packages/primitives/src/chip.tsx
@@ -22,17 +22,24 @@ import { rem, Stylable, Theme, useYoshiki } from "yoshiki/native";
import { P } from "./text";
import { ts } from "./utils";
-export const Chip = ({ label, color, ...props }: { label: string; color?: string } & Stylable) => {
+export const Chip = ({
+ label,
+ color,
+ size = "medium",
+ ...props
+}: { label: string; color?: string; size?: "small" | "medium" | "large" } & Stylable) => {
const { css } = useYoshiki();
+ const sizeMult = size == "medium" ? 1 : size == "small" ? 0.75 : 1.25;
+
return (
theme.contrast,
bg: color ?? ((theme: Theme) => theme.accent),
},
diff --git a/front/packages/primitives/src/text.tsx b/front/packages/primitives/src/text.tsx
index c8cdfdca..7e5dda2c 100644
--- a/front/packages/primitives/src/text.tsx
+++ b/front/packages/primitives/src/text.tsx
@@ -18,7 +18,7 @@
* along with Kyoo. If not, see .
*/
-import { ComponentType, ComponentProps } from "react";
+import { ComponentType, ComponentProps, ReactNode } from "react";
import { Platform, Text, TextProps, TextStyle, StyleProp } from "react-native";
import { percent, rem, useYoshiki } from "yoshiki/native";
import {
@@ -37,7 +37,7 @@ const styleText = (
type?: "header" | "sub",
custom?: TextStyle,
) => {
- const Text = (props: Omit, "style"> & { style?: StyleProp }) => {
+ const Text = (props: Omit, "style"> & { style?: StyleProp, children?: TextProps["children"] }) => {
const { css, theme } = useYoshiki();
return (
diff --git a/front/packages/ui/src/details/header.tsx b/front/packages/ui/src/details/header.tsx
index 310d7637..5e1654b4 100644
--- a/front/packages/ui/src/details/header.tsx
+++ b/front/packages/ui/src/details/header.tsx
@@ -18,7 +18,7 @@
* along with Kyoo. If not, see .
*/
-import { Movie, QueryIdentifier, Show, getDisplayDate, Genre, Studio } from "@kyoo/models";
+import { Movie, QueryIdentifier, Show, getDisplayDate, Genre, Studio, KyooImage } from "@kyoo/models";
import {
Container,
H1,
@@ -37,11 +37,11 @@ import {
LI,
A,
ts,
- Button,
+ Chip,
} from "@kyoo/primitives";
import { Fragment } from "react";
import { useTranslation } from "react-i18next";
-import { Platform, Pressable, PressableProps, View } from "react-native";
+import { Platform, View } from "react-native";
import {
Theme,
md,
@@ -73,7 +73,7 @@ const TitleLine = ({
slug: string;
name?: string;
date?: string;
- poster?: string | null;
+ poster?: KyooImage | null;
studio?: Studio | null;
trailerUrl?: string | null;
} & Stylable) => {
@@ -99,12 +99,13 @@ const TitleLine = ({
@@ -227,11 +228,13 @@ const TitleLine = ({
const Description = ({
isLoading,
overview,
+ tags,
genres,
...props
}: {
isLoading: boolean;
overview?: string | null;
+ tags?: string[];
genres?: Genre[];
} & Stylable) => {
const { t } = useTranslation();
@@ -249,40 +252,40 @@ const Description = ({
})}
>
{t("show.genre")}:{" "}
- {(isLoading ? [...Array(3)] : genres!).map((genre, i) => (
-
+ {(isLoading ? [...Array(3)] : genres!).map((genre, i) => (
+
{i !== 0 && ", "}
{isLoading ? (
) : (
- {genre.name}
+ {genre}
)}
))}
-
- {isLoading || (
-
- {overview ?? t("show.noOverview")}
-
- )}
-
+
+
+ {isLoading || (
+
+ {overview ?? t("show.noOverview")}
+
+ )}
+
+
+ {t("show.tags")}:
+ {(isLoading ? [...Array(3)] : tags!).map((tag, i) => (
+
+ ))}
+
+
{t("show.genre")}
{isLoading || genres?.length ? (
- {(isLoading ? [...Array(3)] : genres!).map((genre, i) => (
- -
+ {(isLoading ? [...Array(3)] : genres!).map((genre, i) => (
+
-
{isLoading ? (
) : (
- {genre.name}
+ {genre}
)}
))}
@@ -352,6 +355,7 @@ export const Header = ({ query, slug }: { query: QueryIdentifier;
isLoading={isLoading}
overview={data?.overview}
genres={data?.genres}
+ tags={data?.tags}
{...css({ paddingTop: { xs: 0, md: ts(2) } })}
/>
>
diff --git a/front/packages/ui/src/details/movie.tsx b/front/packages/ui/src/details/movie.tsx
index 5b5bc339..59791cb1 100644
--- a/front/packages/ui/src/details/movie.tsx
+++ b/front/packages/ui/src/details/movie.tsx
@@ -26,9 +26,9 @@ import { Header } from "./header";
const query = (slug: string): QueryIdentifier => ({
parser: MovieP,
- path: ["shows", slug],
+ path: ["movies", slug],
params: {
- fields: ["genres", "studio"],
+ fields: ["studio"],
},
});
diff --git a/front/packages/ui/src/details/show.tsx b/front/packages/ui/src/details/show.tsx
index 4edfd80d..8b2f34fa 100644
--- a/front/packages/ui/src/details/show.tsx
+++ b/front/packages/ui/src/details/show.tsx
@@ -87,7 +87,7 @@ const query = (slug: string): QueryIdentifier => ({
parser: ShowP,
path: ["shows", slug],
params: {
- fields: ["genres", "studio"],
+ fields: ["studio"],
},
});
diff --git a/front/translations/en.json b/front/translations/en.json
index 756d9f78..0e43b432 100644
--- a/front/translations/en.json
+++ b/front/translations/en.json
@@ -9,7 +9,8 @@
"staff-none": "The staff is unknown",
"noOverview": "No overview available",
"episode-none": "There is no episodes in this season",
- "episodeNoMetadata": "No metadata available"
+ "episodeNoMetadata": "No metadata available",
+ "tags": "Tags"
},
"browse": {
"sortby": "Sort by {{key}}",
diff --git a/front/translations/fr.json b/front/translations/fr.json
index c40929e5..3278316c 100644
--- a/front/translations/fr.json
+++ b/front/translations/fr.json
@@ -9,7 +9,8 @@
"staff-none": "Aucun membre du staff connu",
"noOverview": "Aucune description disponible",
"episode-none": "Il n'y a pas d'épisodes dans cette saison",
- "episodeNoMetadata": "Aucune metadonnée disponible"
+ "episodeNoMetadata": "Aucune metadonnée disponible",
+ "tags": "Tags"
},
"browse": {
"sortby": "Trier par {{key}}",