Fix missing timeout on touch controls hovering

.eslintrc.js

@@ -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"] }

src/components/player/internals/VideoClickTarget.tsx

@@ -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;