mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

Fix missing timeout on touch controls hovering

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.js
View file

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

17
src/components/player/internals/VideoClickTarget.tsx
View file

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