Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Use onPress instead of onPointerDown on android

Browse Source
This commit is contained in:
Zoe Roux 2023-12-13 18:58:30 +01:00
parent 57b4463c01
commit 60977f3631
1 changed files with 44 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
front/packages/ui/src/player/components/hover.tsx
View File

@ -42,6 +42,7 @@ import {
View, View,
ViewProps, ViewProps,
PointerEvent as NativePointerEvent, PointerEvent as NativePointerEvent,
GestureResponderEvent,
} from "react-native"; } from "react-native";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { percent, rem, useYoshiki } from "yoshiki/native"; import { percent, rem, useYoshiki } from "yoshiki/native";
@ -111,7 +112,6 @@ export const Hover = ({
if (e.nativeEvent.pointerType === "mouse") if (e.nativeEvent.pointerType === "mouse")
setHover((x) => ({ ...x, mouseHover: false })); setHover((x) => ({ ...x, mouseHover: false }));
}} }}
pointerEvents="none"
{...css({ {...css({
// TODO: animate show // TODO: animate show
display: !show ? "none" : "flex", display: !show ? "none" : "flex",
@ -120,11 +120,18 @@ export const Hover = ({
left: 0, left: 0,
bottom: 0, bottom: 0,
right: 0, right: 0,
pointerEvents: "none",
})} })}
> >
<Back isLoading={isLoading} name={showName} href={href} pointerEvents="auto" /> <Back
isLoading={isLoading}
name={showName}
href={href}
{...css({
pointerEvents: "auto",
})}
/>
<View <View
pointerEvents="auto"
{...css({ {...css({
// Fixed is used because firefox android make the hover disapear under the navigation bar in absolute // Fixed is used because firefox android make the hover disapear under the navigation bar in absolute
position: Platform.OS === "web" ? ("fixed" as any) : "absolute", position: Platform.OS === "web" ? ("fixed" as any) : "absolute",
@ -133,6 +140,7 @@ export const Hover = ({
right: 0, right: 0,
bg: (theme) => theme.darkOverlay, bg: (theme) => theme.darkOverlay,
flexDirection: "row", flexDirection: "row",
pointerEvents: "auto",
padding: percent(1), padding: percent(1),
})} })}
> >
@ -220,32 +228,48 @@ export const HoverTouch = ({ children, ...props }: { children: ReactNode }) => {
const setProgress = useSetAtom(progressAtom); const setProgress = useSetAtom(progressAtom);
const setFullscreen = useSetAtom(fullscreenAtom); const setFullscreen = useSetAtom(fullscreenAtom);
const onPress = (e: NativePointerEvent) => { const onPress = (e: { pointerType: string; x: number }) => {
if (Platform.OS === "web" && e.nativeEvent.pointerType === "mouse") { if (Platform.OS === "web" && e.pointerType === "mouse") {
setPlay((x) => !x); setPlay((x) => !x);
return; return;
} }
if (hover) setHover((x) => ({ ...x, mouseMoved: false })); if (hover) setHover((x) => ({ ...x, mouseMoved: false }));
else show(); else show();
}; };
const onDoublePress = (e: NativePointerEvent) => { const onDoublePress = (e: { pointerType: string; x: number }) => {
if (Platform.OS === "web" && e.nativeEvent.pointerType === "mouse") { if (Platform.OS === "web" && e.pointerType === "mouse") {
// Only reset touch count for the web, on mobile you can continue to seek by pressing again. // Only reset touch count for the web, on mobile you can continue to seek by pressing again.
touch.current.count = 0; touch.current.count = 0;
setFullscreen((x) => !x); setFullscreen((x) => !x);
return; return;
} }
show();
if (!duration || !playerWidth.current) return; if (!duration || !playerWidth.current) return;
if (e.nativeEvent.x < playerWidth.current * 0.33) { if (e.x < playerWidth.current * 0.33) {
setProgress((x) => Math.max(x - 10, 0)); setProgress((x) => Math.max(x - 10, 0));
} }
if (e.nativeEvent.x > playerWidth.current * 0.66) { if (e.x > playerWidth.current * 0.66) {
setProgress((x) => Math.min(x + 10, duration)); setProgress((x) => Math.min(x + 10, duration));
} }
}; };
const onAnyPress = (e: { pointerType: string; x: number }) => {
touch.current.count++;
if (touch.current.count >= 2) {
onDoublePress(e);
clearTimeout(touch.current.timeout);
} else {
onPress(e);
}
touch.current.timeout = setTimeout(() => {
touch.current.count = 0;
touch.current.timeout = undefined;
}, 400);
};
return ( return (
<Pressable <Pressable
tabIndex={-1} tabIndex={-1}
@ -253,22 +277,17 @@ export const HoverTouch = ({ children, ...props }: { children: ReactNode }) => {
if (e.nativeEvent.pointerType === "mouse") setHover((x) => ({ ...x, mouseMoved: false })); if (e.nativeEvent.pointerType === "mouse") setHover((x) => ({ ...x, mouseMoved: false }));
}} }}
onPointerDown={(e) => { onPointerDown={(e) => {
console.log("down"); // Theorically, this is available everywhere but android never calls this pointerDown so
if (Platform.OS === "web") e.preventDefault(); // touch are handled in the onPress and we early return here if it is every called to prevent
// the click action to run twice.
touch.current.count++; if (Platform.OS !== "web") return;
if (touch.current.count >= 2) { e.preventDefault();
touch.current.count = 0; onAnyPress(e.nativeEvent);
onDoublePress(e); }}
clearTimeout(touch.current.timeout); onPress={(e) => {
} else { if (Platform.OS === "web") return;
onPress(e); e.preventDefault();
} onAnyPress({ pointerType: "touch", x: e.nativeEvent.locationX });
touch.current.timeout = setTimeout(() => {
touch.current.count = 0;
touch.current.timeout = undefined;
}, 400);
}} }}
onLayout={(e) => { onLayout={(e) => {
playerWidth.current = e.nativeEvent.layout.width; playerWidth.current = e.nativeEvent.layout.width;