Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2026-04-11 11:41:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix touch events on hover of player

Browse Source
This commit is contained in:
Zoe Roux 2025-12-20 19:54:15 +01:00
parent a9b83cac1f
commit 424f5b3f42
No known key found for this signature in database
1 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
front/src/ui/player/controls/touch.tsx
View File

@ -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>
);
};