Add a show more button for tv

front/packages/primitives/src/button.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 { Theme, useYoshiki } from "yoshiki/native";
+import { PressableFeedback } from "./links";
+import { P } from "./text";
+import { ts } from "./utils";
+
+export const Button = ({ text, onPress }: { text: string; onPress?: () => void }) => {
+	const { css } = useYoshiki();
+
+	return (
+		<PressableFeedback
+			onPress={onPress}
+			{...css({
+				flexGrow: 0,
+				p: ts(2),
+				borderRadius: ts(5),
+				focus: {
+					self: { bg: (theme: Theme) => theme.accent },
+					text: { color: (theme: Theme) => theme.colors.white },
+				},
+			})}
+		>
+			<P {...css("text", { align: "center" })}>{text}</P>
+		</PressableFeedback>
+	);
+};

front/packages/primitives/src/index.ts

@@ -33,6 +33,7 @@ export * from "./progress";
 export * from "./slider";
 export * from "./menu";
 export * from "./input";
+export * from "./button";
 
 export * from "./animated";
 export * from "./utils";

front/packages/ui/src/details/episode.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { H6, Image, Link, P, Skeleton, ts } from "@kyoo/primitives";
+import { focusReset, H6, Image, Link, P, Skeleton, ts } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { Layout, WithLoading } from "../fetch";
@@ -95,6 +95,7 @@ export const EpisodeLine = ({
 						},
 					},
 					focus: {
+						self: focusReset,
 						poster: {
 							transform: [{ scale: 1.1 }],
 							borderColor: (theme: Theme) => theme.accent,

front/packages/ui/src/details/header.tsx

@@ -37,18 +37,11 @@ import {
 	LI,
 	A,
 	ts,
+	Button,
 } from "@kyoo/primitives";
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
-import {
-	FlatList,
-	NativeSyntheticEvent,
-	Platform,
-	Pressable,
-	PressableProps,
-	TargetedEvent,
-	View,
-} from "react-native";
+import { Platform, Pressable, PressableProps, View } from "react-native";
 import {
 	Theme,
 	md,
@@ -225,7 +218,7 @@ const TitleLine = ({
 };
 
 const TvPressable = ({ children, ...props }: PressableProps) => {
-	if (!Platform.isTV) return <>children</>;
+	if (!Platform.isTV) return <>{children}</>;
 	return <Pressable {...props}>{children}</Pressable>;
 };
 
@@ -243,7 +236,15 @@ const Description = ({
 	const { css } = useYoshiki();
 
 	return (
-		<Container {...css({ flexDirection: { xs: "column", sm: "row" } }, props)}>
+		<Container
+			{...css(
+				{
+					flexDirection: Platform.isTV ? "column" : { xs: "column", sm: "row" },
+					paddingBottom: ts(1),
+				},
+				props,
+			)}
+		>
 			{!Platform.isTV && (
 				<P
 					{...css({
@@ -266,14 +267,29 @@ const Description = ({
 				</P>
 			)}
 
-			<TvPressable {...css({ focus: { self: { bg: "red" } } })}>
+			<TvPressable
+				{...css({
+					alignItems: "flex-start",
+					child: {
+						button: {
+							flexGrow: 0,
+							p: ts(2),
+							borderRadius: ts(5),
+						},
+					},
+					focus: {
+						button: { bg: (theme: Theme) => theme.accent },
+						text: { color: (theme: Theme) => theme.colors.white },
+					},
+				})}
+			>
 				<Skeleton
 					lines={4}
 					{...css({
 						width: percent(100),
 						flexBasis: 0,
 						flexGrow: 1,
-						paddingTop: Platform.isTV ? 0 : ts(4),
+						paddingTop: Platform.isTV ? 0 : { sm: ts(4) },
 					})}
 				>
 					{isLoading || (
@@ -282,13 +298,18 @@ const Description = ({
 								flexBasis: 0,
 								flexGrow: 1,
 								textAlign: "justify",
-								paddingTop: Platform.isTV ? 0 : ts(4),
+								paddingTop: Platform.isTV ? 0 : { sm: ts(4) },
 							})}
 						>
 							{overview ?? t("show.noOverview")}
 						</P>
 					)}
 				</Skeleton>
+				{Platform.isTV && (
+					<View {...css("button")}>
+						<P {...css("text")}>{t("show.showMore")}</P>
+					</View>
+				)}
 			</TvPressable>
 			{!Platform.isTV && (
 				<>

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",
+		"showMore": "Show more"
 	},
 	"browse": {
 		"sortby": "Sort by {{key}}",

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",
+		"showMore": "Show more"
 	},
 	"browse": {
 		"sortby": "Trier par {{key}}",