From 2e0a5910ca9edefd1cc8d386243fd8c0de7125d5 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Sun, 24 Dec 2023 16:12:28 +0100
Subject: [PATCH] Fix missing timeout on touch controls hovering

---
 .eslintrc.js                                    |  2 +-
 .../player/internals/VideoClickTarget.tsx       | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 8a057a44..e9b54595 100644
--- a/.eslintrc.js
+++ b/.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"] }
diff --git a/src/components/player/internals/VideoClickTarget.tsx b/src/components/player/internals/VideoClickTarget.tsx
index c278e217..0d92a225 100644
--- a/src/components/player/internals/VideoClickTarget.tsx
+++ b/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;