From 424f5b3f42ab4ed7764c957fc60791dc62fea7bb Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sat, 20 Dec 2025 19:54:15 +0100
Subject: [PATCH] Fix touch events on hover of player

---
 front/src/ui/player/controls/touch.tsx | 78 +++++++++++++++-----------
 1 file changed, 44 insertions(+), 34 deletions(-)

diff --git a/front/src/ui/player/controls/touch.tsx b/front/src/ui/player/controls/touch.tsx
index 4bd4c0fa..0737fbb0 100644
--- a/front/src/ui/player/controls/touch.tsx
+++ b/front/src/ui/player/controls/touch.tsx
@@ -4,6 +4,9 @@ import {
 	Platform,
 	Pressable,
 	type PressableProps,
+	StyleSheet,
+	View,
+	type ViewProps,
 } from "react-native";
 import { useEvent, type VideoPlayer } from "react-native-video";
 import { useYoshiki } from "yoshiki/native";
@@ -15,7 +18,10 @@ export const TouchControls = ({
 	children,
 	forceShow = false,
 	...props
-}: { player: VideoPlayer; forceShow?: boolean } & PressableProps) => {
+}: {
+	player: VideoPlayer;
+	forceShow?: boolean;
+} & ViewProps) => {
 	const { css } = useYoshiki();
 	const isTouch = useIsTouch();
 
@@ -51,42 +57,46 @@ export const TouchControls = ({
 	const playerWidth = useRef<number | null>(null);
 
 	return (
-		<DoublePressable
-			tabIndex={-1}
-			onPress={() => {
-				if (isTouch) {
-					show(!shouldShow);
-					return;
-				}
-				if (player.isPlaying) player.pause();
-				else player.play();
-			}}
-			onDoublePress={(e) => {
-				if (!isTouch) {
-					toggleFullscreen();
-					return;
-				}
+		<View {...props}>
+			<DoublePressable
+				tabIndex={-1}
+				onPress={() => {
+					if (isTouch) {
+						show(!shouldShow);
+						return;
+					}
+					if (player.isPlaying) player.pause();
+					else player.play();
+				}}
+				onDoublePress={(e) => {
+					if (!isTouch) {
+						toggleFullscreen();
+						return;
+					}
 
-				show();
-				if (Number.isNaN(player.duration) || !playerWidth.current) return;
+					show();
+					if (Number.isNaN(player.duration) || !playerWidth.current) return;
 
-				const x = e.nativeEvent.locationX ?? e.nativeEvent.pageX;
-				if (x < playerWidth.current * 0.33) player.seekBy(-10);
-				if (x > playerWidth.current * 0.66) player.seekBy(10);
-				// Do not reset press count, you can continue to seek by pressing again.
-				return true;
-			}}
-			onLayout={(e) => {
-				playerWidth.current = e.nativeEvent.layout.width;
-			}}
-			onPointerLeave={(e) => {
-				// instantly hide the controls when mouse leaves the view
-				if (e.nativeEvent.pointerType === "mouse") show(false);
-			}}
-			{...css({ cursor: (shouldShow ? "unset" : "none") as any }, props)}
-		>
+					const x = e.nativeEvent.locationX ?? e.nativeEvent.pageX;
+					if (x < playerWidth.current * 0.33) player.seekBy(-10);
+					if (x > playerWidth.current * 0.66) player.seekBy(10);
+					// Do not reset press count, you can continue to seek by pressing again.
+					return true;
+				}}
+				onLayout={(e) => {
+					playerWidth.current = e.nativeEvent.layout.width;
+				}}
+				onPointerLeave={(e) => {
+					// instantly hide the controls when mouse leaves the view
+					if (e.nativeEvent.pointerType === "mouse") show(false);
+				}}
+				{...css({
+					cursor: (shouldShow ? "unset" : "none") as any,
+					...StyleSheet.absoluteFillObject,
+				})}
+			/>
 			{shouldShow && children}
-		</DoublePressable>
+		</View>
 	);
 };