From b6ade8315ad6de0234d90d09e250f10f59a85ac0 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 23 May 2025 11:55:48 +0900
Subject: fix(frontend):
 一定時間操作がなかったら動画プレイヤーのコントロールを隠すように (#16073)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): 一定時間操作がなかったら動画プレイヤーのコントロールを隠すように

* Update Changelog
---
 packages/frontend/src/components/MkMediaVideo.vue | 28 ++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 0e5f1e28b9..81a5ab27c7 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -13,8 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		controlsShowing && $style.active,
 		(video.isSensitive && prefer.s.highlightSensitiveMedia) && $style.sensitive,
 	]"
-	@mouseover="onMouseOver"
-	@mouseleave="onMouseLeave"
+	@mouseover.passive="onMouseOver"
+	@mousemove.passive="onMouseMove"
+	@mouseleave.passive="onMouseLeave"
 	@contextmenu.stop
 	@keydown.stop
 >
@@ -309,7 +310,7 @@ const controlsShowing = computed(() => {
 	return false;
 });
 const isFullscreen = ref(false);
-let controlStateTimer: string | number;
+let controlStateTimer: number | null = null;
 
 // MediaControl: Common State
 const oncePlayed = ref(false);
@@ -342,9 +343,26 @@ function onMouseOver() {
 		window.clearTimeout(controlStateTimer);
 	}
 	isHoverring.value = true;
+
+	controlStateTimer = window.setTimeout(() => {
+		isHoverring.value = false;
+	}, 3000);
+}
+
+function onMouseMove() {
+	if (controlStateTimer) {
+		window.clearTimeout(controlStateTimer);
+	}
+	isHoverring.value = true;
+	controlStateTimer = window.setTimeout(() => {
+		isHoverring.value = false;
+	}, 3000);
 }
 
 function onMouseLeave() {
+	if (controlStateTimer) {
+		window.clearTimeout(controlStateTimer);
+	}
 	controlStateTimer = window.setTimeout(() => {
 		isHoverring.value = false;
 	}, 100);
@@ -509,6 +527,10 @@ onDeactivated(() => {
 		window.cancelAnimationFrame(mediaTickFrameId);
 		mediaTickFrameId = null;
 	}
+	if (controlStateTimer) {
+		window.clearTimeout(controlStateTimer);
+		controlStateTimer = null;
+	}
 });
 </script>
 
-- 
cgit v1.2.3-freya