Fix touch controls triggering when showing them

front/packages/ui/src/player/components/hover.tsx

@@ -39,7 +39,7 @@ import { Chapter, KyooImage, Subtitle, Audio } from "@kyoo/models";
 import { useAtomValue, useSetAtom, useAtom } from "jotai";
 import { ImageStyle, Platform, Pressable, View, ViewProps } from "react-native";
 import { useTranslation } from "react-i18next";
-import { percent, rem, useYoshiki, vh } from "yoshiki/native";
+import { percent, rem, useYoshiki } from "yoshiki/native";
 import { useRouter } from "solito/router";
 import ArrowBack from "@material-symbols/svg-400/rounded/arrow_back-fill.svg";
 import { LeftButtons, TouchControls } from "./left-buttons";
@@ -200,6 +200,7 @@ export const HoverTouch = ({ children, ...props }: { children: ReactNode }) => {
 	const mouseCallback = useRef<NodeJS.Timeout | null>(null);
 	const touch = useRef<{ count: number; timeout?: NodeJS.Timeout }>({ count: 0 });
 	const playerWidth = useRef<number | null>(null);
+	const isTouch = useIsTouch();
 
 	const show = useCallback(() => {
 		setHover((x) => ({ ...x, mouseMoved: true }));
@@ -283,18 +284,9 @@ export const HoverTouch = ({ children, ...props }: { children: ReactNode }) => {
 			onPointerLeave={(e) => {
 				if (e.nativeEvent.pointerType === "mouse") setHover((x) => ({ ...x, mouseMoved: false }));
 			}}
-			onPointerDown={(e) => {
-				// Theorically, this is available everywhere but android never calls this pointerDown so
-				// touch are handled in the onPress and we early return here if it is every called to prevent
-				// the click action to run twice.
-				if (Platform.OS !== "web") return;
-				e.preventDefault();
-				onAnyPress(e.nativeEvent);
-			}}
 			onPress={(e) => {
-				if (Platform.OS === "web") return;
 				e.preventDefault();
-				onAnyPress({ pointerType: "touch", x: e.nativeEvent.locationX });
+				onAnyPress({ pointerType: isTouch ? "touch" : "mouse", x: e.nativeEvent.locationX });
 			}}
 			onLayout={(e) => {
 				playerWidth.current = e.nativeEvent.layout.width;

front/packages/ui/src/player/components/left-buttons.tsx

@@ -101,9 +101,6 @@ export const TouchControls = ({
 				backgroundColor: (theme) => theme.darkOverlay,
 				marginHorizontal: ts(3),
 			},
-			!hover && {
-				display: "none",
-			},
 		],
 		touchOnly,
 	);
@@ -124,28 +121,34 @@ export const TouchControls = ({
 				props,
 			)}
 		>
-			<IconButton
-				icon={SkipPrevious}
-				as={Link}
-				href={previousSlug!}
-				replace
-				size={ts(4)}
-				{...css([!previousSlug && { opacity: 0, pointerEvents: "none" }], common)}
-			/>
-			<IconButton
-				icon={isPlaying ? Pause : PlayArrow}
-				onPress={() => setPlay(!isPlaying)}
-				size={ts(8)}
-				{...common}
-			/>
-			<IconButton
-				icon={SkipNext}
-				as={Link}
-				href={nextSlug!}
-				replace
-				size={ts(4)}
-				{...css([!nextSlug && { opacity: 0, pointerEvents: "none" }], common)}
-			/>
+			{hover && (
+				<>
+					<IconButton
+						icon={SkipPrevious}
+						as={Link}
+						href={previousSlug!}
+						replace
+						size={ts(4)}
+						{...css([!previousSlug && { opacity: 0, pointerEvents: "none" }], common)}
+					/>
+					<IconButton
+						icon={isPlaying ? Pause : PlayArrow}
+						onPress={() => {
+							console.log("play pressed")
+						setPlay(!isPlaying)}}
+						size={ts(8)}
+						{...common}
+					/>
+					<IconButton
+						icon={SkipNext}
+						as={Link}
+						href={nextSlug!}
+						replace
+						size={ts(4)}
+						{...css([!nextSlug && { opacity: 0, pointerEvents: "none" }], common)}
+					/>
+				</>
+			)}
 		</HoverTouch>
 	);
 };

front/packages/ui/src/player/video.tsx

@@ -64,7 +64,7 @@ const videoAtom = atom(0);
 const clientId = uuid.v4() as string;
 
 const Video = forwardRef<VideoRef, VideoProps>(function Video(
-	{ onLoad, onBuffer, source, onPointerDown, subtitles, ...props },
+	{ onLoad, onBuffer, source, subtitles, ...props },
 	ref,
 ) {
 	const { css } = useYoshiki();

front/packages/ui/src/player/video.web.tsx

@@ -118,7 +118,6 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function
 		onPlayPause,
 		onMediaUnsupported,
 		fonts,
-		onPointerDown,
 	},
 	forwaredRef,
 ) {
@@ -241,7 +240,6 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function
 			// onPlay={() => onPlayPause?.call(null, true)}
 			// onPause={() => onPlayPause?.call(null, false)}
 			onEnded={onEnd}
-			onPointerDown={(e) => onPointerDown?.(e as any)}
 			{...css({ width: "100%", height: "100%", objectFit: "contain" })}
 		/>
 	);