Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-28 16:51:52 +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 timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
const clickareaRef = useRef<HTMLDivElement>(null); const clickareaRef = useRef<HTMLDivElement>(null);
const lastTouchEnd = useRef<number>(0);
const handleMouseMove = useCallback(() => { 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); if (timeout.current) clearTimeout(timeout.current);
timeout.current = setTimeout(() => { timeout.current = setTimeout(() => {
if (moved) setMoved(false); if (moved) setMoved(false);
@ -32,8 +44,6 @@ export function BackdropAction(props: BackdropActionProps) {
setMoved(false); setMoved(false);
}, [setMoved]); }, [setMoved]);
const [lastTouchEnd, setLastTouchEnd] = useState(0);
const handleClick = useCallback( const handleClick = useCallback(
( (
e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement> e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
@ -43,7 +53,7 @@ export function BackdropAction(props: BackdropActionProps) {
if (videoInterface.popout !== null) return; if (videoInterface.popout !== null) return;
if ((e as React.TouchEvent).type === "touchend") { if ((e as React.TouchEvent).type === "touchend") {
setLastTouchEnd(Date.now()); lastTouchEnd.current = Date.now();
return; return;
} }
@ -52,8 +62,8 @@ export function BackdropAction(props: BackdropActionProps) {
} }
setTimeout(() => { setTimeout(() => {
if (Date.now() - lastTouchEnd < 200) { if (Date.now() - lastTouchEnd.current < 200) {
setMoved(!moved); setMoved((v) => !v);
return; return;
} }
@ -61,7 +71,7 @@ export function BackdropAction(props: BackdropActionProps) {
else controls.play(); else controls.play();
}, 20); }, 20);
}, },
[controls, mediaPlaying, videoInterface, lastTouchEnd, moved] [controls, mediaPlaying, videoInterface]
); );
const handleDoubleClick = useCallback( const handleDoubleClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => { (e: React.MouseEvent<HTMLDivElement>) => {