Add focus handling for the details page

front/apps/mobile/app/_layout.tsx

@@ -67,7 +67,7 @@ const ThemedStack = ({ onLayout }: { onLayout?: () => void }) => {
 					backgroundColor: theme.background,
 				},
 				headerStyle: {
-					backgroundColor: theme.appbar,
+					backgroundColor: theme.accent,
 				},
 				headerTintColor: theme.colors.white,
 			}}

front/apps/mobile/package.json

@@ -46,7 +46,7 @@
 		"react-native-screens": "~3.18.0",
 		"react-native-svg": "13.4.0",
 		"react-native-video": "alpha",
-		"yoshiki": "1.2.0"
+		"yoshiki": "1.2.1"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.19.3",

front/apps/web/package.json

@@ -36,7 +36,7 @@
 		"react-native-web": "^0.18.10",
 		"solito": "^2.0.5",
 		"superjson": "^1.11.0",
-		"yoshiki": "1.2.0",
+		"yoshiki": "1.2.1",
 		"zod": "^3.19.1"
 	},
 	"devDependencies": {

front/packages/primitives/src/icons.tsx

@@ -22,9 +22,10 @@ import React, { ComponentProps, ComponentType, ForwardedRef, forwardRef } from "
 import { Platform, PressableProps, ViewStyle } from "react-native";
 import { SvgProps } from "react-native-svg";
 import { YoshikiStyle } from "yoshiki/dist/type";
-import { px, useYoshiki } from "yoshiki/native";
+import { px, Theme, useYoshiki } from "yoshiki/native";
 import { PressableFeedback } from "./links";
-import { ts } from "./utils";
+import { alpha } from "./themes";
+import { Breakpoint, ts, useBreakpointValue } from "./utils";
 
 declare module "react" {
 	function forwardRef<T, P = {}>(
@@ -34,24 +35,25 @@ declare module "react" {
 
 type IconProps = {
 	icon: ComponentType<SvgProps>;
-	color?: YoshikiStyle<string>;
+	color?: Breakpoint<string>;
 	size?: YoshikiStyle<number | string>;
 };
 
 export const Icon = ({ icon: Icon, color, size = 24, ...props }: IconProps) => {
 	const { css, theme } = useYoshiki();
-	const computed = css(
-		{ width: size, height: size, fill: color ?? theme.contrast } as ViewStyle,
-		props,
-	);
+	// eslint-disable-next-line react-hooks/rules-of-hooks
+	const colorValue = Platform.OS !== "web" ? useBreakpointValue(color) : null;
+
 	return (
 		<Icon
 			{...Platform.select<SvgProps>({
-				web: computed,
+				web: css({ width: size, height: size, fill: color ?? theme.contrast } as ViewStyle, props),
 				default: {
-					height: computed.style?.height,
-					width: computed.style?.width,
-					...computed,
+					height: size,
+					width: size,
+					// @ts-ignore
+					fill: colorValue ?? theme.contrast,
+					...props,
 				},
 			})}
 		/>
@@ -78,11 +80,17 @@ export const IconButton = forwardRef(function _IconButton<AsProps = PressablePro
 		<Container
 			ref={ref as any}
 			accessibilityRole="button"
+			focusRipple
 			{...(css(
 				{
 					p: ts(1),
 					m: px(2),
 					borderRadius: 9999,
+					fover: {
+						self: {
+							bg: (theme: Theme) => alpha(theme.contrast, 0.5),
+						},
+					},
 				},
 				asProps,
 			) as AsProps)}
@@ -99,10 +107,16 @@ export const IconFab = <AsProps = PressableProps,>(
 
 	return (
 		<IconButton
-			colors={theme.colors.black}
+			color={theme.colors.black}
 			{...(css(
 				{
 					bg: (theme) => theme.accent,
+					fover: {
+						self: {
+							transform: [{ scale: 1.3 }],
+							bg: (theme: Theme) => theme.accent,
+						},
+					},
 				},
 				props,
 			) as any)}

front/packages/primitives/src/links.tsx

@@ -50,10 +50,8 @@ export const A = ({
 	);
 };
 
-export const PressableFeedback = forwardRef<View, PressableProps>(function _Feedback(
-	{ children, ...props },
-	ref,
-) {
+export const PressableFeedback = forwardRef<View, PressableProps>(
+	function _Feedback({ children, ...props }, ref) {
 		const theme = useTheme();
 
 		return (
@@ -68,7 +66,8 @@ export const PressableFeedback = forwardRef<View, PressableProps>(function _Feed
 				{children}
 			</Pressable>
 		);
-});
+	},
+);
 
 export const Link = ({
 	href,

front/packages/primitives/src/themes/catppuccin.ts

@@ -24,13 +24,12 @@ import { ThemeBuilder } from "./theme";
 export const catppuccin: ThemeBuilder = {
 	light: {
 		// Catppuccin latte
-		appbar: "#e64553",
 		overlay0: "#9ca0b0",
 		overlay1: "#7c7f93",
 		link: "#1e66f5",
 		default: {
 			background: "#eff1f5",
-			accent: "#ea76cb",
+			accent: "#e64553",
 			divider: "#8c8fa1",
 			heading: "#4c4f69",
 			paragraph: "#5c5f77",
@@ -55,13 +54,12 @@ export const catppuccin: ThemeBuilder = {
 	},
 	dark: {
 		// Catppuccin mocha
-		appbar: "#89b4fa",
 		overlay0: "#6c7086",
 		overlay1: "#9399b2",
 		link: "#89b4fa",
 		default: {
 			background: "#1e1e2e",
-			accent: "#f5c2e7",
+			accent: "#89b4fa",
 			divider: "#7f849c",
 			heading: "#cdd6f4",
 			paragraph: "#bac2de",

front/packages/primitives/src/themes/theme.tsx

@@ -35,7 +35,6 @@ type FontList = Partial<
 >;
 
 type Mode = {
-	appbar: Property.Color;
 	overlay0: Property.Color;
 	overlay1: Property.Color;
 	link: Property.Color;

front/packages/ui/src/browse/grid.tsx

@@ -66,7 +66,7 @@ export const ItemGrid = ({
 						fover: {
 							self: focusReset,
 							poster: {
-								borderColor: (theme) => theme.appbar,
+								borderColor: (theme) => theme.accent,
 							},
 							title: {
 								textDecorationLine: "underline",

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

@@ -22,7 +22,7 @@ import { H6, Image, Link, P, Skeleton, ts } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { Layout, WithLoading } from "../fetch";
-import { percent, rem, Stylable, useYoshiki } from "yoshiki/native";
+import { percent, px, rem, Stylable, Theme, useYoshiki } from "yoshiki/native";
 
 export const episodeDisplayNumber = (
 	episode: {
@@ -88,6 +88,21 @@ export const EpisodeLine = ({
 					m: ts(1),
 					alignItems: "center",
 					flexDirection: "row",
+					child: {
+						poster: {
+							borderColor: "transparent",
+							borderWidth: px(4),
+						},
+					},
+					focus: {
+						poster: {
+							transform: [{ scale: 1.1 }],
+							borderColor: (theme: Theme) => theme.accent,
+						},
+						title: {
+							textDecorationLine: "underline",
+						},
+					},
 				},
 				props,
 			)}
@@ -102,11 +117,15 @@ export const EpisodeLine = ({
 					width: percent(18),
 					aspectRatio: 16 / 9,
 				}}
-				{...css({ flexShrink: 0, m: ts(1) })}
+				{...css(["poster", { flexShrink: 0, m: ts(1) }])}
 			/>
 			<View {...css({ flexGrow: 1, flexShrink: 1, m: ts(1) })}>
 				<Skeleton>
-					{isLoading || <H6 aria-level={undefined}>{name ?? t("show.episodeNoMetadata")}</H6>}
+					{isLoading || (
+						<H6 aria-level={undefined} {...css("title")}>
+							{name ?? t("show.episodeNoMetadata")}
+						</H6>
+					)}
 				</Skeleton>
 				<Skeleton>{isLoading || <P numberOfLines={3}>{overview}</P>}</Skeleton>
 			</View>

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

@@ -40,7 +40,15 @@ import {
 } from "@kyoo/primitives";
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, View } from "react-native";
+import {
+	FlatList,
+	NativeSyntheticEvent,
+	Platform,
+	Pressable,
+	PressableProps,
+	TargetedEvent,
+	View,
+} from "react-native";
 import {
 	Theme,
 	md,
@@ -160,7 +168,11 @@ const TitleLine = ({
 							as={Link}
 							href={`/watch/${slug}`}
 							color={{ xs: theme.user.colors.black, md: theme.colors.black }}
-							{...css({ bg: { xs: theme.user.accent, md: theme.accent } })}
+							hasTVPreferredFocus
+							{...css({
+								bg: theme.user.accent,
+								fover: { self: { bg: theme.user.accent } },
+							})}
 							{...tooltip(t("show.play"))}
 						/>
 						<IconButton
@@ -190,6 +202,7 @@ const TitleLine = ({
 					}),
 				])}
 			>
+				{!Platform.isTV && (
 					<P
 						{...css({
 							color: (theme: Theme) => theme.user.paragraph,
@@ -205,11 +218,17 @@ const TitleLine = ({
 							</A>
 						)}
 					</P>
+				)}
 			</View>
 		</Container>
 	);
 };
 
+const TvPressable = ({ children, ...props }: PressableProps) => {
+	if (!Platform.isTV) return <>children</>;
+	return <Pressable {...props}>{children}</Pressable>;
+};
+
 const Description = ({
 	isLoading,
 	overview,
@@ -225,6 +244,7 @@ const Description = ({
 
 	return (
 		<Container {...css({ flexDirection: { xs: "column", sm: "row" } }, props)}>
+			{!Platform.isTV && (
 				<P
 					{...css({
 						display: { xs: "flex", sm: "none" },
@@ -244,17 +264,34 @@ const Description = ({
 						</Fragment>
 					))}
 				</P>
+			)}
 
+			<TvPressable {...css({ focus: { self: { bg: "red" } } })}>
 				<Skeleton
 					lines={4}
-				{...css({ width: percent(100), flexBasis: 0, flexGrow: 1, paddingTop: ts(4) })}
+					{...css({
+						width: percent(100),
+						flexBasis: 0,
+						flexGrow: 1,
+						paddingTop: Platform.isTV ? 0 : ts(4),
+					})}
 				>
 					{isLoading || (
-					<P {...css({ flexBasis: 0, flexGrow: 1, textAlign: "justify", paddingTop: ts(4) })}>
+						<P
+							{...css({
+								flexBasis: 0,
+								flexGrow: 1,
+								textAlign: "justify",
+								paddingTop: Platform.isTV ? 0 : ts(4),
+							})}
+						>
 							{overview ?? t("show.noOverview")}
 						</P>
 					)}
 				</Skeleton>
+			</TvPressable>
+			{!Platform.isTV && (
+				<>
 					<HR
 						orientation="vertical"
 						{...css({ marginX: ts(2), display: { xs: "none", sm: "flex" } })}
@@ -277,6 +314,8 @@ const Description = ({
 							<P>{t("show.genre-none")}</P>
 						)}
 					</View>
+				</>
+			)}
 		</Container>
 	);
 };

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

@@ -18,8 +18,8 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Episode, EpisodeP, QueryIdentifier, Season } from "@kyoo/models";
-import { Container, SwitchVariant, ts } from "@kyoo/primitives";
+import { Episode, EpisodeP, QueryIdentifier } from "@kyoo/models";
+import { Container } from "@kyoo/primitives";
 import { Stylable } from "yoshiki/native";
 import { View } from "react-native";
 import { InfiniteFetch } from "../fetch-infinite";

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

@@ -20,9 +20,9 @@
 
 import { QueryIdentifier, QueryPage, Show, ShowP } from "@kyoo/models";
 import { Platform, View, ViewProps } from "react-native";
-import { percent, useYoshiki, vh } from "yoshiki/native";
+import { percent, useYoshiki } from "yoshiki/native";
 import { DefaultLayout } from "../layout";
-import { EpisodeList, SeasonTab } from "./season";
+import { EpisodeList } from "./season";
 import { Header } from "./header";
 import Svg, { Path, SvgProps } from "react-native-svg";
 import { Container, SwitchVariant } from "@kyoo/primitives";

front/packages/ui/src/layout.tsx

@@ -23,7 +23,13 @@ import { Navbar } from "./navbar";
 import { useYoshiki } from "yoshiki/native";
 import { Main } from "@kyoo/primitives";
 
-export const DefaultLayout = ({ page, transparent }: { page: ReactElement, transparent?: boolean }) => {
+export const DefaultLayout = ({
+	page,
+	transparent,
+}: {
+	page: ReactElement;
+	transparent?: boolean;
+}) => {
 	const { css } = useYoshiki();
 
 	return (
@@ -36,6 +42,7 @@ export const DefaultLayout = ({ page, transparent }: { page: ReactElement, trans
 						top: 0,
 						left: 0,
 						right: 0,
+						shadowOpacity: 0,
 					},
 				)}
 			/>

front/packages/ui/src/navbar/index.tsx

@@ -146,7 +146,7 @@ export const Navbar = (props: Stylable) => {
 		<Header
 			{...css(
 				{
-					backgroundColor: (theme) => theme.appbar,
+					backgroundColor: (theme) => theme.accent,
 					paddingX: ts(2),
 					height: { xs: 48, sm: 64 },
 					flexDirection: "row",

front/yarn.lock

@@ -10402,7 +10402,7 @@ __metadata:
     react-native-svg-transformer: ^1.0.0
     react-native-video: alpha
     typescript: ^4.6.3
-    yoshiki: 1.2.0
+    yoshiki: 1.2.1
   languageName: unknown
   linkType: soft
 
@@ -14144,7 +14144,7 @@ __metadata:
     superjson: ^1.11.0
     typescript: ^4.9.3
     webpack: ^5.75.0
-    yoshiki: 1.2.0
+    yoshiki: 1.2.1
     zod: ^3.19.1
   languageName: unknown
   linkType: soft
@@ -14519,9 +14519,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yoshiki@npm:1.2.0":
-  version: 1.2.0
-  resolution: "yoshiki@npm:1.2.0"
+"yoshiki@npm:1.2.1":
+  version: 1.2.1
+  resolution: "yoshiki@npm:1.2.1"
   dependencies:
     "@types/node": 18.x.x
     "@types/react": 18.x.x
@@ -14536,7 +14536,7 @@ __metadata:
       optional: true
     react-native-web:
       optional: true
-  checksum: 1ef4bc33563bcf344689a5bfbdc4da1636b99552fcff041ada8fa79224c6c3fac2530a890bf6980981fb7aed9cc4e31b89feb1d0bde920179039fc573935ab42
+  checksum: 8d5e58f392ca068f13bcb9b87787bf94da2e03077e733db89c40f22aaebe288536b451de2e92fba133d4241771aa87c6cc30d0bea902f94099335e162a146ab5
   languageName: node
   linkType: hard