Fix missing timeout on touch controls hovering

This commit is contained in:
mrjvs 2023-12-24 16:12:28 +01:00
parent 51724987ca
commit 2e0a5910ca
2 changed files with 15 additions and 4 deletions

View File

@ -62,7 +62,7 @@ module.exports = {
"no-nested-ternary": "off",
"prefer-destructuring": "off",
"no-param-reassign": "off",
"@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
"@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
"react/jsx-filename-extension": [
"error",
{ extensions: [".js", ".tsx", ".jsx"] }

View File

@ -1,5 +1,6 @@
import classNames from "classnames";
import { PointerEvent, useCallback } from "react";
import { useEffectOnce, useTimeoutFn } from "react-use";
import { useShouldShowVideoElement } from "@/components/player/internals/VideoContainer";
import { PlayerHoverState } from "@/stores/player/slices/interface";
@ -13,6 +14,12 @@ export function VideoClickTarget(props: { showingControls: boolean }) {
(s) => s.updateInterfaceHovering,
);
const hovering = usePlayerStore((s) => s.interface.hovering);
const [_, cancel, reset] = useTimeoutFn(() => {
updateInterfaceHovering(PlayerHoverState.NOT_HOVERING);
}, 3000);
useEffectOnce(() => {
cancel();
});
const toggleFullscreen = useCallback(() => {
display?.toggleFullscreen();
@ -29,11 +36,15 @@ export function VideoClickTarget(props: { showingControls: boolean }) {
}
// toggle on other types of clicks
if (hovering !== PlayerHoverState.MOBILE_TAPPED)
if (hovering !== PlayerHoverState.MOBILE_TAPPED) {
updateInterfaceHovering(PlayerHoverState.MOBILE_TAPPED);
else updateInterfaceHovering(PlayerHoverState.NOT_HOVERING);
reset();
} else {
updateInterfaceHovering(PlayerHoverState.NOT_HOVERING);
cancel();
}
},
[display, isPaused, hovering, updateInterfaceHovering],
[display, isPaused, hovering, updateInterfaceHovering, reset, cancel],
);
if (!show) return null;