Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-27 09:31:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix backdrop tap not working properly on mobile

Browse Source
This commit is contained in:
Jip Fr 2023-03-12 22:51:27 +01:00
parent 93fb343fa9
commit 506c00960f
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/video/components/actions/BackdropAction.tsx
View File

@ -19,8 +19,20 @@ export function BackdropAction(props: BackdropActionProps) {
const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
const clickareaRef = useRef<HTMLDivElement>(null);
const lastTouchEnd = useRef<number>(0);
const handleMouseMove = useCallback(() => {
if (!moved) setMoved(true);
if (!moved) {
setTimeout(() => {
const isTouch = Date.now() - lastTouchEnd.current < 200;
if (!isTouch) {
setMoved(true);
}
}, 20);
return;
}
// remove after all
if (timeout.current) clearTimeout(timeout.current);
timeout.current = setTimeout(() => {
if (moved) setMoved(false);
@ -32,8 +44,6 @@ export function BackdropAction(props: BackdropActionProps) {
setMoved(false);
}, [setMoved]);
const [lastTouchEnd, setLastTouchEnd] = useState(0);
const handleClick = useCallback(
(
e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
@ -43,7 +53,7 @@ export function BackdropAction(props: BackdropActionProps) {
if (videoInterface.popout !== null) return;
if ((e as React.TouchEvent).type === "touchend") {
setLastTouchEnd(Date.now());
lastTouchEnd.current = Date.now();
return;
}
@ -52,8 +62,8 @@ export function BackdropAction(props: BackdropActionProps) {
}
setTimeout(() => {
if (Date.now() - lastTouchEnd < 200) {
setMoved(!moved);
if (Date.now() - lastTouchEnd.current < 200) {
setMoved((v) => !v);
return;
}
@ -61,7 +71,7 @@ export function BackdropAction(props: BackdropActionProps) {
else controls.play();
}, 20);
},
[controls, mediaPlaying, videoInterface, lastTouchEnd, moved]
[controls, mediaPlaying, videoInterface]
);
const handleDoubleClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => {