Fix show next episode css on android

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

@@ -30,7 +30,7 @@ import {
 	ts,
 } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
-import { ImageStyle, View } from "react-native";
+import { ImageStyle, PressableProps, View } from "react-native";
 import { Layout, WithLoading } from "../fetch";
 import { percent, rem, Stylable, Theme, useYoshiki } from "yoshiki/native";
 import { KyooImage, WatchStatusV } from "@kyoo/models";
@@ -171,7 +171,7 @@ export const EpisodeLine = ({
 	watchedPercent: number | null;
 	watchedStatus: WatchStatusV | null;
 }> &
-	Stylable) => {
+	Partial<PressableProps>) => {
 	const { css } = useYoshiki("episode-line");
 	const { t } = useTranslation();
 
@@ -189,7 +189,7 @@ export const EpisodeLine = ({
 						},
 					},
 				},
-				props,
+				props as any,
 			)}
 		>
 			<P {...css({ width: rem(4), flexShrink: 0, m: ts(1), textAlign: "center" })}>

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

@@ -74,6 +74,7 @@ import { EpisodeLine, displayRuntime, episodeDisplayNumber } from "./episode";
 import { WatchListInfo } from "../components/watchlist-info";
 import { ShowWatchStatus, WatchStatusV } from "@kyoo/models/src/resources/watch-status";
 import { capitalize } from "@kyoo/primitives";
+import { ShowWatchStatusCard } from "./show";
 
 export const TitleLine = ({
 	isLoading,
@@ -472,37 +473,7 @@ export const Header = ({
 							/>
 						))}
 					</Container>
-					{type === "show" && (data.watchStatus as ShowWatchStatus)?.nextEpisode && (
-						<SwitchVariant>
-							{({ css }) => (
-								<Container
-									{...css({
-										marginY: ts(2),
-										borderRadius: 16,
-										overflow: "hidden",
-										borderWidth: ts(0.5),
-										borderStyle: "solid",
-										borderColor: (theme) => theme.background,
-										backgroundColor: (theme) => theme.background,
-										fover: {
-											self: { ...focusReset, borderColor: (theme: Theme) => theme.accent },
-										},
-									})}
-								>
-									<H2 {...css({ marginLeft: ts(2) })}>{t("show.nextUp")}</H2>
-									<EpisodeLine
-										isLoading={false}
-										{...(data.watchStatus as ShowWatchStatus).nextEpisode!}
-										watchedPercent={data.watchStatus?.watchedPercent || null}
-										watchedStatus={data.watchStatus?.status || null}
-										displayNumber={
-											episodeDisplayNumber((data.watchStatus as ShowWatchStatus).nextEpisode!)!
-										}
-									/>
-								</Container>
-							)}
-						</SwitchVariant>
-					)}
+					{type === "show" && <ShowWatchStatusCard {...data?.watchStatus as any} />}
 				</>
 			)}
 		</Fetch>

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

@@ -18,16 +18,18 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { QueryIdentifier, QueryPage, Show, ShowP } from "@kyoo/models";
+import { QueryIdentifier, QueryPage, Show, ShowP, ShowWatchStatus } from "@kyoo/models";
 import { Platform, View, ViewProps } from "react-native";
 import { percent, useYoshiki } from "yoshiki/native";
 import { DefaultLayout } from "../layout";
 import { EpisodeList, SeasonHeader } from "./season";
 import { Header } from "./header";
 import Svg, { Path, SvgProps } from "react-native-svg";
-import { Container } from "@kyoo/primitives";
-import { forwardRef } from "react";
+import { Container, H2, SwitchVariant, focusReset, ts } from "@kyoo/primitives";
+import { forwardRef, useState } from "react";
 import { DetailsCollections } from "./collection";
+import { EpisodeLine, episodeDisplayNumber } from "./episode";
+import { useTranslation } from "react-i18next";
 
 export const SvgWave = (props: SvgProps) => {
 	const { css } = useYoshiki();
@@ -43,6 +45,50 @@ export const SvgWave = (props: SvgProps) => {
 	);
 };
 
+export const ShowWatchStatusCard = ({ watchedPercent, status, nextEpisode }: ShowWatchStatus) => {
+	const { t } = useTranslation();
+	const [focused, setFocus] = useState(false);
+
+	if (!nextEpisode) return null;
+
+	return (
+		<SwitchVariant>
+			{({ css }) => (
+				<Container
+					{...css([
+						{
+							marginY: ts(2),
+							borderRadius: 16,
+							overflow: "hidden",
+							borderWidth: ts(0.5),
+							borderStyle: "solid",
+							borderColor: (theme) => theme.background,
+							backgroundColor: (theme) => theme.background,
+						},
+						focused && {
+							...focusReset,
+							borderColor: (theme) => theme.accent,
+						},
+					])}
+				>
+					<H2 {...css({ marginLeft: ts(2) })}>{t("show.nextUp")}</H2>
+					<EpisodeLine
+						isLoading={false}
+						{...nextEpisode}
+						watchedPercent={watchedPercent || null}
+						watchedStatus={status || null}
+						displayNumber={episodeDisplayNumber(nextEpisode, "???")!}
+						onHoverIn={() => setFocus(true)}
+						onHoverOut={() => setFocus(false)}
+						onFocus={() => setFocus(true)}
+						onBlur={() => setFocus(false)}
+					/>
+				</Container>
+			)}
+		</SwitchVariant>
+	);
+};
+
 const ShowHeader = forwardRef<View, ViewProps & { slug: string }>(function ShowHeader(
 	{ children, slug, ...props },
 	ref,