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

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

* Update Changelog

1 files changed, 25 insertions, 3 deletions

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>