Add focus handling for the details page

2025-07-09 03:04:20 -04:00 · 2023-01-16 16:15:37 +09:00 · 2023-01-16 16:15:37 +09:00 · 25b4e95128
commit 25b4e95128
parent a8a8b45f4a
15 changed files with 197 additions and 122 deletions
--- a/front/apps/mobile/app/_layout.tsx
+++ b/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,
 			}}
--- a/front/apps/mobile/package.json
+++ b/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",
--- a/front/apps/web/package.json
+++ b/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": {
--- a/front/packages/primitives/src/icons.tsx
+++ b/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)}
--- a/front/packages/primitives/src/links.tsx
+++ b/front/packages/primitives/src/links.tsx
@ -50,25 +50,24 @@ export const A = ({
 	);
 };

-export const PressableFeedback = forwardRef<View, PressableProps>(function _Feedback(
-	{ children, ...props },
-	ref,
-) {
-	const theme = useTheme();
+export const PressableFeedback = forwardRef<View, PressableProps>(
+	function _Feedback({ children, ...props }, ref) {
+		const theme = useTheme();

-	return (
-		<Pressable
-			ref={ref}
-			// TODO: Enable ripple on tv. Waiting for https://github.com/react-native-tvos/react-native-tvos/issues/440
-			{...(Platform.isTV
-				? {}
-				: { android_ripple: { foreground: true, color: alpha(theme.contrast, 0.5) as any } })}
-			{...props}
-		>
-			{children}
-		</Pressable>
-	);
-});
+		return (
+			<Pressable
+				ref={ref}
+				// TODO: Enable ripple on tv. Waiting for https://github.com/react-native-tvos/react-native-tvos/issues/440
+				{...(Platform.isTV
+					? {}
+					: { android_ripple: { foreground: true, color: alpha(theme.contrast, 0.5) as any } })}
+				{...props}
+			>
+				{children}
+			</Pressable>
+		);
+	},
+);

 export const Link = ({
 	href,
--- a/front/packages/primitives/src/themes/catppuccin.ts
+++ b/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",
--- a/front/packages/primitives/src/themes/theme.tsx
+++ b/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;
--- a/front/packages/ui/src/browse/grid.tsx
+++ b/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",
--- a/front/packages/ui/src/details/episode.tsx
+++ b/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>
--- a/front/packages/ui/src/details/header.tsx
+++ b/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,26 +202,33 @@ const TitleLine = ({
 					}),
 				])}
 			>
-				<P
-					{...css({
-						color: (theme: Theme) => theme.user.paragraph,
-						display: "flex",
-					})}
-				>
-					{t("show.studio")}:{" "}
-					{isLoading ? (
-						<Skeleton {...css({ width: rem(5) })} />
-					) : (
-						<A href={`/studio/${studio!.slug}`} {...css({ color: (theme) => theme.user.link })}>
-							{studio!.name}
-						</A>
-					)}
-				</P>
+				{!Platform.isTV && (
+					<P
+						{...css({
+							color: (theme: Theme) => theme.user.paragraph,
+							display: "flex",
+						})}
+					>
+						{t("show.studio")}:{" "}
+						{isLoading ? (
+							<Skeleton {...css({ width: rem(5) })} />
+						) : (
+							<A href={`/studio/${studio!.slug}`} {...css({ color: (theme) => theme.user.link })}>
+								{studio!.name}
+							</A>
+						)}
+					</P>
+				)}
 			</View>
 		</Container>
 	);
 };

+const TvPressable = ({ children, ...props }: PressableProps) => {
+	if (!Platform.isTV) return <>children</>;
+	return <Pressable {...props}>{children}</Pressable>;
+};
+
 const Description = ({
 	isLoading,
 	overview,
@ -225,58 +244,78 @@ const Description = ({

 	return (
 		<Container {...css({ flexDirection: { xs: "column", sm: "row" } }, props)}>
-			<P
-				{...css({
-					display: { xs: "flex", sm: "none" },
-					flexWrap: "wrap",
-					color: (theme: Theme) => theme.user.paragraph,
-				})}
-			>
-				{t("show.genre")}:{" "}
-				{(isLoading ? [...Array(3)] : genres!).map((genre, i) => (
-					<Fragment key={genre?.slug ?? i.toString()}>
-						<P>{i !== 0 && ", "}</P>
-						{isLoading ? (
-							<Skeleton {...css({ width: rem(5) })} />
-						) : (
-							<A href={`/genres/${genre.slug}`}>{genre.name}</A>
-						)}
-					</Fragment>
-				))}
-			</P>
+			{!Platform.isTV && (
+				<P
+					{...css({
+						display: { xs: "flex", sm: "none" },
+						flexWrap: "wrap",
+						color: (theme: Theme) => theme.user.paragraph,
+					})}
+				>
+					{t("show.genre")}:{" "}
+					{(isLoading ? [...Array(3)] : genres!).map((genre, i) => (
+						<Fragment key={genre?.slug ?? i.toString()}>
+							<P>{i !== 0 && ", "}</P>
+							{isLoading ? (
+								<Skeleton {...css({ width: rem(5) })} />
+							) : (
+								<A href={`/genres/${genre.slug}`}>{genre.name}</A>
+							)}
+						</Fragment>
+					))}
+				</P>
+			)}

-			<Skeleton
-				lines={4}
-				{...css({ width: percent(100), flexBasis: 0, flexGrow: 1, paddingTop: ts(4) })}
-			>
-				{isLoading || (
-					<P {...css({ flexBasis: 0, flexGrow: 1, textAlign: "justify", paddingTop: ts(4) })}>
-						{overview ?? t("show.noOverview")}
-					</P>
-				)}
-			</Skeleton>
-			<HR
-				orientation="vertical"
-				{...css({ marginX: ts(2), display: { xs: "none", sm: "flex" } })}
-			/>
-			<View {...css({ flexBasis: percent(25), display: { xs: "none", sm: "flex" } })}>
-				<H2>{t("show.genre")}</H2>
-				{isLoading || genres?.length ? (
-					<UL>
-						{(isLoading ? [...Array(3)] : genres!).map((genre, i) => (
-							<LI key={genre?.id ?? i}>
-								{isLoading ? (
-									<Skeleton {...css({ marginBottom: 0 })} />
-								) : (
-									<A href={`/genres/${genre.slug}`}>{genre.name}</A>
-								)}
-							</LI>
-						))}
-					</UL>
-				) : (
-					<P>{t("show.genre-none")}</P>
-				)}
-			</View>
+			<TvPressable {...css({ focus: { self: { bg: "red" } } })}>
+				<Skeleton
+					lines={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: 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" } })}
+					/>
+					<View {...css({ flexBasis: percent(25), display: { xs: "none", sm: "flex" } })}>
+						<H2>{t("show.genre")}</H2>
+						{isLoading || genres?.length ? (
+							<UL>
+								{(isLoading ? [...Array(3)] : genres!).map((genre, i) => (
+									<LI key={genre?.id ?? i}>
+										{isLoading ? (
+											<Skeleton {...css({ marginBottom: 0 })} />
+										) : (
+											<A href={`/genres/${genre.slug}`}>{genre.name}</A>
+										)}
+									</LI>
+								))}
+							</UL>
+						) : (
+							<P>{t("show.genre-none")}</P>
+						)}
+					</View>
+				</>
+			)}
 		</Container>
 	);
 };
--- a/front/packages/ui/src/details/season.tsx
+++ b/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";
--- a/front/packages/ui/src/details/show.tsx
+++ b/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";
--- a/front/packages/ui/src/layout.tsx
+++ b/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,
 					},
 				)}
 			/>
--- a/front/packages/ui/src/navbar/index.tsx
+++ b/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",
--- a/front/yarn.lock
+++ b/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